May 14th 2013 Webinar Series for Adobe & WebProfessionals.org

1. Adobe Flash
Professional
with CreateJS
May 14th 2013
Webinar Series for Adobe
& WebProfessionals.org
Joseph Labrecque

2. Joseph Labrecque
Senior Interactive Software Engineer | Adjunct Faculty
University of Denver
Proprietor | Owner
Fractured Vision Media, LLC
Adobe Community Professional
Adobe Education Leader
Adobe Certified Expert
Adobe Certified Educator
Adobe Influencer
Author
Packt Publishing | O’Reilly Media | Lynda.com | video2brain |
Adobe Press | Peachpit
Artist
An Early Morning Letter, Displaced | shivervein

3. Publications

4. What We’ll Cover…
• What is CreateJS?
• Why target HTML?
• Flash Professional CC
• CreateJS workflow
• JavaScript in Flash Pro
• Resources

5. WHAT IS
CREATEJS?

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

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

8. TweenJS
TweenJS is a simple
tweening library for use
in Javascript.
It supports tweening of
both numeric object
properties & CSS style
properties.

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

10. 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.

11. 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.

12. WHY TARGET
HTML?

13. Changing Landscape
iOS browsers do not
support Flash Player
Android 4.1+ does not
support Flash Player
(Adobe’s call)
HTML/CSS/JS maturity

14. Role of Flash (web)
Shifted from “web
animation” to multi-
screen applications.
Present engineering
focus:
– Premium Video
– Gaming

15. Role of Flash (motion)
Heavily used:
• Animation
• Video

16. HTML is growing up
• HTML5
• CSS
• JavaScript
• TypeScript
• ES6

17. Edge Tools & Services
• Free to use at some level
• Part of the Creative Cloud
• Built from scratch for
HTML, CSS, and JavaScript
• Includes the following:
– Edge Animate
– Edge Code
– Edge Inspect
– Edge Reflow
– Edge Web Fonts / Typekit
– PhoneGap Build

18. Edge Animate
• Target the DOM for
animation and
interactivity
• Different from CreateJS
which targets the
HTML5 canvas tag

19. FLASH
PROFESSIONAL

20. Flash Professional CS6
• Extension to be
downloaded and
installed
• Publish content using
CreateJS libraries

21. Flash Professional CC
• Integrated with Flash
Professional CC – not a
separate install
• Basically the same
functionality as with
CS6 extension

22. CREATEJS
WORKFLOW

23. Authoring Content

24. Warnings
WARNINGS:
• 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.

25. Publish

26. Published HTML

27. JAVASCRIPT
IN FLASH PRO

28. Using JavaScript
• You can add certain
JavaScript
commands within
comments
• Mostly best to
export assets – then
wire them up
externally

29. Future
• Have an HTML
workflow fully
integrated within
Flash Professional
• Create rich content
for multiple targets!
• Premiere tool for
authoring rich
experiences

30. DEMONSTRATION
TIME…

32. CLOSING

33. 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

34. Thank You
Get in touch…
Twitter: @JosephLabrecque
Email: Joseph.Labrecque@du.edu
Web: http://JosephLabrecque.com/