There are many free, open source ActionScript libraries available on the web that can save you a lot of time and frustration when creating Flash projects. One of my readers recently sent me an email asking how to install a water ripple script that he found on the web.

He found the script on the Emanuele Feronato website (emanueleferonato.com) and downloaded the zip file that contained the standalone Rippler class. The problem was that he was having trouble installing the class in his own project.

I thought this would make a good tutorial about how to use a top-level document class. In ActionScript 3, you can associate a class with a swf file at the top-level and Flash will automatically make an instance of this Document class as a top-level object when the swf loads. This is a fancy way of saying that Flash will import an external ActionScript file when the swf loads into the Flash Player.

For the Ripple class from the Emanuele Feronato website you will find four files in the water.zip download file (water.fla, water.swf, Ripple.as and Rippler.as).

http://www.emanueleferonato.com/2011/01/19/creation-of-realistic-flash-water-ripples-with-as3/

We can open the water.fla file and check out how the author has set up the animation. The fla file is empty of any ActionScript and only has one thing which is a movie clip. The top-level Document class associated with the swf file is the Ripple.as file. The ripple effect is applied to the movie clip named toRipple. This movie clip is empty except for the background jpg graphic. The ActionScript will create the ripple effect on top of this jpg.

To use this class with your project, you will need to copy the Ripple.as and Rippler.as files into the same folder as your project's fla file. Next, you need to setup your project fla to match the default settings for the class.

1. You will need your project fla file set to AS3 and 30 frames per second.
   
   
2. The AS class is set up with a default stage size of 640 x 480 pixels (the same size as the background jpg).
   
   
3. Create a new movie clip (Insert - New Symbol) and name it toRipple. toRipple is the movie clip that the class will look for then it creates the ripple effect.
   
   
4. In the Create New Symbol dialog box, click Export for ActionScript so that the movie clip can be controlled by the ActionScript class.
   
   
5. This will open the new movie clip in edit mode and you will see the movie clip's Timeline.
   
   
6. On Frame 1, import your background jpg (File - Import - Import to Stage).
   
   
7. In the Properties panel, set the X and Y position for the jpg to 0,0.
   
   
8. Go back to Scene 1 and click anywhere not on the stage.
   
   
9. In the Properties panel, you will see the Document settings.
   
   
10. Click the icon next to the Class input box to open the Create ActionScript 3.0 Class dialog box.
    
    
11. In the Class name input box, add the name of the ActionScript file for the Ripple class. Do not include the extension .as - just add Ripple.
    
    
12. The Ripple.as file will automatically open in Flash Professional. You can close this.

Now test your movie (Control - Test Movie). As long as the Ripple.as and Rippler.as files are in the same folder as your fla file, you should see the ripple effect when you test your project.

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.


Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.