The Fundamentals of Interactivity with Adobe Animate CC and Javascript

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.