Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Flash and ActionScript are ideal for creating flexible, easily updatable web sites that are both unique in design and small in file size. In Creating a Portfolio Web Site Using Flash CS4 Professional, Adobe Certified Instructor Paul Trani shows how to exploit Flash to create a web site that showcases work to clients and prospective employers. Find out how to add dynamic navigation, animation, and video to a page, and how to load, sort and display XML that enables portfolio content to be updated without opening Flash. This course is designed to take your existing tweening skills and gotoAndPlay code and walk away with a fully functional Flash site. Exercise files accompany the course.
Now I would like to get into creating content for these various sections, because as you will notice, nothing is in this area. But I want to go ahead and create the content, and what I have used to create this content is Photoshop. So in the Assets folder, in the design folder, you will see three PSD files that all pertain to the various sections. So I am going to go ahead and open those up with Photoshop. And here are my three sections, already designed out, I will just start with the About section.
Now, I notice that there is this text layer, I want to import that text layer, and I want to import just this simple Blog button that just contains this shape right here, and then also contains this text here. So that's my About section. I want to import it, and I will start with that one first. Again, I am just going to Save this file, nothing tricky going on there. But what I want to do is, in Flash, I don't want to import the content directly into this FLA file. I want to create a new FLA file, a new Flash file, and import that design, because when the user clicks on this button, I then want to load in that SWF separately.
So if I divide up the content this way, it just makes it more manageable and just easier to work with. So I am going to create a new file, File>New. It's going to be a new Flash File (ActionScript3.0), select OK, so these are my default settings. But all I need to do is first Save this file, and I will go ahead and save it into Chapter 04, and I will call this 'about.fla.' All right. Here I am.
If I click on Timeline, you can see that there is nothing in this file, and now I can go ahead and Import to Stage the PSD file. And Assets/design/Section_About.psd, select Import, and I get this wizard, which is nice, because I want to control how each layer is being imported, starting with this top one. This Text layer, well, I want to import it as Editable text.
This Blog button, I do want to create a movie clip for this layer, and if I twirl that down, I want to make sure this text is editable and that this is just a Flattened bitmap image. So in general, this is just going to be one movie clip. I don't need to import the background, because the background is already going to exist in the index file that this file gets loaded up into, so I will just uncheck that.
Down here at the bottom, I want to place everything in its original position, convert layers to Flash layers, and then I want to set the stage size to the size of the Photoshop canvas. Select OK. The content gets imported, and I can just change the color of the stage, the background. You can see, there's my text. Reads great, and I can always change anything I want in here now, because this is editable text, and then here's my button, that is of course known as the Blog button.
So that is set up. I will just Save this file. And now I want to go ahead and open up the next file, the Portfolio section. Portfolio section has more going on. In fact, if I turn off these layers, just to show you this Thumbnail layer, notice that it's going to contain multiple thumbnails. When you click on a thumbnail, a larger image is going to load, and so will more text pertaining to this image.
So that's how this Portfolio section is going to work. So I have done all the design work in Photoshop. It's looking really good. I will just Save the file. I am going to go into Flash. Just like I did for this About section, I am going to create a New File, and I am going to Save this file as portfolio.fla. Now I am going to File>Import> Import to Stage, this portfolio.psd file.
Select Import, and again, I get similar settings. I want to make sure my text is going to be editable, in case I need to change it later. This main image, I will just leave as a Flattened bitmap image. This thumbnail, I will leave as a Flattened bitmap image. And the background, again, I don't want to import it because that background is already in my index.fla file that this gets loaded into. And then just make sure you set the stage size to the same size as the Photoshop Canvas.
Select OK, and there it is. Everything gets positioned accordingly, and I can see some text down here as well. Again, I can always change that background color to see anything else that I might not see initially. I will go ahead and Save this file. Last section is going to be the Video section. Again, this is in the same design folder. I have these thumbnails. As you can see, I am turning them on and off, and then here is my VideoPlayer folder that contains this video frame, and then just this little Cross element, the design element.
So this is good to go. I will just make sure it's saved. I will go back into Flash and create my New file, and I am going to Save this file in the same folder, and I am going to call this video.fla. I am going to import this file as well, video.psd. So again, I am using this PSD file and I am going to control its import settings. The VideoPlayer, I am going to go ahead and just create a movie clip for that layer.
This vidThumb1, well, I want to create a movie clip for it, vidThumb2, create a movie clip for it as well. Lastly, uncheck that background, and down here, I want to make sure both of these are checked as well, so the stage size changes. Sometimes you will run into this. It says one or more library items already exist in the document. I don't want to replace any existing items, but what's happening is these two files have the same name, and they kind of want to overwrite one another.
So in general, Don't replace existing items, if you ever get that warning, select OK, and it looks like everything is in place. This is great. So this section is set up, and I can Save it as well. So those are my multiple sections all set up as a separate file in Flash, and when I select the appropriate button, that's when I want to load in the appropriate section, and that, obviously, would be my next step.
Find answers to the most frequently asked questions about Creating a Portfolio Web Site Using 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.