01 is powered by Vocal.
Vocal is a platform that provides storytelling tools and engaged communities for writers, musicians, filmmakers, podcasters, and other creators to get discovered and fund their creativity.
How does Vocal work?
Creators share their stories on Vocal’s communities. In return, creators earn money when they are tipped and when their stories are read.
How do I join Vocal?
Vocal welcomes creators of all shapes and sizes. Join for free and start creating.
To learn more about Vocal, visit our resources.Show less
When I started using Adobe Animation to create animations for my website, I ran into a few issues.
1. There wasn’t any simple way to incorporate the animation into my web page or web app.
2. I had no way of knowing when the animation had stopped.
Step 1: Create a new HTML Canvas project.
Step 2: Create your animation.
Step 3: Stop the animation in the last frame. You don’t need to to do this for your animation to work but this will let you add some code to let your website/web app know when the animation has completed. If you want your animation to loop forever then you can skip this step.
Right click on the last frame and then select Actions.
Type the following into the action box.
The stop command will stop the animation and the second line stops any sounds (not needed if you don’t have sounds)
Step 4: Publish your project. You should have two files and some folders.
Step 6: Include the .js file created when you published your Adobe Animation Project (step 4). Make sure it’s included after the Animation.JS from step 5.
Step 7: Open up the .html file from step 4. Look for a dive with the ID “animation_container.” It should be near the bottom of the file inside the body tag. Copy the tag and everything inside into your body tag. You may need to rename of your tags in order to avoid duplicate IDs.
Step 8: Open up the JS file created in step 4. If you use sounds then you need to look for the "playSound" function call. Replace “playSound” with “Animations.playSound.”
Next, look for the code added in step 3: “createjs.Sound.stop();”. It will be inside of a function. That function will be called when the animation has stopped. You can add whatever code you want here to let your website/web app know the animation has finished.
Note: You can add actions to any frames in your project and then see the code in the .js file. Also, any other actions you create will be here. You can create buttons in your project add listeners and then have those listeners fire your own functions.
Step 9: Run your site/ app.