The Fundamentals of Interactivity with Adobe Animate CC and Javascript (v. 2017) Marlon Ceballos - @adobexpert
Marlon Ceballos
www.linkedin.com/in/marlonceballos/
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
I’m from Colombia
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
What we will learn today? • Foundations of JavaScript programming • How apply JavaScript in Adobe Animate • If you are an Animate user without experience with Javascript, this presentation is for you!
pert
Aprende Diseño y Creatividad
www.xpert.video
Basic concepts
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
What is Adobe Animate? • It is not Adobe Edge Animate - Develop stopped since Nov. 2015 - www.xper.co/2B8BMxA
• Adobe Flash with a new name (Feb. 2016) • Graphic Application for create animation and interactivity (rich media).
pert
Aprende Diseño y Creatividad
www.xpert.video
The two faces of Animate • Animation: Timeline and graphic tools • Interactivity: Code • Code gives superpowers to designers.
+
pert
Aprende Diseño y Creatividad
www.xpert.video
=
Uses of Adobe Animate • Animation and Interactivity: - Advertising - eLearning content - Games - Etc
• Web and Digital Publications.
pert
Aprende Diseño y Creatividad
www.xpert.video
Types of documents • HTML5 Canvas • WebGL (Preview) • ActionScript • AIR.
pert
Aprende Diseño y Creatividad
www.xpert.video
Why not continue using AS3? • Need of a plug-in (Flash Player) installed on the browser • Mobile browsers don’t support plug-ins = don’t support .swf content • Recommended document type: HTML5 Canvas.
pert
Aprende Diseño y Creatividad
www.xpert.video
How replace AS3? • JavaScript • Any JavaScript library: - CreateJS libraries - GSAP (GreenSock Animation Platform) - etc.
pert
Aprende Diseño y Creatividad
www.xpert.video
HTML5 Canvas Documents HTML5 Canvas (recommended): • .fla • .html • .js.
pert
Aprende Diseño y Creatividad
www.xpert.video
JavaScript and libraries
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
JavaScript • Programming language based in ECMAScript specification • Object-oriented language • All actual browsers support JS.
pert
Aprende Diseño y Creatividad
www.xpert.video
Libraries • Set of predesigned routines (functions) that accelerate the use of a programming language • Main advantages: - Libraries avoid write code that exists already - Libraries avoid the necessary work for ensure compatibility with browsers - Simple use: animDisolve(instance).
pert
Aprende Diseño y Creatividad
www.xpert.video
JavaScript libraries examples • jQuery: Animation and DOM modifications • GSAP (GreenSock Animation Platform): Animation • EaselJS: HTML5 Canvas.
pert
Aprende Diseño y Creatividad
www.xpert.video
CreateJS Javascript libraries suite included in Adobe Animate: • EaselJS: HTML5 Canvas • TweenJS: Animation • SoundJS: Audio • PreloadJS: Assets load.
pert
Aprende Diseño y Creatividad
www.xpert.video
Why use CreateJS? • Don’t reinvent the wheel • Ease many tasks in Animate (navigate Frames, work with MovieClips, etc) • Similar syntax to ActionScript 3 • It’s included in Adobe Animate.
pert
Aprende Diseño y Creatividad
www.xpert.video
JavaScript fundamentals
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Object-oriented programming • JavaScript is an Object-oriented programming language (OOP) • OOP use the comparison with real objects • Objets: properties, methods and events.
pert
Aprende Diseño y Creatividad
www.xpert.video
Properties • Size • Color • Speed • etc.
pert
Aprende Diseño y Creatividad
www.xpert.video
Methods (Functions) • Move • Stop • etc.
pert
Aprende Diseño y Creatividad
www.xpert.video
Events • Accelerate • Brake • etc
pert
Aprende Diseño y Creatividad
www.xpert.video
Event - Function Normally, the events trigger a function: • Accelerate -> Move • Break -> Stop.
pert
Aprende Diseño y Creatividad
www.xpert.video
Variables
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Variables
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Work with variables • Creation or declaration: - var name;
• Assignation: - name = 100; - value = "text";
• Creation + Assignation (initialization): - var value = 100;
pert
Aprende Diseño y Creatividad
www.xpert.video
Properties
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Properties Features of an object: • Size • Color • Speed • etc.
pert
Aprende Diseño y Creatividad
www.xpert.video
Properties • The properties panel list all properties of a selected object • We can edit that properties dynamically • Instance name.
pert
Aprende Diseño y Creatividad
www.xpert.video
Edit properties • Syntax: - path.instance.property = value;
• Examples: - this.square.x = 100; - this.square.rotation = 45; - this.square.visible = true;.
pert
Aprende Diseño y Creatividad
www.xpert.video
Listado de propiedades www.createjs.com/docs/easeljs/classes/DisplayObject.html
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Functions
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Reuse tasks
tareas Tarea1 Tarea3 Tarea2 Tarea5
pert
Aprende DiseĂąo y Creatividad
Tarea4
www.xpert.video
Built-in functions • They are functions are already created • Can be used making a "call" • Examples: - play(); - stop(); - gotoAndStop(); - gotoAndPlay(); - alert();.
pert
Aprende Diseño y Creatividad
www.xpert.video
Built-in functions www.createjs.com/docs/easeljs/classes/MovieClip.html
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Define a Function function nomFuncion() { task 1; task 1; ... }
pert
Aprende Diseño y Creatividad
www.xpert.video
Define a Function function message() { alert("message 1"); alert("message 2"); alert("message 3"); }
pert
Aprende Diseño y Creatividad
www.xpert.video
Call (run) a Function • functionName(); • Example: - stop(); - alert("message"); - message().
pert
Aprende Diseño y Creatividad
www.xpert.video
Events
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Events
Nobody listens…
Event
pert
Aprende Diseño y Creatividad
www.xpert.video
Events
Event
pert
Aprende DiseĂąo y Creatividad
Listener www.xpert.video
Events
Nothing happens‌
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
Events management
Event
pert
Aprende DiseĂąo y Creatividad
Listener
www.xpert.video
Function
Events management (sintax) path.instance.addEventListener(event, function); • path: location of the element that receive the event • instance: element that receive the event • addEventListener(): function that allow manage the event • event: action that call the function • function: function that runs when the event is fired or activated.
pert
Aprende Diseño y Creatividad
www.xpert.video
Events management (example) this.square.addEventListener("click", message); function message(evt) { alert("I’m the message"); }
message();
pert
Aprende Diseño y Creatividad
www.xpert.video
Some kinds of JS Events • Mouse Events • Keyboard Events • Form Events • Document Loading • Browser Events • www.w3schools.com/jsref/dom_obj_event.asp.
pert
Aprende Diseño y Creatividad
www.xpert.video
Mouse Events - JS • onclick
• onmouseout
• ondblclick
• onmouseup.
• onmousedown • onmouseenter • onmouseleave • onmousemove • onmouseover
pert
Aprende Diseño y Creatividad
www.xpert.video
Mouse Events - EaselJS • click
• mouseover*
• mousedown
• mouseout*
• dblclick
• rollover*
• pressmove
• rollout*.
• pressup
* myStage.enableMouseOver();
pert
Aprende Diseño y Creatividad
www.xpert.video
Thanks!
pert
Aprende DiseĂąo y Creatividad
www.xpert.video
www.xper.co/presenta
pert
Aprende DiseĂąo y Creatividad
www.xpert.video