This tutorial is originally created by Prof idea Taha

(1)

iPhone Web Banner

(2)

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

(3)

Open a new Flash (ActionScript 2)

document and set the properties

(4)

• Choose rectangle tool, and under rectangle

options in properties panel, change this value

to

“

5 ”

, stroke color to empty and fill color to

(5)

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

• Use selection tool, copy and duplicate the shape (“ctrl+c” and then “shift+ctrl+v”)

• Move the duplicated shape under the original shape

• 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

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

(6)

• 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

• 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

• 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

• Insert new keyframe in frame 3, rotate the shapes 45 degree (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)

(7)

• 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

• Click on the keyframe, press F9, and then type these magic words. Make sure this icon is not clicked :

• ifFrameLoaded(“end”) {

gotoAndPlay(“start”);

}

• 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 rectangle tool and change the option like this

(8)

• Draw an iphone shape

• 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

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

• Click window and choose color

• Click on the circle, then on the left slider, change the color to #999999

(9)

• Using the free transform tool, rotate the circle (press shift) so that the white part of the circle will be at bottom

• 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

• 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

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

(10)

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

red _• _{Draw a red rectangle, change}

the location and size of it to fit the iPhone screen size like this

• 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

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

• 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

(11)

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

• Make a new layer and draw a rectangle like this

• 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

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

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

(12)

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

• 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%

• Resize and place the white rectangle there

• 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

(13)

• 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

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

• You should get like this, then unlock both layers

• 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

(14)

• 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

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

slider=#A7A7A7

• Duplicate the layer that contains the knob

• 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%

• 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

(15)

• 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

• 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 resize, and adjust the half of the square to fit with rectangle and become an arrow

• 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

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

• 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

(16)

• 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

• Now rotate the original rectangle and the

duplicated rectangle like this

• 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

• Place the

wallpaper inside the phone

• 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

(17)

• Click on the iPhone and press F9

• Click Global Functions > Browser/Network > getURL

(18)

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

• Select some part of the oval line and delete it

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

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

(19)

• 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 (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

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

• Click and drag

(20)

• 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.

(21)

• Create a new layer, open your library and drag