The Fundamentals of Interactivity with Adobe Animate CC and Javascript

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