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

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Designing a Blinkie for Flash CS3 Animation


The owner of J3 Designs asked me to create an advertising blinkie for her digital scrapbooking website. She wanted to maintain the classic elegance of the company brand and gave me a set of graphics that she had already used for her logo. These consisted of a cameo, lace, grunge backgrounds, bow, dried flowers and two ladybugs. These graphics were originally created at 300 dpi and were very large. So my first job was to reduce each graphic to 72 dpi and to a size small enough to use in a 150 x 50 pixel blinkie. From this test, I could determine which of the elements could be used at such a small size without loosing too much of their detail.

I was surprised that most of the elements worked fine at such a reduction in size, except for the cameo and dried flowers. When reduced to a height of 50 pixels, most of the details were lost from these elements. But the cameo was such an important part of the logo, I decided to used only the top half of the cameo. By doing this, I didn’t need to reduce the image to such a small size and saved most of the detail of the cameo.

I started to build the design with the static background elements. These elements would not be part of the animation. I choose one of the four grunge backgrounds included in the graphic samples as the overall background layer. Next I added the lace and cameo. To save room at the top of the blinkie for the text animation, I placed the lace at an angle at the bottom left corner. Finally, I added one of the two ladybugs. But those ladybugs were just waiting to be animated.

The foundation of the animation would be made up of several text animations. But those ladybugs kept looking at me, so I decided to add a second animation starring the ladybugs. One ladybug would be visible during the text animation and then the second ladybug would appear from under the cameo. Finally, they would crawl off together. In order to do this, I needed to break apart the background layer into several layers. The first background layer would be the grunge graphic. The second would be the lace and cameo. Of course, I needed PNGs of both ladybugs, the lace and cameo in order to maintain the transparency in Flash.

So, I now had four layers to my blinkie, besides the text animation layer, which I would add later.

Most blinkies on scrapbooking sites are 150 x 50 pixels. This doesn’t give you much space for a complicated text animation. I decided to use the built-in Timeline Effects to animate the text. The first part of the animation would be the designer’s name. There are five designer’s for this website, including myself. Because my business name was the longest, I decide to create the original animation using my name. Then, it would be easy to switch out the designer’s name for the other four blinkies. Now that the design is built, we are ready to build our animation.

J3 Designs


Join us in the Flash forum




Add Designing+a+Blinkie+for+Flash+CS3+Animation to Twitter Add Designing+a+Blinkie+for+Flash+CS3+Animation to Facebook Add Designing+a+Blinkie+for+Flash+CS3+Animation to MySpace Add Designing+a+Blinkie+for+Flash+CS3+Animation to Del.icio.us Digg Designing+a+Blinkie+for+Flash+CS3+Animation Add Designing+a+Blinkie+for+Flash+CS3+Animation to Yahoo My Web Add Designing+a+Blinkie+for+Flash+CS3+Animation to Google Bookmarks Add Designing+a+Blinkie+for+Flash+CS3+Animation to Stumbleupon Add Designing+a+Blinkie+for+Flash+CS3+Animation 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
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

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