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.
When you are creating any site, you always need to keep usability in mind and this site is no different. If I go to the Portfolio section, you can see that that's pretty usable. I know this forward button is going to load in more images but it breaks at some point. It breaks when I click on this one more time. Because it's trying to load in an image that doesn't exist within my folder. In fact, if I go back the same thing happens with the back button. If I click once more, it's trying to load in an image that doesn't exist. So that's just bad usability because if there is no more images I need to hide this button.
So let's close that test file and let me go back and let me actually jump to the Portfolio section. And I double-click on this content movie clip; I'm going to scroll down. There is my Portfolio movie clip. If I double-click, I'm now within my Portfolio movie clip. So I'm going to select that first frame, this is where all my code exists. I'm going to go to Window, down to Actions and here is all my code.
So it's working out great. It loads in images and it will continue to add to this imageNumber and that's what's going on. Every single time you click the next button, it's always going to add one to the imageNumber. Same thing for the back button. Every time you click it, it's going to subtract one from the imageNumber. So we need to fix this and the way to fix this is to create a new function and this function is going to check the current number and make sure it's not too high or it's not too low. I'm going to add that function up near the top here.
I'm just going to hit Return a couple times. I'm going to add this function and it's going to be called checkNumber and it's not going to accept anything but it's always going to be checking for the correct number. I'll add my open curly brace and my closing curly brace and from within those two that's what I want to call, as I want to check for the visibility. I also want to check the numbers as well.
So the first thing I'm going to do is I'm going to add an If statement. So I'm going to add this comment first, say If the imageNumber is = 5 then do something. That's basically what I want to add now. So I'm going to write this if statement. if imageNumber-- I'm making a condition here. If it's equal to, ==. If it's one equal sign, it's going to set imageNumber equal to 5.
But in this case, I want to check it against the number 5. So if the imageNumber is = 5, then do what's ever within these two curly braces and for now, all I'm going to is type in a trace statement that checks the imageNumber. So it's going to print out the number 5 in the Output window, if this is called. All right, so that's what I want to happen. I'm doing this checkNumber.
Now I'm going to call this function from my nextImage function. So anytime you click on the next button, I want to call this checkNumber function. So right after this ImageLoader parameter that I'm changing, but before the closing curly brace, I want to add checkNumber. I'm going to check the number. I'm calling this function and that's how I call function is I just list out the name. So you click the button, it's going to check against the number and see if the imageNumber is = 5. All right, let me check my syntax. Okay, my script doesn't contain any errors. So let's try this. Control > Test Movie. Portfolio section.
One, actually this is image number two, three, four, and let me show my Output panel right here. Click one more time and then it prints out the number 5. So that shows me that the function is working. That's wonderful because that's exactly what I want. So let's actually have something visual happen now. So from within this if statement, I want to change the visibility of that next button.
So next_btn. I want to change its visibility and again I get this code hint that pops up and hit Enter. Change the visibility to false. So when you reach the end of all of these images, I want to make that next button disappear and that's what this does here. Let's go ahead and write the conditional statement, as this is known, for the back button. So if the imageNumber is = 1, then don't show the back button.
That's what I want to happen. If imageNumber==1, open curly brace, closing curly brace. Don't forget about those and I'm going to add a trace statement just like I did above. imageNumber and in this case, I'm going to make the back_btn visibility = false. There is an issue with this code which I'm going to show you in a second but if the imageNumber is = 1 then it's going to make this button invisible, or if it's equal to 5, it's going to make the next button invisible.
All right, so let's test out. Portfolio section. I have trace statements so let me move this Actions panel down. Click, click, click and there is my last image. It's equal to 5. My next button disappears. Perfect! That's exactly what I want, very usable. The user knows that there is no more images.
Let me click the back button. When I get to this equaling one, it should disappear. But there is an issue with that and I'll show you what that is. Let me close that. Because one thing I didn't add is I need to make sure I'm calling the checkNumber function from both of these functions. So that line of code I need to add right down here. Just like that.
Let's test this one more time. Portfolio section, the forward button, the next button disappears and now when I go back, the back button disappears. Now they are both gone. That's an issue because I should be able to go forward at least at this point. So let's resolve that right now. Let's close that test. Now let's go to our function here, this checkNumber function, and what I want to do-- anytime you call this function I want to set the visibility of both the next button, its visibility to true and the back button's visibility to true.
So both of them are set to true when you first call this function and then if the imageNumber is = 5, it will turn off the next button or if it's equal to 1, it's going to turn off the back button. But these will turn it back on. All right, let's go Test Movie. Portfolio section. Let me go forward. It disappears. Now it should come back when I click Back and it does. It does come back. Let's see if this one does it. If it's equal to one, it's invisible but if it's equal to anything else it should reappear and it does.
But I don't know if you notice the initial issue. The issue is that I actually do have the back button when I first come to this Portfolio section. So I need to call this function in this Timeline. So let's close this and just below the checkNumber function I need to call the function itself. This will turn off the back button because the initial value is set to 1. And this should be the last test I need to do.
Portfolio section. I can see that back button is shut off. So very awesome, very easy to use these conditional statements to check for things and have your graphics basically be modified in whatever way you want depending on any user interaction that might happen.
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.