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

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

Creating a Portfolio Web Site Using Flash CS4 Professional
Illustration by

Creating web site sections


From:

Creating a Portfolio Web Site Using Flash CS4 Professional

with Paul Trani

Video: Creating web site sections

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.
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      1m 7s
    2. Using the exercise files
      34s
  2. 24m 1s
    1. Understanding web design
      2m 44s
    2. Creating a Flash file
      3m 18s
    3. Importing a design from Photoshop
      7m 45s
    4. Optimizing the design
      10m 14s
  3. 13m 59s
    1. Dynamically loading an image
      3m 37s
    2. Loading random images
      10m 22s
  4. 47m 38s
    1. Creating menu buttons
      8m 18s
    2. Adding functionality to buttons
      8m 56s
    3. Adding navigation
      9m 45s
    4. Creating transitions
      12m 0s
    5. Simplifying code
      8m 39s
  5. 26m 11s
    1. Creating web site sections
      7m 41s
    2. Dynamically loading sections
      11m 7s
    3. Linking to web sites and email addresses
      7m 23s
  6. 29m 18s
    1. Setting up a portfolio
      12m 31s
    2. Adding functionality to thumbnails
      10m 10s
    3. Allowing for unlimited thumbnails
      6m 37s
  7. 41m 17s
    1. Benefits of using XML
      4m 42s
    2. Loading XML content
      4m 34s
    3. Sorting XML content
      7m 32s
    4. Displaying XML content
      7m 35s
    5. Using XML to create thumbnails
      8m 41s
    6. Displaying content with thumbnails
      8m 13s
  8. 25m 59s
    1. Creating and importing video
      9m 47s
    2. Adding a Full Screen button
      4m 15s
    3. Creating custom video controls
      4m 50s
    4. Adding functionality to video thumbnails
      7m 7s
  9. 9m 12s
    1. Adding audio to buttons
      5m 30s
    2. Adding audio to dynamically created buttons
      3m 42s
  10. 21m 19s
    1. Applying professional transitions
      9m 26s
    2. Creating a preloader
      8m 56s
    3. Publishing a web site
      2m 57s
  11. 3m 15s
    1. Reviewing the "corporate" Flash site
      1m 40s
    2. Reviewing the "artistic" Flash site
      1m 35s
  12. 12s
    1. Goodbye
      12s

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 Portfolio Web Site Using Flash CS4 Professional
4h 4m Intermediate Feb 17, 2010

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.

Topics include:
  • Optimizing and publishing a Flash web site
  • Designing a professional photo or video portfolio
  • Adding button interactivity
  • Adding functionality to portfolio thumbnails
  • Displaying content with XML
  • Adding audio to portfolio presentations
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Creating web site sections

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.


Expand all | Collapse all
please wait ...
Q: While following along with the course, I encountered the following error in Flash CS4: 
1120: Access of undefined property content_mc.
What is causing this error?
A: Flash is looking for something (the content movieclip) with the instance name “content_mc” but it is not finding it. Select the content movieclip on the stage. In the Properties panel give it an instance name of “content_mc”. Make sure there are no spaces before or after. That should resolve the error.
Q: What is the best strategy for integrating 720/60P HD video into a website? Would creating a blank page that opens in full HD resolution be the best way to view the full quality of the HD video file?
A: A video file that large would just be unreasonable for most users to open.  These settings are a good place to start: 600x400is
24-25fps
Audio: 128kbps
Codec: On2VP6
Bitrate level: 1,000kbps
Bitrate Encoding: VBR These are just recommendations, and can be modified to preference. Also keep in mind that in Flash, one of the buttons that can be added is a full screen button, which is part of the skins.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.

join now 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 Portfolio Web Site Using Flash CS4 Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
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
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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.