Flash Tutorial: Copy Motion as ActionScript 3.0	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Copy Motion as ActionScript 3.0

Free Flash Tutorial

This is one of the most useful new features of Flash CS3. It enables you to convert a Motion Tween animation into ActionScript 3.0. This means that you can create a reusable script that can be applied to any object in Flash. It also means that you can open up existing Flash files and copy the animation into a new file and apply it to new objects in a few clicks.

You can capture the motion of the following properties of a Motion Tween animation:

• Blend Mode
• Cache As Bitmap Setting
• Color
• Custom Easing
• Filters
• Frame Labels
• Motion Guides
• Orientation To Path
• Position
• Rotation
• Scale
• Scale
• Skew
• Transformation Point

  Cross Ref: In you are not familiar with creating Motion Tweens see the tutorial: Motion Tween

Example: Download the Flash file Int 102a

Copying a Motion Tween and creating an animation with ActionScript 3.0.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Setting up the Flash Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: Flash File (ActionScript 3.0)

Note: By selecting ActionScript 3.0 your Movie will also be set to be published in Flash 9 Player. The feature that you are going to use is an ActionScript 3.0/Flash Player 9 feature. You can always change this setting later by going to File > Publish Settings > Flash > ActionScript Version.

4. Click: OK

Note: If you wish you can change the document's size and color:


5. Go to: Modify > Document (Ctrl J)
6. Set the size to: 150 x 150 px
7. Select a: Background colour
8. Click: OK

Step Two: Create a Symbol to Animate

I am going to use some text as a the content for my symbol. In truth you could use anything such as a drawing, photo, clip art or any combination.

1. Type a word: webwasp (or anything you want)
2. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
3. Center your text:
4. Select any other Font Styles that you might want. Mine are as follows:







5. Convert your text to a Symbol: Modify > Convert to Symbol (F8)
6. For Name type: myMC
7. For type select: Movie Clip
8. For registration select: Centre



9. Click: OK

Step Three: Create a Motion Tween

You can create any Motion Tween that you like as long as it is in a single Layer. The Motion Tween can contain multiple Keyframes and span multiple tweens. It may also contain empty frames. The Motion Tween may also contain any of the following elements: Blend Mode, Cache As Bitmap Setting, Color, Custom Easing, Filters, Frame Labels, Motion Guides, Orientation To Path, Position, Rotation, Scale, Scale, Skew, Transformation Point.

I am going to make the text spin and blur. You can of course create any Motion Tween that you like.

First of all I am going to centre the Symbol on the Main Stage:

1. Select your: Symbol
2. Open the Align Panel: Window > Align (Ctrl K)
3. If the Align to Stage button is not selected, select it:
4. Click the Align to Horizontal Center:
5. Click the Align to Vertical Center:


Symbol is centered on the Stage.

6. In the Timeline select: Frame 1
7. In the Property Inspector select: Tween > Motion
8. In the Property Inspector select: Ease > -100
9. In the Property Inspector select: Rotate > CW
10. In the Property Inspector select: Rotate Times > 3


Frame 1 Motion Tween Properties.

11. Select: Frame 25
12. Insert a Keyframe: Insert > Timeline > Keyframe (F6)


The Motion Tween can now be seen in the Timeline.

13. In the Property Inspector select: Ease > 100
14. In the Property Inspector select: Rotate > CCW


Frame 25 Motion Tween Properties.

15. Select: Frame 50
16. Insert a Keyframe: Insert > Timeline > Keyframe (F6)
17. In the Property Inspector select: Tween > None
    
    
18. Select: Frame 60
19. Insert a Keyframe: Insert > Timeline > Keyframe (F6)

Your timeline should look similar to this:



20. Go back to: Frame 25
21. Select your: Symbol
22. If the Filter Properties are closed, open them: Window > Properties > Filters
23. In the Filter Panel select: > Blur
24. In the Filter Panel select Blur X: 25
25. In the Filter Panel select Blur Y: 25



26. Test your Movie: Control > Test Movie (Ctrl Enter)

Your Movie Should look similar to this:

27. Close your Test Movie Window:

Step Four: Create the ActionScript 3.0

1. In the Timeline select: Layer 1



Note: Although I have selected the entire Layer it is possible to select only a portion of a Layer if appropriate.

2. Go to: Edit > Timeline > Copy as ActionScript 3.0
3. For Instance Name type: mySpin



4. Click: OK

Note: Your ActionScript is now in the computers Clip Board memory. If you wished you could paste the ActionScript into a program like NotePad to store until you are ready to use at a later point.

5. Create a new Layer: Insert > Timeline > Layer
6. In the new Layer select: Frame 1
7. If the Actions Panel is closed, open it: Window > Actions (F9)
8. If Script Assist is on, Switch it off:

   Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

9. Place your cursor in the first line of the Actions Panel: Line 1

Your Cursor will blink in the Actions Panel:



10. Paste the ActionScript. On your Keyboard press: Ctrl V

Your Actions Panel should fill with script:



Click here to see: ActionScript in Full

11. If your Library is closed, open it: Window > Library (Ctrl L or F11)
12. Drag a copy of your symbol onto the Stage: myMC
13. In the Property Inspector give your Symbol the Instance Name: mySpin
    
    
14. Test your Movie: Control > Test Movie (Ctrl Enter)

Your Movie Should look similar to this:

You may find that there are very minor discrepancies between the two animations but in general appearance they should be very similar.

15. Close your Test Movie Window:

Your Movie is now complete. If you wish you could now delete your original Motion Tween.

Have fun.

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!