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

Creating a First Web Site with Flash CS4 Professional

Adding unlimited images to the portfolio


From:

Creating a First Web Site with Flash CS4 Professional

with Paul Trani

Video: Adding unlimited images to the portfolio

ActionScript also allows you to use one button and have it do different things. Let me show you what I'm talking about. If I go to the Portfolio section, I have two buttons here. This Forward button and a Back button. So if I click this Forward button, it loads in this portfolio02.jpg, regardless of how many times I click it. Back button does the same thing. It just opens up, loads in portfolio image 1. I basically want to have a dynamic variable in here that loads in different images and not just one. So each time I click on the button, it's going to load in a new image. So that's going to mean creating a variable and adding or subtracting from that variable.

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

Adding unlimited images to the portfolio

ActionScript also allows you to use one button and have it do different things. Let me show you what I'm talking about. If I go to the Portfolio section, I have two buttons here. This Forward button and a Back button. So if I click this Forward button, it loads in this portfolio02.jpg, regardless of how many times I click it. Back button does the same thing. It just opens up, loads in portfolio image 1. I basically want to have a dynamic variable in here that loads in different images and not just one. So each time I click on the button, it's going to load in a new image. So that's going to mean creating a variable and adding or subtracting from that variable.

So I'm going to close this test file. I'm going to go to my Timeline; I'm going to scroll down to the Portfolio section. I'm going to double-click on this content_mc and double-click again to enter the Portfolio movie clip Timeline. At the top of that movie clip, we can see in the Timeline panel, we have this ActionScript layer, and first frame is where my ActionScript is going to live. I'm going to go to Window, down to Actions. So here is what's already in there. We have these functions. So this next image function loads in portfolio02. This is what you would call hard-coding a link.

So that's what's going on here. Same thing with the Back image. It's loading in portfolio01. So that's what I need to change, I want this to be 02, 03, that sort of thing. The way to do that is creating a variable. Now variable is going to be that container that holds some sort of value, whatever it is. And in this case, my variable I'll have to start with the word var. It's going to be called imageNumber.

So the container is called imageNumber0 and inside of this container it's going to contain a number. So I'm telling Flash numbers going here and that's it. So the number that's contained in here initially is going to be 1. So to the right of the equal sign is the value. So this is known as a name value pair. So now that we have this imageNumber equal to 1, I want to use this variable name right in here, actually explicitly on this number. So I'm going to replace that too with couple plus signs allowing me to add imageNumber. So I need to make sure this variable name is exactly the same as this.

So this allows me if I have a plus sign on either side of this variable and quotes around these strings, then it's going to give me the equivalent of the number 1. Let me undo that. All right, I need to do one more thing, because it's going to continually load in portfolio image 1. So within this function, I want to add to the imageNumber and I can add to the imageNumber by typing in there imageNumber and then two plus signs and this does the equivalent of-- let me add a comment here-- add a number to the current value, more or less. So we're adding to the current value +1.

All right, current number is going to add 1, so it's going to be equal to 2, then it's going to be equal to 3, and it's going to load in that into our ImageLoader. So let's go to Control > Test Movie. Click on the Portfolio section, let's click this Next button, click one more time, oh, and it is working. There we are in the last image.

So if I go in my images folder, you can see it's loading in all of these images, just exactly the way I wanted to work. Now the issue still is this Back button. If I click on it, it's always going to load in that image. So let's modify that function. Let me close my test file, move this Actions panel up, and I want to do the same thing, I want to subtract 1 from the current value.

So whatever imageNumber is, subtract 1 from it is what this is doing. I am going to replace this number 1 the same way I've replaced number 2 up above and that's by adding imageNumber. All right. That's all I have to do. imageNumber. That looks good. That looks good. I'll check the syntax. It says there are no errors. So let's go ahead and go to Control > Text Movie. Portfolio section, Next, Next, and then Back.

We can see that it works great, and you can see how powerful that is, changing something that's hard-coded to a variable makes this so much more powerful in both cases. So really, variables are really the backbone of anything that you write in Flash or with any programming language.

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