June 2004 to March, 2012
Random header image... Refresh for more!

Reminders to self: complexities of 3D Flash objects.

Don’t bother reading this. I am making notes to remember all the steps I had to take in order to get this simple (and still imperfect) thing to work on a WordPress page.

I began by making the 3D book in Kinemac and animating the spin there. It will not export with a transparent background, so I used a workaround. I made the Kinemac background bright green, like a green screen, and exported my Quicktime movie. Imported the .mov file into After Effects and used the Keylight plugin to get rid of the green background. Aha! Looks like transparency… but it will not be when saved as a FLV file for Flash Player. More tricks are needed.

An auto trace layer (Layer>Auto Trace) has to be created above the .mov layer, tracing the background of the work area. The blend mode for this layer must be set to Silhouette Alpha. The background should look transparent at this point. If you need to change the dimensions of the comp, this is the time to do it (so both the Auto Trace and the movie layer get the same changes).

Send the comp to the render queue.

Change the output settings to produce an FLV, set the Video Output>Channel to RGB + Alpha. Set Color: to Straight (Unmatted) In Format Options, make settings as wished but be sure that Basic Video Settings has Encode Alpha Channel checked. If there is no audio, you can uncheck Export Audio. Click Render. The FLV should have a transparent background.

Now to get it to show in WordPress. I do not like the plugins available to insert FLVs into WordPress so I create an html page holding my Flash content and place it into my WordPress post with an iframe tag. <iframe style =”border:none” src =”http://ripple.ca/indifferences/indif.html” width=425 height = 420</iframe><!–more–> Without the more tag, the other entries in the blog don’t displaym so I stuck it at the bottom. Don’t know why it works, but it does.

Publishing and uploading the HTML.SWF,FLV set. First, I made an FLA to hold the FLV Player component and sized the document to fit my WordPress column width. I set the player source to the absolute path for the FLV. In the case above, it was on my server, in a folder called indiffereces. The HTML page, the skin SWF and the SWF are in that folder, too.

Last thing: As published out of Flash, the HTML page doesn’t control how borders and margins are handled by browsers, so it must be edited thus:

<body style=”padding:0; margin:0;” bgcolor=”#ffffff”><div width =425 height =420>


There are no comments yet...

Kick things off by filling out the form below.

Leave a Comment