g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor