focusonlearning conference 2016 austin, tx
TRANSCRIPT
Session 407Adding Responsive Animations to
Adobe Captivate Projects
Kirsten Rourke, Rourke TrainingAustin, TX • June 8 – 10, 2016
Kirsten RourkeFounder of Rourke Training (2000)Speaker, Training Consultant, and Instructional Designer eLearning ISD/Developer, CTT+ Certified Technical Trainer
@kirstenrourke#FocusOnLearn
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
You said the “F” word!
.oam
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
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
Convert existing files
DEMO, DEMO, DEMO…
Jump to 19
.oam package fromEdge Animate or Adobe Animate
(Flash) to Captivate
It is possible…
DEMO, DEMO, DEMO…
Jump to 25
SVG
Artboard size is default SVG space
Use Artboards checkbox
DEMO, DEMO, DEMO…
Jump to 32
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
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/