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

Creating a First Web Site with Flash CS4 Professional

Controlling elements after transitions


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Controlling elements after transitions

Once you have added some ActionScript tweens you'll realize that you are going to have to listen for the end of these tweens or wait for the transition to end before having something else happen. In our case if I go to Control > Test Movie you can see that when I go to the Portfolio section or the Contact section, even when I'm going to these other sections what's really going on is in this About section this video was playing. Not only that the video stopped even though I didn't even get to see most of it, because I was in these other sections.

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

Controlling elements after transitions

Once you have added some ActionScript tweens you'll realize that you are going to have to listen for the end of these tweens or wait for the transition to end before having something else happen. In our case if I go to Control > Test Movie you can see that when I go to the Portfolio section or the Contact section, even when I'm going to these other sections what's really going on is in this About section this video was playing. Not only that the video stopped even though I didn't even get to see most of it, because I was in these other sections.

So really what I want to do is when you click on the About section I want to transition in the About section and then play the video so I can see the full video play. All right, so I need to listen for a tween to complete. So let me close that file. Let's go to the Timeline and right in here this is my content_mc. If I double-click on it I can see that within my Content movie clip there is this About movie clip and it is called about_mc.

If I double-click on it I can see the video. So here's where my video is. It's clear down in here and that's what I need to control, okay. So let's start off by going back out to our main Timeline going to Frame 10 in the Actions and Labels layer and going to Window > Actions. All right, so this About tween basically animates in the content_mc over the course of one second and I want to listen for when this tween is done animating.

So I'm just going to go ahead and hit Return a couple of times and I'm going to add that code in here. So I'm listening for the About tween. So I'm going to type in aboutTween. That's the name of this tween. And I want to add a listener to it. So I'm going to add an event listener. Notice when I start typing that in I get code hinting that allows me to pick this addEventListener. I'm going to hit Enter and then I need to type in the type. Well, it's going to be a TweenEvent. And I'm going to listen for the motion to finish.

Again I get code hinting so I can select MOTION_FINISH. But notice there are quite a few things that I can listen for and it's going to be the same code that I would write. But in this case I'm listening for the motion finish. Selecting that. All right, so that's what I'm listening for and once Flash hears the motion finishing then I want to fire off this function called donePlaying. We need to make sure we have open and closing parenthesis there. Now let's go ahead and write our function. function donePlaying. It's going to be a tween event. It's what it's listening for so I need to make sure of these two words match up. And then I need to close that parenthesis and I'm going to type in void because I don't want to return anything. So I typed in void so I don't need to pass anything back out to this listener. But in general I'm building the structure for this function. I'm adding an opening curly brace and a closing curly brace. Keep in mind once you open the curly brace you need to close it just like as if you open a parenthesis you need to close it as well.

All right, in this function all I'm going to add is a trace statement. I'm going to type in trace and I'm going to type in done playing. So I should see this in the Output window when this aboutTween is done playing. It's going to say done playing. Okay I need to do one more thing here because just like with the tween function here that is being called I need to add code to this Flash file. So I need to basically include code that's going to make this work this motion finish.

All right so tween events that's what I need to keep in mind because that's what I need to add. So I'm going to go to my first frame in my Timeline and just to review what we had before, I selected that first frame in Actions/Labels layer. You can see that this is importing the tween but it's not importing the tween event. Since I'm using that code I need to import it as well. So import fl transitions TweenEvent.

Again I can use code hinting. Select what I need, hit Enter, end with semicolon. So I have imported that code which means it's available for fast use so that's going to make the code I added in the About section work. So if I click on frame 10 we can review that code. It's all looking pretty good and as you start writing code more and more it might be helpful to check Syntax. So in the Actions panel I can always hit this Check button and it checks and it makes sure the script doesn't contain any errors.

Sure enough it doesn't. It's looking great, so let's go to Control > Test Movie. Now the video will stop play because we haven't done that part, but when I click the About section I should get a printout in the Output panel if I move the Actions panel down. In my Output panel it should say done playing up here. So I have clicked About and there it was. So there was a delay before done playing! appeared because the transition was still happening. So let's go ahead and click Home. I'm going to click back on About and we should see done playing! pop up after one second.

There it is, done playing! So it looks like it's working. That's great. Now we just need to control this video. Let's go back to out Timeline and before I even show you the code we need to focus on the video itself. So I'm going to go through, I'm going to double-click on this content_mc. I'm digging down to the video. So I have clicked on Content. I have clicked on the About movie clip and I can see in the Timeline here there is my video. It's currently locked down.

So let me just turn off that mask and unlock the video and I can select it. So the key thing I need to do here is I need to give this an instance name because how else I'm going to call it with ActionScript if it doesn't have any. So in the Properties panel with that video selected I'm going to call this video my video. Keeping it simple. Just calling it my video. It could be any name you want. I'm going with a sort of camel case where it's lowercase letter and then in uppercase for subsequent words.

So that's called my video. Let' keep that in mind and let's go back to scene 1 and go back to frame 10 in our Actions and Labels layer because that's where our code is. And let me open up the Actions panel. And here's my trace statement. So remember we call that my video. Remember it was pretty deep in there. It was actually inside of content_mc. So let's type that in. It's inside content_mc. Inside of there is the about_mc. So notice how I just added a couple of periods and that's how I dig down into various movie clips.

So within content_mc there is the About movie clip and inside of about_mc that's where myVideo exists. Great! I'm able to target it. I got real clear down into it and specify exactly where it is and what the name is. I'm going to add another period and type in play. That's all I need to do because I wanted to play when the motion has finished and I just need to do open and close parenthesis. Okay, so it will play when you click on that button, but I want to make sure it doesn't play until you click on the button because it's already auto-playing.

So let me move back down this Actions panel, double-click on content_mc, double-click again and let's go back to my video. Now there is additional parameters available that I can modify for this video. This video is a component and it's really powerful and I can modify plenty of the parameters. So what I usually like to do is select that video component and I'm going to go to Window and I'm going to go down to Component Inspector, so I want to inspect and see what this video component is all about.

If I expand this out I can see sure enough autoPlay is set to true. So this is very handy. I can go in here and change any of the parameters I want. I want to change autoPlay to false. So it doesn't play initially. There is a lot more I can do in here as well. So now autoPlay is set to false. I can close the Component Inspector. My code should be fine. So I'm going to go to Ctrl and test this movie. All right, here we are. Now when I click the About section we shouldn't see the video. We might even see a gray or a white box there. But when it's done transitioning that's when the video is going to play. So I'm clicking About.

It actually pauses on that first frame and then immediately starts once the animation or the transition is done and I can sit and watch the full video. Now if I go to Portfolio and then I go back to the About section, it should play the video again. Starts it from the top and plays through. It's great that I can listen for other events by adding an event listener and that code was similar to the code you'd write for a button. It's just that you are not listening for click you are listening for the completion of an animation.

Very powerful and very handy and I'm sure you'll find and use for that in many cases.

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