Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.