Animating Color of Text in Motion 5

Animating Color of Text in Motion 5
In the previous tutorial, we began creating our MotionR 5 logo reveal animation. We used keyframes to control the animated change in colors for the shape layers in the design. In this tutorial, we will animate the text.

  1. With the text tool, add the company name above the color bar, the tagline centered over the bar and the web address below the bar. You should have three new layers which are named using the text added to that layer.

  2. In the Inspector, set the Font, Size and Color for each text element. Set the company name and web address text to white and the tagline to the dominant color. Lock these layers.

    Once you have all the design elements on the screen, we can begin to create the animation. Let’s begin working with the background layer.

  3. Unlock and select the Rectangle layer and go to Inspector - Shape - Style.

  4. With the Playhead at the beginning of the Timeline, click the Record icon at the top of the Timeline. Move the Playhead to the 6 seconds location on the Timeline.

  5. In the Inspector, change the Fill Color for the rectangle to white or your secondary color. Turn off the Record icon. Lock the layer.

  6. Return the Playhead to the beginning of the Timeline and repeat the previous steps to animated the color bar from white to the dominate color.

  7. Playback the animation and verify that the color of the background and color bar change colors over the 6 seconds duration of the animation.

  8. Return the Playhead back to the beginning of the Timeline. Unlock and select the company name layer. Go to the Inspector - Text - Style tab. Click the Record button, move the Playhead to the 6 seconds position and change the text color from white to your dominant color. Turn off the Record icon.

  9. Return the Playhead back to the beginning of the Timeline. Repeat the previous steps for the tagline and web address, setting the color change in the Inspector - Text - Style tab.

  10. Save the .motn file. Click Share - Export Movie and export the movie as an .mov file, which can be imported into any Motion template.

Because the animation is somewhat generic in theme, it can be used as an opening or closing logo reveal.

← Back

Finished Project



Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie and Mac are trademarks of Apple Inc., registered in the U.S. and other countries. BellaOnline is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Screenshots used by permission.





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map








Content copyright © 2023 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.