PRODUCT
Follow

Overview:

As an industry standard in interactive experiences authoring, Adobe Flash - later renamed Adobe Animate, provides us with means to create complex animations with a lightweight output.

Using Sizmek API functionalities:

For information on building Sizmek HTML5 base formats please visit:

Resources:

If you are just here to get the resources, you can download them here:

Scopes, Symbols, Instances and Tick Event:

The way createjs API works with the canvas in Animate CC is that it uses instances of symbols (MovieClips, Graphis, Buttons) on stage and allows you to change their properties over time.

  • Scopes: If we want to manipulate a MovieClip on the stage by use of createjs we would want to give it an instance name and then access it by typing this.instanceName on it's parent scope(symbol instance).

    For example, if we want to access mainFrame instance of Symbol 1 MovieClip on top level stage from top level stage, we can simply write: this.mainFrame or we can reference it from the top level stage notation with stage.children[0].mainFrame allowing us more clarity over symbol instance inheritance.

  • Stage: Main top level scope of where the code of your canvas output is executed. Can be accessed by calling this on the top level of the project or by referencing it directly stage.children[0]:

  • Createjs: API used by Animate CC.

  • Symbol: A symbol is a graphic, button, or movie clip that you create in Animate CC.You can then reuse the symbol throughout your project or in other documents - behaving as JS classes.

  • Symbol Instance: An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance. More about symbols and symbols instances here.

  • Tick: In Animate CC each time a play head progresses over the frame in a movie clip or stage, it generates it's own heart beat like event - "tick". If we wanted to track tick event of the current movie clip symbol instance we could attach an event listener to statement this - being our current scope. E.g.
    this.addEventListener("tick", function(e){console.log(e);});
    However, if we are listening for an event in a child movie clip instance we can reference it from the top level scope:
    stage.children[0].path.to.instance.addEventListener("tick", function(e){console.log(e);});


 

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments