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

Creating a First Web Site with Flash Professional CS5
Illustration by

Publishing a web site


From:

Creating a First Web Site with Flash Professional CS5

with Paul Trani

Video: Publishing a web site

Once the site is optimized, we can head in the final step, which is actually pretty exciting, and that's publishing our site. So I have this index.fla open, and I am going to File, down to Publish Settings and notice that it's going to publish out and an SWF file and HTML file. Well, quite frankly, I don't want to publish out an HTML file, and I am going to have a different file to do that, but what I am going to focus on is this SWF file. So with that checked I can click on this Flash tab, and just kind of review the settings just know that this does require Flash Player 10, and that's is the version the user needs to see your content, but a good 95+% people have the Flash Player, so that's hardly an issue.

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 Professional CS5
2h 45m Beginner Jul 27, 2010

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.

Topics include:
  • Understanding web design
  • Creating buttons and web graphics in Photoshop
  • Formatting text with the Text Layout Framework
  • Using the Timeline
  • Creating a custom looping animation
  • Loading images in a gallery
  • Creating invisible buttons
  • Adding music and video to a site
  • Customizing video playback controls
  • Optimizing and publishing a web site
Subjects:
Web Interaction Design Projects
Software:
Flash Professional Illustrator
Author:
Paul Trani

Publishing a web site

Once the site is optimized, we can head in the final step, which is actually pretty exciting, and that's publishing our site. So I have this index.fla open, and I am going to File, down to Publish Settings and notice that it's going to publish out and an SWF file and HTML file. Well, quite frankly, I don't want to publish out an HTML file, and I am going to have a different file to do that, but what I am going to focus on is this SWF file. So with that checked I can click on this Flash tab, and just kind of review the settings just know that this does require Flash Player 10, and that's is the version the user needs to see your content, but a good 95+% people have the Flash Player, so that's hardly an issue.

All my optimization is done. In fact, the only thing I don't need is this Generate size report. So I can uncheck that and be good to go. And of course, we want to make sure that we're compressing the movie, but this is set by default as well. So I am going to go ahead and click Publish, and that creates the SWF file. Now remember this SWF file is called index.swf. So let me just minimize Flash and here is my SWF file that was created.

Okay, so that file is ready to go. What I want to do next is open up this preloader.fla. So I'll open up this file, and remember, before I even go into my Publish Settings, I am going to take a look at my actions, because we need to note that this file does load in the .swf that we just made. So really, this is the first file. So I am going to go in to Publish Settings and in this case this is what I want checked is the .HTML for this file.

In fact, I am going to rename it to index. So from here this file is going to create this index.html, and it's going to load in this preloader.swf. So lets checkout the parameters in the different properties for this HTML file. I am going to click on this HTML tab and overall you're really not going to have to adjust any of these settings. But you can, if you want, you can always adjust the dimensions of your site. Say for instance, if you wanted to sort of be at 100% within the browser, you can change that there. But overall I am going to keep the quality high and keep everything else set up.

So in general, these are my various properties that I am going to include with HTML file. So I am go ahead and click Publish, and it generates, again, these two files. So I'll click OK. I'll save my file. I'll minimize Flash and right in here, we can take a look at those files. So the index.html file actually loads in the SWF file, and the SWF file loads in this index.swf file. So I definitely need these three files.

My index.swf contains all the content. So what that means is that it contains this textLayout file as well as this images folder. So it loads in all of that information. So I need to make sure I upload all of these files to my web server in order for my site to work. And then let's go ahead and just do one of quick check. I'll double-click on this index.html. (Music playing) Looks great! I can test it out. Go to my different sections, but now I am just going to do some final tweaking to this HTML file.

Because you notice the title says Preloader. So I probably want to change that, and another thing is that my content really isn't centered, and I kind of like to center it within the browser regardless of how wide or narrow the browser is. So I am going to change those two settings really quick. So I am going to close this HTML file and what I can do is I can load this HTML file up in Flash. So I just did a right-click and I can open it with Flash.

Here is all the HTML code that I didn't have to write that Flash generated. It gives me all the parameters and all the various properties that I have defined earlier. But right up here at the top, this is where I am able to change the title. So Jill Graphic Designer For Hire is what I can type in here for the title. And the next thing I want to do is I want to center it. So I can always edit this CSS as well. But this is just a quick way to center an image or pretty much any thing.

I can do a text-align: center. End with the semicolon. So I am centering the Flash content as well. And again, here is all my parameters and all that good stuff. I'd also like to point out that if your user just happens to be one of the very few people that don't have Flash, it will actually display a graphic allowing them to get the Flash Player. So they are never out of luck. They can always download the Flash Player, but in general I'd say this is good to go. So let's save this file. I'll close it.

Let's minimize Flash and check out our final file. (Music playing) There we are Jill Graphic Designer for Hire. The content is always going to be centered in the browser. My site is optimized and ready to go. So at this point all I need to do is take all of these content and upload it to web server and send that URL to my friends and potential clients.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash Professional CS5.


Expand all | Collapse all
please wait ...
Q: I followed all the steps and suggestions in the "Adding a progress bar" video, but when I add the progress bar to my web site, I can’t remove it once the index.swf file loads up. The progress bar remains on the homepage and the rest of the pages. How do I make it disappear once the site loads?
A: To make it disappear, just make sure the progress bar is only in frame 1. If it’s on its own layer, then right-click on the 2nd frame in that same layer and select "Insert Blank Keyframe." That will make it disappear.
Q: Despite following the steps in the "Adding a progress bar" video, I cannot figure out how to keep the progress bar from appearing on a movie that has finished loading. How can I make the progress bar disappear?
A: Just add the red line below to the preloader.fla file. This will make the progress bar invisible: 
"function contentLoaded(evt:Event):void { //Optionally change to a clip holder and set progressbar visibility. addChild(contentLoader); progressbar.visible = false; }"
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.

join now 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 Professional CS5.

Return to your organization's learning portal to continue training, or close this page.


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

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.