This tutorial is originally created by Prof idea Taha

iPhone Web Banner
This tutorial is originally created by
Prof idea Taha

Flash Web Banner
• One day, you are hired by a company to make
a flash web banner. The banner looks picture
below, where the users have to move their
mouse pointer on a moving iPhone to win an
iPhone. The mouse pointer will become a
crosshair to shoot the iPhone

Open a new Flash (ActionScript 2)
document and set the properties
like in the picture

• Choose rectangle tool, and under rectangle
options in properties panel, change this value
to “5”, stroke color to empty and fill color to
black

•

•

Now you are going to
drawing iPhone loading
symbol and the crosshair,
draw a rectangle like this

Select the whole 4 shapes,
press F8, type “crosshair”
in the name field and
convert it to movie clip

•

•

Use selection tool, copy and
duplicate the shape (“ctrl+c”

and then “shift+ctrl+v”)
Move the duplicated shape
under the original shape

•

Click on the shapes and
then press ctrl+B (break
apart)

•

Duplicate both shapes, then
using free transform tool, rotate
the duplicated shapes like this
by holding shift

•

Select the whole 4 shapes,

press F8, type “loading” in
the name field and
convert it to movie clip

•

What you have done just
now is basically you creating
2 symbols (movie clip). All of
them are stored in library.
You can press ctrl+L to see if
you want
•

•

Insert new keyframe in
frame 3, rotate the shapes
45 degree (by holding
shift)

Now double click on the
symbol on the stage. After
you enter the symbol,
duplicate all the 4 shapes,
and rotate like that by
holding shift

•

Insert new keyframe in
frame 5,7,9,11,13,15, and
every time you insert a new
keyframe, rotate the shapes
45 degree (by holding shift)

•

Now use selection tool, select
each shape and reduce the Alpha

for each shape. 100, 85, 75, 65,
50, 35, 25, 15 % respectively
starting from top most shape and
follow the clock cycle. Use panel
properties

•

Click on frame 16, insert a
frame (press F5). Now
press enter, you should get
an iPhone loading icon
animation

•

•

•
{

Go out from the symbol (by use selection tool and
double click on any empty space). Using free
transform tool, reduce the size of the loading icon
while pressing shift,
press”ctrl+K,
check align to stage
and then the click the 2 icons

•
•
•

•
•
•

Close the action panel, and then press shift+F2
This will open scene panel. Scene is like a part of movie.
Flash will play animation in one scene after another

Add new scene pressing this icon

Click on the keyframe, press
F9, and then type these
magic words. Make sure this
icon is not clicked :
ifFrameLoaded(“end”)
gotoAndPlay(“start”);

}

•
•

Click rectangle tool and change the option like this
Put “20” in the field

•

•

Draw an iphone
shape

Choose oval tool, empty
stroke color and gradient
fill color, and then draw a
circle

•

Select the shape using
selection tool, press F8 named
it as “iphone” and choose
movie clip. Then press “OK”

•

Double click the black shape (the iphone body)
to enter the symbol. And then, create a new

layer

•
•

•
Click window and
choose color

Click on the circle, then on the left
slider, change the color to #999999
Then the right slider, set color to
#000000 and move slight to the left

•

Using the free
transform tool,
rotate the circle
(press shift) so

that the white
part of the circle
will be at bottom

•

•

Rotate the rectangle until
the white part of the
gradient facing down. Then
select it and also select the
circle, then using align
panel, align both of them

Choose rectangle tool, stroke
color to gradient, fill color to
empty, and the number to 5

•

Draw a rectangle like this, change the
left slider to #999999 and the right
slider to #333333 color

•
•

Change the size and
location of both the circle
and small rectangle to fit
the place of iphone button

Create a new layer

•

•

Choose rectangle tool, stroke
color to empty, fill color to
red
•

•
Using selection tool,
click on empty space
and then reselect the
red rectangle and then
press delete

•
Draw a red rectangle, change
the location and size of it to fit
the iPhone screen size like this

Than draw a rectangle, with
empty stroke color and gradient
fill color, on a new layer. Than
change the properties of gradient.
The left slider set color to
#666666 and the right slider to
#000000. move the right slider a
little bit to the left

•

Cut the red rectangle, select the
rectangle that contain the black
iphone body and press “shift+ctrl+v”.
Now the red and black rectangle are
now on the same layer

Rotate and resize that rectangle like this. Drag
the layer that contain the rectangle to be
below the layer that contain the iPhone body

•

Choose rectangle tool, set
color of stroke and fill
both to gradient. The size
of the stroke, set to 0.5

•

Then resize and rotate
that rectangle and place
it like in this picture

•

Make a new layer and
draw a rectangle like
this

•

•

•

Click rectangle tool,
option is like in the
picture and color

For fill gradient, set left
slider to #666666 and
right slider to #000000

•

For stroke gradient, set
left slider to #CCCCCC and
right slider to #333333.
make sure you still
selecting the whole shape

Create a new layer and
draw a rectangle like this,
exactly the location and
size like in the picture

•

Select the rectangle,
press F8 and convert it
to movie clip

•

Resize and place the
white rectangle there

•

•
•

Double click on it to enter the symbol. Create a new layer, and draw a rectangle
with empty stroke color and gradient fill color. Then make 4 sliders in the
gradient bar, the color of 4 of them are #FFFFFF. But set alpha=0% for the left
and right most of the sliders. The other sliders, put 100%

Insert a new keyframe at frame 23 of the layer that contain the white rectangle.
At that keyframe, move the white rectangle to the right like in the picture
And also, insert frame at the other layer so that the leght of the layer will be
same with another layer

•

Make shape tween, and then get out
of the movie clip by double click at
any empty space using selection tool

•

Make sure you still in
iphone movie clip

•

•

You should get like this,
then unlock both layers

Make a new layer, right click on
the new layer and click mask

•
•

Hide the sub layer of the mask, now
on the main mask layer, type a text
“slide to unlock” with arial font and
white color. Exactly the size and
location like in the picture

Unhide the layer, and
relock both layers

•

Now we going to draw the
slider knob in iphone. Choose
Rectangle tool, gradient fill
color, empty stroke color, and
10 for under the rectangle
options

•

Click on the duplicated knob and
change the gradient color. The
different with the original one is
only you move the right slider to
left and set the Alpha=73%

•

•

•

Draw a rectangle, than change
the gradient properties. Color
of the left slider = #FFFFFF.
Color of the right
slider=#A7A7A7

Lock the layer that contain the
original knob. And then, select
right part of the duplicated knob
and delete it. Know you should
only have the left part of the
duplicated knob, like in the picture

•

Duplicate the layer that
contains the knob

Unlock the layer back, select
both the duplicated and the
original knob and rotate them
like in the picture (press shift)

•

•
Create a new layer between •
the original layer and
duplicated layer and draw a
rectangle in that layer with
empty stroke color and
#666666 fill color

•

Now place and resize
the arrow to fit in the
knob. Since it is in the
middle between the
original knob and the
half duplicated knob, it
should look like this

Then draw a perfect
•
square with same color
with previous rectangle.
To draw a perfect
square, press shift while
drawing it

•

Rotate the square 45
degrees, select the
lower part of the square
and delete it

Now place the original knob,
arrow and duplicated knob
altogether in the suitable place.
Resize them to fit nicely

•
•
•
•

Now resize, and adjust
the half of the square to
fit with rectangle and
become an arrow

Now we going to draw iphone famous
wallpaper. Create a new layer and draw
a rectangle with gradient fill.
Left slider : #CCCCCC
Middle slider : #C1C1C1
Right slider : #666666

•

•
•

•

•
Duplicate the layer. Now on the duplicated
rectangle, change the gradient option to
this :
Left : #339CB1 , Alpha = 47%
Middle : #999999 , Alpha = 0% and move it
to the left a little bit
And delete the right slider

•
•

Place the
wallpaper inside
the phone

•

•

Now rotate the original
rectangle and the
duplicated rectangle like
this

We done with the iPhone. Get
out from the iphone by double
on empty space.
Now, on the main scene, click
the iphone than convert to
button

•

Ok, since I’m veeeery lazy to
complete the iphone design, so
just make it simple. Drag 2
layers that contain the
wallpaper design that we create
just now to the bottom

Right click on the layer and choose “Add
classic motion guide”

•
•
•

Click on the iPhone and press F9
Click Global Functions > Browser/Network > getURL
Change the setting of the actionscript like the one in the picture

•

•

•

Then, on “guide” layer, draw an oval with
black stroke color and empty fill

Select some part of
the oval line and
delete it

Insert keyframe at frame 75 on
both layers. Then move the
iphone until its middle point
touch the other end of the line

•

Insert the classic tween and
you can see the iphone is
moving

•

Resize the iphone and place
the middle of iphone on the
first end of the line

•

Click on the timeline at the
classic tween (blue bar in the
timeline), then in the
properties panel, check the
“orient to path” option

•

Create a new layer then open
the library (ctrl+L)

•

Create a new layer (not in the
motion guide) and write like in
the picture

•

On the last keyframe, put an
action in the keyframe, and
make it go to the first frame

•

Click and drag
“crosshair” from the
library to the stage

•

Double click on the
“crosshair”, create a new
layer, then draw a circle
line with empty fill color
like in the picture. Adjust
the width of the stroke to
fit the other shapes

•

Go out from the crosshair, click on the first keyframe, press F9, uncheck
the icon that circled in the picture and then type : Mouse.hide(); this
coding will make your mouse pointer disappear.

•
•
•
•

Click on the crosshair, press F9, click the symbol
beside the word “code snipplet”, then click
Global properties > Movie Clip Control > startDrag
The drag setting, follow in the picture.
This coding will make the crosshair will follow
your mouse movement (become a new mouse
pointer

•

Create a new layer, open your library and drag
“iphone” movie clip to your stage. Make the
iphone below your text. Then save your flash file
and then press ctrl + enter