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

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Brand Animation Bumper - Short

In this tutorial, we will create the short version of the brand animation bumper for a video marketing campaign. From this short version, we will create a longer more detailed bumper. Each bumper can be used in many ways such as the beginning or ending of a book trailer, training video and other types of video marketing. The product we are marketing is my series of DIY ebooks for creating and marketing book apps.

The short version of the bumper animation will contain the most important branding assets; the mouse character, the book subtitle ďAll you need is a mouseĒ and the company name and url.

The long version will have similar but longer animation. The part of the bumper animation that is common to both versions is the curved line drawing masking animation at the start and the branding elements mentioned above.

Line Drawing Mask Animation

There are three design elements on the screen during this animation. The background gradient layer remains static. The curved line png also remains static and the mask layer moves to the right, giving the illusion that the curved line is begin drawn on the screen.

  1. Open ScreenFlow. When the Configure Recording window opens, click the X in the left corner to close the dialog box. We will not be starting this project by creating a screen cast.

  2. From the ScreenFlow Menubar at the top of your desktop, click File - New Empty Document.

  3. In the Create Blank Document dialog box, set the Preset to 1080p HD, which will give you a screen width of 1920 and height of 1080. This is the largest screen resolution offered on YouTubeR.

  4. Letís fill the empty Timeline, beginning with the background gradient jpg. From the Menubar, click Insert - Choose and browse to your jpg. You will see the jpg appear on the canvas and on the Timeline as a small rectangular bar on the top Track.

  5. Our bumper will be 5 seconds in duration. So letís extend the background layer to 5 seconds by dragging the right edge. Place your mouse cursor over the edge until you see a double arrow and drag the edge to the 5 seconds mark on the Timeline. You might need to expand the Timeline to show smaller increments using the Timeline Magnification Slider at the bottom of the workspace.

  6. Import the curved line png. It should automatically be placed in the vertical center of the screen and on a Track above the background Track. As you can see, the Tracks are labeled with the name of the image they contain.

  7. We will import the mask graphic now. As with the curved line png, it will be automatically placed centered on the screen.

  8. Lastly, we will import the .mp3 audio. As you can see, it is not added to the screen but is added to a Track on the Timeline.

    We want the masking effect to begin as soon as the video starts and last 3 seconds. The effect is caused by the mask moving over the screen and revealing the line below. We can do this with a simple Video Action to the Mask layer.

  9. Select the Mask Track on the Timeline and place the Scrubber at the beginning of the Timeline. From the Video Properties pane, click the Add Video Action button at the bottom. You will see a small rectangle added to the Mask Track. This represents the Video Action. Drag the edge of the Action rectangle to the 3 second mark on the Timeline.

  10. Place the Scrubber at the end of the video action rectangle and select the Mask Track again.

  11. The mask graphic is already in the beginning position for the animation. Now we will set the ending position for the mask graphic. Drag the mask graphic to the right until it is off the screen. Hold down your Shift key to move the mask along a straight line.

    Now that we have the main elements on the Timeline, test the animation by placing the Scrubber at the beginning of the Timeline and clicking the Play button above the Timeline.

    Next we will add the mouse and other branding elements.

    Join us in the Animation forum. | Join us in the Digital Art forum.


Add Brand+Animation+Bumper+%2D+Short to Twitter Add Brand+Animation+Bumper+%2D+Short to Facebook Add Brand+Animation+Bumper+%2D+Short to MySpace Add Brand+Animation+Bumper+%2D+Short to Digg Brand+Animation+Bumper+%2D+Short Add Brand+Animation+Bumper+%2D+Short to Yahoo My Web Add Brand+Animation+Bumper+%2D+Short to Google Bookmarks Add Brand+Animation+Bumper+%2D+Short to Stumbleupon Add Brand+Animation+Bumper+%2D+Short 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 © 2018 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

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor