logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Make a 125 x 125 Ad Button in Flash


Just the other day, I was writing a tutorial about how to create an animated 125 x 125 pixel square button ad in PhotoshopR Elements 7 and I thought that I might make another in FlashR CS4.

As you can see, I have already created the graphics for this ad. It has a background graphic and five other layers that I will use to create the animation. Each layer has a colored strip with some text describing one of the services that I offer at my design company. I will animate each layer individually to slide on top of the background graphic. The last layer contains the name of my company. After this layer slides in, the animation will repeat.

  1. Open Adobe Flash CS4 and choose Create from Template Advertising. From the Templates list, choose 125 x 125 square button. This will give you a stage that is only 125 x 125 pixels.

  2. Click File, Import, Import to Library to import our PSD file into Flash. All of the graphics from the PSD file are placed in an Assets folder in the Flash Library.

  3. We have one layer in the Timeline. Let's rename this layer to "Background" and drag an instance of the Background graphic onto the stage. To be sure that the graphic is in the correct position, set the X and Y coordinates to 0.0.

  4. Add a new layer to the Timeline and name it "WebDesign". This is our first slide-in graphic.

    Let's have this graphic slide onto the stage over the span of 50 frames. Our Frames Per Second is set by default to 24. Therefore the slide in effect will last slightly over two seconds.

  5. Right-click on Frame 50 of the Background layer and insert a Frame to expand this layer to Frame 50. On the WebDesign layer, right-click on Frame 1 and drag an instance of the WebDesign graphic to the right edge of the stage. We don't want the graphic to be visible on Frame 1, so place it at the right edge of the stage.

Next →

Join us in the Flash forum.




Add Make+a+125+x+125+Ad+Button+in+Flash to Twitter Add Make+a+125+x+125+Ad+Button+in+Flash to Facebook Add Make+a+125+x+125+Ad+Button+in+Flash to MySpace Add Make+a+125+x+125+Ad+Button+in+Flash to Del.icio.us Digg Make+a+125+x+125+Ad+Button+in+Flash Add Make+a+125+x+125+Ad+Button+in+Flash to Yahoo My Web Add Make+a+125+x+125+Ad+Button+in+Flash to Google Bookmarks Add Make+a+125+x+125+Ad+Button+in+Flash to Stumbleupon Add Make+a+125+x+125+Ad+Button+in+Flash to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Animating Color of Text in Motion 5

Animating Color of Shapes in Motion 5

Motion Workspace - Checkbox, Dials and More

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor