logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

How to Use A Document Class


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.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|


Add How+to+Use+A+Document+Class to Twitter Add How+to+Use+A+Document+Class to Facebook Add How+to+Use+A+Document+Class to MySpace Add How+to+Use+A+Document+Class to Del.icio.us Digg How+to+Use+A+Document+Class Add How+to+Use+A+Document+Class to Yahoo My Web Add How+to+Use+A+Document+Class to Google Bookmarks Add How+to+Use+A+Document+Class to Stumbleupon Add How+to+Use+A+Document+Class to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
The Motion Toolbar Tools

Apple Motion 5 - The Toolbar

Apple Motion - HUD

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor