Transparent Flash Movies

While surfing around for info on the World Cup, I spent a little time on ESPN. As I was reading a page, a sprawling animation appeared on the page over the text I was reading. Being curious, I right clicked on the animation and, sure enough, the Flash Player menu appeared. After a while the animation disappeared.

So I set off to figure out how to do this. I found this technote at the Macromedia (Adobe) site. Seems that there are a few ways to do this, but the key thing is a single parameter called wmode, which is short, I presume, for Window Mode.

• Go to the File Menu > Publish Settings. Go to the HTML tab and set the Window Mode to Transparent Windowless. Click OK and Publish the movie (Shift + F12).


• Publish your flash movie and add the following to the resulting HTML file: <param name="wmode" value="transparent" />


• Add your flash movie to a web page in Dreamweaver. Click the Parameter tab in the Properties Panel. Add the parameter wmode with a value of transparent.

OK, that's all good. Now you have a transparent Flash movie, but what about layering it over content or layering content over it? Going back to the ESPN example, the Flash movie was over the text I was reading (a little annoying, but it wasn't there for too long). So they must've used DHTML layers. In the example I created, the Flash movie is over the text. Both elements are set up in DIVs and then I used CSS to absolutely position them to the same location.

You have to use absolute positioning in order to use z-index, which is the key factor in having one element over the other. Take a look at the CSS:

#body { position: absolute;
top: 9px;
left: 10px;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 16pt;
color: #ccc;
width: 550px;
z-index: 0;
}
#movie {
position: absolute;
top: 9px;
left: 10px;
z-index: 1;
}

Changing the z-index of the Flash movie to 0 (zero) and the body text to 1 would change the order. Now all I have to do is figure out a way to get the Flash layer to disappear after a certain interval. The ESPN example left no trace of a Flash movie. After the movie disappeared, I right clicked where it was and the Flash Player menu wasn't available. I'm assuming some JavaScript was used to hide the Flash layer after a certain amount of time. If anyone knows how to do this, please help me out.

Before I go, I want to mention 2 articles that helped me with this issue, this one at joshuaink.com and this one at Veerle's blog.

3D in Flash with After Effects

Finally! A cool article on integrating After Effects' 3D animation powers with Flash. A one-page, step-by-step, simple as it should be, by Rafiq R. Elmansy at the Adobe Developer Center.

Very nice!!!

Commands (JSFL)

Automating tasks in Flash can be done using the History Panel and Commands. Any Commands that you create in Flash are saved as a .jsfl file, which is basically JavaScript for Flash. These files are located in User/Application Support/Macromedia/Flash 8/en/Configuration/Commands. Since it's JavaScript you can tweak the files at your own risk.

The History Panel can be found under Window > Other Panels > History or Command + F8.

Initially, the History Panel is blank. It has a Replay button in the lower left-hand corner that will play back selected steps. In the bottom right-hand corner there are two buttons, one to copy selected steps to the clipboard and a save button to save selected steps as a command. The Options menu in the upper right-hand corner also allows you to do all of the above, plus you can clear your history.

The History Panel doesn't record everything though, just like Photoshop's History palette. Unlike the workaround's in the History Palette in Photoshop, you don't have any workarounds in Flash. You can however, edit the commands IF they are saved to a .jsfl file. Basically, anytime you select a frame in Flash, it can't record which frame is selected, for whatever reason. Oddly enough, this also means that when you select a layer, invariably Flash also selects the first frame in that layer. The History Panel will show commands that can't be recorded with a red X.

I wanted to see if this would be useful for me, so I set out to create a command that would basically set up a Flash file in the way that I want to. I usually always start out by creating an Actions layer and a Labels layer, plus whatever content layers. So, with a brand new document open, I started by adding the layers and naming them accordingly. When I finished, I selected all of the steps in the History Panel. You can drag across the steps in the Panel to select them or shift + click to select them. Then I clicked on the Save selected steps as a Command button. A warning came up telling me that the steps with the red X cannot be replayed, copied, or saved, and will be skipped. Bummer!!!

I saved the file anyway. When I opened up a new document and ran the Command on it, it didn't work right, as expected. Some things happened correctly, like the creation of a new layer, but that's about it.



Editing the JSFL File

The steps were saved into a .jsfl file in the afformentioned location. I opened it up with BBEdit. The file was easy to read in terms of identifying each step and how it works. Each step is commented, which also helps the identification process. I could see everytime I selected a frame, I would get the resulting code:

fl.getDocumentDOM().getTimeline().setSelectedFrames([]);

Commenting these lines out allowed the script to work in the way I wanted. Now I can simply use the Command I created to set up a Flash file for the way I work.

You can find loads of Command (JSFL Extensions) at the Adobe Exchange.