focusonlearning conference 2016 austin, tx
TRANSCRIPT
![Page 1: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/1.jpg)
Session 407Adding Responsive Animations to
Adobe Captivate Projects
Kirsten Rourke, Rourke TrainingAustin, TX • June 8 – 10, 2016
![Page 2: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/2.jpg)
Kirsten RourkeFounder of Rourke Training (2000)Speaker, Training Consultant, and Instructional Designer eLearning ISD/Developer, CTT+ Certified Technical Trainer
@kirstenrourke#FocusOnLearn
![Page 3: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/3.jpg)
What’s in a name?History and Angry Birds2 flavors of HTML5Language ChangesHow it gets in CaptivateWhat do we need to do now?Links, Links, Links
![Page 4: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/4.jpg)
![Page 5: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/5.jpg)
![Page 6: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/6.jpg)
You said the “F” word!
![Page 7: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/7.jpg)
![Page 8: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/8.jpg)
![Page 9: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/9.jpg)
![Page 10: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/10.jpg)
![Page 11: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/11.jpg)
.oam
![Page 12: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/12.jpg)
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
![Page 13: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/13.jpg)
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
![Page 14: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/14.jpg)
Convert existing files
![Page 15: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/15.jpg)
DEMO, DEMO, DEMO…
Jump to 19
![Page 16: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/16.jpg)
.oam package fromEdge Animate or Adobe Animate
(Flash) to Captivate
![Page 17: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/17.jpg)
![Page 18: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/18.jpg)
![Page 19: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/19.jpg)
![Page 20: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/20.jpg)
It is possible…
![Page 21: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/21.jpg)
DEMO, DEMO, DEMO…
Jump to 25
![Page 22: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/22.jpg)
![Page 23: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/23.jpg)
![Page 24: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/24.jpg)
![Page 25: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/25.jpg)
SVG
![Page 26: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/26.jpg)
Artboard size is default SVG space
Use Artboards checkbox
![Page 27: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/27.jpg)
![Page 28: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/28.jpg)
DEMO, DEMO, DEMO…
Jump to 32
![Page 29: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/29.jpg)
![Page 30: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/30.jpg)
![Page 31: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/31.jpg)
![Page 32: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/32.jpg)
![Page 33: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/33.jpg)
![Page 34: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/34.jpg)
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
![Page 35: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/35.jpg)
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/
![Page 36: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/36.jpg)
![Page 37: FocusOnLearning Conference 2016 Austin, TX](https://reader035.vdocuments.site/reader035/viewer/2022062503/587adb5c1a28ab542b8b53e5/html5/thumbnails/37.jpg)