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

Adding functionality to buttons


From:

Creating a Portfolio Web Site Using Flash CS4 Professional

with Paul Trani

Video: Adding functionality to buttons

Once you have the buttons created, the next thing you want to do is add functionality to them, in other words, make them do something. That's what I want to do here is I want to make these four buttons work. The first place you need to start is to give them a specific name, an instance name. So I'm going to double-click on this content movie clip to enter inside of it and notice here are my buttons. I want to go through and give each one an instance name, starting with this one right here, the John Doe.
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 buttons

Once you have the buttons created, the next thing you want to do is add functionality to them, in other words, make them do something. That's what I want to do here is I want to make these four buttons work. The first place you need to start is to give them a specific name, an instance name. So I'm going to double-click on this content movie clip to enter inside of it and notice here are my buttons. I want to go through and give each one an instance name, starting with this one right here, the John Doe.

It is the home button. So in the Properties panel, I'm going to give it an Instance Name of home_btn. Don't use any special characters or any spaces. It should really just be one word _btn. About is going to follow the same pattern, btn, video_btn and portfolio. So really be mindful of what you're calling each button because that's probably where the most errors happen is with instance names. Okay.

So I'm going to start off with this home button. So I'm going to remember home_btn. But let's be aware that we are actually inside of the content movie clip. So I need to click back out on Scene 1, because on my main Timeline, all my ActionScript is going to be in this frame. So what I need to do is I need to give the content movie clip an Instance Name. So with the content movie clip selected, I'm going to go ahead and type in 'content_mc,' just like that. All right.

Now select that first frame in your ActionScript actions AS layer and go to Window and open up your Actions panel. Here is mine, loading in the random background. The first thing I want to do when I open up my Actions panel, since I always want this code to appear, I want to pin my code. So it's just pressing this pushpin. Now the code always stays up, regardless of what I click on. Next thing I want to do is just add a couple of lines.

Two forward slashes will enable me to add a comment. What I want to do is just go ahead and type in plain English what's going to happen. So in this case, I want to Listen For The Click Of The Buttons. These are going to be for all the buttons. Now, the first button I'm going to deal with is going to be the home button. Let's remember that it's inside of the content movie clip. So content_mc. That's my Instance Name. Inside of there, so I need to separate that with a period, is the home_btn.

I'm going to hit period again. What I need to do is I need to listen for the click of the home button. So I need to add an event listener. Again, I love the code hinting I get in here, because as soon as it highlights right here, I can go ahead and hit Return and it adds it. I am also given additional hints that can be pretty convoluted, but they are in there, because it is asking me for what type of listener I'm listening for. Well, I'm listening for the MouseEvent.CLICK to be more specific.

The great thing about how setting up listeners works is I can not only listen for a click, but I can also listen for many, many different things and you can peruse this at your leisure, but, you know, whether it's MOUSE_OVER or MOUSE_OUT, MOUSE_WHEEL, whatever it may be, it's all available right in here. So, in this case, it's just going to be the CLICK that I'm listening for. I'm going to add a comma and it's going to go ahead and listen for some sort of Function is what it's going ask for next. I'm just going to type in 'homeClick.' All right.

So homeClick is going to be a function that fires off when this button is clicked. So I need to create this function. As you start typing ActionScript, notice you'll quickly run out of space. Well, you can always minimize this panel off to the side, just by clicking that arrow, and now you have more room. All right. Now again, I want to create a function called homeClick. So just below that, function homeClick. It's going to accept a MouseEvent and it's going to be void.

as in it's not going to return anything. But in general, this is the structure for a function. Anything within these curly braces is going to execute when this function is being called and this function is being called when you click on the button. Now, I can go ahead and add whatever I want to add to this when it gets clicked on. And what I'm going to do now is just add a trace statement. Again, this is just for testing purposes to make sure everything is working, homeClick.

Go ahead and listen for and just print out in the Output panel, this word homeClick, just so I know that it's working for testing purposes. All right. It's looking pretty good and anytime you type a lot of code, feel free to hit this little Check Syntax button and it'll tell you that it contains no errors. Let's go ahead and test the movie. Now, here is my home button. So if I click on it, I can see that it says, I will move this out of the way, it says 'homeClick,' right there, so it's working out perfect and, of course, if I hit it multiple times, that's working great.

We're doing quite well. In fact, I want to go ahead and do the same thing for the other buttons. So I'm just going to condense this down. You can have line breaks all you want. If you want to condense it down, you can go ahead and remove the spaces if you want, but in order to make the others, it's going to follow the same format. So I want to just go ahead and Select All of this and then Copy it and then I'm just going to paste it right below. So I'm going to do the About button next. So for content_mc inside of content, that movie clip is going to be an about_btn.

Of course, it has an EventListener. I am listening for the click. Well, I don't want it to fire off this function up here. I want to create a new function called aboutClick. aboutClick is going to be right here. Then it's going to trace out aboutClick, just like that. Two event listeners written for two buttons, and again, it's the same process of just copying and then pasting and then changing, so video_btn, videoClick.

It's going to call this function, called videoClick. Oh, see? I almost mistyped right here. Be really careful that you don't mistype, of course. What you can always do is do a Copy and then Paste, literally, which is usually what I like to do, because it eliminates, or helps eliminate, errors, videoClick. One last time, for the portfolio_btn. I'll just keep that short and call it 'portClick,' but I want to be aware that that's what this function needs to be called, just like that, and then portClick. All right.

I want to be aware that these instance names exist inside of the content movie clip, but let's just go ahead and Check the Syntax. Great! Doesn't contain any errors, but let's go ahead and test this. Do our true test by clicking on, sure enough, our home button, then on the about button, works great, video button works great, and then, of course, the portClick as well. So again, if I just close this and go back to my code, what you're going to want to do is just write event listeners and that's all you need to do in order to make a button work, for the most part.

The great thing about event listeners is you can listen for pretty much anything, whether it's the clicking or rolling over or something, or potentially, even, say, listening for a video to complete, or until it's done playing, or a graphic to load. It's all done with event listeners. So as soon as you get comfortable with writing event listeners, you'll be able to do so much with them. Now, that the buttons are set up, I'm ready to make them navigate to their particular section.

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.