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

Creating a First Web Site with Flash CS4 Professional

Dynamically showing and hiding graphic elements


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Dynamically showing and hiding graphic elements

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.

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

Dynamically showing and hiding graphic elements

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.


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