| By Jen deHaan, Chris Georgenes | Article Rating: |
|
| January 15, 2006 12:30 PM EST | Reads: |
32,021 |
Editing a Timeline Effect
You edit Timeline effects using the Effect Settings dialog box:
1 Select the object associated with the effect on the Stage.
2 To open the Effect Settings dialog box, do one of the following:
- In the Property inspector, click Edit.
- Right-click (Windows) or Control-click (Macintosh) the object and select Timeline Effects > Edit Effect from the context menu.
Deleting a Timeline Effect
You use the context menu to delete Timeline effects. Right-click
(Windows) or Control-click (Macintosh) the object on the Stage that has the Timeline effect you want to remove, and select Timeline Effects > Remove Effect from the context menu.
About Scripting Animation
You can use ActionScript 2.0 to add animation to your Flash applications instead of using motion or shape tweens on a timeline. The following sections show you how to use code to animate instances, such as changing the transparency and appearance of the instance, and moving the instance around the Stage.
For information on using the Tween and TransitionManager classes to further automate code-based animations, see the following section, Using the Tween and TransitionManager Classes. These classes help you add advanced easing equations and transition animations to movie clip instances in your application. Many of these effects are difficult to recreate using ActionScript without these prebuilt classes because the code involves writing complex mathematical equations to achieve the effect.
The animation uses code to tween the bee horizontally across the Stage. Notice the easing that has been applied to the motion as well. This animation uses very few lines of code to achieve this effect.
Note: Issues regarding frame rate discussed in the earlier section, About Frame Rate and Animation, also apply to scripted animation.
Fading a Movie Clip
When you work with movie clips on the Stage, you might want to fade the movie clip in or out instead of toggling its _visible property. The following examples, taken from the Flash documentation, show you a variety of simple ways to use ActionScript to create animation.
The following procedure demonstrates how to use an onEnterFrame event handler to animate a movie clip. To fade a movie clip by using code:
- Create a new Flash document called fade1.fla.
- Draw some graphics on the Stage using the drawing tools, or import an image to the Stage (File > Import > Import to Stage).
- Select the content on the Stage and select Modify > Convert to Symbol.
- Select the Movie Clip option and click OK to create the symbol.
- Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.
- Select Frame 1 of the Timeline and add the following code to the Actions panel:
This code uses an onEnterFrame event handler, which is invoked repeatedly at the frame rate of the SWF file. The number of times per second that the event handler is called depends on the frame rate at which the Flash document is set. If the frame rate is 12 fps, the onEnterFrame event handler is invoked 12 times per second. Likewise, if the Flash document's frame rate is 30 fps, the event handler is invoked 30 times per second.
img1_mc.onEnterFrame = function() {
img1_mc._alpha -= 5;
if (img1_mc._alpha <= 0) {
mg1_mc._visible = false;
delete img1_mc.onEnterFrame;
}
}; - Select Control > Test Movie to test the document. The movie clip you added to the Stage slowly fades out.
- Create a new Flash document called fade2.fla.
- Draw some graphics on the Stage, or import an image to the Stage (File > Import > Import to Stage).
- Select the content on the Stage and select Modify > Convert to Symbol.
- Select the Movie Clip option and click OK to create the symbol.
- Select the movie clip instance on the Stage and type img1_mc in the Instance Name text box in the Property inspector.
- Select Frame 1 of the Timeline and add the following code to the Actions panel:
The setInterval() function behaves slightly differently than the onEnterFrame event handler because the setInterval() function tells Flash precisely how frequently the code should call a particular function. In this code example, the user-defined fadeImage() function is called every 50 milliseconds (20 times per second). The fadeImage() function decrements the value of the current movie clip's _alpha property. When the _alpha value is equal to or less than 0, the interval is cleared and the fadeImage() function stops executing.
var alpha_interval:Number = setInterval(fadeImage, 50, img1_mc);
function fadeImage(target_mc:MovieClip):Void {
target_mc._alpha -= 5;
if (target_mc._alpha <= 0) {
target_mc._visible = false;
clearInterval(alpha_interval);
}
} - Select Control > Test Movie to test the document. The movie clip you added to the Stage slowly fades out.
- Create a new Flash document called moveClip.fla.
- Change the frame rate of the document to 24 fps in the Property inspector. The animation is much smoother if you use a higher frame rate such as 24 fps.
- Select Frame 1 of the Timeline and add the following code to the Actions panel:
This code example loads an external image from a remote web server and, when the image is fully loaded, animates it horizontally across the Stage. Instead of using an onEnterFrame event handler, you could use the setInterval() function to animate the image.
// Create a movie clip instance.
this.createEmptyMovieClip("img1_mc", 10);
var mcl_obj:Object = new Object();
mcl_obj.onLoadInit = function (target_mc:MovieClip):Void {
target_mc._x = Stage.width;
target_mc.onEnterFrame = function() {
target_mc._x -= 3; // decrease current _x position by 3 pixels
if (target_mc._x <= 0) {
target_mc._x = 0;
delete target_mc.onEnterFrame;
}
};
};
var img_mcl:MovieClipLoader = new MovieClipLoader();
img_mcl.addListener(mcl_obj);
// Load an image into the movie clip
img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg",
img1_mc); - Select Control > Test Movie to test the document. The image loads and then animates from the right side of the Stage to the upper-left corner of the Stage.
Published January 15, 2006 Reads 32,021
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
More Stories By Jen deHaan
Jen deHaan, a rather awkward and uncool Canadian, likes robots and pirates (as well as robotic pirates). Jen works on documentation at Macromedia in San Francisco. She also maintains a blog at weblogs.macromedia.com/dehaan and believes that _root and low-carb diets are unusually evil.
More Stories By Chris Georgenes
Chris Georgenes is a full-time freelance artist, animator, and all-around designer for the web, CD-ROM, and television. His clients include Pileated Pictures, LucasArts, Universal Records, Plot Developers, and AOL, among others. He maintains www.mudbubble.com as his online portfolio and www.keyframer.com as his Flash tutorial website. Chris is also a member of Team Macromedia.
![]() |
SYS-CON Italy News Desk 01/15/06 01:52:28 PM EST | |||
By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, color, and opacity of shapes. |
||||
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Adobe Flex Developer Earns $100K in New York City
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- Ph.D. in Twitter Anyone?
- Eolas Sues the Internet
- Adobe LiveCycle Enterprise Suite 2 for Cloud Computing
- Adobe Betas Target RIAs and Cloud Computing
- Special Report on the Emerging Cloud Computing Trend
- Adobe Cans Another 9% of its Workforce
- My Thoughts on Ulitzer
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Ulitzer Live! New Media Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Eval JavaScript in a Global Context
- Fig Leaf Software to Exhibit at Government IT Conference & Expo
- Cloud Executives Feature on Cloud Computing Expo Power Panel
- Software Flexibility in the Cloud - Part 4 of 5
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Is Microsoft as Free as Open Source?
- Adobe Reader Sued
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Where Are RIA Technologies Headed in 2008?
- Cover Story: How to Increase the Frame Rates of Your Flash Movies
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Your First Adobe Flex Application with a ColdFusion Backend
- Adobe Flex 2: Advanced DataGrid
- i-Technology Blog: Death-Knell For "Rich Media? Hardly!
- Adobe/Macromedia - Microsoft, Look Out!
- How To Create a Photo Slide Show ...
- Adobe Flex Interface Customization - Themes, Styles, Skins
- Personal Branding Checklist
- Has the Technology Bounceback Begun?
- "Real-World Flex" by Adobe's Christophe Coenraets




































