Adobe Flash Professional with CreateJS

3,634
-1

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,634
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Adobe Flash Professional with CreateJS

  1. 1. Adobe FlashProfessionalwith CreateJSMay 14th 2013Webinar Series for Adobe& WebProfessionals.orgJoseph Labrecque
  2. 2. Joseph LabrecqueSenior Interactive Software Engineer | Adjunct FacultyUniversity of DenverProprietor | OwnerFractured Vision Media, LLCAdobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe InfluencerAuthorPackt Publishing | O’Reilly Media | Lynda.com | video2brain |Adobe Press | PeachpitArtistAn Early Morning Letter, Displaced | shivervein
  3. 3. Publications
  4. 4. What We’ll Cover…• What is CreateJS?• Why target HTML?• Flash Professional CC• CreateJS workflow• JavaScript in Flash Pro• Resources
  5. 5. WHAT ISCREATEJS?
  6. 6. CreateJSCreateJS is a suite ofmodular libraries andtools which worktogether to enable richinteractive content onopen web technologiesvia HTML5.
  7. 7. EaselJSEaselJS provides straightforward solutions forworking with richgraphics and interactivitywith HTML5 Canvas.
  8. 8. TweenJSTweenJS is a simpletweening library for usein Javascript.It supports tweening ofboth numeric objectproperties & CSS styleproperties.
  9. 9. SoundJSConsistant cross-browsersupport for audio iscurrently a mess inHTML5, but SoundJSworks to abstract awaythe problems and makesadding sound to yourgames or richexperiences much easier.
  10. 10. PreloadJSPreloadJS makes it easyto preload your assets:images, sounds, JS, data,or others. It allowsmultiple queues, multipleconnections, pausingqueues, and a lot more.
  11. 11. Toolkit for CreateJSA complimentaryextension for FlashProfessional CS6* thatenables you to publishrich Flash content toHTML5, leveragingCreateJS.*included in Flash Professional CC.
  12. 12. WHY TARGETHTML?
  13. 13. Changing LandscapeiOS browsers do notsupport Flash PlayerAndroid 4.1+ does notsupport Flash Player(Adobe’s call)HTML/CSS/JS maturity
  14. 14. Role of Flash (web)Shifted from “webanimation” to multi-screen applications.Present engineeringfocus:– Premium Video– Gaming
  15. 15. Role of Flash (motion)Heavily used:• Animation• Video
  16. 16. HTML is growing up• HTML5• CSS• JavaScript• TypeScript• ES6
  17. 17. 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
  18. 18. Edge Animate• Target the DOM foranimation andinteractivity• Different from CreateJSwhich targets theHTML5 canvas tag
  19. 19. FLASHPROFESSIONAL
  20. 20. Flash Professional CS6• Extension to bedownloaded andinstalled• Publish content usingCreateJS libraries
  21. 21. Flash Professional CC• Integrated with FlashProfessional CC – not aseparate install• Basically the samefunctionality as withCS6 extension
  22. 22. CREATEJSWORKFLOW
  23. 23. Authoring Content
  24. 24. WarningsWARNINGS:• Text support is limited. It is generally recommended to include text as HTMLelements (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 affectsgotoAndStop and gotoAndPlay calls. (2)• Shadow and glow filters are very expensive effects, and not all options aresupported. (2)• Input and static text fields are published as dynamic text fields. (3)• Content with both Bitmaps and Buttons may generate local security errors insome browsers if run from the local file system.
  25. 25. Publish
  26. 26. Published HTML
  27. 27. JAVASCRIPTIN FLASH PRO
  28. 28. Using JavaScript• You can add certainJavaScriptcommands withincomments• Mostly best toexport assets – thenwire them upexternally
  29. 29. Future• Have an HTMLworkflow fullyintegrated withinFlash Professional• Create rich contentfor multiple targets!• Premiere tool forauthoring richexperiences
  30. 30. DEMONSTRATIONTIME…
  31. 31. CLOSING
  32. 32. 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
  33. 33. Thank YouGet in touch…Twitter: @JosephLabrecqueEmail: Joseph.Labrecque@du.eduWeb: http://JosephLabrecque.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×