Creating A Flash Banner Part 1

This tutorial will show you how to create a Flash web banner using three images. It is almost like a slide show. One image will fade out and the other image will fade in, and we are using the timeline for this animation. Part 2 will add buttons so a user can go to any of the images in the banner.

If you like this and want to help me out. I would appreciate it. Visit me at Patreon: http://www.patreon.com/toddshelton

---

Closed Caption:

in this tutorial I'm going to show you
how to create a basic flash web banner
that transitions from one image to the
next by offing out and we're going to
use three images for this and part two
of the tutorial we're actually going to
create three buttons that will let you
scroll between the images if you want to
by clicking on the button lets show
let's look at the final product you can
see you see the image for two seconds
and it transitions to the next image if
you want we can actually click on one of
these and transitions easily into the
next image so let's go ahead and get
started i'm using flash CS 5.5 and i'm
doing an actionscript 3 project you can
do to for this but the code that i want
to give you will not work so i just want
you to be aware of that right the first
thing we need to do is create a new
actionscript-3 project so i just hit you
can go to file new great actionscript-3
the next thing i want to do is I'm going
to keep my timeline as short as possible
and since this is just a really easy
transition or a really easy banner to
make I'm gonna keep my frames per second
down to 12 instead of 24
ok the state sighs now I know my images
you can make this whatever you want so
if your web if your webpages 920 or
however wide it is
that's what you need to create your
images for and then that's what you need
to set the stage yet
ok so we're going to create the stage at
six hundred and we're going to set it
mine is 150
ok so let's scroll this in the middle so
our frame rate is 12 frames per second
our sides of 600 x 150 okay that can be
anything you want it's just set to the
image size
actionscript-3 were targeting flash
player 10.2 next thing we want to do is
go ahead and let's say that i'm going to
call this web banner save it to my
desktop
ok now we need to import our images so
we can come up here to file import
import to library we don't want to
import these to the stage because we're
going to add them separately to
different layers
ok we're going to import to library and
browse to your images already have my
selected here select all three of them
course you can select as many as you
want to to bring into the library so i'm
going to select mine it open now we need
to view the library so we can see those
up here in this panel you should see
library if not go to window and library
here and this will show you and you
should be able to see all three images
now this you'll see all 3 i'm just here
if you click on one of these as a
viewing window so you can see what it
actually looks like
so now we need to bring our image onto
the stage down here we have layer 1
let's rename that to slide one since
this is basically a slideshow I want to
name it as such here flash automatically
starts with an empty keyframe that's
what this little circle is we're going
to drag image 1 over here under the
state's someplace
now don't worry about trying to line it
yet ok so just drop it anywhere
we're going to do that right now if you
come right here on this little work area
this little panel ok if you click a line
here it's actually going to pop out this
align panel if you don't have this
because you've set your workbench or
workspace to something else go to window
and come down here and click align it
will jump out next thing we want to do
is make sure this is aligned to stage
that means that this object will be
aligned to whatever we put it to this
stage here
ok click on this horizontal center and
vertical center since our images the
same size as our stage we could click
align left' valign top' but that would
have put it up here in the top left if
you're me just smaller than the stage
for some reason and you clicked on these
two you would see a gap around the
bottom and the right edge so just
remember if you want to always align
center horizontal and vertical now we
have our image on our stage now we need
to set it up so we can actually make
transitions and get it set up
flash will not let you transition
between images so what you need to do is
you need to convert these to a movie
clip so we're going to click on this
image notice the blue border around it
we're going to go to modify convert to
symbol you can also hit f8 has noticed
right here we're going to change the
name of this symbol to image 1 don't
click OK yet we want this to be a movie
clip the type is a movie clip we do not
want a button or graphic for this
example movieclip the registration . is
important later on if you're doing a lot
of other things but right now we're okay
with top left so it ok now notice that
we end up with cross hairs in the top
left-hand corner
ok when you have this little circle here
in the middle i can tell you that it's
converted to assemble of some sort
also if you click back on your
properties panel over here by the
library again you can go to windows and
click on properties you'll notice that
now because we click on it it says movie
clip here and the name of the movie clip
has image 1 now we have a lot of other
properties so let's set up our timeline
for the transition in the viewing time
of the slide so we want our slide to
last two seconds before it turns starts
transitioning out that's just something
I came up with you can do whatever you
like
so two seconds our frame rate is at 12
frames per second so to get two seconds
out of that we need to go 24 frames to x
12 easy enough right so we come here to
frame 24 and we need to insert a
keyframe so you can right click insert
keyframe or you can just hit f6 now you
notice how this created a new keyframe
and there's another little circle here
and it's filled in black too
now this sem image is basically right
here on frame 24 in this image and frame
one is on the stage for this whole time
this is actually two different objects
and I want to prove this to you by if we
click
con frame 24 and move this image up if
we scroll back notice how since we
didn't move the one in frame 10 decides
position right we come to frame 24 will
notice that it's moved up
ok so don't forget that these are
different objects or the same image just
different times on the timeline
ok so remember that ok let's go ahead
and align this one back to Center on the
stage right I'm just gonna make sure i
didn't move it horizontal all right now
we need to work on our transition out we
wanted to transition and a half a second
so here's the way we do this half a
second would basically be six frames we
come to frame 30 we hit f6 again to
insert a keyframe so we have our viewing
area which is these 24 frames then we
have the six frames to go out
okay but you're saying okay I don't see
anything happening
ok what we need to do is transition this
movie clip from a hundred percent
opacity down to zero percent and the way
we do that is you click and frame 24
then click on your image of here in the
top
notice how we end up with all these
properties your color effect maybe close
like this just click on the triangle go
to style alpha and take that leave it on
a hundred percent if it's their next
thing you want to do is click on frame
30 click on your movie clip go to Alpha
and take this down to zero ok now you
still don't see that transition but if
you scroll back and forth you can
definitely tell that frame 30 it went
out so let's get our transition in there
the way you do that is click right click
anywhere between these two frame 24 and
30 and create classic tween now you have
your simple transition between the two
ok now that we have that setup now let's
go on to the next image so in order to
do that the first thing you gotta do is
lock slide one layer we do not want to
add any more images to this layer then
create a new one
go down the bottom left-hand corner and
create new and name this too
slide2 ok so now you see we have a whole
new layer and a timeline for that layer
we want our image to to start fading in
on this frame because this
that's when this one starts fading out
ok so we click here and right click
insert keyframe or you can hit f6 or you
can come up here to insert timeline and
then keyframe ok now we need to drag
over an image out of our library click
on library drag over image to again
we're going to align this to the stage
this is still an image we need to
convert it to assemble so f8 or modify
convert to symbol we're going to name
this image to make sure it's movie clip
and then click ok so let's go ahead and
set up our whole timeline for this
viewing transitions so we come in a
frame 30 and we need to insert another
key frames so hit f6 or insert keyframe
now we want this to be viewed 42 seconds
so we come to frame 54 and hit f6 again
for our viewing time so we set up our
transition in and are viewing time and
now we need to do our transition out so
six frames from 54 would be 60 so we
have six again so we have our fate in
area the viewing area and the fade-out
area so let's go ahead and get this
working so frame 24 we're going to go
from opacity of 0 so come
click on your image go to properties set
your style here alpha 20 which it should
already been from our last set setting
and click on frame 30 because we want
this to go from zero to a hundred
percent click on your image frame 30
change this color effect two alpha and
move this to a hundred percent
ok now we need to put our transition in
here right click create classic tween
now we have our fade you go back and
forth you'll see it fading in let's
create our fade out
click on frame 54 click on your image go
to color effects style alpha now you
want to leave this at a hundred percent
because we're transferring from a
hundred percent 20 click on frame 60
click on your image change this from
alpha and change this 20 now you have
your transition out now we need to put
between in right click in between here
create classic tween ok so now we have
our to me just set up let's go ahead and
add the third lock slide to we don't
want to add anything else to it
create a new layer double click and name
it slide 3 we want our image 32 come and
start coming in on frame 54 so click on
frame 54 and slide 3 layer it have six
or right-click or insert timeline
keyframe you get this just go ahead and
click yes
insert timeline keyframe notice outputs
an empty one here now we can go to our
library drag over image 3 onto the stage
someplace to go to align panel and align
it
the next step is convert to symbol ok
and we're going to do image 30 k make
sure the type of movie clip and click ok
now let's go ahead and set up this whole
timeline area so we're going to
transition from zero to a hundred
percent so we need another keyframe on
frame 60 so f6 and we want this to be
viewed 42 seconds so come out 284 hit f6
or insert empty our key frame then we
need our transition out so let's go to
frame 90 f6 to put another keyframe so
here we have our transition in our
senior viewing time and our transition
out let's get our transitions done here
in frame 54 we come up here and we click
on this image and we need to change the
properties click on properties make sure
the image is highlighted style 0 and it
should already be set to 0
can frame 60 because we want to
transition a hundred percent click on 60
click on your image alpha and take this
to a hundred percent
ok so now should have that transition
let's go to 84 because we wanted to
start fading out click on 84 click on
your image go to Alpha leave this at a
hundred clicking 90 click on your image
go to Alpha and take this down 2-0 now
remember we need our pride our
transitions in here so right-click in
between these two keyframes create
classic tween and go to the first
transition area right click anywhere
between here and create classic tween ok
so now we have our twins goin but one
problem is is that when you actually
test this movie
okay and don't forget to save we'll go
ahead and save this when we test this
movie the playhead gets to right here
and then it loops back to frame 1 so the
transition from image 3 2 1 will not
look very good so we need to make this
work
so the way we do that is make sure you
lock layer 3 because layer threes images
on top of layer 1 so we don't want to
select the image 3 so lock this layer
come down here to image or a frame 84
unlock slide one because now we're going
to basically make image1 appear down
here hit f6 or insert keyframe now
image1 was alpha 20 so we this whole
area right here you will not see this
image but we wanted to fade back in
right here
ok so make sure you hit 84 insert
keyframe go to frame 90 and let's go
ahead and hit f6 and insert keyframe
again
now you notice it's just totally blank
on the stage that's because both image 3
and image one or both set to 0
okay we need to get our transition going
on here knows i'm clicking in 90 click
on the stage because I
have slide 3 locked i am not going to
select the image and you can tell that
by up here in your top panel of your
properties it says image 1 so that lets
me know i have image one selected with
that being selected let's go ahead and
alpha that to 100 let's get our
transition going right click in between
these two keyframes and create classic
tween so you get a nice fade from three
back to one in this loop back to the
viewing area
let's go ahead and test this way to test
this is control enter or command dinner
whichever operating system you're on ok
you can also go to control and test
movie and flash professional and this
will bring up this and now we get a nice
transition between all three images and
this loop forever so that's basically
how you set up a basic timeline web
banner and flash CS 5.5 look forward to
part two where we'll insert the buttons
and the code