How to create animated text headers

inspiration: www.roggeundpott.de

When creating websites with dark backgrounds, colourful stylistic content really stands out – whether it’s photos, type or graphics. This is the technique used in real portfolios taken by hand to clients for years, so it’s no surprise that this should also be the choice for many when transferring their work online. This is certainly the case for Rogge & Pott Design, whose site uses a dark-grey background to show off its previous projects. Where this style really excels is the animated text header which pops up across the site. This has been done in Flash and uses the Add blending mode to create areas of brightness where the words overlap. The text animates in and out on different pages, depending on the navigation that is selected.

TECHNIQUE

Animate your header titles

Write a title

Open Flash and use the Text tool to create a large title for your site in a bright blue colour. Change the background colour of the document to dark grey so that it stands out.

Convert to a clip

Select the text on the screen and, from the Modify menu, choose Convert to Symbol, give it a name, make it a movie clip and choose top-left on the Registration box.

Position off stage

For the time being, move the text off the stage to either the left or right as we will be making the different titles animate onto the page from a variety of places/directions.

Try new blends

With the title selected, look inside the Properties panel and find the Blend Mode dropdown. Change this from Normal to Add in order to
get the additive colour effect.

Add frames

Select frame 90 on the timeline and hit F5 to add a frame, then Ctrl/right-click the timeline and add a motion tween. Next move the text so it’s aligned to the left.

Easing into it

In the Motion Editor panel, scroll to the bottom of the window and then, under the Ease section, bump up the Simple (Slow) parameter from 0 to 100.

Apply to the X axis

Scroll to the X property in the Motion Editor and change the Ease drop menu from No Ease to Simple (Slow) to apply the easing to this title.

Repeat the process

Add more words and convert them to movie clips, then animate them arriving on the screen from various locations at different speeds

Publish the file

Hit Cmd/Ctrl+Return to test the animation; this also publishes a SWF version of the file in the folder that the project is saved to.

TECHNIQUE

Blending modes explained
Blending modes can be a little tricky to understand although they are widely available in many creative programs that help us as designers. Here we reveal a bit of the science behind how they work.

01. Additive blending
Additive blending occurs when pixels that overlap have their values added to the colour of the pixels beneath. If enough colours overlap, the result will take the value up to white; this is the way light behaves too.

02. Subtractive blending
Subtractive blending is what happens when you mix inks or paint together: more and more colours will end up as black. The Subtract blend mode would be an example of this but Darken and Multiply are similar.

03. Overlay blending
This mode is a mix of the two. Light parts become lighter while dark parts become darker using an S-curve. This mode offers some really interesting results – particularly with overlapping images.