Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Creative animated flash banner design for your company

Creative animated flash banner design for your company


This tutorial is to guide you that how to create an animated banner using motion of Adobe Flash software. Please pay your attention regarding the designing process step by step

Step 1

Firstly open new [file - New (Ctrl + N )]flash document and adjust document size 300px 250px as a below pictures

img

img

Step 2

Now click rectangle tool (R) of the tool box then you can see properties of a rectangle tool bottom of the window. Now change rectangle corner radius according to the below picture.

img

Then draw a rectangle like below

img

Step 3

Now we try to fill color

Firstly we select color palette [window - color (shift + F9)] then select color type as radius as below Then you can create your rectangle like below as banner background.

img

Step 4

Now add a new layer and create a small object on the banner background then convert that object as move clip [modify - convert to symbol (F8)] and double click and delete it as below picture

img

img

img

Step 5

Now we try to animate some text

Firstly we add a new layer and type question mark as symbol using text tool (T) after adding color we scale it like below picture.

img

img

Now convert it as a move clip symbol using above method (F8) then set alpha value 0%. Now insert some keyframe [insert - timeline - keyframe (F6)] then scale and potion that object as below

img

img

Then select key frame like above picture and set tween as a motion like below

img

And click ease edit button then set cove like below then text animate smoothly

img

img

Step 6

Now we try to create animated text upper to middle

Firstly we add new layer and type some text using type tool after several key frame as below picture and set potion according to below picture after set tween as a motion of time line property window and adjust ease like above

img

img

Step 7

Now we try to create animated text left to right

Now add a new layer like above and type text like below after add several key frame and change text potion like below finally set tween as motion

img

img

Step 8

Now we try to rotate question mark symbol and change potion

Firstly add key frame in question mark time line and rotate it 900 and change potion after add another key frame and rotate 900 and change potion rotate four times like below

img

Step 9

Add new text left to right

Add new layer and add some key frame and change the potion of the text like above according to below picture and set tween as a motion

img

img

Finally add blank key frame and write some script as below

img

Step 10

Now we try to move all text middle to upper

Firstly come back to scene1 and add 25 frames after end convert key frame and add another several frame after set potion all text as top and set tween as motion like below and set custom ease as below

img

img

Now we completed one scene of our banner.

Step 11

Now we try to create another scene

Now add a another new layer of the scene1 and create small object like below and convert as move clip like above (F8) and double click after delete it

img

Step 12

Now we text move bottom to middle

Add new layer and insert several key frame and change potion bottom to middle like below and set tween as a motion

img

img

We create three texts like above according to below picture and stop time line like above using actionscript [stop ();]

img

Finally come back to scene1 and insert 20 frames and convert end as a key frame and insert another few key frame and banner text set top after set tween as a motion like below

img

Step 13

Now we try to change background shape

Firstly add new layer under background and copy (Ctrl + C ) background rectangle and paste it on new layer in place (Ctrl + Shift + V ) and change the color as a white and type some text like below

img

Then insert key frame and change background shape like below and set tween as a shape

img

img

Step 14

Add some text and button

Add new layer in scene1 and add small object and convert it as a move clip and double click then delete it. After add new layer and insert some key frame and change potion as above manner and set tween as a motion

Step 15

Create a button

Firstly add new layer and create rectangle like below

img

Add gradient effect using color pallet like above

img

After button convert as a move clip and add drop shadow as below

img

After double click button and create small triangle using poly star tool as below

img

And type some text on the button

img

Step 16

Now we try to how to animate as a clicking button Firstly we search hand mouse pointer .png image. After add new layer and insert some key frame and change potion of mouse pointer image as below

img

img

Step 17

Then insert key frame of button layer and select button and press down arrow key three times then insert another key frame and press up arrow key three times after playing you can see how to animate click button After insert some key frame of a mouse pointer layer and change potion of mouse pointer image like below.

img

Continue this step two times

Step 18

Now we try animating click button bottom to upper Firstly come bake scene1 and insert 33 frames and convert key frame end of the 33 frame and insert some key frame then change potion of the button bottom to upper as below

img

Step 19

After insert some key frame of a background layer and change potion as below then set tween as a shape after playing you can see how to change background

img

Finally add new layer of the scene1 and insert blank frame and convert as a key frame end of the frame and open action script window [window - action (F9)] and type stop as below.

img

pNow play your banner then you can see nice flash banner You can change some text animation as you like manner and you can improve your banner and enjoy?

img



Author's URL: lankawebdesign
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website. More Flash Tutorials: Featured Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com


Like us to: