HTML5 Interactives with Adobe Animate!
For my last shift before going on vacation I worked with Tate to try and figure out how to make an interactive with Adobe Animate. He found a couple of video tutorials online and we wanted to use them to make a simple drag and drop game. The results were mixed…
We found out that it is possible to make interactives in Animate but we had to mix our skills animating and coding to make one. Animate uses a Javascript library called CreateJS (and a bunch of sublibraries) to interact with pictures and elements called ‘symbols’. From there, if Tate made a symbol that represents an animation, I could make it do stuff like play and pause. We got a funny elephant animation from the tutorials and clicking the button makes the different parts move or not move.
The next step was more challenging. Making a simple drag and drop game. If the user drags the circle into the box, a green square should pop up, else a red square would pop up. Although there are a lot of references on how to use Adobe Animate and how CreateJS works, there is virtually no documentation on how to use them together. We managed to get the dragging and dropping working but we couldn’t get any other functionality. This was a bit of a disappointment. At least we both got to learn a little bit about what the other one works with.
