Animating a button

I am using CS 4. I have googled, but have found information in bits & pieces. I am trying to create 2 types of buttons:
For the first one, I want:
1) It to start a tween when mouse moves over it. The tween should run only once.
2) Play a sound also.
For the second button, it has a symbol shown initially:
1) When the user clicks over it, the symbol is changed to something else.
2) When it is clicked again, the original symbol is restored.
This second button acts much like the "Sound On/off button" on typical flash videos. Click once, sound stops, symbol changes. Click second, sound stops, symbol restores.
How can I achieve this in CS4??

In the attachment you`ll find a demo. Hope that helps.

Similar Messages

  • HELP with animation for buttons (i tried to search for days for solution)

    Hellooo
    i've been trying to look at the threads here for a solution but i just can't find... can someone please help me???
    i'm designing a website in flash8... now i have created some buttons, and i want that when i click on the button stars will fly from them and there will be a sound... i have already created the animation of the stars seperatly and it's in the library, i have also the sound file.... i just can't remember how to put everything together.... can someone please remind me what to do step by step so when i'll press on the button the stars will be flying from the button and the sound will play??? pleaseeeeeeeee, it's very very important to me... i would be thankful <3

    hey!!! thank you, the sound is fixed,now the problem is with the stars.... i've been trying to do this soooooooo many times but i have really no idea why it's not working... i don't wantto give up... i don't know what i'm doing wrong.....grrrrrrrrrrrrrrrrrr

  • Web content/HTML5 animations cancelling buttons out-

    Has anyone experienced button failure when place under or over HTML5 animations? It's weird as I have a sweet little Wallaby created pulsing animation which has a button underneath it which actions just fine but have just brought in an animation from HYPE and placed a button under and over to test and both do not function?

    Neil, can you even say how long it takes? ... We are currently working on a magazine app for an international car manufacturers and hope that we can publish it without loading time.
    Thanks for your support!
    Mike

  • How does one put animations into buttons?

    I'm not talking about taking the button and fiddling with the way it is. I have an animated glowing effect in both movie clip and graphic and all I want to do is have it play, overlapping the button's over frame. However, everytime I enable simple buttons, neither work. Is a code needed?
    Also I need to know how to have my glowing effect to repeat in a specific way. The animation has an intro and a loop. I want it to end by going back to where the loop is to continue looping rather than going back to the intro where it would spantaneously pop up (should I use a generic gotoAndPlay (framenumber); code?)

    It's not really clear what you are trying to do or trying to avoid, but it sounds like you won't get where you want to be using SimpleButtons.  If you create your buttons as movieclips you can them pretty well control any aspect of how they play out.

  • Control stage animation from buttons nested in a symbol

    I have a symbol that is animated png SEQ of a rotating "cube". Added to the symbol I created "buttons" that are clear rectangles that define a "clicking area" . Each one corresponds to a side of the "cube". As the cube turns i turn these "buttons" on/off and track the corresponding cube face while it is facing the user. The symbol name is "CubeSpin" the button names in the symbol are Button1, Button2, etc to Button6.
    What I want to be able to do is create click actions for these buttons from the main stage compositionReady which would - (1) stop() the play of "CubeSpin" symbol and (2) goto and play(label) on the main stage timeline.  The animation at the head of play(label) on the main stage, among other things, slides symbol "CubeSpin" off the stage and out of view, then turns it off (display off). At the end of this animation, "CubeSpin" slides back on stage and I want to add a trigger code to start play() again for the "CubeSpin" symbol.
    Thanks for any help here.
    Joel H

    Hi there!
    Edge is a very flexible tool that allows you do very simple things (animate objects on the timeline), and very complex things (custom javascript coding in the code panel, using external code libraries, etc).
    For specific Edge Animate questions, a good place to start is this forum- use the search function to find answers to your questions, or start a new thread if you can't find your answer here.
    Also, be sure to read through the Edge API doc:
    http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
    If you are looking to dive deeper into javascript, here are a few good JS tutorials:
    http://elegantcode.com/2010/10/22/basic-javascript-part-1-functions/
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getting_Started
    http://eloquentjavascript.net/chapter1.html
    If you have a javascript-specific question, http://stackoverflow.com/ is also a great resource.

  • Please help, 3D animation play button Java Script

    The U3D file embedded into the PDF contains 3 procedure animations
    I would like to add a play button for each procedure.
    But I do not see the Animation Objects in the model tree of the pdf and I do not know how to connect to these animations
    with JavaScript.
    I have tried with no luck:
    var _anim = scene.animations.getByIndex(0);
    scene.activateAnimation(_anim);
    _anim.currentTime = 0;
    runtime.play();
    Please show me how this is done with Java Script on a button.
    Thank you

    If you're controlling the 3D animation from a button on the PDF page you need to talk to the correct API.
    The easiest way to do it is to embed a function into the 3D annotation (using a .js text file) then call that function from your button.
    e.g. in the 3D script, use this:
    function playAnimation(i) {
    var _anim = scene.animations.getByIndex(i);
    scene.activateAnimation(_anim);
    _anim.currentTime = 0;
    runtime.play();
    Then on your button, use this:
    getAnnots3D(pageNum)[0].context3D.playAnimation(0);
    then the same for (1) and (2) on your other buttons.

  • Flash animation in button states

    hello to gurus out there,
    i am trying, several days now, to attach flash animated skins
    to 3 of my buttons in a Flex application. Can somebody help me tell
    this to Flex?
    I've tried
    <mx:Button id="deleteButton"
    disabledSkin="@Embed(source='/resource/icons/delete_disabled.swf)"
    overSkin="@Embed(source='/resource/icons/delete_over.swf')"
    upSkin="@Embed(source='/resource/icons/delete_up.swf')"
    downSkin="@Embed(source='/resource/icons/delete_down.swf')"
    click="deleteClicked()"/>
    ..but with no good, i then get 200 errors in line 0 even
    after i delete the code above
    thanks is advance!

    thx Peter for your time helping me out (btw heres the
    link
    you sent me, very useful indeed) but it seems i can't still figure
    out how to skin a Flex button component with animated skins i made
    in Flash. So i''ll try explaining it better. Please bare with me.
    In my Flex application i have 2 different kind of buttons.
    One is static and that was pretty easy skinning it with the
    .swf and .css examples i found.
    Second one though, has a rotating animation on Over state
    which changes the dimensions of the button.
    In my flash file I made a movieClip (Mybutton) where i have
    the four states of my button in 4 different movieclips along the
    timeline. I labeled 4 frames according to the button state it
    holds. i then used make Flex component command to export the swf to
    Flex. And i actually see it in my custom components in Flex, but of
    course i see it as a movieclip and not a button.
    How do i tell Flex that this is a button and define its skin
    states from the frame labels in flash?
    I did try the @embed source skinning a Flex button with
    separate swf but it's totally messed up with the animation the swf
    holds. It completely distorts when i place mouse over it.
    I don't know where I'm going wrong, can somebody help me
    out??

  • Animated Flash Buttons Not Working Right

    I'm updating my website and my menu buttons have an animation on the mouseOver. A simple animated button with the "Up", "Over", "Down" and "Hit" keyframes.
    www.brenda-nies.com will show the effect of my menu buttons and the effect I want to keep. Part of my updates are switching to AS3 and that's where my problem comes in. You can't see it on the website I gave you, but in my working file, when I test it (in IE8), everything starts out fine when I first rollover my button, the animation runs through it's cycle and stops. However, if I press down on the mouse button, the animation starts over. The same when I release the mouse button, the animation starts over. I want the animation to run through 1 cycle and stop, then stay stopped until I roll off the button.
    Does anyone know what I'm doing wrong....or not doing?

    I appreciate you help, you helped me on another question before as well. However, for this particular question, I'm am already doing what your saying, at least I think I am.
    I've attached a screenshot below of what I currently have. The first layer, is all text, so...the "About Me". The second layer is my animation. That blue and black bar is actually hidden behind that grayed out "black and wood" area. That blue and black bar is also the "Button_Bar" layer in my timeline. When I rollover "About Me", that blue bar rises up and the edges fade. That all works fine and dandy. However (and I'm sorry if I'm repeating), let's say I want to go to the "About Me" section. When I click "Down" the mouse button, the animation starts over - the blue bar disappears for a split second and rises up from behind that aforementioned area. The same when I release the mouse button - the bar disappears for a split second and rises up. And I have to mention that not once did I roll off my button, yet the animation replayed with each mouse event.
    I thought maybe it was my file so I did a test and started fresh with a brand new document. Same thing is happening. I don't have any script, except for the stop script in my movie clip. Should I be using some kind of script?
    As for the movie clip, I created it using a shape tween. I also don't want anything in the "Up" state.

  • Animated Flash buttons start

    Hello, hi to everybody, I'm new to the forum. I'm having the following problem. I created these buttons that should do the following screen. Be dark when the mouse is not over them. Smoothly transit to a brighter colour when the mouse get's over them and then again smoothly transit to dark when the mouse get's away. To do so I created 2 animations the one that gets the button darker and the one that gets the button brighter (which is actually the normal picture of the button).
    The button statuses are these:
    UP: Bright to Dark animation
    OVER: Dark to Bright animation
    DOWN: Bright picture
    HIT: Bright picture
    now the buttons work perfectly except for the fact that when i turn on the scene before they get dark the buttons have to go through the up animation (bright to dark) so it looks like turning all the lights off. How do i have my buttons start off being dark?
    THANK YOU VERY MUCH FOR THE HELPING

    there's nothing you can do to control those movieclips.
    you're stuck with what you have or you must redesign your app so you're using a movieclip button that has true frames, not a button that has "status slots".

  • Animated menu buttons

    We have animated buttons on a scene select page with footage being played from the feature timeline. However when the project is rendered, the program is introducing a white line below each place holder.
    We have been able to fudge it by making a boarder around the place holder, but wondered if there is an explination for this line?

    My *guess* is that the Highlight Layer has been moved slightly, or that it is a different aspect ratio, than your footage.
    I'd first look at these in Photoshop and see if either has occured.
    Hunt

  • Help with Reverse Animation On Button

    The buttons are animated with a movie clip inside each button
    and the movie clip plays on rollover, however I need this same
    movie clip inside the buttons to play reversed, when the cursor is
    moved away from the button.
    I know how to do this with an instance but I already made
    each button and fooled around a thousand times with the animation
    and I do not wish to start over again!
    I have only experimented with this type of action script
    before and I must say I am a little lost =(
    Can anyone help me as to how I would go about doing this ?
    Any coding would help.
    I know there is a simple way of doing it with action script,
    but I have no more time to fool around and I need your assistance
    =P
    If you could supply the code it would help me out.
    (I can modify it to work with my page and my buttons)
    Just need something to work off of.
    Maybe a code I can put on the button, or whatever you can
    come up with.
    For future reference,
    thanks

    Without knowing the details of what you have created, or the
    code you have attempted to use, the best I can offer at the moment
    is to say you need to have the reverse playing code of the
    movieclip get triggered by the mouse out event and not stop
    stepping back down the timeline until the _currentframe value
    reaches 1. If another mouse over should occur, then it's your
    decision as to whether it picks up from where it has stepped back
    to or starts from frame 1.
    Starting over again is often the better approach, since what
    you may have created may not be able to facilitate directing things
    to play in reverse.

  • Video and animation Skips 10% of video/animation duration button

    Hello,
    Is it possible to create a button to skip 10% of video and animation duration? I can easily make it work on just the video but I need the animation scroll bar to follow on where I skip. Below is the playback animation I did:
    The play button and the blue with orange bar syncs nicely but I can't sync the skip buttons to work with the video and the bar animation. Basically it's a video player that can do a frame-by-frame for the animation video above to show frame-by-frame when you start drawing. I'd like to have the bar follow the skip buttons on where the video timeline is.
    I'm no code expert but knows how to use Edge Animate, the basic functions.
    Thank you in advance!

    Hi,
    I ve tried to re-create a project with the issue... but it is working all right.
    The timeline animation is not stopping my video....
    If I reproduce the issue I came back to the forum.
    thank you
    s.

  • Run an animation at button click

    Im developing a game and this is the concept:
    A target is moving at a constant speed (i used a thread which sleeps for a number of milli.sec )
    Once the FIRE button is clicked a stick moves to a particular distance ans hits the target
    (For stick ,I used a sprite which performs an animation which is 10 frames long ) I want this animation to occur once ,every time the user click the fire button.
    The problem is that stick animation does not always run smoothly, sometimes it runs for 3 or 4 frames and stops.
    I have given part of the code below. please tell me how to run 2 threads without one depending on the other.
      public void keyPressed(int keyCode) {
        int action = getGameAction(keyCode);
        if (action == UP) {
        else if (action == RIGHT) {
        else if (action == DOWN) {
        else if (action == LEFT) {
        else if (action == FIRE) {
          isHit = true;
          repaint();
      public void keyReleased(int keyCode) {
        isHit = false;
    public void run() {
        int i = 0;
        while (true) {
          try {
            repaint();
            sprite_target.nextFrame();
            thread_target.sleep(200);
            if (isHit) {
              int k = 0;
              while(k<11){
                repaint();
                sprite_stick.nextFrame();
                thread_stick.sleep(20);
                k++;
                if(k==10){
                  isHit = false;
                  break;
          catch (InterruptedException ex) {
      }

    on Fire event, start a new Thread or call a new class who implements Runnable and
    start this thread
    public class AnimationHandler implements Runnable{
      // don't forget try and catch
      // you can also put a MAX_PRIORITY to this thread !
      public void startAnim(){
        thread.start();
      // the animation will be stopped when it is finished
      // you can do it in the run() method
      public void run(){
        while(playing){
    public void keyPressed(int keyCode) {
      else if (action == FIRE) {
        AnimationHandler ah=new AnimationHandler();
        ah.startAnim();  
    }

  • Multi-step animation control buttons

    Dear Members,
    I would like to find a tutorial about creating a .pdf template containing buttons to activate defenite animations, reversing them and re-setting the whole animation to the initial configuration.
    For example, using Tetra4d, I created a simple animation:
    step one - the shaft separates from the drum;
    step two - the shaft moves up.
    Step one is created in the "initial confiuration" and step two in "01" (for example) configuration.
    My objective is, to export it to a .pdf file. The 3D contents should be activated upon opening the file and the animation should start upon request ("step one" button pushed), not automatically.
    Buttons in the document I would like to have: "step one" to activate the shaft separating from the drum; "step one reversed" to reverse this action; "step two" to activate the shaft moving up; "step two reversed" to reverse this action and finally, "reset animation" button which rsets everything to the initial configuration.
    Desperately need help...
    Thank you.

    Hi there!
    Edge is a very flexible tool that allows you do very simple things (animate objects on the timeline), and very complex things (custom javascript coding in the code panel, using external code libraries, etc).
    For specific Edge Animate questions, a good place to start is this forum- use the search function to find answers to your questions, or start a new thread if you can't find your answer here.
    Also, be sure to read through the Edge API doc:
    http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html
    If you are looking to dive deeper into javascript, here are a few good JS tutorials:
    http://elegantcode.com/2010/10/22/basic-javascript-part-1-functions/
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getting_Started
    http://eloquentjavascript.net/chapter1.html
    If you have a javascript-specific question, http://stackoverflow.com/ is also a great resource.

  • Animating a button with actionScript

    I'm fairly stumped on this one - but probably quite simple to fix.
    I need to animate the scale of a button with actionScript 2.0. I've inherited a project that was done with actionScript 2.0 and have decided to stay with this generation rather than rewrite the whole project. Anyway - I've created a sound object, it plays audio from the library and 3 seconds after it starts playing, I want to animate the "next" button and make it pulse to attract the users attention.
    Doing this by putting the button in a movie clip is not working as I am losing it's button states and besides it's probably far more tighter to program it.
    When the user rolls over the button it stops pulsing but still retains it's up, over and down states.
    Any easy answer?

    Thanks for your help Ned.
    I ended up making an advanced button with movie clips and using programming for all the states.
    Movies are so much easier to control than buttons.
    But you have raised something I had overlooked...setTimeout( )
    I was using setInterval( ) and then doing clearInterval( ) within the function so it would only loop once, which of course was problematic if the user beat the 'clearInterval' code by clicking on the button too early.
    Actually used setInterval( ) to delay all sound on the project - now going to re-program all that.
    Thanks

  • Animanted Menus, Buttons

    Unless I'm missing something it would be great to have sub-menus that fade or slide in and out, as well as fading rollovers on buttons and links. I know there are some tricky workarounds to create similar effects but as far as I can see there's no easy way. Little subtle touches like this much such a difference to the look and feel of a site.

    Because my poor english I don't understand the appearence of your buttons. But you can change the appearance of the buttons by creating a new UI class. I've already done another ButtonUI class for our application. I copy hier, just to see an example without comments because of the language for the javadoc is not english. It follows the appearance of the Metal L&F, the flat style.
    public class CoreButtonUI
    extends BasicButtonUI
    public CoreButtonUI() { }
    private final static CoreButtonUI buttonUI = new CoreButtonUI();
    private boolean defaults_initialized = false;
    protected int dashedRectGapX;
    protected int dashedRectGapY;
    protected int dashedRectGapWidth;
    protected int dashedRectGapHeight;
    protected Color focusColor;
    public static ComponentUI createUI(JComponent jcomponent)
    return buttonUI;
    public void installDefaults(AbstractButton button)
    super.installDefaults(button);
    if (!defaults_initialized)
    String pp = getPropertyPrefix();
    focusColor = UIManager.getColor(pp + "focus");
    dashedRectGapX = UIManager.getInt(pp + "dashedRectGapX");
    dashedRectGapY = UIManager.getInt(pp + "dashedRectGapY");
    dashedRectGapWidth = UIManager.getInt(pp + "dashedRectGapWidth");
    dashedRectGapHeight = UIManager.getInt(pp + "dashedRectGapHeight");
    defaults_initialized = true;
    public void uninstallDefaults(AbstractButton button)
    super.uninstallDefaults(button);
    defaults_initialized = false;
    protected void paintButtonPressed(Graphics g, AbstractButton abstractbutton)
    setTextShiftOffset();
    protected void paintFocus(Graphics g, AbstractButton b, Rectangle viewRect, Rectangle textRect, Rectangle iconRect)
    JButton button = (JButton)b;
    int width = b.getWidth();
    int height = b.getHeight();
    if (!button.isRolloverEnabled())
    g.setColor(focusColor);
    BasicGraphicsUtils.drawDashedRect(g, dashedRectGapX, dashedRectGapY,
    width - dashedRectGapWidth, height - dashedRectGapHeight);

Maybe you are looking for