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

Creating a First Web Site with Flash CS4 Professional

Reusing functions


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Reusing functions

Now the goal is to have each button jump to its particular section with as little code as possible, because the less code, the easier it is to maintain and the less errors I'll have. So you will definitely find this useful. So let's just review, because I do have this instance name called home and it's an instance of the GenericButton. So the instance name is called home and then I have this GenericButton. Its instance name is called about.

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 First Web Site with Flash CS4 Professional
3h 8m Beginner Apr 15, 2009

Viewers: in countries Watching now:

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.

Topics include:
  • Manipulating images for the best results
  • Integrating assets from other Adobe products
  • Creating buttons with ActionScript
  • Embedding links to external web sites
  • Exploring text layouts
  • Customizing interactive contact forms
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Reusing functions

Now the goal is to have each button jump to its particular section with as little code as possible, because the less code, the easier it is to maintain and the less errors I'll have. So you will definitely find this useful. So let's just review, because I do have this instance name called home and it's an instance of the GenericButton. So the instance name is called home and then I have this GenericButton. Its instance name is called about.

So the about button does have code attached to it, if you will, and I just need the Home section to work. In fact, I'll go to Control > Test Movie. You can see if I click on About, I'll jump to the About section but nothing happens when I click the Home button. I even get in the Output panel 'The About button was clicked!' So I want to do the same thing for the Home button and all the other buttons. So let me close that. Let me scroll up to the top and click on that first keyframe there, where all my code is. I'm going to go to Window, down to the Actions to open up the Actions panel, and here is my code to make the about button work.

I can see the about instance has an event listener attached to it that listens for the CLICK. As soon as you click on that button, it's going to fire off this function called clickSection right here, and thus that gives us the trace statement that we saw on the Output panel. The About button was clicked! And it goes to and stops the About section. So again, I want to do the same thing for the Home button. So an easy way to do this is just to select all this code, right-click, Copy, and then just beneath that last function, I can click Paste and then modify this accordingly for the Home button.

So instead of listening for the about instance, I want to listen for the home instance. It's going to listen for the mouse event CLICK and then it's going to fire off this section. I don't want to fire off this clickSection this up here. I want to modify this function here. So I want to actually call this function here. So clickHome. I am going to double click on this word to select it and I'm going to copy it. I'm going to double click this word just to right-click and paste that name. So it's going to clickHome function, it's what's going to be fired off. It gives me a trace statement, where I want to change out the about word in here and type in home to replace it. It's going to trace out The Home button was clicked! and it's going to gotoAndStop the home label.

So this function is going to jump and go to the home label. This function actually calls and goes to the about label. If I minimize, click that gray bar to minimize the Actions panel, I can see that we have this home label and we have the about label. So let's go ahead and test this out now. I'm going to go to Control > Test Movie and let's watch this. I'm going to click on the About button. It jumps to the About section. Click the Home button, it jumps to the Home section and it's working great. I can click back and forth between them as many times as I want and it works great.

So let me close that test and let's go back to our code. Because what I want to do with this code, if we go back to the Actions panel, is I want to shorten it. Because, as you can see, I have duplicated a lot of elements. These are highly similar. Any time you find yourself duplicating code, you should really look at how you can modify them in order to make them shorter and I'm going to show you exactly how to do that. So what I want to do is I want to have this home event listener call this clickSection. So I'm first off just going to select it and click and drag it up to Line 5. I'm going to hit Return. So here are my two event listeners. I want both event listeners to call this clickSection. So I'm going to change this from clickHome to clickSection.

Now that this clickHome function is not being called, I can select it and then just hit Delete because it is no longer needed. Both this home and about instance are calling this clickSection function. Now I'm going to show you how to modify this for both buttons. I am going to start with this trace statement. I'm going to swap out this word for the target name, so I'm going to go ahead and add two quotes and within those two quotes I'm going to add two plus signs. So I'm concatenating some phrases together.

What I want to show in the output window, it's going to say the home or about section button was clicked. So within those two plus signs I want to type in this magic line of code, which I find very powerful, evtObj. So the EventObject hits target name so whatever called this function, grab its name, whether it's home or about, and put it right in here. So this is either going to say home or it's going to say about.

The next thing I want to do is make sure it jumps to that particular label as well. So I'm going to take the same phrase, I'm going to select it and I'm just going to copy it and I'm going to replace this about in quotes. I'm going to right-click and paste the EventObject target name. Now, not only is it going to trace out what was clicked, either home or about, but it's going to gotoAndStop either the word home or about. So what I want to double check is; if I minimize this Actions panel and go to the Timeline, I want to make sure that the label says home and the label says about.

So I have verified everything. I have gone back to this first frame. My code is looking good. Now I want to test it. I'm going to go to Control > Test Movie and now when I click on About, it jumps to the About section. Home, it jumps to the Home section. Very powerful! Again, the same functionality is going on here. You can check and can toggle between these two sections and yet if I close this test file, you can see my code is only half as long as it was, which is great, makes it easy to update.

In fact, let's go ahead and do that. Maybe we can have our other buttons work this exact same way. Well, my other buttons are Portfolio. Again, this is an instance name and for this Portfolio Instance Name button, I want to right-click and copy that event listener, paste it for the portfolio button, and the contact button, right-click, Paste. Now all of the buttons are calling the same function and as long as I have instances in my document called Portfolio and Contact and that there is labels on the stage called Portfolio and Contact, I should be good.

So let's double-check that. Minimize my Actions panel. Go to the Timeline. I can see here is my labels called portfolio and contact and here are my instance names called contact and here is my instance called portfolio. All right. We are looking good. Last thing we need to do is just go back to our Actions panel to make sure that's open, but really I just need to test my movie. All right. Let's check these event listeners now. About section, Home section, Portfolio section. There we are, it's looking great. It even says portfolio over here and then Contact. That's working wonderfully. Again, not a lot of code to make every single one of these buttons work. If I close down that test file, you can see how short my code is. Very powerful and I was able to reuse this function four different times or as many times as I want.

So your goal is to really condense your code down as much as you can to eliminate any errors and also to make it easier to update.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash CS4 Professional.


Expand all | Collapse all
Please wait...
Q: If I create a website using Flash CS4 on a Mac, can I edit it on a PC using Flash CS4?
A: As long the file is saved as a .FLA file with the extention ".fla" typed at the end of the filename when saving on a Mac, it should open with no problem on a PC.
Share a link to this course
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.

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 First Web Site with Flash CS4 Professional.

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


OK

Course retiring soon

Creating a First Web Site with Flash CS4 Professional will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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