Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Creating a First Web Site with Flash Professional CS5 shows how to make a fully functional, dynamic web site in Flash Professional CS5. This course covers the fundamentals of creating and importing content, adding smooth 2D and 3D transitions, and adding button functionality that goes beyond links. This course will also show how to integrate and control video and audio as well as how to implement a gallery and a contact form. Exercise files are included with the course.
Flash makes it easy to add animation to any project and that's what I want to do with each section here. I want to actually animate in the background in a cool way and I'm going to use motion presets to do this. But the first thing I'm going to do is I'm just going to go ahead and turn off, basically hide the content for each section because I just don't want it to get in the way. I'll just kind of turn those off really fast, just to get this set up. I'll go back to this home bkgd layer here, and I'm going to go ahead and change my view, let's say to about 50%.
Again, I want this to kind of slide on or animate in, in some cool way. And again, I'm going to do that using motion presets. So I'm going to go to Window, down to Motion Presets. That opens up this Motion Presets panel, and I'll just nest if off to the side, so it's sort of out of the way. And I'm actually given this Default Presets folder. So if I open that up, you can see all of these really cool animation you can use. So I'm just going to arrow key down and check out some of these. So there are some fly-ins with a blur, there are some fly-ins without a blur, and there is all sorts of cool presets in here.
There's a pulse, even smoke, definitely pretty nice, even if you want it to have something twirl in, in a 3D way. So I encourage you to kind of check out all of these presets. They are definitely pretty cool. But I don't really want to overdo it with this. I just want to have this fly in from the right. So, with that background selected, I'm then going to select to my preset and then I'm going to click this Apply button, and it adds that motion tween. Here's my motion path right here that you can see on my Stage and notice how it gives me this motion tween up here as well, okay.
So I want to go ahead and adjust the time, because as you can see it actually adds this animation, but it spills over into the other sections. So I'm just going to click and drag on that second keyframe to shorten it up, so that only exists within this amount of time. All right, so it's not really positioned correctly either, so I'm going to go about Frame 19. This is sort of its resting location. And what I can do is I can select this motion path, and I can move the entire motion path.
So I can move that whole animation over, so it does rest into place exactly where I want it to be. So again I'll click on Frame 10 and I can just kind of scrub through, but you can see that it slides in. Now, I can also edit this motion path. So I'm just going to click on the background, just to deselect it, and what I can do is I can roll over this starting point right here. This is the starting keyframe. And I can stretch it out.
So now my animation is going to sort of start further out and then still end up in the same position. Much more dramatic, but that's sort of more of what I want. So I'm going to continue to do that for some of these other sections. I'm going to select this about bkgd, and I'm going to have it say come in from the bottom, and I'll click Apply. You can see it gives me this motion path, this motion tween in here. I can go ahead and grab that second keyframe and click and drag it so again it exists and it sort of happens over these 10 frames.
I can also select that motion tween. It might be kind of hard to see it depending on at the layer color, but I can go ahead and move that down as well. All right, so that looks pretty good. Let's move on in the next one. Since this one is kind of more of sky theme, we have these balloons come in from the top. So again, select your move clip, then the tween, then click Apply, and you can see that it does animate. But what I need to do is of course shorten this up again like that and then move the tween.
Now remember, regardless of what tween you've applied, you can always not only adjust the tween, but you can also adjust the position of the Start or End to keyframes here, so I can just go ahead and move that. So now again, it's going to be much more dramatic when it comes in. There's something else I can do as well though, because with this motion path here I can not only sort of move the position of the start keyframe, or any keyframe for that matter, but what I can do is if I click off of it, I can roll over that line using my Selection tool, I can roll over that line, and as I roll over it, it gives me that curved line.
It's basically saying, hey you know what, you can curve this motion path. So again, I'm just going to click and drag, and you can see now I can bend the motion of this object. So now, it's actually going to kind of come in at a curve. So that might be kind of cool. I'll select Frame 30 and I'll just kind of scrub through, and you can see it sort of comes in at a little bit more of an angle. So again, you can do that for any motion path. All right, here's is my last one. I'm going to select that background, and I'm going to have it, coming from the left, select that tween, click Apply, and now I can see that it does give me this motion tween up here, which I need to shorten like that and then I need to make sure it's positioned accordingly.
So again, use motion presets to kind of get you started and the you can sort of further manipulate it by editing the keyframes, maybe making the animation happen longer, and again by rolling over that line you can always sort of bend to that motion path as well and create something even more interesting, like bend that down like that. So definitely, it's pretty nice. I'll go to Frame 40, I'll hit Enter, and you can see that sliding like that. So, when you add these motion paths, notice my Timeline is pretty squared away, except for these frames that are kind of sticking out, out here.
And personally, these kind of annoy me because no content exists beyond this point. So, I can select all of these frames here, sort of this chunk, and I can right click and what I can do is just Remove Frames. There we go. Now it's actually not going to sort-of play beyond the Frame 50. So let's just do a Control > Test Movie. I'll test it out. You'll get this message on occasion, just hit OK, and you can see all that content sort of slide in.
This happens really fast. In fact, it's can kind of annoying. So, if you want to extend out animation, and that's pretty easily done as well. In fact, if I want to double the length of this animation, what I can do is I can select all these frames like that, just do a click and drag, selected all these keyframes. And now if I right click, instead of removing frames like I did before, I can do Insert Frame. Insert Frame, that stretches it out, now that animation is going to happen over the course of, you know, maybe a second.
But again, I want to do this for all the sections. Just do a click and drag to select and insert a frame. So, this is a great way to sort of extend out your Timeline, Insert Frame, and just be aware that I've this nav folder. So I'm also stretching out all of this navigation here as well. So that's why I'm selection up so high, but again I'm selecting this big chunk here, Insert Frame. Now everything actually is going to have a slower pace to it and it's going to be easier to kind of see the transition.
So, Control > Test Movie and test it out, and now we can see everything happens slower. And again, somehow that motion tween with that curve, and it looks actually pretty nice. I have some variety but again it all started from the motion presets that I was able to select, use, and modify to my liking.
Find answers to the most frequently asked questions about Creating a First Web Site with Flash Professional CS5.
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.