Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Flash CS4 Professional

Adding tweens using ActionScript


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Adding tweens using ActionScript

Since I'm making a Flash site, I want to use Flash for what it's really good at, which is animating. In this particular case, I want to create some transitions that are going to be animating in each section. So if I click on Home, we can watch the transition that I'm about to build. Click on Home. That slides in along its X-axis. So it's X position is moving, it's starting on the right side and it's sliding in with a really cool bounce effect. So let's go back to About and let's jump to Home again, so you can watch it again.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a First Web Site with Flash CS4 Professional
3h 8m Beginner Apr 15, 2009

Viewers: in countries Watching now:

Information on how to learn Flash is prevalent, but it can be frustrating to understand how to make an entire working web site using this unique technology. Here's a course that cuts through the clutter and offers practical tools for creating a dynamic web site, even for first-time developers. In Creating a First Web Site with Flash CS4 Professional, veteran Flash instructor Paul Trani simplifies the process of integrating animation, video, audio, and user interactivity to create a site that is dynamic and appealing. The goal of this hands-on workshop is to teach web site-building skills for today's demanding interactive industry. Exercise files accompany the course.

Topics include:
  • Manipulating images for the best results
  • Integrating assets from other Adobe products
  • Creating buttons with ActionScript
  • Embedding links to external web sites
  • Exploring text layouts
  • Customizing interactive contact forms
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Adding tweens using ActionScript

Since I'm making a Flash site, I want to use Flash for what it's really good at, which is animating. In this particular case, I want to create some transitions that are going to be animating in each section. So if I click on Home, we can watch the transition that I'm about to build. Click on Home. That slides in along its X-axis. So it's X position is moving, it's starting on the right side and it's sliding in with a really cool bounce effect. So let's go back to About and let's jump to Home again, so you can watch it again.

You can see it bounce and something pretty tricky to do if you are using the timeline. So let's take a look at our timeline. Let me close this file down. In my timeline, you can see that absolutely nothing is going on in this timeline. There is no motion tween. So I did not use the timeline for this animation. If I did, you could expect it to be really complex because of the bouncing that was going on. That elasticity of it kind of going back and forth and then finally resting into place. What I have used instead and what I want to use now is a tween using ActionScript. So I want to use ActionScript code because it's going to give me a lot of control, some flexibility as well. I can control many properties with a tween using ActionScript.

Okay, the first thing I want to note is this movie clip. So if I click on this movie clip, know that its instance name is home_mc. So I want to keep that in mind because this is its unique name for controlling it. I need to make sure it has a unique name. So I'm going to this first layer here, this first frame, the Actions and Labels layer. I'm going to Window, down to Actions to open up my Actions panel. This is where I'm going to write my code. So I'm going to write in a comment. So I'm just going to do two forward slashes to type in a comment of what I want to happen.

So I want to animate in the home_mc from right to left using the tween class. So I'm going to use this Tween class. I'm going to just select that word and if I right-click, I can go and View Help. So what happens is Help will open up. Here we are in ActionScript 3.0 Language and Components Reference, which is awesome. It pulls up exactly what I just searched on. Not only does it describe what it does, because it does say the Tween class, lets you move, resize and fade in movie clips by specifying certain properties.

But what I'm going to do is I'm actually going to take this code right here and I'm going to use it in Flash. The Help is helpful. When it comes to code, I can actually take this code and bring it into Flash. So I'm going to right-click, Copy, and go back into Flash. All right, so this is great. I'm going to right-click and Paste. Here is the code from the Flash Help that I want to go ahead and modify, but first, I'm going to describe what's going on here.

If I just do two forward slashes, I can add in comment for these first two lines. Because all that's happening here, we are just telling Flash, we are saying, hey Flash! Go get code that's going to make the tween work. More or less, that's all that's happening here. I get almost careless about what the code is. All I care is that it works. So what this allows Flash to do is go and grab the code that's going to make this line of code work. All right, so that's what's going on there. Let's go to this line here. Let me add another comment. So again, I want to move the home_mc, animate in is what's going to happen here.

All right, I've got to give it a unique name is where I want to start. So it's the first thing I'm going to do. I want to replace myTween with homeTween. It could be whatever you want it to be called. But I'm just giving it a unique name just so I can differentiate it from other tweens that are going to be happening. So homeTween, this identifies it as a tween and this New is the magic word because this is what happens. I have the word new. It's actually going to create a new tween. It's going to create this new tween with all of these various parameters or properties.

All right, you probably are wondering what all this stuff is. Now, the Help can tell me, but what I can also use is Flash. So all I need to do is place my cursor anywhere in here and then in my Actions panel I can click this little bubble, Show code hint. If I click there, it tells me what everything is. So I can start typing in this. This object is going to be home_mc. If I go over to this "x", well again, this "x" is the X position. It's its position from left to right. Okay, and that's what I want to animate. Whatever property I want to animate, I want to put in these quotes.

Next up is this elasticity. So this is what makes it bounce and move really smoothly. So there is a lot of power that happens with that parameter there. Next up is this begin number. So where do we want it to start? Well, I wanted to start off the stage and I want it to animate into position. So let me just move down my Actions panel, so we can see our stage here. If I click that dropdown, I can fit this in window, just to show you that if I click and drag it, I want it to start over here.

So I want it to start its X position. If I click on that number to be about 1000 pixels so it starts off the stage, it's going to start there and I want it to end at 0 into position right here. So really reference your Properties panel for the numbers you want to get. So it's going to start at 1000 pixels and move it to 0 pixels. So let's select our first frame there in the Actions/ Labels layer and go to my Actions panel again. With those two numbers in mind, I can type in 1000. It's going to move it into 0. It's the end position. Again, I can always use my Show code hint to identify this as the finishing position. It's going to do this for a duration of 3 seconds. Use seconds that's equal to true.

So that's the animation. Let's see if it bounces on in. it should be pretty slick. I'm going to go to Control > Test Movie and let's watch it. It's going to happen right away. We can see it bounce in. Let's go to another section and then click back on Home and watch it bounce in, very slick. Again, I didn't have to use the timeline in at all, because doing an animation like that in the timeline would take some time and wouldn't be as flexible.

But you can see, with one line of code, I was able to add a really slick, elastic movement to that Home movie clip, very powerful.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash CS4 Professional.


Expand all | Collapse all
Please wait...
Q: If I create a website using Flash CS4 on a Mac, can I edit it on a PC using Flash CS4?
A: As long the file is saved as a .FLA file with the extention ".fla" typed at the end of the filename when saving on a Mac, it should open with no problem on a PC.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Flash CS4 Professional.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

Creating a First Web Site with Flash CS4 Professional will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked