Adobe Flash Professionalwith CreateJS

May 14th 2013

Webinar Series for Adobe & WebProfessionals.org

Joseph Labrecque

Joseph LabrecqueSenior Interactive Software Engineer | Adjunct FacultyUniversity of Denver

Proprietor | OwnerFractured Vision Media, LLC

Adobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe Influencer

Author Packt Publishing | O’Reilly Media | Lynda.com | video2brain | Adobe Press | Peachpit

ArtistAn Early Morning Letter, Displaced | shivervein

Publications

What We’ll Cover…

• What is CreateJS?

• Why target HTML?

• Flash Professional CC

• CreateJS workflow

• JavaScript in Flash Pro

• Resources

WHAT IS CREATEJS?

CreateJS

CreateJS is a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies via HTML5.

EaselJS

EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas.

TweenJS

TweenJS is a simple tweening library for use in Javascript.

It supports tweening of both numeric object properties & CSS style properties.

SoundJS

Consistant cross-browser support for audio is currently a mess in HTML5, but SoundJSworks to abstract away the problems and makes adding sound to your games or rich experiences much easier.

PreloadJS

PreloadJS makes it easy to preload your assets: images, sounds, JS, data, or others. It allows multiple queues, multiple connections, pausing queues, and a lot more.

Toolkit for CreateJS

A complimentary extension for Flash Professional CS6* that enables you to publish rich Flash content to HTML5, leveraging CreateJS.

*included in Flash Professional CC.

WHY TARGET HTML?

Changing Landscape

iOS browsers do not support Flash Player

Android 4.1+ does not support Flash Player (Adobe’s call)

HTML/CSS/JS maturity

Role of Flash (web)

Shifted from “web animation” to multi-screen applications.

Present engineering focus:

– Premium Video

– Gaming

Role of Flash (motion)

Heavily used:

• Animation

• Video

HTML is growing up

• HTML5

• CSS

• JavaScript

• TypeScript

• ES6

Edge Tools & Services• Free to use at some level

• Part of the Creative Cloud

• Built from scratch forHTML, CSS, and JavaScript

• Includes the following:– Edge Animate

– Edge Code

– Edge Inspect

– Edge Reflow

– Edge Web Fonts / Typekit

– PhoneGap Build

Edge Animate

• Target the DOM for animation and interactivity

• Different from CreateJSwhich targets the HTML5 canvas tag

FLASH PROFESSIONAL

Flash Professional CS6

• Extension to be downloaded and installed

• Publish content using CreateJS libraries

Flash Professional CC

• Integrated with Flash Professional CC – not a separate install

• Basically the same functionality as with CS6 extension

CREATEJS WORKFLOW

Authoring Content

WarningsWARNINGS:

• Text support is limited. It is generally recommended to include text as HTML elements (see DOMElement). (3)

• Feature not supported: Custom eases. (108)

• Layers with classic tweens must contain only a single symbol instance. (20)

• Modifying the transform point in a tween can produce unexpected results. (3)

• Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (2)

• Shadow and glow filters are very expensive effects, and not all options are supported. (2)

• Input and static text fields are published as dynamic text fields. (3)

• Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

Publish

Published HTML

JAVASCRIPTIN FLASH PRO

Using JavaScript• You can add certain

JavaScript commands within comments

• Mostly best to export assets – then wire them up externally

Future• Have an HTML

workflow fully integrated within Flash Professional

• Create rich content for multiple targets!

• Premiere tool for authoring rich experiences

DEMONSTRATIONTIME…

CLOSING

Resources

• http://createjs.com/

• https://github.com/CreateJS/sandbox

• http://creative.adobe.com/

• http://gaming.adobe.com/

• http://www.adobe.com/go/flashplayer_whitepaper

• http://Flashrealtime.com/future.pdf

Thank You

Get in touch…

Twitter: @JosephLabrecque

Email: Joseph.Labrecque@du.edu

Web: http://JosephLabrecque.com/