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


Fade In and Out Behavior In Motion

Now that we have our graphic in place and set to the correct duration on the MotionR Timeline, we are ready to add a behavior to the image. We want to have the image fade in at the beginning of the video and fade out at the six second position. We can do this with a Motion behavior called Fade In/Fade Out.

  1. Place the Playhead at the beginning of the Timeline. Select the image layer in the Layers pane. Go to the Library - Behaviors - Basic Motion folder. Choose the Fade In/Fade Out behavior from the Stack. Click the Apply button.

    You should see the image disappear from the Canvas, because the default for this behavior is to have the image be invisible at the start of the Timeline. A new layer for the Fade In/Fade Out behavior appears under the image layer in both the Layers pane and the Timeline. You will notice that the duration of the behavior layer automatically matches the duration of the image layer.

    If you play the animation, you will see that the image does fade in and out as expected. We can adjust the duration of the fade in and fade out via the HUD.

    With the Playhead at the beginning of the Timeline, select the Fade In/Fade Out layer. Click Window - Show HUD. As you can see, the HUD shows both the Fade In and Out durations as blue triangles, with a duration of 20 frames each. Letís increase the duration to 30 frames each.

  2. Drag the blue areas on both sides of the gray rectangle in the HUD until each blue area is set to 30 seconds.

    You could also use the sliders in the Inspector to make these changes.

  3. Click the Inspector tab and then the Behaviors tab to show the Fade in/Fade Out controls. Move the Fade In Time slider to 30 frames and repeat this for the Fade Out Time slider. You will notice that these changes are reflected in the HUD.

Now that we have the main graphic in place for the intro, we can build our open title. We will do this by adding the text with the Text tool and then applying the same Fade In/Fade Out behavior to that text. Because we will be using the same 30 frames setting as before, we can simply copy/paste the behavior from the graphic to the text layer.

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


Add Fade+In+and+Out+Behavior+In+Motion to Twitter Add Fade+In+and+Out+Behavior+In+Motion to Facebook Add Fade+In+and+Out+Behavior+In+Motion to MySpace Add Fade+In+and+Out+Behavior+In+Motion to Digg Fade+In+and+Out+Behavior+In+Motion Add Fade+In+and+Out+Behavior+In+Motion to Yahoo My Web Add Fade+In+and+Out+Behavior+In+Motion to Google Bookmarks Add Fade+In+and+Out+Behavior+In+Motion to Stumbleupon Add Fade+In+and+Out+Behavior+In+Motion 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