Download presentation
Presentation is loading. Please wait.
Published byArthur Farmer Modified over 8 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.