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: [email protected]
Web: http://JosephLabrecque.com/