focusonlearning conference 2016 austin, tx

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/