Thoughts

Finding A Practical Use For Flash

One thing I never understood while going to design school is why I had to learn Flash. At that point in time, it wasn’t like Flash was a new fad with a ripe future. It already had its day in the sun and was being pushed further out of the spotlight by developments in CSS3 and HTML5. Most of my teachers hated it too, but I still had to take multiple classes. And where did that get me? Not too far…until I found a practical application for the ill begotten program.

The idea came to me when we started working on Specless Media’s website, which, oddly enough, was a project that was supposed to push the boundaries of NEW techniques. While coming up with ideas for the homepage, someone suggested animated buttons. We already had these cool vector illustrations created, but we had to find a way to actually animate them in a non-obtrusive way. In terms of time and money, this left us with very few options. Then it came to me.

You can use Flash to accomplish certain goals without actually “using” Flash in a website. So I took those illustrations, broke them into different pieces, and brought them into Flash. I was then able to use basic tweens to animate the different pieces in various ways.

specless-flash-screen

With the animations completed (and looking mighty fine, if I don’t say so myself), we had to find a way to take them out of Flash. One idea was imbedding a gif, but but we realized pretty quickly that this was a bad idea. The colors were all grainy, and it looked terrible.

I then explored the program a little more, and found that I was able to export the animation frame by frame into individual images. With 48 slightly different images at my fingertips, I then spoke with Justin, our developer.

We had to find a solution that would allow us to show motion, while keeping the file size small. Usually, we use sprites to cut down the file sizes of our imagery, so we researched this idea little further.  We found a couple options to work with. One of which was using CSS, but this method would not be compatable with all browswers. We then found a Jquery plugin that would allow us to move quickly between sprites, so we repurposed this code to alternate between our 48 different images at 24 frames per second. All it took was a few lines code and a little playing around with the frame locations within the sprite to get our idea working.

It was as simple as that. Though it may not be the best tool for building a whole website around, Flash can still be manipulated to serve a purpose. So if you need some small, simple animations, do not rule out your old friend Flash. He is just sitting in your Applications folder, waiting for you to find a practical use for him. In the end, seeing the final site we produced kind of made all those Flash classes worth the time. See it in action over at GoSpecless.com.

specless-buttons
  • Share by Email