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

Slides:

Advertisements

Similar presentations

Gonghua Liu, Ph.D. Instructional Designer & Technologist Woodruff Health Sciences Center Library, Emory University.

Advertisements

Kapi’olani Community College Adobe Flash 1 In-class Presentation Week 1.

Kapi’olani Community College Macromedia Flash 1 In-class Presentation Week 1.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Agenda – Week 8, Day 1 Debrief from InDesign Transition to Flash/Animation Explore assignment Flash tutorials Lesson 1 - Workspace Lesson 2 - Drawing Lesson.

Flash Tutorials Learning Flash from Built-In Tutorials that Come as Part of Flash.

1 Flash and Animation Presented by : Behzad Sajed Khosrowshahi.

Paul Trani Adobe Certified Instructor/Expert Resources:

Getting Started with Flash

Flash JLMC315 Eva Tao October 22, 2007 Source:

Introduction to Flash Animation RMIK Jayasinghe (M. Sc. in Computer Science, B. Sc., SLTS)

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Flash Domain 4 KellerAdobe CS5 ACA Certification Prep Flash Domain 4: Building Rich Media Elements.

© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.

Getting Started with Flash

Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Chapter 15 Video. Importing Video Into Flash Once you import video into Flash MX 2004, you can control it using behaviors and very basic ActionScript,

Proprietary & Confidential The Thread That Ties it All Together Voicethread and Discovery Education Jennifer Dorman denblogs.com/jendorman.

What is Director?  A tool for creating interactive CDs or interactive media and games on the Web.  Combines graphics, sound, video and other media together.

XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

BUILDING RICH MEDIA ELEMENTS. Design Decisions Based on Design Specification  Following the design specification will ensure that the application is.

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

Tutorial 1: Getting Started with Adobe Dreamweaver CS4.

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Flash.

Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Button library Create a button Learn.

Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Buttons library Edit a button instance.

Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.

Adobe FLASH What & Why? Where & When? Is Flash dead? What about HTML5?

Macromedia Flash By Alice Tian. Overview  What is Flash  Why Flash  Basic User Interfaces  Animation Basics  Advanced Basics  Publishing.

Adobe Flash CS5.5. What is Adobe Flash? formerly Macromedia Flash Is software is a powerful authoring environment for creating animation and multimedia.

Interface & navigation (How to build a simple presentation interface) Flash ActionScript Introduction to Thomas Lövgren

IAuthor Digital Story Creation Creation iBooks on iOS Devices.

® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH CS3.

® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.

XP Tutorial 1 Introduction to Macromedia Flash MX 2004.

B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager.

Chapter 6 Publishing to the iPad. Installing Software for Working with the iPad When you create layout in InDesign, you can use the Adobe Content Viewer.

Adobe Flash CS3 Revealed Chapter 1 - GETTING STARTED WITH FLASH.

Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.

University of Sunderland CDM105 Session 6 Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images.

XP Tutorial 4 Special Animations. XP New Perspectives on Macromedia Flash MX Special Layers for Animation Animation Using a Motion Guide Layer.

Tutorial 7 Planning and Creating a Flash Web Site.

Chapter 16 Video. Importing Video Into Flash  Once you import video into Flash, you can control it using behaviors and very basic ActionScript, target.

2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.

Adobe Flash CS4 – Illustrated Unit A: Getting Started with Adobe Flash.

Animation Liveliness Simulation of motions A video made from a series of drawings/images simulating motions by means of slight progressive changes.

Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Reading Flash. Training target: Read the following reading materials and use the reading skills mentioned in the passages above. You may also choose some.

XP Tutorial 7 Creating a Flash Web Site. XP New Perspectives on Macromedia Flash 82 Objectives Plan and create a Flash Web site Create a Flash template.

1 A Basic Introduction to Flash. Outline What is a flash? Macromedia Flash MX 2004 Flash concepts Flash Demos Conclusion Additional help 2.

Appendix A Becoming an Adobe Certified Associate.

What are keyframes? And how do I use them?. A short diversion into Premiere How to use keyframes to control motion, size, and the intensity of various.

Getting Started with Flash Chapter 1 Understand the Flash workspace Lesson 1.

Chapter1 The flash interface and action script 3.0.

introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.

Macromedia Flash Design Professional Macromedia Flash GETTING STARTED WITH.

Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.

Adobe Flash Professional CS5 – Illustrated Unit A: Getting Started with Adobe Flash Professional.

Creating a Flash Web Site

Using Video, and Flash Components, and Printing Flash Content

Digital Media Production

Animate Workspace. Objective % Utilize appropriate tools and methods to produce digital animation.

Tool for Creating Rich Media

denblogs.com/jendorman

ANIMATE WORKSPACE Stage Timeline Properties Panel Library Panel

DREAMWEAVER FIREWORKS PHOTOSHOP FLASH.

Adobe Flash CS3 Revealed

Presentation transcript:

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) 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

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 (

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

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

Tumult Hype Adobe Edge Animate Different HTML5 Builder Options

What is Edge Animate?

Advanced Interactions

Where to Get Adobe Edge?

Getting Started - In App Tutorials

Create New Creates project files Starting a New Project

Stage Area

Toolbar

Properties

Elements and Library Panels

Menu Items: Modify and Timeline

Timeline

Manual and Auto Keyframing

Pin Animating

Easing Your Animations

Timeline Labels

Timeline Triggers

Scripting in Edge Animate using the Code Panel

Audio Stream audio via code Video iFrame Image Using External Assets

Using other Javascript Plugins

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});

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

YouTube Video Other web content iFrame & Video

Web publish Animate package iBooks widget Deployment