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


Brand Animation in ScreenFlow - Planning

Branding is very important to your marketing plan and, as we all know, most authors must do most of their own marketing. One technique that is used often in marketing trailers is a reusable opening animation, sometimes called a bumper or intro. Usually this opening animation contains a company logo and other branding elements.

I decided to try this marketing technique for my DIY series of ebooks, which are how-to ebooks for creating and marketing book apps. Because these books are for authors and artists, the instructions do not require any coding. “All you need is a mouse” is the perfect book subtitle, along with the mouse character, for the book series.

When using ScreenFlow for video training, the special effects are usually limited to pan and zoom, text transitions and mouse callouts. But I wanted to experiment with a few simple special effects with ScreenFlow. For this video, I used a masking technique to simulate a curved line drawn on the screen.

Masking techniques have been around for some time and very popular in animation software like FlashR. I wanted to use a mask to “draw a line” across the screen to begin a marketing video. I create a lot of my videos in ScreenFlow and I needed a way to create this technique without switching to another software such as After EffectsR.

The Opening Effect

This effect will give the illusion that a curved line is being draw across the center of a white screen, cutting the screen in half. After the line is drawn, the color of the bottom half of the screen will change and the line will move down to the bottom of the screen, leaving just enough room for the book subtitle, mouse and company name. The company logo/name is a nested clip on the Timeline. At this point, the animation is about 10 seconds in duration and can be used as an opening for all the marketing trailers in the book series.

We will first create a shorter version of this video bumper that will be 5 seconds in duration. Using that as a starting point, we will extend the animation to the longer 10 second animation.

Design Elements

  1. The background is a simple gradient and will be unchanged until the end of the video short. We will fade in the colored background.

  2. The mask for the line effect is the height of the line, the width of the screen and the same color gradient as the background. As it moves to the right, the line is drawn on the screen.

  3. The curved line tops a solid colored bottom half of the screen. For branding purposes, this solid color will be from the brand color scheme.

  4. The mouse and company logo letters (dC) are transparent pngs.

  5. The book subtitle and the text in the logo will be created with the Text tool in ScreenFlow.

The Timing

  1. The masking reveal of the curved line - 3 seconds

  2. The mouse, subtitle and company logo move into position on the screen - 3 seconds

  3. Music and sound effect are timed to end as the logo, mouse and subtitle stop moving

  4. Two seconds added at the end as a placeholder to be removed when added to book trailer.

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


Add Brand+Animation+in+ScreenFlow+%2D+Planning to Twitter Add Brand+Animation+in+ScreenFlow+%2D+Planning to Facebook Add Brand+Animation+in+ScreenFlow+%2D+Planning to MySpace Add Brand+Animation+in+ScreenFlow+%2D+Planning to Del.icio.us Digg Brand+Animation+in+ScreenFlow+%2D+Planning Add Brand+Animation+in+ScreenFlow+%2D+Planning to Yahoo My Web Add Brand+Animation+in+ScreenFlow+%2D+Planning to Google Bookmarks Add Brand+Animation+in+ScreenFlow+%2D+Planning to Stumbleupon Add Brand+Animation+in+ScreenFlow+%2D+Planning 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