Photo Gallery and Thumbnails: Flash Tutorial!

Check this video out at Hi-Res here: http://www.tutvid.com/tutorials/flash...

We will make a nice little photo gallery in Flash in the following tutorial. All you need are a few images and a few thumbnails for them, the rest is just follow along and it works with any images!

---

Closed Caption:

along this view tutorial brought you by
touch pn:
dot com we'll take a look at creating
a photo gallery photo gallery that
switches between
others using your thumbnail system
actually pretty simple gallery that
we're going to be making
due to time constraints file size
constraints
everything else but this is a really
basic photo gallery
and it's pretty neat one armory you some
ActionScript you
creating rollovers in yeah allow these
images
alien now and it's really easy and other
images day my had to you to gallery and
a further timed elements EU
on the phone issue you bring back and I
don't know how much more fun as you like
and you gallery
or maybe only a couple whatever usually
pretty easy to update everything
are so let's take a look at here is the
finished gallery where actually start
with the
blank flash docking the only thing
you're going to need
is a few images to work with and there
are a couple little things that you need
to do the images like in Photoshop
are fireworks and I'll tell you what
that is just a minute but
ITN exporters take a look here Eunice
first thing are rollovers light up when
we roll over them and
click any image anchors rates that image
fijian
he can also clicky image and goes to the
next image
so we'll take a look at how to create
the exact gallery
image just a second we're going to do is
open
a new lashed out at me okay and I mean
Obama properties
panel first thing you want to do I
selected the size button
we want to use which damaged the 600
pixels wide
400 DOL and we want to switch the frame
rate to
16 frames per second okay journey
aidid signs now
indicator this photo gallery the
flashlight me 600 pixels by 400 pixels
now I want the margin to be at least 100
pixels
on any side heading really and match the
sign or the stays between edge in my
photos
and the edge my document actually ed
Samara
fifties good so indication this I need
nation
along East Side my bono is no more
then either 300 pixels tall 500 pixels
wide
anymore images panoramic shot your
valuing win
if it sees a picture I'll person you're
probably doing high
so what I dime he's I'm going to
Photoshop
I'm resized angry on house by the way
I've resized a budget images
two nations the height all these images
300 exactly
cell first thing going to do is drag
these images and by Wales a greedy some
there's the judge
50 pixel by pixel thumbnails slept on
the same here
bridge slept long click and drag and
drop them rate
in the library panel in Flash minimize
bridge to get that way
you can see we have all our images here
perfect
let's rename our first layer here
master clip and see
you know how I like to work with
a master legal pad eating everything
let's draw on a box
botched me our I like he's vibrant green
for a lot of my knee
temporary drawings things are not really
in the scene
and we're also gonna use the online
and transform al here the Hockey Place
commander control
K we have the window to a line
but the important thing is one TD align
power make sure that you press the
two-stage
button each pressed on analyzed the
horizontal and vertical centers
your stage write me a
which is the hockey for brings to see
more uncovered a movie clip
mean master clip and see I double click
into it and delete
green rectangle and I'm going to double
click anywhere on my stage D
back our that movie clip each is
completely disappeared
as nothing is there all but there he is
something there
iraqi in see it converted that keyframe
to in anchor
keyframe and
it's given it a frame label but don't
worry about that
less up focus here
online getting his images into you our
flesh document
first you need to do he is lost like
them all obviously
and raining down the stage we need to
convert each one who's
own individual movie clips a commotion
tweed and allow it to happen
the in and out of those whenever you
going one to another
so I miss like first one here minute
happy convert to symbol
I mean in this one hi Angie by arranged
a movie clips and most
injury to see more in a minute Italy key
she deleted FB can sometimes be four
to Lee like this one I N G three
delete Swan ING to you
Italy and finally image 1
and are to me that too now movies 2
library we have a movie clip
and the bitmap movie clip and bitmap
movie gotten a bit now
what I want to do he is put the
match always I'm not gonna be using the
actual bitmaps
in my flash document except for the fact
the referenced
in the movie clip it up companies in
movie clip
so one thing to do is come down to the
bottom your files
for your library how much do you make
and he you former bon
mentioning this former gee thanks hold
in control
main key online hack select
all GA page not on J date of the hearing
where
Anderson drag and drop them in that
folder just like thats
let's get back into that master
movieclip need for which deleted
and obviously there's nothing really
click on stage
for seniors come the Properties panel
Lee
the frame legal so
what we can do is come over here into
you our library right click on the
symbol
and shitty and every spring time simply
gives you insight magically
NC if you look at the hierarchy up where
exactly are
in your flash file right there happier
file
more double click this plane Camryn
booze
all that shit key and select everything
went to the movieclip images
have in your library dragging down to
stage
they're also like advanced before the
Select them back to the
a line change form out my online to the
horizontal
and vertical centers once again actually
going to move them along to one side
were unaware about that rate this manage
and on gonna do now he is shot of
visibility on this layer will be back to
them any minute
tree to more layers name one layer
farms and one layer Tom
ActionScript and what we're going to do
here he is
comfort these home nails to movie clips
as well but we're are not because she's
going to Martins symbols not move
because we never did you
button symbols miss like button cing
looks 5 DT
and change right side we don't want to
delete these because we actually only
use these
I am for BGN
make sure you have right here in type
and convert to symbol dialog box
type should be set button
and once we have witnessed Don he slept
of I the images and a line into the
horizontal
and vertical centers once again worry
about distributing them
on evenly just a minute we want to do
though is
select the keyframes we have all them
selected and click
on the top one and slight color how far
and set the output 45 more simplicity
she said 50 for this and
what I need to do now is actually able
to tell exactly where I am on my stage
summit on my photos back on
problem is I can't really see edge in my
stage
may need to do is come back and see one
slight anywhere
am really changer back on health white
to the darkest gray here
in the color not black dark is great
before alright
s double click back in your movie clip
and select be loves have those on on
ActionScript layer
chain click and hold like evening and
write down the film's layer
and use right down I'm she shipped my
arrow keys
to you knowledge this straight down they
can see that
east on SR Ca fit between the edge in
about 30 any age
I'll stage so gonna leave it out right
there
and worse like the photos and religion
part a little
like that that's perfect now
organs like their farms again I'm chance
like the top thumbnail
and moving over to about right there to
the senate on the almost lined up at the
center of this
image finest dark blue image
and I'm gonna find
the image thumbnail
which is right here me China line at
to about the same area and a slight of 5
any online now once again
overhears little word space miss like
the ones
speech evenly resigned early just like
that I've got my
thumbnails lined up nicely miss like
them all his money
and she just got networker and I'm going
to say
align top pages align stoppages
stage our unchecked stage but in this
case
Angie align top edges headlines
top-edged
them each other now all line up
perfectly
now what I want to do is select each
individual but give it
instant me so I can you sing I N G one
for
are I'm using someone really someone
I was copy the word times like quickly
page did
into each other one i'm too
long 3 from
were and some 50
egypt is Heather New Moon instance name
all right let's take a look here
and its making
these thumbnails have some have a
rollover state
now they are buttons so we could you
simply go in at a roller state but
thats irony video on how you can go in
using
overnight downstate let's look at a easy
way actually to use ActionScript to do
it
from you some as: layer pasture where
it f9 average for actions palette
for panel and we need to remember here
instance names someone come to some
three them for them via it's pretty
simple
sales are taking some actions mercy
someone
die on role
over this is case sensitive she needed a
capital R
capital I'll at a period by the way
someone die
on wall over equals function
open/close francie open curly bracket me
enter or return twice close really
racket
and come up to you lying to you in
between those two
open/close curly brackets I'm going to
see yes died underscored how far
key goals 100 so what i'm saying is
when somebody rolls over someone I one
flesh to execute the function
I'll making this how to level the alpha
level
this object which is Tom one 100 percent
meant copies tire thing
he's right lower and the change this
to you you'll out some say
on roll out this time alpha equals 50
again
you will allow I want equal 50 again it
at nine
close at the actions now f9 by the way
is the high keep reactions now
wake up the window actions let's just
experts move your quick and get some
kind
a problem
single again let me see
what about you yes of course
place the actions on these by sure
yes I did she don't get
an actual X to cut that went to places
on the flame keyframe on ActionScript
check the syntax script now contains no
heirs new
problems as far as I can see tracks 28
again there we go
and my roll over someone we now lights
up
is back to 100 percent alpha so it
appears to be more vibrant in color
and the rest which in fact it is because
get back to 100
now alright askance like this entire
thing
manage all see caveat and you need
pasted
for each other on comes to 34 by
one little thing you need to make sure
you do is hit the Return key here
and then paged don't pasted rate from
this curly bracket easy
if I do that right here that's gonna
registers Nair can't do that
have to make sure that the space that
now
of every gal bet 5 nevertheless
confusing
but you see we only need this for
someone so we take this park
some to sometimes can come here she's
the one to do
and ima come here change this 123
come here Jesus 1.4 and coming changes
one
to a5 checking for errors no heirs
now man to control
enter by the way is what I'm going to
quickly preview movie
and now all of our thumbnails light up
and they're all
buttons such great popular controlling
test movie
another way it a quick SWF preview
and have your passions working like that
way nice
okay now what's left of 5 the images by
selecting photos
keyframe here and he ft to convert them
to a symbol
recover to movie clip similar and
merchant name photos
am see for movieclip enter these are on
site at their
movieclip with this movie clip selective
may change the instance name
to whose can see I have the NNC capital
by the way
and remember when you're working with
instance names a our case
sensitive she have to be conscientious
away
you tight in the east text boxes because
if I were to put this
and seen lower case an ActionScript
uppercase
would work some elite upper case year
because that's usually the way I were
with my stuff and he will keep me from
heaney
dumb mistakes cell
now let's do a little tease part which
is creating many transitions between
these bones double-click inside
into defoe is that MC and you can see me
at all
5 these photos in here select the first
keyframe
now right click on all those you
disliked offers by clicking the
done now are that he perhaps me right
click and distribute two layers
UNC each images on it and where
and where 10 is nothing on it so it's
like player one and click the trash can
just
rated okay now what we want to do is
slaw first create you layers name1
frame labels and create another and name
it
ActionScript we want to you
select the spy keyframes and drag them
out one we won our first frame be
completely blank
coming click on the ActionScript efrain
f9 I'm gonna place to stop action here
stop oven please print see sammy cahn
line make that go away toward opening
frame label there
but what happened now is when flashing
the low is 90 images and Shaw
immediately unit at the week till
somebody choose from now
so what we can do here is select image 1
and holding Alt key for the OPs keep on
a Mac click a keyframe
and shrank out to frame 16
you want to be 50 frames in between or
for transitions
to interest to go for me completely
invisible to completely
visible reason looks funny rear visor
images
all these key frame stack up on top that
may drag them now
the frame beyond frame sixteens a frame
seventeen I just drag them out till
to now we have our photo you're
going to our photo our photo all the way
of rain to
organist click a photo of my companion
or color options like how far
and Lucy offer 0 and you know right
clicking between these two keyframes
create the motion tween and now you can
see
emotions we going from nothing to a full
image
now here at frame 15 I am going to
duplicate this stop action
holding all the %ah begins drag nikki
Finke out of range 16
so it's gonna happen he is when your
movie s play
its gonna play the first image low
diversity image stop
right now we can tell flash to start
playing at frame two
by placing keeper a plainly excuse me
need place keyframe
have sex or right-click insert keyframe
like they keep rain and damn the
properties down here we have a frame
label
text box understanding this high-energy
one
right now which needed same thing was
arrested images holdall
drag-out 15 plus 17 would be
32 just like that select the story
right now string33 select ball an age
you see out the 0 create my motion tween
duplicated stop action stop action
should be on the
a last brain are you animation when
photo is completely I wonder not after
it goes after it
this file using you definitely don't
want that went in last
mast frame urination
select that train label and do
Washington don't duplicate
want to duplicate we can just select the
frame where your next photo which are
coming into this case
image to zoom started zero Alpha here on
frame seventeen
so many have sex or a click any insert
that's not flame
answer a keyframe am repre- free mailing
your
I N G two so now flash
we can use ActionScript to say go to
complain image 1
and play this always a good only image
to
who claims to now when you set up for a
mystery
and 15 just 33 is 48
so here we go that change-up 49
slept that image at the Alpha
me motion tween duplicated stop action
pop keyframe in the frame Leila
image 3 hatchet
cell do it with a smile 39
teen 64
Agnes image at sixty-five select this
image UTC
alpha Creek our motion tween
duplicate that stop action and police
yet another friendly
and finely worked the last line and 65
was 15
KD it's pretty easy
you set out to create a motion tween
cancer a frame labeled image 5
and of course place stop action
very an should def by
there just to make it time Lima could
just
brought frames out really serve never
saw and
what we have here is a time line %uh
images when we say go to play mystery
flesh jump to hear
play mystery shapely image 1 jumped him
play image 1
so now we have is all set up jumper in
play promise we need some way for flash
two wickets the and turn around and come
back
very beginning which is why I have
reserved this first frame
so we're going to do is actually create
me f6 you agree
other key frame for image by am really
create another ActionScript keyframe
tourists like that key frame for the
ActionScript player
and we use this code go to and
lay open grant C are open
yeah ok frenchie quotes
I N G one close a quote close breath to
see
senegal K where's
so now when it gets to stop action and
we want to play again
its can pop over to this action which
said hey go back over here too
image 1 and played at
brilliant so compound here to you
master clip MCI believe that only do
their insider
views movieclip nail
you want to do is set up our buttons you
can click and go to any of those
voters to select your but you actually
click it I can't emphasize enough
I want you have to actually selected the
botnet pressure your mouse
not the keyframe the line over the
actions how
and tight this action with me I'm just
selecting the one by one
we're going to say
on release
open curly brackets surrender
close curly brackets see they lose
and see remember that the instance name
that movie clip holding on to furnish
resume see dodge go to you
play me
and which can say I and %um
an eagle check prayers no heirs
are to me a copy this mill
by the way that's what that action
script looks like Canada moved Austrian
their
movie partially Austrian and I'm just
going to duplicate here
but for this he made a mistake urgently
image to
here mitigating play change 3
there
like this one getting wage for
and slick this morning and see go to you
and play image
by so
let's previous real quick she all our
stuff
light up miss like that image it goes to
and plays image 3
image 5 image 1 image to you now there's
really no point to setting up our little
turnaround thing in the photos
what I mean by a little turnaround thing
is
this little bit coherent the and where
it says you know go to and play image 1
and last we do something
that would require iced to use echoed
his right now these
the males are more than capable of just
tell English hey I know I wanna go
in the time line you take me there so
which use
something that actually war provide
alternative means navigating through
your
photo gallery Anzac streak with you
let's gist make
the new layer here and name it controls
our control as: control ActionScript
like a keyframe open up your actions
Palin
and let's say goes MC
dodge on crashed
key Qualls function open/close Treacy
open curly bracket close really bracket
in here women say
ghost and see dot way
just like that what that's going to do
is every impressive o'dell
it's just going to play from that stop
action and playwright next top action
sewing kits that last frame it's just
going to plating go to
play image once again lou
take from image 5 to image 1
she click click click
click an hour in which I click and goes
back to image 1
which we know the code that would more
judge it
is how you create a very basic image
galleries
home a little bit %uh via long tutorial
but I hope you learned
how to do it arm there's actually is
quite a bit to doing it and get a little
complicated
so I hope you enjoy and learn something
from home
scheck tight to the whole thing an anti
far along she learned a great deal
really good stuff and thank you very
much watching please check out the
website that is WWW dot
tute the ID dot com
did acecomm thanks for watching