How to create a flash banner

April 16, 2010

Animations

Step 1

  • Take an image to use
  • Create a new flash document.
  • Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 264 pixels.
  • Select white color as background color.
  • Set the Flash movie’s frame rate to 54 and click ok.

Step 2

  • Call the current layer any name , i named this one motorcycle, (double-click on its default name (Layer 1) to change it.)
  • Now go to , file > Import > Import to stage (Shortcut key: Ctrl+R) and import the image that you just saved in step 1 into a flash stage.

Step 3

  • While the photo is image selected, go to the Align Panel (Ctrl+K) and do the following:
  • a) Make sure that the Align/Distribute to Stage button is turned on,
  • b) Click on the Align horizontal center button and
  • c) Click the Align vertical center button.

Step 4

  • While the image is still selected, hit F8 key (Convert to Symbol) to convert it into a movie clip symbol.
  • Click now on frame 10 and hit F6 key.
  • While you’re still on frame 10, hit F6 key ten times.
  • Go back on frame 11 and hit delete key on the keyboard. Do this also for frame 13,15,17 and 19.

Step 5

  • Click on frame 70 and 75 and hit F6 key.
  • Go to  frame 75, place the image on the position like it is shown on the picture below.
  • Go  on frame 55, select the Selection Tool (V) and click once on the image to select it.
  • Then, go to the Properties Panel (Ctrl+F3) below the stage.
  • After that, select Filters tab from the left side.
  • Click on the plus icon and select the Blur filter.
  • Make the adjustments as follows:

Step 6

  • Click on properties button.
  • On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follows:

  • Go back on the first frame and place image on the position like it is shown on the picture below.

  • Go to  frame 1, repeat steps 5  and 6.

Step 7

  • Right-click anywhere on the gray area between frame 1 and 10 and frame 70 and 75 on the timeline and choose Create Motion Tween from the menu that appears.

Download source: banner.zip

, , , , , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

6 Responses to “How to create a flash banner”

  1. Abbasi Mashooque Says:

    Verrrrrrrry excellent. I am searching since couple of months on internet to get this tutorial. By going through this site i got what i wanted. Thanks. It will be good if you give more details to make advertisement as per time details with pictures and texts.

  2. Elisa Says:

    Thanks for the interesting effect, but you have to create a Classic Tween, not a Motion Tween, isn’t? ^_^

Trackbacks/Pingbacks

  1.   How to create a flash banner | Flash tutorials | Flash video … by Flash Designers - April 16, 2010

    [...] Read more here: How to create a flash banner | Flash tutorials | Flash video … [...]

  2. How to design a web 2.0 layout? tutorial and psd | Your Insp | Tutorialicious.info - April 19, 2010

    [...] How to create a flash banner | Flash tutorials | Flash video … [...]

  3. Feel Robbie Williams (Tutorial Piano) By Georges | Photoshop | Tutorialicious.info - December 30, 2010

    [...] How to create a flash banner | Flash tutorials | Flash video … [...]

  4. How to create a flash banner | Flash Designers - June 16, 2011

    [...] Read more: How to create a flash banner [...]

Leave a Reply