Screen shot 2014-01-21 at 4.02.20 PM

Flash Snow Globe Tutorial

January 21, 2014

1. Create a new ActionScript 3.0 Flash File.

  

 2. Set up the default document properties 

3. Choose “New > ActionScript File” and name this file “HolidayCardTutorial.as“. This code handles the root of the document. In this case, it’s not very complicated, it only needs to make our shadow follow the globe around the table for a more realistic looking environment and set some basic stage properties.

4. Link the document stage properties base class to this file 

 

5. Create 3 Layers for background, shadow, ribbon and the snow globe (I added a shadow mask too because there is a table in the background image that the shadow needs to stay on)

6. Choose “Insert > new Symbol…” and in the properties window make the type MovieClip and name the new object “SnowGlobeContainer.as” and check “Export for ActionScript”. This clip will contain our awesome globe. The guts and glory of our

7. Choose “New > ActionScript File” and name the file “SnowGlobeContainer.as”. Making our snow globe interactive in the way that we want is not too difficult, really. What we need to do is be able to click and drag the globe around the stage. For this demo I chose to manually call the mouse over & mouse out with coordinates because sometimes if you drag your mouse out of the player there could be some strange behavior. Other than that, the code in the update function is what runs the mouse interaction. It watches the speed of the mouse and controls what happens when you shake or let go of the object. There are some simple physics when you drop the globe to give it a fun and realistic bounce effect.

 

8. Create the globe. In order to create the globe we are going to, in this case, use graphics that were built in Photoshop. If you wanted to use your own graphics that would be fine too. Just follow the same procedures and you should be able to replace the graphics with whatever you choose! We will set it up in a way that makes the most sense. Highlights and the glass will go on the top layer. Followed in order by the things you need to see. The snow layers will be on either side of the inner content so that you have a bit of depth on either side of the buildings. Finally, the base will live in the bottom-most layer behind the glass and content.

9. Create 5 layers for the base, snow behind, inner content, snow in front, and glass highlight

10. Draw these assets within flash or use Photoshop to create these graphics

11. Choose “Insert > New Symbol”, name this new MovieClip “SnowGeneratorCircle.as” and choose “Export for ActionScript”

 12. Choose “New > ActionScript File” and name this file “SnowGeneratorCircle.as”. The snow generator is an empty MovieClip that will create our snow particles and have a simple method to reset all of them when the globe is shaken. It’s set up to be a MovieClip with code attached to it so that it could easily be used in the authoring environment for placement.

 

13. Choose “New > ActionScript File” and name this file “Circle.as”. The Circle object is a class that I wrote to do a couple of math calculations for the things involving a circle in our app.

14. Choose “New > ActionScript File” and name this file “SnowFlake.as”. Our snowflake is the coolest part about this app. At first I thought of having real physics for the snowflakes, but for simplicity of tutorial sake I decided to use simple falling physics and just reset the flake to a random position in the globe when you shake it. When you instantiate a SnowFlake it draws its own graphics, sets a few variables for simple physics and adds some depth of field blur based on a randomized depth.

15. Good luck and Publish!