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

Creating a First Web Site with Flash CS4 Professional

Publishing for the web


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Publishing for the web

Once you are done creating your site in Flash, you then get the opportunity to publish it for the world to see. This is a very exciting step, because you can see my site is looking beautiful and I want to go ahead and add it to a webpage and then ultimately upload it. So I'm going to close that test file and I'm going to review the Publish Settings. So I want to go to File, down to Publish Settings, so then here as you can see, I do have different types that I can publish to. I do want to publish an SWF for sure, because that's made for the web, but what I can do in here is change the name as well. And even publish it to a different folder if I want to.

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

Publishing for the web

Once you are done creating your site in Flash, you then get the opportunity to publish it for the world to see. This is a very exciting step, because you can see my site is looking beautiful and I want to go ahead and add it to a webpage and then ultimately upload it. So I'm going to close that test file and I'm going to review the Publish Settings. So I want to go to File, down to Publish Settings, so then here as you can see, I do have different types that I can publish to. I do want to publish an SWF for sure, because that's made for the web, but what I can do in here is change the name as well. And even publish it to a different folder if I want to.

But in this case, I'm going to call it index, index being the homepage for the site, and that I also want to publish an HTML page as well. HTML page, I want to rename to index as well. So both files are called index and they are ready to be published. Let's take a look at some of the settings we have available. If I click this Flash tab, I can see that I'm given a quite a few settings in here. One of the more important options in here is the Flash Player version. In general what you would want to do is Publish to the lowest version of the Flash Player available.

But for the most parts, so many people have Flash Player 9 and 10, I'm just going to leave that alone, but if I do have different requirements, I can drop the Flash Player type down. In this case I'm going to leave it as Flash Player 10. You can see that I can crunch down the JPEG quality more, I can increase or decrease the Audio levels and I can also check some of these other options as well. Everything is pretty self-explanatory and you should really leave the defaults checked. So I really couldn't think of the case where you do not want to not compress the movie, but in general that's always going to be checked.

So everything looks really good in here. I'm going to go the HTML tab and in the HTML tab, you can see that I have other options as well. I can match the movie size (Match Movie). I can make it larger. But for the most part, you are not going to even need to touch any of these options either. So I want to make sure that Quality is High, it's going to play in a window and the HTML alignment is going to be set to Default. And all I need to do is click Publish. Now what happens is it generates the SWF file and the HTML file.

I'm going to select OK. Now what I can do is I can open up that HTML file in a program such as Dreamweaver. So I'm going to File > Open, to my Exercise Files folder. I'm going into Chapter_08 and there is my index.swf file that's created. If I double click it, it opens up that HTML file. Now I can actually crack the hood open if you will, by clicking this Code button here in Dreamweaver. Just to take a look at all the codes that was generated, that I didn't have to write but is generated, and allows me to play this Flash File on a webpage.

I am going back to Design View. You can easily select that SWF file and modify some of the settings further down here as well, just as easily. So these are the similar settings that were also in your Publish Settings dialog box. So all I need to do is go to File and Preview in Browser, I'll Preview in Firefox, there's my site. It opens and it doesn't look pretty good, and I like the black background. The only thing I'm going to do is recenter it.

So with my cursor set to this side, I'm going to add some CSS that is going to center all the content. So when I click that center button, it's going to allow me to center this side and any content that's on here. So I'm using Dreamweaver CS4. I can go down to Tag because that's what I want to modify. I want to modify the body tag and that's all I need to do. Anything with a body tag is going to be centered. That's all I need to do. Select OK. Go to File > Preview in Browser > Preview in Firefox. It asks me if I want to save it because I did not save it, and there it is, beautifully centered and looking great.

So as you can see it's really simple, all I need to do is check my Publish Settings in Flash, and do further modifications in HTML program of your choice, to really get it the way you want it. But as you can see the full experience is here, looking great and ready to be uploaded.

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