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

Creating a First Web Site with Flash CS4 Professional

Getting creative with the Tween class


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Getting creative with the Tween class

You can get really creative when it comes to ActionScript animation, such as creating something that has depth. So for instance, I'm going to show you this final file. Watch when I click on the About section. You are going to notice this depth that goes on between the foreground content and then the background, and also a panning effect. So if I click About, see the background moves and so does the foreground. Foreground slides in that content and the background moves as well and I can jump from section to section. In fact, if I go from the Portfolio section to the Home section, you can see the About section slide around. That's pretty darn cool, because I have everything being controlled through ActionScript, through roughly a couple lines of code. But all that's really going on here is all of this content that you see sliding by; this is all in one movie clip. So that's how I want to modify my current Flash file.

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

Getting creative with the Tween class

You can get really creative when it comes to ActionScript animation, such as creating something that has depth. So for instance, I'm going to show you this final file. Watch when I click on the About section. You are going to notice this depth that goes on between the foreground content and then the background, and also a panning effect. So if I click About, see the background moves and so does the foreground. Foreground slides in that content and the background moves as well and I can jump from section to section. In fact, if I go from the Portfolio section to the Home section, you can see the About section slide around. That's pretty darn cool, because I have everything being controlled through ActionScript, through roughly a couple lines of code. But all that's really going on here is all of this content that you see sliding by; this is all in one movie clip. So that's how I want to modify my current Flash file.

So I'm going to close this final file and in this 05_03_AdvancedTween file, you can see how its set up currently, it's just a straight jump from frame to frame. We can see that each section really is in its own movie clip and they are all separate. Well, I want to combine all of these and put them all in one movie clip spaced out horizontally. All right, so in order to do that, I actually have to bring them all into the first frame. So I'm going to grab this first keyframe for the About movie clip and click and drag it forward, so that it appears in the first frame. I'm going to grab that Portfolio movie clip, bring it forward and I'm going to grab the Contact movie clip and bring it forward as well. Next thing, I want to do is I want to space these out. Okay, so I can select this first one and I can click and drag it further down here, or I can get more exact because I want to actually position this exactly at 3000 pixels to the right.

So if I want to work on exact positioning, I can select whatever I have that I want to move. I can go to the Properties panel, and I want to change its X position. So I just click on that number and I can type in 3000 and hit Enter. Now where it moved it to-- let me minimize that Actions panel and scroll down. There it is. It moved it clear down here. So I'm going to do that for these others as well. I want exact positioning for the Portfolio section. It's going to be at 2000, positioned there. And then the About section. If I click on the X property, I can change that to 1000 and the Welcome screen is going to stay exactly where it is.

All right, next thing I want to do is I want to select all of these movie clips and I want to put them all in a new movie clip called content. So with all of them selected I'm going to go to Modify > Convert to Symbol. All right, I'm converting these all into one symbol called content, and select OK. Now the reason I did that is because I want to control this as one unit. They are all in one instance but it still needs an instance name to control it with ActionScript. So with that instance selected, in the Properties panel, I want to call this content_mc. So this is what I'm going to move around. I'm going to move it to its X position. So if I can scrub over here.

When you click on the About section, I want this whole content_mc to slide this way and it's going to have a position of roughly -1000 pixels because it's moving it over to the left and again, if you click on the Welcome button, it's going to move this content movie clip X position back to 0. So I'm just typing that in just to show you how that's going to move. So it's going to pan back and forth. All right, let's do an undo to make sure it's at its 0,0 point.

It's looking great. It has its instance name. Now let's go ahead and go into our Actions panel and take a look at the code, what we have in there currently. So I'm going to select the first frame here in the Actions and Labels layer and open up the Actions panel, and here we are. Here is the current line of code which is a homeTween that moves the home movie clip, its X position. Well, the home movie clip isn't on the main timeline anymore. It's actually now the content_mc. So that's what this is.

This is the content_mc. It's still going to move its X position, the elasticity, well I don't really want it to have a bounce, I want to change this to Regular, just like that. Now this is where it gets a little tricky and really powerful, because right here, this parameter, if I click on this code hint box here, I can see that this is the beginning point. Well, I don't really know what section we are in but I do just want to take the X position of the content_mc wherever it is.

So in place of this number I want to type in content_mc. I want to take its X position. So wherever it is, I don't really care where it is, but wherever it is, that's where I want it to start from. And this second parameter again, if I click on that code hint, this is the finish position which is 0. So it's going to animate it to the right place, so it's showing the Home section. Okay, so that's what it is. content_mc, really powerful. It's going to animate it to the 0 position and I don't want to do this over the course of three seconds. I want to change that to one second. In fact, let me just get rid of some of these spaces which doesn't hurt anything but allows you to see all the code on one line a little easier. All right, there we are. I want to take the same line of code, this new tween, and I want to use it for all of the various sections.

So if I select the new tween and all of these parameters, I can do a right-click and Copy, so let's copy that code. Let's go to frame 10 in our Actions and Labels layer and we can see we have this code for the aboutTween. So if I select that current tween, and do a right-click and Paste, I can paste in this tween now. Now the only parameter I need to change here is going to be the position. So I still want to animate the content_mc. Wherever it is, it doesn't matter, and I want to move this content_mc, its final position, to -1000. So which direction does this go? Well, it moves it if I can move down my Action panel, it's going to slide it this way into negative. Negative is always going to be moving to the left. In fact, if you can look at the Position and Size, this is where I got that number.

If I can type in 1000, that's where it's going to move it to. I can see the About section is clearly visible right here. All right, so let me change this back to 0. So it's showing the Home section and go back to my code by clicking on that frame 10 in the Actions and Labels layer. So that's where this number came from. Now that we have that down, we can change the other two areas. So I'm clicking on frame 20 in the Actions and Labels layer and I want to select that tween there and paste in the content_mc, this movie clip tween now.

And again, I just want to change this finish, sort of final resting place for this Portfolio tween as well. And in this case, it's not going to be 0, it's not going to be -1000, it's going to be - 2000. So it moved it over even further. I am going to click on frame 30 in the Actions and Labels layer. I'm going to select this tween and I'm going to paste in that content_mc tween again and again it's this last parameter. If I can show you a code hint, it 's the final resting place. When you click on the Contact button, I want to move the content_mc -3000, over 3000 pixels. It's going to move it to the left.

All right, everything is looking pretty good, but really I want to test this now. So let's watch this magic happen. I'm going to go to Control > Test Movie, it's looking great. When I click the About section, we should see the Welcome, this Home section, transition off because they were all part of that one movie clip. It's looking great and working great. In fact, if you jump from Contact clear down to Home, we should see the other sections slide by. They move kind of fast but this is great. This gives me some nice movement. Transitioning out sort of the previous section, and transitioning to the section you clicked on, and it's because everything is in one movie clip and I'm just modifying the position of that movie clip.

But now let's work on the depth as well because as you saw in the final version that you show earlier, the background moved as well, and I want this to move slower but it's going to be the same code. So this is great. I get to use the same code modifying some parameters to give it some nice depth. So let's close that file, let's go back our first frame in our Actions and Labels layer. This is actually where we started. I opened up the Actions panel, now what I want to do here is I'm just going to do another right-click and Paste, because I want to use the same tween modifying two parameters.

The first parameter is the name of the background. So this is where I moved the background. I need to know the background's name, so let's take a look at that. Move down my Actions panel, if I click on that background, we can see the name is bkgd_mc. That's what I want to use. So let's go back to our Actions panel, click on that first frame, so our code shows up. Move this up a little higher and bkgd_mc. We are going to move its X position and instead of this being the content_mc, this is going to be bkgd_mc.

We are going to move its X position to the 0 point, and that's all we need to do. And a good practice is to always add comments. So I'm going to add two forward slashes and this is move the background into place. All right, so what I can do is I can copy both these lines of codes. Select Copy, I'm going to frame 10. In frame 10, I want to move the background into a different location. So I'm going to paste this code in. So again, it's still going to move the background movie clip from wherever it is to a final position, and in this case, the background is going to move slower. So you notice in a distance, if you are ever driving down the road, and you look out of your window to the left or right, the further out you look, the slower it's going to move. That's why our background is not going to move as far.

So this background is going to move - 100 pixels. It's going to move it to the left. Again if we can look at the content_mc, it's going to move it 1000 pixels. This one is only going to move 100 pixels, giving us that depth that we are after. All right, frame 20. I'm going to select that keyframe there in the Actions and Labels layer, and I'm going to hit Return a couple times. I'm going to right-click and paste in the code one more time, and again it's this finished position. Instead of moving this 2000 pixels, it's going to move it 200. That's looking great.

And frame 30 is the last place we need to paste this code in the Actions and Labels layer. If I click Paste, and instead of moving this say 3000 pixels, I'm going to move it 300. All right, so our background should be shifting not as much as the foreground, the Content area, but it should still be moving creating a nice depth of field look. So let's go to Control > Test Movie. Let's click the About section and we can see the background move as well. A really nice effect, pretty subtle, but you get that sense of depth with the site and something Flash is really good at, which is creating depth, creating unique experiences with a little bit of ActionScript and creativity.

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