Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.