Adding Interactivity / Converting Animations to ActionScript
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
Ever since Flash added Scripting capabilities back in version 4, scripters have created motion using only ActionScript, but trying to script reusable animations and animation effects based on just code instead of using a graphic, designers carefully choreographed Tweening, and Keyframe animation was a grueling process of trial and error. However, now you can do the opposite. You can create an animation on the Timeline and then convert that animation into Code, using the Edit Timeline Copy Motion as ActionScript 3.0. So, in this movie let me demonstrate how to use this tool to convert your existing animations into Code, which can then be transferred to other projects or other objects. Let me start by setting up an animation using one of the Motion Presets here, the Bounce In 3D, which I've added to this object. And now what I'm going to do is select the entire Framespan for that Motion Tween and choose: Edit, Timeline, Copy Motion as ActionScript 3.0. That will actually copy all the ActionScript into memory. I can now create another file here. This one here has already one animation that I've added from the Code that I copied from the other movie. Let me just test this for you and show you what it looks like. It's a different kind of object, but the exact same animation. Let's hide this, and now let's add another Layer, and let's draw another Object on here. Let's draw a Polystar Tool and let's do a Pentagon, like so. Double-click on that pentagon and let's convert this to a Symbol. Let's call this pentagon, like so. Movie Clip Symbol, click OK. Let's open up the Properties Panel here and let's give this an Instance name. Let's call this pentagon1, like so, being careful that it's spelled correctly. We're going to need that Instance name later when we paste in the Script that I copied to memory. Now, I have the Script already pasted in from the other animation Script that I copied here, so let's delete that. Let's go to Window, Actions, and there are quite a bit of Actions there that I'm just going to go ahead and delete that particular copy, and now let's paste in the animation that I copied over from this preset, right-click, paste. Now there's quite a bit of animation scripting here, but don't be too intimidated by this. You really don't need to do very much. And certainly, if you want to start learning ActionScript this is a great way to do it. But to get this to work all you need to really do is go down here to where this text is grayed out; that's been remarked out. To the very last line here, which is actually the second to the last line because there's a closing curly brace in the very last line, but the last line with content, text content in it, you want to unremark that by removing the two forward slashes. I'm going to click here and press the Backspace key. Notice it says animFactory symbol add target and then it says: instance name goes here, right there where it says instance name goes here, remove that, including the carats, so you just have the open parentheses and then a comma. And now you type the name of your Instance. This was pentagon. That's why it's important to remember the spelling of that Instance. Oftentimes what I'll do is copy the Instance Name from the Properties Inspector and simply paste it in here. That's a good technique to learn to avoid typos. Let's just do that. I have my Properties Inspector right here, and let's click on my Instance right there, and there's my Instance Name; Command C. We'll copy that, go back to Actions Panel, click on the Keyframe there, and let's go find that last line where it says Add instance name, let's paste in the Instance Name right there, pentagon1. And that's really all you need to do to get this animation transferred over to this other file, or another object in the same file. As always, I'm going to test this movie right away by doing Control Test Movie and we're going to see the other object there. It's not animating, but the Pentagon is animating since I removed the Script for the Bounce Text it's not animating there, but this is a great technique for transferring sophisticated, complex animation sequences to other Flash files, or to other Movie Clips, or Symbols in the same file. Notice that it's the exact same animation that I had over here. Let's go back and close the Actions Panel. Go back to my Motion Preset, do a Control Test Movie. The object is different, but the animation is identical. You can also copy the motion of Classic Tweens. The process is very similar. Go ahead and set up your Classic Tween, click on any frame between the two Keyframes and then, from the Main Menu, choose Edit, Timeline, Copy, Motion as ActionScript 3.0. This time, rather than having to add the Instance Name to the Code, you're going to add the Instance Name right here in this dialog. This will add it to the Code for you. Click OK. Now, let's create another Layer to that Layer. Let's create another Object here. Let's do an oval. Let's convert that oval by selecting it and choosing Modify, Convert to Symbol. Let's convert it to a Symbol. Now all we need to do is add the Name of the Instance that I added to the dialog. In other words, the Script that I'm going to paste is using the Instance name Test, so by naming this now we just go into the Actions Layer, Frame 1, open up the Actions Frame here and paste in our text that's saved in memory. There it is. Notice that it doesn't have any commenting out. The test Instance Name is already included in the Script. Now we just do a Control Test Movie, and notice both Objects move identically. So, there you have demonstrations of converting two types nimations to ActionScript, Classic Tweens, and Motion Tweens. That'll wrap up this Section of the Tutorial. I'm adding interactivity to your Flash projects in this Section. You've gotten: an Introduction to Behaviors; a survey of some Useful ehaviors, an ActionScript overview, a comparison of ActionScript 3.0 versus 2.0; an Introduction to the Actions Panel; Scripts for controlling the Timeline; Scripts for Linking to other Web Pages; a Tutorial on the Insert Target Path Tool; as well as Techniques for Converting Animations to ActionScript. That will take us to the next Section of the Tutorial on Publishing, where you'll learn how to: publish for the Web; how to publish HTML files and projectors; as well as how to publish Bitmap Images, QuickTime Videos, and much, much more.
Tutorial Information
| Course: | Adobe Flash CS4 |
| Author: | James Gonzalez |
| SKU: | 33981 |
| ISBN: | 1-935320-37-8 |
| Release Date: | 2009-04-19 |
| Duration: | 11 hrs / 126 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 