Embedding Flash Swf Files Into WordPress

February 6, 2011 at 12:22 pm (Flash animation, illustrator CS5, Ilustrator) (, , , , , , )

Vodpod videos no longer available.

Animated Butterfly, posted with vodpod

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.

Vodpod.com/wordpress Drag This Onto Browser Toolbar


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 🙂


1 Comment

  1. Martin LaBar said,

    Good work, and neat trick.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: