Flash/JavaScript/ActionScript Stew

There's a GREAT utility developed by Christian Cantrell and Mike Chambers at Macromedia.

http://weblogs.macromedia.com/flashjavascript/

"The Flash / JavaScript Integration kit makes it possible to seamlessly communicate between Flash and JavaScript. You can call JavaScript functions from Flash, and ActionScript functions from JavaScript."

*

There is documentation that comes with the kit, but I also found a few other tutorials:

Using the Macromedia Flash / JavaScript Integration Kit courtesy of CommunityMX
and

And various tutorials on OSFlash. One of them details how to combine the kit with Flash detection:

http://osflash.org/flashjs/docs/tutorials

*

Also, just so I have it saved somewhere, I found an obscure blog detailing how to add the ID tag without modifying the JavaScript).

tag.setFlashvars('lcId='+uid);
tag.setId('flashheader); // Create ID
tag.write(document);

Baking Flash Cookies

I've been doing a little research into reading and writing cookies using Flash and JavaScript. It turns out I'm stepping into ancient history - Flash Guru Colin Moock documented how to do this six years ago! There's another useful tutorial (again six years old) available here.

In a nutshell, it sounds like the getURL command will call JavaScript to both set and read the cookie.

I also read "Bake Cookies for your Visitors with Flash" This editorial (again 6 years old!) touts the benefits that can occur to the user experience when cookies are employed.

CSS Transparency for Internet Explorer (IE), Mozilla and Safari

Want to add transparency to a div or other element using styles? I’m always looking these up, and therfore thought it worthy of noting:

.opacitystyle {
filter:alpha(opacity=50); */ IE */
opacity: 0.5; /* Safari and Newer Firefox */
-moz-opacity:0.5; /* Firefox and Netscape */
}

A few other examples, I had bookmarked. I’m sure many examples abound on the net.

• Manipulating image opacity in NS6/Firefox
• Adding image opacity in NS6
  

Spelling with flickr

This is cool! This clever fellow figured out how to use PHP to select letters from flickr. Try it out!

For codeheads, he even provides the source code.

Run Angus, Run!

A fun and informative example of using components in Flash:

http://flash-creations.com/notes/actionscript_componentsintro.php

An Apple A Day...

Keeps the hacker away? Apparently, Apple is berating potential hackers with poetic error messages:

"The maker of Macintosh computers had anticipated that hackers would try to crack its new OS X operating system built to work on Intel Corp.'s chips and run pirated versions on non-Apple computers. So, Apple developers embedded a warning deep in the software — in the form of a poem."

*

In other news, futurist Tim Bajarin writes about Apple in his predictions for the New Year. He thinks that Apple will become a "Powerful Consumer Electronic Company."

"Apple is still a computer company, their success of the iPod has shown that they can be potentially stronger as a CE vendor. But they have an interesting dynamic that will make them the only PC Company who I think can transition into a powerful CE company as well.Apple’s edge is that they not only have PC and CE devices, but they also have the content tied directly to these products and in essence are creating a total ecosystem where all are linked together easily and seamlessly into a single solution. I fully expect Apple to extend their reach into the living room at some time in 2006 and by the end of the New Year we should have a real strong understanding of how Apple plans to “own” the digital home of the future. My best guess is that Apple will lay out a more detailed plan for their approach to the digital home at their next developer’s conference mid year. "

Flash Player Settings Manager

I almost forgot that Macromedia created a settings panel that is actually embedded in a Web page. Really neat idea (and a useful link).

"The Settings Manager that you see above is not an image; it is the actual Settings Manager. Click the tabs to see different panels, and click the options in the panels to change your Flash Player settings."

AJAX Loader Example

Here’s a neat, easy example of AJAX.

Internet Patents: The Sequel

Have you seen this Press Release yet?

"The United States Patent and Trademark Office earlier this week granted design company Balthasar the rights to a patent that covers the creation of rich media applications on the Internet. "

"The patent covers all rich media technology implementations including Flash, Flex, Java, Ajax and XAML and all device footprints which access Rich-Media Internet Applications including desktops, mobile devices, set-top boxes and video game consoles."

*

The good news:

"Rather than follow the lead of a company like Eolas, which has pursued Microsoft through the courts in a patent claim covering browser plug-ins, Balthaser said he is looking to sell the '180 patent to a large company with an established interest in rich media Internet applications. "

Flash MovieClips vs. Animated Graphics

I was reading about the differences in Flash between a movieclip symbol and an animated graphic symbol. A nice description of the differences is provided at conceptualdesign.net:

“Flash has two kinds of animated symbols: graphic symbols and movie clips. The difference is subtle and could be a tad bit confusing. An animated graphic symbol is tied to the main timeline of any movie that you place it in; whereas a movie clip symbol runs on its own independent timeline. (Note: Macromedia confirms this, too.)

You can think of animated graphic symbols as being a slide show. Each frame of the symbol is a separate slide. When you move to the next frame in the animated graphic symbol, you must move to another frame in the main timeline/hosting movie's timeline. Also, there is no sound track. Even if you have sounds or interactivity functions in a movie, when you convert it into a graphic symbol you loose those features, (If you have a stop action in the last frame of an animated graphic symbol and you place it in a movie, that stop action will not work).

A movie clip symbol is like a film loop. You can project all its frames one after another, over and over, in a single frame of the main timeline/the hosting movie. Movie clips do have a sound track and do retain their interactivity.”

Flex Your Muscles

A colleague is a MAJOR Flex enthusiast. I once again (with permission) quote from her most excellent research:

Here’s Mike Rankin’s MX Blog:

http://mrmx.blogspot.com/2006/02/flex-call-to-arms.html
his Flex – Call to Arms article is kinda of an entertaining read


Ongoing discussion for FlexCoders:
http://groups.yahoo.com/group/flexcoders/
note: it looks like they’re using Measure Map (or something like it) –Measure Map and
analytics service designed for bloggers was written by the folks over at Adaptive Path
and recently sold to Google.


At Adobe Labs you can download Flex 2.0 Beta and begin creating rich internet apps or become inspired by checking out the showcase gallery:

http://labs.macromedia.com/flexproductline/

Note: You’ll need to download the Flash Player 8.5 Alpha to view the demos and samples.
Because this is an alpha version it is recommended installing Flash Player 8.5 into a
secondary browser that will not be used for general Internet browsing or production work.

When you’ve downloaded the beta you can refer to this tutorial, Join the Flex Revolution posted on Wired 2.3.06 :
Flex is a new framework for creating rich, cross-platform web services. Get your geek on with this advanced tutorial by Robert Capili. In Webmonkey.
http://www.hotwired.com/webmonkey/06/05/index3a.html - --- yeah! webmonkey!!!!

*

I haven't had a chance to read this, but...here it is for posterity:

http://www.jessewarden.com/ :)

Flash User Experience in the Internet Explorer 7

In Adobe's Developer Center update for February there is reference to the earlier blog entry on Activating ActiveX Controls -- the Javascript-based solution that let users interact with the content immediately without clicking it first.

I thought it might be a good idea for us to check back at the Active Content Developer Center as it notes "In the coming weeks, Adobe expects to make available alternate solutions to Microsoft's script-based technique to help make it easier for developers who use active content prepare for the expected changes to Internet Explorer."

Adobe Active Content Developer Center
http://www.macromedia.com/devnet/activecontent/

Looping PDF Slideshow

I found the somewhat buried secret for looping PDF slideshows in this article.

The main points of interest (to me) are:

Looping
Open the Preferences dialog box (Control + K) and click on Full Screen in the left pane. In the right pane, check “Loop after last page.” Tricky to locate – thanks, Adobe!

Transitions and Page Advance
Transitions can be applied from the Preferences dialog box, too (if you are applying one effect on all pages – page-level transitions need to be added from the Transitions menu). To have the slideshow advance automatically, just select a time delay.

Open PDF in Full Screen Mode
To have the file begin playing the slideshow when opened, select the Document Properties dialog box (Control + D) and click Initial View. Then select Full Screen.

Sorenson Video's real-time download settings

What are Sorenson Video's real-time download settings?

Sorenson offers an awesome product called Squeeze. One of the neat things it does is offer templates of optimized data rates for connection speed. Their site offers the following which is neat.

The following are common settings for various data rates:

Settings for 56K modem video real-time download:

Frame Rate: 4-6 fps. Frame rate should be adjusted according to how much action there is. More action = lower frame rate. Less action = higher frame rate.

Keyframes: One keyframe every 100 frames.
Keyframe sensitivity: 50
This setting allows the user to access the video at random points in the video.

Data Rate: Limit video data rate to: 27 kbits/sec. This is the standard data rate for 56K modem video. The audio data rate will bring the total up to 40kbits/sec.

Image Size: 160x120. This frame size may be a little conservative and may be enlarged depending on content. For very low action video, make the video size larger. For action-packed video, try smaller sizes, or encoding at 80x60 and doubling for smoother playback.

Image smoothing: On. Image smoothing places a filter on the decode side that removes blockiness that occurs at low bit rates. Note: Image smoothing should normally be used for lower bit rate video only.


Settings for dual ISDN video (real-time download)

Frame Rate: 6-12 fps. The frame rate should be adjusted according to how much action there is. More action = lower frame rate. Less action = higher frame rate.

Keyframes: 100 frames.
Keyframe sensitivity (natural): 50
This setting allows the user to access the video at random points in the video.

Data Rate: 80 kbits/sec. This is a good data rate for higher-bandwidth video. The audio data rate will bring the total up to 100 kbits/sec.

Image Size: 192x144. This frame size may be a little conservative and may be enlarged depending on content. For very low action video, make the video size larger. For action-packed video, try smaller sizes.

Image smoothing: On. Image smoothing places a filter on the decode side that removes blockiness that occurs at low bit rates. Note: Image smoothing should normally be used for lower bit rate video.


Settings for DSL/T1 video (real-time download)

Frame Rate: 12-15 fps. The frame rate should be adjusted according to how much action there is. More action = lower frame rate. Less action = higher frame rate.

Keyframes: 100 frames
Keyframe sensitivity (natural): 50
This setting allows the user to access the video at random points in the video.

Data Rate: 260 kbits/sec. This is a good data rate for higher-bandwidth video. The audio data rate will bring the total up to 290 kbits/sec.

Image Size: 240x180 for high motion video, 320x240 for low motion video.
For very low action video, make the frame size larger. For action-packed video, try smaller sizes.

Image smoothing selected for 240x180, not selected for 320x240. Image smoothing places a filter on the decode side that removes blockiness that occurs at low bit rates. Note: Image smoothing should normally be used for lower bit rate video at smaller frame sizes (240x180 and under). We recommend turning it off for frame sizes above 240x180.


High-Quality Internet Download

Frame Rate: 1:1, or Original frame rate. At this data rate, video quality should be good at this frame rate.

Keyframes: 100 frames
Keyframe sensitivity (natural): 50
This setting allows the user to access the video at random points in the video.

Data Rate: about 80 Kbytes. Most video will look good compressed at something between 30 and 130 Kbytes, depending on frame size and content. This data rate will vary quite a bit according to the kind of content.

Image Size: 320x240. This frame size may be a little conservative and may be enlarged depending on content. For very low action video, make the video size larger. For action-packed video, try smaller sizes.

Image smoothing: Off. Image smoothing should normally be used for lower bit rate video.

How animated graphics differ from movie clip symbols

Maybe this should be obvious, but I still thought it worth recording. I was reading about the differences in Flash between a movieclip symbol and an animated graphic symbol. A nice description of the differences is provided at conceptualdesign.net:

“Flash has two kinds of animated symbols: graphic symbols and movie clips. The difference is subtle and could be a tad bit confusing. An animated graphic symbol is tied to the main timeline of any movie that you place it in; whereas a movie clip symbol runs on its own independent timeline. (Note: Macromedia confirms this, too.)

You can think of animated graphic symbols as being a slide show. Each frame of the symbol is a separate slide. When you move to the next frame in the animated graphic symbol, you must move to another frame in the main timeline/hosting movie's timeline. Also, there is no sound track. Even if you have sounds or interactivity functions in a movie, when you convert it into a graphic symbol you loose those features, (If you have a stop action in the last frame of an animated graphic symbol and you place it in a movie, that stop action will not work).

A movie clip symbol is like a film loop. You can project all its frames one after another, over and over, in a single frame of the main timeline/the hosting movie. Movie clips do have a sound track and do retain their interactivity.”

2A Interviewed by C4D

Neat!

http://www.c4dcafe.com/interviews/eric_jordan/

Quick reference/Cheatsheet for ActionScript 2.0

ActionScript at-a-glance:

Quick reference/Cheatsheet for ActionScript 2.0
http://www.actionscriptcheatsheet.com/

Why a new war over DVD formats may not matter.

As you know there is an interesting battle in the emerging HD DVD market, but this article claims it's not so titantic as the "ancient" 1970s battle between VHS and Betamax.

http://www.msnbc.msn.com/id/10947040/site/newsweek/

Webmonkey First Look IE7 Beta2 Preview

Hey, Web Monkey is still publishing! I didn't realize that. Neat.

http://www.hotwired.com/webmonkey/06/06/index3a.html

As a colleague pointed out, this line is worrysome for Multimedia developers:

“Also, ActiveX controls default to disabled. They can be enabled one-by-one only when they're needed, reducing the possibility of exploits.”

Adobe Proxy

Have you seen “Proxy”? It’s Adobe’s interactive design publication. It is published in PDF format, and has some interesting content.

http://www.adobe.com/special/magazine/proxy_vol_2_number_1.pdf

To sign up for their notification e-mail, visit:

http://www.adobeproxy.com/

Antivirus software vendors

Hmm...probably good information to keep handy somewhere...somewhere accessible....

List of antivirus software vendors
http://support.microsoft.com/kb/49500/\


Antispyware programs:
Lavasoft Ad-Aware SE
Spybot Search & Destroy (S&D)

Microsoft Expression

Have you already seen this? Microsoft is working on a suite of products called “Expression.”

“Microsoft Expression™ takes the many sides of your creative personality to all new levels. Professional design tools give you greater flexibility to create sophisticated applications and content. Innovative technologies enable faster and richer interface development for Windows applications or the Web. Compatibility between products increases all levels of your personal productivity.”

Maybe this is why Adobe wanted to buy Macromedia?

Expression Home
http://www.microsoft.com/products/expression/en/default.mspx

Tours & Demonstrations
http://www.microsoft.com/products/expression/en/demos.mspx?v=expression_vision

Creating Web forms in Flash is an interesting new arena! I’m sure it will soon become even more interesting/robust as soon as ActionScript 3 and FlashPlayer 8.5 are released.

To create a form, you can either choose the Flash Form Application item in the Create New menu item when you launch Flash, or simply create the action of interest on a keyframe. Here is a simple illustration, I just created using the latter method:

1. Drag a TextInput component onto the stage and name the instance GOOGLE.
2. Drag a Button component onto the stage and name the instance gogglesubmit_btn.
3. Create ActionScript to instruct the button, when clicked, to go to the google search page, with the text of the input box (GOOGLE) appended to it.

gogglesubmit_btn.onRelease = function() {
getURL("http://www.google.com/search?q="+GOOGLE.text);
};

For an exampleof a more complicated form example, check out the Creating forms with UI components in Macromedia Flash MX tutorial at Adobe’s site.

Note: I was a little surprised/annoyed to learn that the tab order for form fields in the Flash player determined is controlled entirely by the Flash player. There is currently no way to specify your own tab ordering. (Boo.)

Formatting text objects in Flash using ActionScript

Using ActionScript you can set, change, and format dynamic text fields and input text fields. For example, here is a text field I was just formatting to display the Flash Player version.

// Create textfield
_root.createTextField("playerVersion", 1, 0, 0, 200, 150);

// Query the user’s version of Flash
playerVersion.text = System.capabilities.version;

// Create a TextFormat object
var txtfmt:TextFormat = new TextFormat();

// Specify paragraph and character formatting
txtfmt.bold = true;
txtfmt.font = "Verdana";
txtfmt.size = 18;

// Apply the TextFormat object to the text field
playerVersion.setTextFormat(txtfmt);

There’s a neat tutorial available at Dev Articles. Macromedia also has useful information on the text format class.

Another useful resource, if you haven't created text objects in ActionScript before, is Macromedia's dictionary example of MovieClip.createTextField.

myMovieClip .createTextField ( instanceName , depth , x , y , width , height )

Screen Capture Software - Captivate and Camtasia

Screen Capture...some thoughts on the two leading products

Captivate Pros

Captivate has definitely improved its screen quality since I last looked at it! It is now a serious competitor to Camatasia. I have a 30-day trial, so this list need not be exhaustive, but here is my first impression.

• Captivate can export directly to Flash
• Captivate automates the process of help bubble creation (it makes a first attempt automatically unless disabled). This is neat, and I think it would be more effort to do in Camtasia.
• Captivate can publish to Breeze format
  Captivate now provides a similar interface to that of Camtasia – selecting screen recording area, and such.

Captivate Cons

• Captivate doesn’t export .fla files to Flash 8 - it was only designed to export to Flash MX 2004 (there is a workaround, but motion tweens are lost). I’m sure they’ll fix this in the future, and I feel like it could be one of their greatest strengths.
• Sometimes the timing in Captivate is off. For example, you’ll see the arrow click a menu choice, but will not see the next screen for a few moments (this can be taken care of in the editor, but requires that extra step).
• Captivate cannot export to many of the formats that Camtasia can (such as AVI)

Miscelleana

• A nice comparison table I found (and generally agree with)
• A random review of both products I stumbled upon.
• Captivate Feature Overview (Breeze Presentation)
• Captivate Product Page
• Camtasia Product Page
  

Creating a Talking-Head Flash Video for Flash

Be a talking head! :)

“This tutorial shows you how to create a "talking-head" video in Macromedia Flash …. The talking-head video will be created in Adobe Premiere Pro 1.5 and then run through the FLV Wizard and the Flash 8 Video Encoder, which converts the video from a QuickTime movie into an FLV file that you can place on a web page.”

Changing external style sheets using the DOM

“Most of us are familiar with manipulating an element's inline style by accessing its ‘style’ object. There are times however, that you may find it necessary to escalate the issue, and talk directly with the boss upstairs that's the external style sheet on the page. Modifying an external style sheet (style or link tag) is extremely powerful, yet should be noted is less efficient and straightforward than going the route of dynamic inline styles.”

http://www.javascriptkit.com/dhtmltutors/externalcss.shtml

Dreamweaver 8.0.1 Updater

FYI, Macro—er, I mean Adobe—has released an update to Dreamweaver. You can download it here:

integrate Flash and PHP using Flash Remoting and amfphp

http://www.actionscript.org/tutorials/intermediate/PHP_Remoting/index.shtml

IE7?!

FYI, it looks like anyone who wishes to can download a beta version of Internet Explorer 7.

http://www.microsoft.com/windows/ie/ie7/default.mspx

Beware: it overwrites IE6....

Communication between JavaScript and Macromedia Flash

"For communication between the browser (JavaScript) and the plugin (ActionScript) we need an extra technology that opens a connection between the two. Neither the browser itself nor the Flash plugin takes care of this all by itself."

Links for the proof o' concept:

Macromedia - Flash TechNote An example of communication between _JavaScript and Macromedia Flash
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15683#ftjc

IE 6.0 - _Javascript - ActionScript and _JavaScript
http://www.quirksmode.org/js/flash_call.html

Flash Blog - I bow to thee

I stumbled across a great blog that provides several (almost daily) great examples of various techniques in Flash. Check out:

http://www.theflashblog.com/

The talented author, Lee Brimelow, also maintains a more “official” tutorial site:

http://www.gotoandlearn.com/

Share and share alike (not)

Hmm...how to choose among so many great tools to share data?

Sharing bookmarks
http://del.icio.us/

Sharing documents (and collaborative authoring)
http://www.writely.com/

Sharing to-dos
http://www.backpackit.com/

Sharing thoughts
http://www.blogger.com/

Sharing photos
http://www.flickr.com/

I dig moofx!!

Fantastic, free JavaScript.

"moo.fx is a superlightweight, ultratiny, megasmall _javascript effects library, written with prototype.js."

http://moofx.mad4milk.net/