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

Creating a First Web Site with Flash CS4 Professional

Creating sections


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Creating sections

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.

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

Creating sections

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.


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