1 / 29

B.Y.O.L.: Adobe Edge Animate—Flash-like Interactions for HTML5 Devices

B.Y.O.L.: Adobe Edge Animate—Flash-like Interactions for HTML5 Devices. Jeff Batt eLearning Brothers Product Development Manager. Wo Am I?. • Worked for Rapid Intake - 6 years • Worked for eLearning DevCon & mLearning DevCon - 6 Years (Part of it as the Director of the Conferences)

fausto
Download Presentation

B.Y.O.L.: Adobe Edge Animate—Flash-like Interactions for HTML5 Devices

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. B.Y.O.L.: Adobe Edge Animate—Flash-like Interactions for HTML5 Devices Jeff Batt eLearning Brothers Product Development Manager

  2. Wo Am I? • • Worked for Rapid Intake - 6 years • • Worked for eLearning DevCon & mLearning DevCon - 6 Years (Part of it as the Director of the Conferences) • • Currently Product Development Manager at eLearning Brothers • • Graduated at Utah Valley University in Digital Media - Emphasis in Web Development • • Passion for learning new tools • • Love teaching people about new technology

  3. My Approach www.kinetic-media.com twitter.com/jeffbatt01 www.youtube.com/jeffbatt01 • How to guy - Focus on how you use the tools • Everyone is on a different level - I’m starting at the beginning • Tutorials about everything will be found on my blog (www.kinetic-media.com)

  4. Download Files Files to download: http://kinetic-media.com/downloads-edge-animate/

  5. Session Objectives • Different HTML5 options • Timeline labels • Bringing in HTML5 in Lectora using eLB Interaction Builder • Timeline triggers • Getting started with Adobe Edge • Playing audio in Javascript • Exploring the Edge Animate UI • Downlevel stage • Using external assets • Deployment • Flexible layouts • Using iFrames • Animating using keyframes • Scripting in Edge Animate using the code panel • Using the pin tool to animate • Easing your animations • Symbols and nested symbols

  6. Different HTML5 Builder Options Adobe Edge Animate Tumult Hype

  7. What is Edge Animate?

  8. Advanced Interactions

  9. Where to Get Adobe Edge? www.html.adobe.com

  10. Getting Started - In App Tutorials

  11. Starting a New Project Creates project files Create New

  12. Stage Area

  13. Toolbar

  14. Properties

  15. Elements and Library Panels

  16. Menu Items: Modify and Timeline

  17. Timeline

  18. Manual and Auto Keyframing

  19. Pin Animating

  20. Easing Your Animations

  21. Timeline Labels

  22. Timeline Triggers

  23. Scripting in Edge Animate using the Code Panel

  24. Audio Video Image Using External Assets Stream audio via code iFrame

  25. Using other Javascript Plugins <!-- EdgeCommons All-in-one --><scriptsrc="js/EdgeCommons.1.0.0/libs/EdgeCommons.js"type="text/javascript"></script><!-- EdgeCommons Spotlight CSS --><linkhref="js/EdgeCommons.1.0.0/libs/style.css"rel="stylesheet"><!-- Greensock Animations Library --><scriptsrc="js/min/TweenMax.min.js"></script>

  26. GreenSock Javascript //Get all button variablesvar tab1 = sym.$("Tab_1");//Animate in each button one after the otherTweenLite.from(tab1,1,{css:{y:567},ease:Expo.easeOut}); http://www.greensock.com/gsap-js/ http://api.greensock.com/js/

  27. Working with Audio Establish the path to audio Load audio files Call audio file later by ID

  28. iFrame & Video YouTube Video Other web content

  29. Deployment Web publish Animate package iBooks widget

More Related