Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Once you have created some buttons, the next step you would want to do is make the buttons work by adding some ActionScript code to them. And that's what I'm going to do with these buttons here. I'm going to make it so when you click on the About button, it's going to jump to the about label. So that's the code I need to write. But the first thing I need to do is make sure it has an instance name. In fact, I want all of the elements I want to listen for to have a unique name. That's what a unique name really is. It's an instance name is what it is.
So I'm selecting the generic button that's underneath the Home text. I can see that it's an instance of the GenericButton and for the instance name, which means the unique name, I'm going to give it the name home. That GenericButton is now the home button. For this About GenericButton, I'm going to make sure it has an instance name of about. Selecting the Portfolio button, I'm going to call it portfolio. At this time you are probably noticing a pattern. This last instance name is going to be Contact, and now each instance of this GenericButton has a unique name. So now I can listen for it, because I want to do is I want to listen for the click of this about instance and I want to jump to the About section. In fact, let me scroll up, here is my about label that I want to jump to.
All right. I'm going to add this code in the very first frame, because I want this to happen immediately, as soon as you come to the site. So in this first keyframe, I'm going to select it, go to Window, down to Actions. Now, this is where I'm going to write my code. So we are going beyond a stop action, and we are going to write an event handler. So bear with me here. This is some great powerful code and as soon as you learn how to write code by handling events and listening for events, you can listen for any type of event you want, it's really powerful.
First thing I'm going to do is I'm going to do with two forward slashes. This allows me to write a comment in here as to what's going to take place. So I'm going to do two forward slashes and I want to handle events for buttons. So this code here is going to handle events for buttons. So a click is an event, a rollover is an event, and I'm going to handle the events for buttons in this code right here. So Flash will ignore anything with these two forward slashes; it's a way to comment your code, to basically explain what's going to happen.
So the next thing I need to do is define what I want to add an event listener to. So let me just type in about. about is the instance name. Here is my instance name. It's called about and I'm going to add an event listener to this instance name. It's going to listen for something specific. In fact, since I did this open parenthesis, I can see that it's going to listen for a certain type of mouse event. So I'm going to type in MouseEvent. It's going to listen for a mouse event called CLICK. There it is.
Notice how I always get this pop-up as well. That allows me to select any one of these items as well. In this case, all I need to do is escape out of that, since I have already typed in CLICK. Let me expand my Actions panel here. So we are listening for a Mouse CLICK on this about button. That's what we are doing. So the next thing I need to do is add a comma, because I want to add the function that's going to happen once you click on this about instance. So I'm just going to call it clickSection for now. So it's going to jump to this specific section. Close parenthesis, end with a semicolon. I'm going to hit Enter to start a new line. There is my event listener.
So the about instance has an event listener attached to it that's listening for the CLICK sound. As soon you click on this instance, it's going to fire off this clickSection function. So now we need to write this function. So I'm just going to go down to a new line and I'm going type in function, clickSection, and its going to expect an evtObj: Mouse; This is what it needs to listen for. Again, anytime you get this pop-up window, it allows you to select the code you want so you don't have to type it out and so there is no mistyping. I'm going to select MouseEvent, because that's what this function is listening for. It's listening for a mouse event. What's the mouse event? Well, it's listening for the CLICK.
Next, I'm going to add an opening curly brace and I'm going to go down two lines and add a closing curly brace, because anytime you click on this button, it's going to execute anything that goes on between these two curly braces right here. So whatever you put in here is going to happen when you click on the about button. I am going to add another comment, and this is just going to describe what's going to happen next. So I'm going to add a trace action, and this trace is going to show what's happening in the output window. Let me expand this panel out a little more.
So let's go ahead and write this trace function. trace. Trace is a way to show something in this output window without affecting the design or anything like that. It's great for testing. So I'm adding this trace, ("The About button was clicked!") That's what we are doing. This is the phrase we want to print out, if you will, in the output window, which you are going to see in a second. So let's just go ahead and do that. This is looking great. I'm going to go ahead and go to Control > Test Movie. Here is my Home, here is my About, and I'm going to click on it, and let's take a look at our Output panel.
Sure enough, The About button was clicked! And maybe I'll click it a couple of more times. Yes, it prints out every single time I click on that button. So you can see I have clicked on it for about seven or eight times. So this is working great. This basically helps to show me that this button is working. Very helpful. Trace is very helpful. My code is working great. My function is working great. But nothing happened there. I didn't actually jump to that section, and that's the line of code I want to add next.
So I want to go to the section clicked on, which in this section is going to be the About section. So gotoAndStop is the function I want to call. And within these two parenthesis is where I'm going to put the label name. So within quotes, within my parenthesis, I want to add the word about. So this has to match up with, if I click to my Timeline, with this frame label right here. So I can see that says about. Well, in my code I need to make sure this says about, because this is the frame label.
Now, I'm going to go ahead and go to Control > Test Movie, and we can try this out again. So now when I click the about button, it should not only print out the phrase that you are going to the about section, it should actually change the scene here and show the About section. Click. Sure enough, it shows the About section. It still has my trace, everything is working beautifully, and it's good to go. Now, I know this might seem like a lot of code, but this is really powerful, because I can deal with many different mouse events and I can listen for many different items. So as soon as you get comfortable with these lines of code, you can really extend all the functionality of Flash and to really make a powerful web site.
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.