Anatomy of a Flash project: Interactive snow globe

UPDATE: The Flash embeds below have been fixed; while I was at lunch I realized they were too small for the actual projects. I also tracked down the tutorial I used to draw Santa Claus. You can find it here.

I love trying to overcome challenges presented by technology, whether it means updating a page for Recordnet.com or creating a new interactive feature for the site. I have fun searching for answers to problems and I relish the feeling of reward that comes when I find a solution that works or I learn something new.

This probably means I’m a nerd. But whaddyagonnado.

Recordnet.com’s latest interactive feature, an online snowglobe, presented several challenges when I first started working on it about three weeks ago. Although it probably looks pretty simple to the average Web site visitor, it’s actually rather complex. The project was created in Flash 9 and includes more than 800 lines of code in Actionscript 3.0. I spent most of the last two days polishing it and getting it up and running.

The roots of the snowglobe lie in the interactive Fireworks project I created for Recordnet.com early this summer. The challenge at the time lie in creating hundreds realistic, sparkling firework particles in Flash, which is designed to allow developers to only animate one pobject at a time.

I found the solution in the Flint Particle System, which lets developers create an emitter that can control thousands of particles. One of the Flint tutorials called for the creation of realistic snow, which I used in the draft project below.

I kept that snow in the back of my mind in hopes of eventually using it for a winter project. Recordnet.com Online Editor Tara Cuslidge and I came up with the snowglobe idea, which, as I said, presented a few challenges. Users needed to be able to drag and drop objects into the snowglobe, then have the objects and the snowglobe move together when they clicked shake. The snow then needed to appear only in a circular area (the globe), something that cannot be done in the Flint system.

My solution to the latter problem was to create a circular mask in Flash that moved with the globe when it shook. The mask would show just the snow on the layer underneath.

Here’s my first draft, which used the animation timeline of Flash for the mask and snow – not Actionscript code. (In each of the drafts below press the green button to start the animation and the red button to stop it.)

Unfortunately, I couldn’t get the mask effect to replicate itself in the timeline in later drafts. In draft 1.5 below, the mask obscures everything underneath it, including the snowglobe image.

I also struggled with animating the snowglobe and the objects placed inside it. For an example, try placing the tree inside the globe in my second draft below and hitting the green button.

Fortunately, when it comes to Flash, a developer is never alone online. There are several great Web communities that offer forums and tutorials for those with questions about the program.

So I posted my problem in a forum on Actionscript.org. After a day or so I heard back from a user named Julie who broke open the project for me.

Her suggestion was to use the addChild function in Actionscript to place the objects on the page, then merge them with the snowglobe.

It worked, as you can see in the draft below.

Julie’s idea led me to create most of the project in Actionscript, which also solved my mask problem. The mask in Actionscript linked just to the snow and not to any other object in the project.

The final result, when viewed in Flash 9, is a nearly blank stage.

Every interactive object is added by Actionscript once the project runs.

The last step was to use Adobe Illustrator to draw the objects that would be added to the snowglobe. I knew the Santa would be the most detailed and difficult to create, so I searched for and found a tutorial that led me step-by-step through the process. (Unfortunately, I can’t seem to track it down right now, but I’ll link to it when I find it.)

The result is the Santa below, which I’ll leave you with.

This entry was posted in Multimedia and tagged , , . Bookmark the permalink. Post a comment

Post a Comment

You must be logged in to post a comment.

We reserve the right to remove any content at any time from this Community, including without limitation if it violates the Community Rules. We ask that you report content that you in good faith believe violates the above rules by clicking the Flag link next to the offending comment or fill out this form.
  • Categories

  • Archives

  • Latest Tweets