Adobe Animate| How to add interactivity to the buttons to show a popup messge

this is the fifth and last video in a series of five in which you will learn how to make this animated an interactive infographic with adobe animate and the dhobi illustrator CC in the previous videos we've animated all the rotating and moving objects and this video shows you how to add interactivity to your document I'll show you how to make these buttons and how to make them clickable to keep this tutorial as simple as possible I've created this new more empty document to show you how interactivity works I'll first test this document in the browser to do this I go to control test as you can see this document contains the looping animation the pop-up opens closes again and so on so the first thing to do is to add a few stop actions to stop this animation then we add some actions to the button so that it starts the animation when a user clicks on it in adobe animate i first double-click on the pop-up that I've already created before you now see the pop-up animation but we want to stop it in the first frame that's why I now click on the first frame in the actions layer that I've already created now go to window actions to open the actions panel we can add some code here with a very handy actions wizard click on the add using wizard button to do this now we have to tell any mate what to do at this position in the timeline in this case we want to stop the animation so first scroll down and click on stop now click on this timeline then next to go to the next step and now on with this frame click on finish an add to add the code the code has now been added to the first frame you can also see this because there is a small a symbol in the first frame I'll repeat this step for the tenth frame the animation is to stop there again when we've clicked the button so I'll select this frame click on the add using wizard button scroll down click on stop now click on this timeline then next with this frame and now click finish and add all stop actions have been added now let's go back to seeing one to add the actual interactivity before we can add this interactivity we have to name all symbol instances on the main timeline we can do this by first clicking on the info button with the selection tool then go to the properties panel and type info button in the instance name field now select the pop-up instance go to the instance name field again and name it pop-up we have to add the actual interactivity to the first frame in the actions layer so first click on this frame and then go back to the actions panel now click on the add using wizard button scroll down in the first menu and click on play we do this because we want to play the pop up animation when we click on the info button that's why we have to click pop up in the next field now click Next now we have to tell animate what trigger is to start the animation this is a mouse click so select on mouse click and because we click the info button we have to select info button in the next field now click finish and add and the code is now added to the first frame the interactivity should now work when we test this in a browser go to control test to do this I'll click the button and it works so together with all the previous videos I think you have all the tools now to make a stunning interactive infographic yourself

Channel: Adobe Animate

Views: 17,243

Keywords: AdobeAnimate, ACP

Id: 4G11GFz3rIQ

Length: 3min 53sec (233 seconds)

Published: Mon Apr 08 2019