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 I have my design in place, I can then start mapping out all the various sections for this site. I'm going to do this by spacing out all of the content and using frame labels, so the entire site is going to exist within this timeline. So the first thing I want to do is I want to extend the timeline for all of these layers. So I'm going to go down to frame 40, and I'm just going to click and drag to select those multiple frames. This allows me to do a right-click and then insert a frame for all of those layers. So it's going to extend the timeline for all of those layers. So let's watch it. Insert Frame and now it extends the timeline.
Currently, nothing is happening because there is no animation going on, but I have extended the timeline and if I hit the Enter key, I can watch it play through. But in general this allows me to space out all of my sections within this area. Now what I want to do first off is I'm going to add a new layer now, because I want to add a layer that has frame labels for each of the sections. So I'm going to go down here to the bottom of the Timeline panel and I'm going to click New Layer, and I actually created a new layer inside of this folder.
But I can click and I can move any layer I want just by clicking and dragging it. So I can drag this layer outside of this Menu folder and put it up on top, the very top layer, I want this to be my Actions/Labels. That's what I want to call it. Notice how it actually cuts off the name. Well, if I just roll over this very edge, I can grab that and extend that out so that I can read that label for that layer.
All right, here's my Actions and Labels layer, and what I want to do here is I want to add some various labels to different parts of this timeline. So starting with this first frame, I'm just going to click on that first keyframe there and in the Properties panel, under Label, for the name I want to type in Home, and then hit Enter. As soon as I hit Enter, I can see that it says Home, right here. So this is my Home section. The other sections we have are the About section, Portfolio, and the Contact section. So let's go in ten frames to the tenth frame, and what I need to do is I need to insert a keyframe, because on this keyframe I want to go ahead and add a new frame label. So I'm going to right-click and I'm going to go to Insert Keyframe this time. And it gives me this empty dot that inserted a keyframe. It's a blank keyframe. If I select it, I can go over to my Properties panel under Label to the Name and I can type in about and hit Enter. So now I have two frame labels, Home and about.
I am going to do this two more times. So in Frame 20 I'm going to do right-click, and Insert Keyframe, and it inserts the keyframe and allows me to add a label in Frame 20 as well, Portfolio. And frame 30, right-click, Insert Keyframe, and I can type in Contact in the Properties panel under the Label section. So those are all my sections. It's mapped out correctly.
Now all I need to do is adjust my content so it appears in that defined area. So let me close this Menu folder, and now I want to go ahead and extend out the appropriate content to the appropriate area. So I'm going to turn off Content, and I'm going to turn on the Home section, and turn on the About section. It really doesn't matter whether these are turned on or turned off. What I want to do now is I want to grab the appropriate section and in this case the About section. I'm going to grab that keyframe just by doing a click and drag, and dragging it down ten frames in. Now it exists at this point in time.
In fact, let me turn off these other two layers just so see you can see it. There is my Home section, here is my About section. At frame 10 we see the About section. But look what's happening, as these two are actually on top of one another. I can still see, if you look right there and if you look at this character here, he is the man on Home page, so it actually shows both at the same time. So what I need to do is I want to make sure the Home section doesn't exist at this point in time. So what I need to do is click in that frame there, just right underneath the frame label About, and do a right-click and this time I'm going to go ahead and insert a blank keyframe. So that item will no longer exist and you will see that silhouette disappear.
Insert Blank Keyframe, he goes away. So one second he is there, next second he isn't and that's what I want to do for all these sections, make sure the appropriate movie clip exists for its point in time and then the next ones exist in its point in time where it needs to. So let's go ahead and take the Portfolio section, I'll turn that on, I can grab that keyframe and click and drag it down to frame 20, the Portfolio label should be right above it and now it appears at that point in time.
I did the same for Contact, click and drag that down, just like that. And again, just like I did before, if I don't want the About section to exist beyond frame 20, I just do the right- click, Insert Blank Keyframe. Same thing for the Portfolio section. I don't want it to exist in the Contact section, so right-click, Insert Blank Keyframe. And there we are. So now if I just jump around in this timeline, I can see here's my Home section, my About section, my Portfolio section and my Contact section. Notice how you don't see it here, because I have it turned off, but if I turn that on, we can see out Contact section. So this is great, great for my site, great to set it up this way, with frame labels I can easily see all the sections defined and what's in those particular sections, and this is real easy to navigate the site.
But now watch what happens when I hit Play. In fact, if I do a Control > Test Movie, I can watch the SWF, and I can see it at its actual size. We can see it's flashing through all of the sections, which we know is unacceptable. I actually wanted just to stop on that Welcome frame, right here. So this is your introduction to ActionScript, if you are not familiar with it. I'm going to select that first frame and I'm going to go to Window > Actions, to open up the Actions panel. Here is my Actions panel, and all I need to do here is type in the word stop();. This is the code I want to write if I want to stop a timeline. So let's take a look what happened. Because I put it actually in this very first frame and you can see there is a little lower case 'a' that appears, it says "hey, you know what, there is an Action that exists here and it's just a stop action," because I want the timeline to stop when it hits this first frame.
So let's go ahead and test this now. I'm going to go to Control, down to test movie, and we can see that it has stopped on the first frame, perfect, ready to go, turn off all of our sections, our setup to where I can start adding some various buttons and the navigation here, but you can see how easy this is and how intuitive it is to basically add labels and then add content to these sections as well. It makes it really easy to make and to develop a Flash web site this way.
Now there are other ways to do it, but this is the most user friendly.
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.