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

Creating a First Web Site with Flash CS4 Professional

Reusing tween code


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Reusing tween code

What's really powerful about ActionScript is I can reuse the code and apply it to different elements. For instance, I have a tween and this tween is basically being applied to multiple movie clips. For instance, I can click the About section and I can see that tween bounce up. If I go to the Home section, I can see that home movie clip slide in along its X-axis. So it's really just the same lines of code duplicated and then modified slightly to give me a totally different results. In fact, if I go to the Portfolio section, we'll see that fade in. Again it's the same chunk of code copied and then modified as well. Contact will stretch out.

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

Reusing tween code

What's really powerful about ActionScript is I can reuse the code and apply it to different elements. For instance, I have a tween and this tween is basically being applied to multiple movie clips. For instance, I can click the About section and I can see that tween bounce up. If I go to the Home section, I can see that home movie clip slide in along its X-axis. So it's really just the same lines of code duplicated and then modified slightly to give me a totally different results. In fact, if I go to the Portfolio section, we'll see that fade in. Again it's the same chunk of code copied and then modified as well. Contact will stretch out.

So let's watch this one. So that's the result I'm going for. I want to take this code that's in this sliding in and I want to modify it for these other three sections. So let's take a look at reusing my code. So I'm going to the Timeline, select that first frame in Actions/Labels layer. Let's go to Window, down to Actions and let's take a look at what's going on. We are pulling in all the code that makes the tween work and here is the Tween call. So in general here is a variable, so here's a container. Its specific name is the homeTween. I'm calling it a tween explicitly saying, hey, this is a tween, I'm making new one with all of these new parameters.

So in general, take this Home movie clip, move it from the right to the left with elasticity, so it kind of bounces in. It's going to move it starting off the stage on the right side so this first parameter; if I put my cursor right in there I can click on Show code hint. So as you know what, it started 1000 pixels off the screen because this is the X position so that's 1000 pixels to the right and then if I just scroll down, use my arrow keys, I can see the finish position in 0 over the course of 3 seconds.

It works great for the Home section but I want to use the same code for the About section. So let me just copy this line of code, right-click, Copy and let me move this Actions panel down. So I want to go to frame 10 in this layer here, select that About label and on this frame this is where I want the action to take place to bounce this in. So I'm going to bring it in and it's going to, with elasticity, come up from the bottom. So I'm going to change its Y position. It's going to move in.

All right, so let me select that first frame there, go to my Actions panel, you can see there is nothing in here. I just need to right-click and select Paste and now I can modify this code. So the variable name is going to be aboutTween. That's its explicit name and for the aboutTween, we are not going to move the Home movie clip. We are going to move the About movie clip. I need to make sure that that's its correct instance name; I think this is very important. I want to make sure this is about_mc. If I click on this movie clip and go to the Properties panel, that does say about_mc.

All right let me click that frame again and go back to my code. Here we are in about_mc. I want to move its Y position so it's going to move up and down that's what the Y does. It's going to do with elasticity. Now let's take a look at where we are going to move it from. If I move that down, it's going to start out at 1000 pixels below sort of outside of your viewable area and it's going to bring it into position where it is currently. So let's look at where it is currently. If I select the About movie clip in my Properties panel, I can see the Y position is at 112. So that's its final resting position and it is going to start off at 1000 pixels, way down below there. We bring that back up. Let me select that frame, come back and here it's going to start right of there and it's going to end about 112 pixels and it's going to do over the course of 3 seconds.

So there is my aboutTween. Let me go ahead and do a Control > Test Movie to watch it. Home section slides in because that's the X position since we are dealing with the Y position it's going to move up and down, let's click About, sure enough it bounces in. So again, Home section, About section works great. Same line of code, modifying some parameters, some properties, dealing specifically with the Y property and you can see, you can get a totally different look.

Now for the Portfolio section, I want this to fade in. So we are going to modify its Alpha. So I'm going to close this and I'm going to go back to the Timeline and I'm going to add this code to the Portfolio sections, so I'm clicking on frame 20 in the Actions/ Labels layer and this is where I want to add my code. If I move down that Actions panel, I'm going add this code to this Portfolio movie clip. If I select it, I can see that it does say portfolio_mc. Let's go back to frame 20 and I'm going to right-click and I'm going to paste in that same chunk of code that I copied earlier that homeTween and I'm going to call this Portfolio. This is the portfolioTween. It's going to animate the Portfolio movie clip. It's not going to animate its position it's going to animate its alpha. Alpha means transparency.

Now we don't want it to elastically animate the alpha, we just wanted to just do a regular fade in. So I'm going to change this Elastic word to Regular. Just faded in at a steady pace. All right these are the two parameters and again I can click anywhere in this code and select my code hint, just to see what it's referring to. Its beginning numbers is going to be 0. That's going to start out 100% transparent and that's going to end up opaque and if I want to end up opaque, I just need to type in 1 there and that's going to do over the course of 3 seconds.

So that's looking pretty good, in fact, let's go ahead and do the Contact section now as well. So let me click this last frame here and go down to my Contact section. Let me select that movie clip. It is the contact_mc and for this one, I'm going to adjust its scale. So it's going to start out squeezed on the left side and then it's going to stretch out and with elasticity it's going to rest in the place. So let's go back to our Contact frame. That's the frame 30 in our Actions/Labels layer, go back to our Actions panel, right-click and paste.

Again, the same chunk of code for the Contact section. Creating this contactTween, it's going to modify the contact_mc. It's going to modify its scale so it's X scale and again X means it's right to left position. So it's going to modify how wide it is. It's going to do with elasticity, this is the starting number, let me click code hint and the starting number is actually going to be 0. In fact, let me expand out this panel a little bit more so we can see everything on one line for the most part, all right there we are.

Now I didn't remove some spaces and spaces in this case isn't going to break the code or anything like that. Sometimes it is a good practice but in this case I want to show everything on one line. It's going to start out at 0 and it's going to go up to 1, so it's going to stretch it out fully from 0-1. So it's going to restore it to 100% over the course of 3 seconds. All right so code looks pretty good, I'm going to go ahead and test this now.

I'm going to click, go to Control > Test Movie. That slides in the About section which we did earlier, bounces up Portfolio, we have modified the alpha, so it should fade in when I click on it, sure enough it does fade in really smooth because it happens over the course of 3 seconds. Contact section stretches out, so let's try this one. Click and it does stretch out and it has some bounciness, going on some elasticity but it looks great and all I did is I took one line of code that was for the home section and modified it for these three other sections. So again, the power of ActionScript being able to reuse one line of code by copying it, pasting it and then modifying the parameters is really 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