Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Publishing a web site

From: Creating a First Web Site with Flash Professional CS5

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.

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.

Show transcript

This video is part of

Image for Creating a First Web Site with Flash Professional CS5
Creating a First Web Site with Flash Professional CS5

34 video lessons · 28337 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 Already a member? Log in

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

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.