Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "B.Y.O.L.: Adobe Edge Animate—Flash-like Interactions for HTML5 Devices Jeff Batt eLearning Brothers Product Development Manager."— 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 www.kinetic-media.com www.youtube.com/jeffbatt01 twitter.com/jeffbatt01 My Approach 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)www.kinetic-media.com

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

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

6 Tumult Hype Adobe Edge Animate Different HTML5 Builder Options

7 What is Edge Animate?

8 Advanced Interactions

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

10 Getting Started - In App Tutorials

11 Create New Creates project files Starting a New Project

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 Stream audio via code Video iFrame Image Using External Assets

25 Using other Javascript Plugins

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 Establish the path to audio Load audio files Working with Audio Call audio file later by ID

28 YouTube Video Other web content iFrame & Video

29 Web publish Animate package iBooks widget Deployment


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

Similar presentations


Ads by Google