Adobe Animate
About
Adobe Animate (formerly Adobe Flash Professional, Macromedia Flash, and FutureSplash Animator) is a multimedia authoring and computer animation program owned now by Adobe. It started as Flash, but now it's most useful for interactive HTML5 canvases.
Animate is used to design vector graphics and animation for web applications, online animation, interactive projects and sometimes television series, websites, etc. The program also offers support for raster graphics, rich text, audio-video embedding, and ActionScript 3.0 scripting. Animations may be published for HTML5, WebGL, Scalable Vector Graphics (SVG) animation and spritesheets.
Tips and Tricks
Add a HTML5 Buttons with Action
- Start by creating a new HTML5 project.
- Add a rectangle, and turn it into a "Button" symbol (F8).
- Note: You add "dynamic" text inside the button, but that can get tricky.
- Give that button an instance name. (eg: "btnDatasets")
- You might also want to save your button with any dressing into its own one-frame "Movie" symbol (F8), so that you can animate it, and it will behave the same wherever. It has to be a "Movie" BTW - if it's a "Graphic" any action inside won't work.
- Create an "action" layer just above your button, and select the first frame for that layer (or wherever you want the button to do something), and open Window > Actions.
- You can use the handy "Add action wizard", but this tends to do ActionScript that doesn't work with HTML, so instead just add something like this:
var _this = this;
_this.btnDatasets.addEventListener('click', function() {
alert("Button clicked!");
window.parent.location.href = window.parent.location.origin + "/docs/datasets.htm";
});
_this.stop();This particular code takes the parent window (the webpage that includes the HTML5 element) and sends it to the page specific... a simpler version would just be window.location.href = "https://example.com/".
Notice that we also want it to stop, so it doesn't call in a loop (movies loop by default).
- Now test that it works.
