Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.