Flash has many uses, but perhaps its most common application over the years has been for interfaces in websites, galleries, and web comics. This tutorial describes how to make a basic gallery, yet
the principal behind it is very useful for many other things. What
you will learn to do in this tutorial is make an action on one symbol that
affects the appearance of another. You will find this very useful
when creating websites, and when you need to have a navigation element affecting
other content. Here's what you'll be
creating:
Step 1: Create a new document in
flash. I made canvas dimensions 330x300 pixels to suitably accommodate my images, but it doesn't really matter what size you use, as long as you can fit your
images in it and have them clearly viewable.
Step 2: Import your images to the
library (File > Import to Library) and leave them there for now. If you want to use large images, this is OK, but they will resize in your browser (which may be messy), and involve greater download lag for the end user.
Step 3: Create a white rectangle
with a border, the same size as your images (or desired viewing size, if you are using larger images).
Convert the shape to a Movie Clip (highlight it all and hit F8 on the keyboard). Place some text behind the movie clip object saying 'please select an image' or something similar to give the user an idea of what to do.
Step 4: Give your movie clip the instance name: viewer. This is very important, as we will be using actionscript to refer to this symbol later by name.
Step 5: Double click your Movie Clip to edit it. Create as many new keyframes as you need and place all
your into separate keyframes, and then drag your images from the library
and place one on each keyframe, but now in the first keyframe - this should remain blank! On your first frame place the following scripting:
stop();
Do this by selecting the frame in the timeline, opening the action script
panel and typing stop(); It is only really necessary to do this on
the first frame.
Step 6: Click Scene 1 to get back to
the main stage. Now, drag your images onto the stage and resize
them - these will be your thumbnails. Once you've resized them all
and placed them where you want, convert each one to a button (Highlight, hit F8, & select 'button') you can call these whatever you want.
Step 7: OK, now comes the scripting,
so pay attention! Select your first image (which should now be a
button), and add the following action script to the button:
on (release) { viewer .gotoAndStop ( x );
}
Where there is a pink
x replace it with the frame number of
the movie clip (instance name: viewer)
that the corresponding larger image is on.
So for example, I'm going to
add text to the first thumbnail on the left. I will replace the
x with the number 2
because I placed the image of a skater about to jump some stairs on
the second frame of the
movie clip.
Step 8: Repeat this process for the
rest of your thumbnails. Then File > Export Movie and you should have
a nice functioning gallery and some useful knowledge of Flash! If you have any trouble, you can download the source file here.
Alternative Version
The code in step 7 above creates a gallery where pictures are displayed with clicks. If, however, you want the pictures to show when the house is rolled over them, replace the code in each picture keyframe with this instead:
on (rollOver) { viewer .gotoAndStop ( x );
}
on (rollOut) { viewer .gotoAndStop (1);
}
This basically just makes the images show when you roll over them and when
you roll off the image changes back to the first frame, which should
be your "Please Select an Image" screen.
User: bedvant(#42703) Date: Tue Jun 12, 2007. 20:08:01
Post #3 of 3
I to can not get this script to work. There's a poorly written paragraph that makes little sense. If the author could clarify please:
Step 5: Double click your Movie Clip to edit it Create as many new keyframes as you need and. place all your into separate keyframes, and then drag your images from the library and place one on each keyframe, but now in the first keyframe - this should remain blank! On your first frame place the following scripting:
Quote from meop;41725: I am very new to Flash. I am working in Flash 8 and tried to do the Flash Gallery. The ActionScript in your source file and on the tutorial are different. I tried both, but keep getting this message:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Mouse events are permitted only for button instances
on (release) {
User: meop(#41725) Date: Tue May 08, 2007. 17:23:32
Post #2 of 3
Quote from AirGuitar;30953: You're welcome! Any queries you have, I shall do my best to answer if you wish.
I am very new to Flash. I am working in Flash 8 and tried to do the Flash Gallery. The ActionScript in your source file and on the tutorial are different. I tried both, but keep getting this message:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Mouse events are permitted only for button instances
on (release) {
TUTORIALS SUBMENU ---->
