Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
There are a number of ways you can create the design for your Flash web site. Of course you can use Flash to create the design, or you can use the program you are most comfortable in and then just import that design you have created. Now this works exceptionally well when creating the design in another program, such as Photoshop, Photoshop Elements, Illustrator, or Fireworks. As you can see I have this file open in Photoshop Elements and I have all the sections for my site laid out in various folders. So I can turn on the About folder, I can turn on the Portfolio folder to see the Portfolio section and then you can also see the Contact section in here as well.
So everything is laid out in here and I have done nothing tricky at all in this version of Photoshop. So all I need to do is make sure it's saved and this document is saved and then I can go into Flash. So here I'm in Flash, I just have a blank document opened. It's an empty document, there is nothing in it, and all I have done to create that is I went to File > New and just created a new Flash file. But what I want to do now, since the layout currently isn't in here, I want to go ahead and import it. So I'm going to File > Import down to Import to stage. From here I want to go into the Assets folder, into the Design folder, and want to locate that design file we just reviewed.
And if just for reference I can expand this out and show you all different formats that Flash can accept and as you can see I can import Illustrator's files, freehand files, pink files, Photoshop files. The bragging list is quite long. But in this case, it's just going to be a PSD file that I'm going to open. So I'm going to select Open and then I'm given this import wizard. This is great, because it allows me to control how I want these different layers imported and you can see that they mirror the same folders and same individual layers that were in my Photoshop files.
So all I need to do is if I want to include this Menu folder, is I need to check that box and then it will import this folder. And I can twirl this down just to take a look at the content within it. So I can see that I have this Contact layer and I can control how it's imported on the right side here. So I don't want to import it as a flattened Bitmap image. I want to import it as editable text, since it is text, and I can see it's changed the icon here.
So I want to do that for all of these text elements in this folder. So now this editable text I can edit once it's in Flash. I'm going to twirl that back up and then I'm going to go to the Contact section. I'm going to make sure it's checked, because I want it to import. And in this case I actually want to create a movie clip for this layer. I'm going to explain that more, but in general what a movie clip is, it's a self contained item that can be graphics, it can be sound, it can be a video, it can be anything. It is the most flexible type of symbol that you can have in Flash.
So that's why I want to import it as a movie clip. So when in doubt, make something a movie clip. So again, the entire Contact section is going to be a movie clip and if I twirl that down I can see this movie clip is going to contain all of this subject matter. I want to make sure that the text is editable. I want to import this Contact man, which is actually going to be a bitmap image with editable layer styles. Because I want to be able to go in maybe later on and change that content there. So I'm going to make it an editable file.
With this panel as well, I want to make it editable paths and layer styles, because this is actually vector shape from Photoshop. So I'm trying to keep all of my elements as flexible as possible when importing them. Okay, lastly for this movie clip, I want to give it an instance name. So here I'm giving it a unique name, so I can reference it in ActionScript. So in general I'm going to give it a unique name of Contact_mc to be used later. I don't have to do this, but this does have to be done if I want to control it with code. So now that the Contact section is done I want to do the same for the other sections.
Make sure Portfolio is a movie clip and it has an instance name of Portfolio_mc. Twirl that down. Everything looks pretty good. I'm going to bring in this frame as in editable path and layer style, because again this is a vector shape in Photoshop and I want to make sure all my text is going to be editable text. Twirl that back up. The About section, I'm going to check that.
I'm going to create a movie clip for this layer as well. About_mc. Mc stands for movie clip. That is its instance name, so I can reference it later. And notice how I have kept the registration point in the upper left for all of these. That's just a good practice. This is basically the rotation point if you will, but in general, most of the time you want to leave it in the upper left. In the About section, I'm going to make sure the text is editable. This billboard, I do want to make sure it's bitmap image with editable layer styles, and this panel as well, editable paths and layer styles. So everything is pretty darn flexible now. Lastly, I want to do the Home section. I'm going to create a movie clip for this layer. I'm going to call it Home_mc, twirl that down.
Bring in all of the text as editable text, and this Home man is going to be an editable layer style, as well as this panel here. And now that section is looking pretty good. The top bar, I'm just going to go ahead and create a movie clip for this layer as well. In the Background, I'm going to go ahead and create a movie clip for this layer too. This time I'll only give this an instance name of bkgd background_mc.
Now I'm calling everything that's movie clip an _mc for its instance name, and this is just a common practice, but it isn't necessary. In general, I'm just defining that this is a movie clip for use later. So everything is looking really good as I click back up through all of them. This is the folder. That's the only folder that is going to be a folder in my Timeline as you will see in a second. The rest are movie clips. Now I want to direct your attention down to this lower portion. So I want to convert all the layers to Flash layers. So all the Photoshop layers are going to be Flash layers, and I want to place all these layers at their original positions. So everything is lined up where it should be. And the last thing I need to check is this.
I want to set the stage size to the same size as the Photoshop canvas, which is 1000 pixels X 700 pixels high. I'm going to go ahead and select OK. And it brings in all of my elements onto the stage. In fact, I'm going to click here and view everything in window. So Fit in Window, so we can see all of the content. And everything is overlapped on top of one another. But if I expand out this Timeline, we can see everything that was imported.
Just like I mentioned earlier, this Menu folder is the only thing that came in as a folder, and I can twirl that up, but we can see that each one of these layers is a Menu item. As I turn those off, and turn them back on, you can see what they are. I'm going to go ahead and twirl that up. You can see all the other various sections. Let me go ahead and turn off some of these, except for the Home section, and if I select this Home section, and direct your attention over the Properties panel, you can see that its instance name is Home mc.
So now I can control this. It's setup to be controlled with ActionScript. And all of these sections are setup that way. About mc, and this is the way we want to work. We want to make sure everything comes in correctly, Portfolio mc, and then Contact mc. Like I said, I brought it in as a movie clip. It says it's a movie clip and its instance name is Contact mc. Okay, the last area I want to point us to here is the Library panel. So if I go to Window, when twirl the way down, you will see Library. I'll just open that up. I can see that I have this Design psd assets folder. So this contains everything that I just imported.
If I twirl that down, here's all of the content. So if I want to see what's used in the Home section, I can twirl that down, and see that there is the Adobe Certified Expert logo, and some of the other elements. And again, these are all movie clips, because that's what I defined them as when I imported them But I really love how it kept everything organized in the Library panel, as well as everything organized in the Timeline panel as well. So really your goal is to design in the program you are comfortable with, import it, and then you'll be ready to go to start animating and adding the functionality to your web site that you need.
Find answers to the most frequently asked questions about Creating a First Web Site with Flash CS4 Professional.
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.