logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Flash CS4 Button UI Component


In the last tutorial, we added the stop code that will stop our FlashR ecard from repeating after the first pass through the Timeline. Now we will add a “Replay” button that will put the playback control in the hands of the viewer. Once the ecard animation comes to a stop, it will be the viewer that will cause the movie to replay by clicking on this button.

We can create this button by coding ActionScript that will draw a button on the stage for us. But for this tutoiral, we will use the built-in button UI component. We will start working on the last frame of the Timeline. Open your ecard into Flash CS4.

  1. Add a new layer just under the Actions layer. Name this new layer “Replay”. We will use this layer to hold our button.

  2. Add a Keyframe on Frame 105 of the Replay layer. This will insure that the button isn’t visible until this last frame.

  3. Open the Components panel (Window – Components). This panel has two sections, the User Interface and Video sections. The button component is in the User Interface section. Click and drag an instance of the button component onto the stage just under the text.

  4. Select the button. In the Properties panel, give the button an Instance Name of “Replay”.

  5. Open the Component Inspector panel (Window – Component Inspector). We use this panel to set the values for the parameters of our button component. The Label parameter controls the text on the top of our button. Right now, it says “Label” on the button because the value for the Label parameter is set to “Label’ . Let’s change the value of this parameter to “Replay”. You should see the text on the button change from “Label” to “Replay”.

    If we test the ecard now, nothing happens when we click the Replay button. That’s because we still need to add a behavior to the button.

  6. Click on the last frame of the Actions layer and open the Actions panel. After the stop(); code, add the code below. This code tells Flash to listen for a mouse click on the Replay button. When there is a mouse click, Flash carries out the replayMovie function. This function has only one line of code that tells Flash to go back to Frame 1 and play the movie.

    Replay.addEventListener(MouseEvent.CLICK, replayMovie);
    function replayMovie(evt)
    {
    gotoAndPlay(1);
    }


Join us in the Flash forum.




Add Flash+CS4+Button+UI+Component to Twitter Add Flash+CS4+Button+UI+Component to Facebook Add Flash+CS4+Button+UI+Component to MySpace Add Flash+CS4+Button+UI+Component to Del.icio.us Digg Flash+CS4+Button+UI+Component Add Flash+CS4+Button+UI+Component to Yahoo My Web Add Flash+CS4+Button+UI+Component to Google Bookmarks Add Flash+CS4+Button+UI+Component to Stumbleupon Add Flash+CS4+Button+UI+Component 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor