4 Replies Latest reply on Dec 10, 2012 2:12 AM by dhosford

    Good guide to button actions...


      Hi there


      Still new to Edge Animate im trying to figure out the way that animation with buttons works.

      It is not going to well. Can you guys suggest some good guides, videos would be cool.


      I dont understand why the frame numbers has to be different to other apps. Like 0005 or -2000 .. Why this scale? Is it because HTM 5 has some kind of sick frame rate?


      Is it better to navigate via lables?


      Sorry if this has been asked a million times..



        • 1. Re: Good guide to button actions...
          TimJaramillo Level 4

          Hi Poul,


          The "frame numbers" you mentioned actually aren't frame numbers- they are milliseconds on the timeline. Labels are indeed a good way to navigate around the timeline, as they can make functionality more clear.


          If you search the forums, you will find many examples of using buttons to control animation. You can either use the built-in Edge mouse events, or use jQuery mousevents through code.

          • 2. Re: Good guide to button actions...
            dhosford Employee Moderator

            Hi there and welcome!


              What Tim said is right. I just wanted to direct you to a similar thread that has an explanation on controlling an animation with a button. If you need further clarification on this let me know!




            I hope this helps!

            • 3. Re: Good guide to button actions...
              dhosford Employee Moderator

              Hi there,


                I just wanted to circle back on this thread and provide a step-by-step to creating a simple button rollover as well as click functionality in Edge Animate.


                For this quick guide, I will have a "play" button that plays an animation in the Edge Animate file. I have created a sample project file that will help you in the process of learning about button actions.


              First, make your button. For this I am just using a rounded rectangle with the word "play" typed on top:



              The best way to add button functionality is with labels and the button actions included in Edge Animate. In the sample project file, you'll notice that there is a symbol with a simple animation inside called "circle_sym". You can add click functionality to your button to play this animation like this:


              In the Actions panel, click the Open Actions button next to your button layer:



              Choose "click" in the pop up menu, and then choose the code snippet on the right hand side of the code window called "Get Symbol". It's the second code snippet from the bottom.


              After you click the code snippet, you will get the code placed in for you in the code window. Type in "circle_sym" in place of the default "Symbol1". Next, type in "mySymbolObject.play();" Make sure your code looks like the screenshot below:



              Close out of the code window. Now we're going to add a rollover to our button. Click your button layer in the Actions panel and add a simple color change with a duration of .5 seconds. Move your playhead to the beginning of the color change animation and hit Command + "L" on a Mac or CTRL + "L" on a PC. This is how you make a label. Type in the word "over":



              Then, move your playhead to the end of the color change animation and make a new label. This time naming it "out". Finally, move your cursor back to the "over" label, and hit Command +"T" on a Mac or CTRL + "T" on a PC. This is how you make a trigger, We will need to make a stop trigger to stop our color change animation from automatically playing. In the code window that appears, choose the "Stop" code snippet. Close the window, and make sure your timeline looks something like this:



              In the Actions panel, select your button layer and click the Open Actions button again, this time adding a "mouseover" button event:



              Click the "Play from" code snippet on the right and type in "over" in place of the default 1000.


              Now, click the add event button one more time this time choosing "mouseout". Click the Play Reverse code snippet on the right, and in the parenthesis type in "out".


              And that's it! That's the basics of button actions. I wanted to circle back and include this information so it's all in one place. : ) If you need more help or additional clarification let me know!