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

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

Creating a Portfolio Web Site Using Flash CS4 Professional
Illustration by

Adding functionality to video thumbnails


From:

Creating a Portfolio Web Site Using Flash CS4 Professional

with Paul Trani

Video: Adding functionality to video thumbnails

Now what if you want have a video portfolio? Well, it's going to be set up in a similar fashion as an image portfolio would be set up, in that you are going to have thumbnails that serve as buttons that then change content in the main area. So that's how this is set up. I have these thumbnails on the side, and I want them to play the appropriate video right in here. So first thing I am going to do is make sure these are buttons. Currently, they are just movie clips.
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

Adding functionality to video thumbnails

Now what if you want have a video portfolio? Well, it's going to be set up in a similar fashion as an image portfolio would be set up, in that you are going to have thumbnails that serve as buttons that then change content in the main area. So that's how this is set up. I have these thumbnails on the side, and I want them to play the appropriate video right in here. So first thing I am going to do is make sure these are buttons. Currently, they are just movie clips.

So I am just going to click and drag this movie clip into the LIBRARY, and I convert it to a Symbol, and I am just going to call this vid button. I am going to make sure it says Button as the Type, select OK. Same thing for this second thumbnail, vid button, and this is vid button 2. I am going to make sure the Type is button, select OK, and now they are buttons, but now I have to give them specific names. I am going to refer to these names in the ActionScript.

So let me just go ahead and minimize that LIBRARY panel, because with this first button selected, I am going to go the PROPERTIES panel, and for the Instance Name, I am going to type in vid1_btn. So that's the first button's Instance Name. Second button is going to follow the same format, vid2_btn, just like that. And now I am going to go ahead and make this first button work. So vid1 button, in fact, I am going to do a Command+C to copy that. All right.

I do have this empty LAYER down here, so I will just delete that by hitting that trashcan, and I want to make a new LAYER at the top, and I am just going to call AS, for ActionScript. I am going to select that first frame. I am going to open up my Actions panel, and the first thing I am going to do is just Pin my code by selecting that Push Pin. Now my code will always stay up, regardless of what I have selected. All right. So I am going to type in a comment, and I am going to Listen for the buttons to be clicked on, and then I am going to do something.

If I do a Command+V, there is my vid1_btn. I need to add an EventListener for this button. So again, as soon as it highlights, you can hit Return, and it will add it. Now I can add the Type. The Type, well, it's going to be MouseEvent.CLICK, so I am listening for the click of this button, and I am going to add a comma. So once this is clicked on, I need to go ahead and reference a function.

So the function I am going to make is going to be playvid), parenthesis to close it, semicolon, and now I can go ahead and create my function, playvid. It is going to accept a MouseEvent. And I can kind of tab through, I am just using my arrow keys to select MouseEvent, and this is the structure for a basic function. Within these two curly braces, is what it is going to execute when you click on this button.

So what I need to do is when you click on the button, I want to change the Source of this video. Okay, but notice this video is actually inside of a movie clip, so I have just minimized this ACTIONS panel just by clicking on that gray bar, kind of move it down out of the way, so I can select this movie clip. So in order to target this movie clip, I need to give this movie clip an Instance Name. I am just going to call it myVideoPlayer.

myVideoPlayer, so I am going to do a Command+C to copy that. I am going to paste it right in my code. MyVideoPlayer., well, I am just referencing the movie clip, I am not - if I minimize this again, I am not pointing to that FLV component yet. So I need to double-click to enter inside of that movie clip. And I need to select that FLV. So now I need to give this FLV component an Instance Name as well. So myFLV, technically, it is the FLV playback component, but I do want to remember this, in fact, I will copy it, Command+C. Go back to my ACTIONS panel.

I will open that up and then paste it right in there. So myVideoPlayer.myFLV. I am targeting the right thing. Now, I need to change its Source. So I will do a period and type in Source and I am going to make it equal to the appropriate video. All right. Well, where is that video? Well let us take a look. If I go out to my video folder, I can see that this newport.flv is what I want to target. So again, I am right here. I want to go into the video folder and target that newport.flv, so let me go back and right within these Quotes, video/newport.flv. All right.

I need to do one more thing, because I want to make sure it plays as well, I can change the Source, but I am not telling it to play yet. Well, I am just going to copy this and paste it below, because not only am I changing the Source, I am also going to tell it to play. Now, I am going to go ahead and test this, Control>Test Movie, so when I click on this thumbnail, it's going to change the Source of this file and then it's going to play it. (Movie Playing) Great, works like a charm. In fact, I want to do the same thing for this thumbnail as well, but the first thing I need to do is I need to make sure that video exists.

So I am going to go to my Assets folder, into video, and I am going to take this tahoe.flv, and I am just going to right- click, and Copy it, and I am going to go ahead and put it in the appropriate folder, right where the newport.flv file is. So again, it's in the same location, so I can go back into Flash, and I want to do the same thing for vid2_btn. So it's really just a matter of copying all this code, Command+C, and then pasting it below.

Now, I can start changing the Instance Name to vid2_btn, and playvid2, which calls this function, playvid2, and now I can change the Source to tahoe. It's that easy. It's just copying that code and pasting it again for the second thumbnail, and now when I click the second one, (Video playing) it plays that video. I can come back to this first one and play it. (Video Playing) So from here, I can add as many thumbnails as I want for however many videos I have, so you could really start to build out your portfolio.

But again, Flash makes it easy. It's just a matter of adding EventListeners, just like you would, any other button.

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.