Flash Tutorial: Copy Motion as ActionScript 3.0

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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:

 

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: General Tab
  3. Select Flash Document: Flash File Flash File (ActionScript 3.0)
  4. 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.

  5. Click: OK
  6. Note: If you wish you can change the document's size and color:

  7. Go to: Modify > Document (Ctrl J)
  8. Set the size to: 150 x 150 px
  9. Select a: Background colour
  10. 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:

  6. Symbol is centered on the Stage.

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

  12. Frame 1 Motion Tween Properties.

  13. Select: Frame 25
  14. Insert a Keyframe: Insert > Timeline > Keyframe (F6)

  15. The Motion Tween can now be seen in the Timeline.

  16. In the Property Inspector select: Ease > 100
  17. In the Property Inspector select: Rotate > CCW

  18. Frame 25 Motion Tween Properties.

  19. Select: Frame 50
  20. Insert a Keyframe: Insert > Timeline > Keyframe (F6)
  21. In the Property Inspector select: Tween > None

  22. Select: Frame 60
  23. Insert a Keyframe: Insert > Timeline > Keyframe (F6)
  24. Your timeline should look similar to this:

  25. Go back to: Frame 25
  26. Select your: Symbol
  27. If the Filter Properties are closed, open them: Window > Properties > Filters
  28. In the Filter Panel select: > Blur
  29. In the Filter Panel select Blur X: 25
  30. In the Filter Panel select Blur Y: 25
  31. Test your Movie: Control > Test Movie (Ctrl Enter)
  32. Your Movie Should look similar to this:

  33. Close your Test Movie Window:


Step Four: Create the ActionScript 3.0

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

  3. Go to: Edit > Timeline > Copy as ActionScript 3.0
  4. For Instance Name type: mySpin
  5. Click: OK
  6. 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.

  7. Create a new Layer: Insert > Timeline > Layer
  8. In the new Layer select: Frame 1
  9. If the Actions Panel is closed, open it: Window > Actions (F9)
  10. 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

  11. Place your cursor in the first line of the Actions Panel: Line 1
  12. Your Cursor will blink in the Actions Panel:

  13. Paste the ActionScript. On your Keyboard press: Ctrl V
  14. Your Actions Panel should fill with script:

    Click here to see: ActionScript in Full

  15. If your Library is closed, open it: Window > Library (Ctrl L or F11)
  16. Drag a copy of your symbol onto the Stage: myMC
  17. In the Property Inspector give your Symbol the Instance Name: mySpin

  18. Test your Movie: Control > Test Movie (Ctrl Enter)
  19. 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.

  20. 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!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


32049 visitors to this page since 13 June 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.