February 6, 2011 at 3:25 pm (computer art, Digital Art, Flash animation, Photoshop tips and tricks) (embed flash into wordpress, embed swf wordpress, Gale Franey, galefra, galefraney, Photoshop CS5 animation)
I’ve discovered an even better way to embed swf files into my WordPress.com blog. After I wrote the last post mentioning the VodPod method, I tried to upload more video and the uploader wasn’t accepting the URL I was copying and pasting although I had used the same method as before (see my previous post). This was endlessly frustrating and I can’t figure out what is causing this. I’m not sure if you will run into a similar problem.
But good news, there is an even better way. Simply add the tags below. Feel free to use this code and my swf file to try it out for yourself.
How I Made This Fishbowl Guy Animation
This animation, by the way, I made using Photoshop CS5’s animation, importing full 3D objects, then adding textures, creating the stars with a combination of “add noise” and then “Filter / Other / Offset / Minimum, then adding levels and gausian blur. Then I made the globe by applying 3D to an image of a map (but first used “offset” filter to ensure that any seam line was eliminated). I went to the timeline and animated the 3D object’s rotation, then animated the cloud mist (mist was made with Filter / Render / Clouds set to Screen Blending Mode with opacity reduced). Then I animated the guy’s head movements and the text. Animation in Photoshop is quite simple because all Photoshop’s layers, FX, blending modes, etc., behave exactly as they normally do, so the learning curve is very simple.
Afterwards, instead of saving this project as a video, instead I exported a jpeg sequence. Then it’s simple from Flash to simply import these images directly onto the timeline. Simply go to Import and navigate to the folder where you’ve exported the images, then click on just the first image of the sequence. Flash is smart enough to recognize the sequential numbering and asks whether you want all the images in that folder to be imported onto the timeline. Say “yes”. I then continued to animate, adding the fish swimming although I could have easily done this in Photoshop. But I was using this project as a class lesson to demonstrate the ease with which the Adobe software are integrated. Iit is simple to create artwork and animation by going back and forth between the various Adobe software, taking advantage of the each one’s strengths. This greatly enhances work flow and productivity.
Flash Interactivity is Retained
If you hover your mouse over this swf file, you will see some text appear, inviting you to visit my website and if you click on the swf, it takes you to my main website. This interactivity is coded directly into the swf file and when the file is embedded here in WordPress, that interactivity is fully retained. Quite amazing when you think about it.
Vodpod videos no longer available.
Voila! This is an embedded SWF File
As you might have already discovered, WordPress uses some security measures that strip embedded Flash swf files from your posts. They only accept video from trusted sites like YouTube, Google and a few others. But those sites also don’t offer the option to upload swf files. However, there is a work around using Vodpod with it’s “Post To WordPress” button that can be directly added to your browser toolbar. If you’ve not already done so, simply sign up for a free account at VodPod.com. Then you can go to vodpod.com/wordpress and drag the “Post To WordPress” icon (bookmarklet) onto your browser toolbar, and you can now upload swf files via VodPod.
You then just go online to the web page where you’ve placed a link to your swf file and copy the URL pointing to that file. Then press the “Post To WordPress” from your browser’s toolbar. A dialogue comes up. Copy and paste the URL to this html file. On the right side enter your WordPress user name and password, Title for the Post and message and press “Publish”. Then wait a few minutes for the video to post. At first I thought it didn’t work, because when I went to WordPress and opened the post, in the Visual Mode it doesn’t display an image of the animation. It just shows something that looks a bit like code. No worries, it’s actually working, ie: if you can see the animation above of the butterfly, then it’s working.
How I Made The Butterfly Animation
I created the butterfly in Illustrator, then copied and pasted just one wing and the body into Flash. I converted the single wing to a movie clip, then double clicked on it to get into its own timeline. I did a simple classic motion tween to animate it, 20 frames with 3 key frames. Before animating it, use the Transform Tool and drag the “registration point” so that it sits on the inside of the wing so that it animates from the inside of the wing. Afterwards I place 2 of these wing movie clips on the stage, select both and convert to a new movie clip called “butterfly”. I then double click to enter this movie clip and I create a new layer and place the butterfly body on this.
Then back on the main stage I use a motion tween to animate the butterfly from one side of the stage to the other. I created the cloud in Illustrator, simply using Pathfinder to combine several circular white shapes, then copy / paste these into flash, convert to movie clip, then add Filter / Blur to make them look all soft and fluffy 🙂