New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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 · 28147 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

Are you sure you want to delete this note?

No

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.