FocusOnLearning Conference 2016 Austin, TX
•Als PPTX, PDF herunterladen•
0 gefällt mir•209 views
My session deck explaining the issues around adding content from Animate to Captivate
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Ähnlich wie FocusOnLearning Conference 2016 Austin, TX
Ähnlich wie FocusOnLearning Conference 2016 Austin, TX (20)
Mehr von Kirsten Rourke
Mehr von Kirsten Rourke (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
FocusOnLearning Conference 2016 Austin, TX
- 1. Session 407 Adding Responsive Animations to Adobe Captivate Projects Kirsten Rourke, Rourke Training Austin, TX • June 8 – 10, 2016
- 2. Kirsten Rourke Founder of Rourke Training (2000) Speaker, Training Consultant, and Instructional Designer eLearning ISD/Developer, CTT+ Certified Technical Trainer @kirstenrourke #FocusOnLearn
- 3. What’s in a name? History and Angry Birds 2 flavors of HTML5 Language Changes How it gets in Captivate What do we need to do now? Links, Links, Links
- 6. You said the “F” word!
- 11. .oam
- 12. Edge Animate • HTML5 Creation Tool • Just HTML, CSS, & Javascript • Clean & Simple • Media Queries – .oam responsive Adobe Animate • Platform/Device Independent • Conversion • ActionScript and JavaScript • <canvas> – .oam not responsive
- 13. HTML 5 / Javascript • console.log (“Show this”) • Click • this.stop(); ActionScript • trace (“Show this”) • MouseEvent.CLICK • stop(); https://helpx.adobe.com/animate/using/as-to-html5.html
- 15. DEMO, DEMO, DEMO… Jump to 19
- 16. .oam package from Edge Animate or Adobe Animate (Flash) to Captivate
- 20. It is possible…
- 21. DEMO, DEMO, DEMO… Jump to 25
- 25. SVG
- 26. Artboard size is default SVG space Use Artboards checkbox
- 28. DEMO, DEMO, DEMO… Jump to 32
- 34. Links • http://www.createjs.com/soundjs • http://blogs.adobe.com/animate/ • http://koolmoves.com/responsive-flash.html • http://stackoverflow.com/questions/27776458/how-to- make-flash-animation-responsive • http://csszengarden.com/ • https://developer.mozilla.org/en- US/docs/Web/Guide/CSS/Getting_started • https://developer.mozilla.org/en-US/docs/Web/CSS • https://helpx.adobe.com/animate/using/as-to-html5.html
- 35. Links • http://stackoverflow.com/questions/2268276/what-are- the-key-differences-between-javascript-and-actionscript- 3 • https://developer.tizen.org/community/tip-tech/javascript- html-dom-vs-actionscript-display-list • https://forums.adobe.com/thread/2049505 • http://blogs.adobe.com/animate/converting-your-flash- ads-to-html5-canvas/ • http://www.williammalone.com/articles/flash-vs-html5- canvas-drawing/
Hinweis der Redaktion
- Animate Name change from Edge to Flash Bad websites and plugin hell Authoring tool of the Gods Wrap it in an .oam What doesn’t work right now Workaround References
- I’m going to start this session by making every person in the room make this face.
- Flash
- What it’s hated
- Why it’s awesome Adobe Air 21.0 march 2016 https://en.wikipedia.org/wiki/Adobe_AIR 2008- 2016
- The benefits
- What is an .oam file? XML Asset PNG Poster image HTML Javascript XML Don’t layer the oam in captivate
- The language is close… Javascript is more like Actionscript 1 or 2 Both actionscript and javascript are dialects of ECMAScript Canvas element – drawing with javascript
- Convert ActionScript to HTML5 Canvas with document type converter “Convert to Other Document Formats” Replace commented out actionscript with javascript equivalents http://blogs.adobe.com/animate/converting-your-flash-ads-to-html5-canvas/ Note: Flash Professional does not auto-convert any ActionScript code to JavaScript code because there is no foolproof way to get it completely right. However, our HTML5 Canvas (CreateJS) JavaScript APIs mimic ActionScript code fairly closely. We also have some built-in Code Snippets in Flash CC to help you get started with some commonly used actions.
- Demo Nav button on right
- Work in Edge for responsive until your machine won’t run it Pry it from my cold dead hands Make 3 files for HTML5 for Cap from Animate Rename oam to zip lets you get to the content but if you extract it won’t make a functional oam again (haven’t tried editing from winzip) Change Width and Height to 100%? Add .js?
- SVG round tripping from Illustrator SVG = text (in XML format) that defines a vector shapes for the web Scalable and searchable Can be made or edited with any text editor
- Demo of the final product