FocusOnLearning Conference 2016 Austin, TX

37 pages
189 views

Please download to get full document.

View again

of 37
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Share
Description
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…
Transcript
  • 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
  • 4. You said the “F” word!
  • 5. .oam
  • 6. 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
  • 7. 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
  • 8. Convert existing files
  • 9. DEMO, DEMO, DEMO… Jump to 19
  • 10. .oam package from Edge Animate or Adobe Animate (Flash) to Captivate
  • 11. It is possible…
  • 12. DEMO, DEMO, DEMO… Jump to 25
  • 13. SVG
  • 14. Artboard size is default SVG space Use Artboards checkbox
  • 15. DEMO, DEMO, DEMO… Jump to 32
  • 16. 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
  • 17. 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/
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x