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.
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.
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.