Excellent!
Yeah. I really wanted to suggest using Movie Clips instead of the default Button for this situation because Movie Clips are way easier to handle and way more dynamic.
But I'm glad you already figured it out.
To learn the way things work in HTML5 documents, it's important to learn CreateJS and the way CreateJS is integrated with Animate CC.
- To learn CreateJS, just head over to the offical website:
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
- This page in particular is a must: EaselJS Tutorial: Mouse Interaction .
- Also checkout the demos: https://createjs.com/demos/easeljs/spritesheet
- Examples of using exportRoot, this, on, addEventListener, bind, custom reference to the current timeline: Button within Movieclip
You'll find the removeAllEventListeners method there. The selected property is a custom property I added dynamically.
To better understand the integration between ANCC and CreateJS, these are my recommendations:
- Use console.log(obj) and inspect the methods and properties the object has;
- Code Snippets panel;
- Examine the exported HTML and JS files;
- Animate CC templates (File > New > Templates or File > New from Template... (2019 version)).
- Camera API: Camera in Animate CC
- Advanced layers API: Create timeline layers with Animate CC
And there's no official cheatsheet. What I can do is to tell you some useful things:
SPECIAL PROPERTIES
exportRoot // a reference to the main timeline created by Animate CC
lib // reference to the Library
lib.properties // contains useful document properties like framerate
nominalBounds // a property created by Animate CC to display objects containing initial transform properties like width and height
movieclip.timeline.duration // total frames of a timeline
movieclip.timeline.position or movieclip.currentFrame // current frame of a movie clip
VAR DECLARATION
var score = 0; // declares a variable to that frame only
this.score = 0; // creates a property for that object and it's available for the entire timeline
score = 0; // declares a global variable
ADD OBJECTS DYNAMICALLY AT RUNTIME
this.addChild(new lib.LibraryLinkageName());
stage.addChild(new lib.LibraryLinkageName());
exportRoot.addChild(new lib.LibraryLinkageName());
PLACE REGULAR ANIMATE CC OBJECTS (LIKE MOVIE CLIPS AND BUTTONS) OVER COMPONENTS (LIKE VIDEO)
canvas.style.zIndex = "1"; // a value bigger than 0
HOW TO MAKE SURE THE CHILDREN PROPS AND METHODS ARE READY AND HOW TO ACCESS THEM:
var that = this;
that.start = function()
{
// if using advanced layers that.container = that.container.children[0].children; // if not using advanced layers //that.container = that.container.children;
}
stage.on("drawstart", that.start, this, true);
// OR setTimeout(that.start, 0);
PERFORMANCE TIPS:
- Try testing your file with and without exporting the document as texture (Publish Settings > JavaScript/HTML > Image Settings > Export document as texture);
- Consider turning off the advanced layers mode (Ctrl/Cmd + J) if you don't need advanced features like camera or parenting because this mode has some impact on performance;
- Avoid complex containers with lots of children;
- Avoid complex shapes;
- Make sure you're not using color effects/filters;
- Use cache whenever possible;
- Avoid using large bitmaps. This is specially true for mobile devices;
- Try low resolution values for exported bitmaps (Publish Settings > JavaScript/HTML > Image Settings > Resolution);
- Try to balance wisely when an asset should be made of a vector shape or of a bitmap;
- Avoid using too many static text fields because they are exported as raw vector shapes;
- Avoid adding too many listeners;
- Add mouse events to a container and use the event.target property instead of adding a separate mouse event to dozens or hundreds of children;
- If possible set a container.tickChildren to false so the tick will not be propagated to children of a container;
- If using a tick event it may be a good idea to change the Ticker.timingMode and see which one works best for your case;
- Avoid using motion tweens because they are exported as frame by frame animation;
- Avoid having a huge main timeline with lots of tweens;
- Avoing very large shape tween spans.
Oh man, I wish I could remember every single detail right now...
But I hope it can get you started.
Regards,
JC
UPDATED: 08/07/2019