This document discusses Captivate's mobile workflow and HTML5 features, including what elements work across video, HTML5, native apps and hybrid apps. It also covers some JavaScript commands and using iframes.
Many eLearning developers are still looking for a good tool to rapidly produce HTML5 eLearning content for mobile devices. Captivate 7 will solve many workflow problems for quickly producing engaging HTML5 content.In this session, participants will review the various mobile outputs from Captivate 7. You will learn how to effectively plan and create HTML5 content in Captivate 7, and then follow it out to implementaton.In this session, you will learn:Captivate 7 Mobile Workflow Captivate HTML5 FeaturesWhat WorksWhat Doesn’t WorkAudience:Novice designers, developers, project managers, and managers. Prior experience with a rapid eLearning development tool would be helpful, but is not required for this session.
Josh Cavalier Bio:This is my son James and I after he completed his first summit climb at Kings Mountain, NC on March 9, 2013. BFA – Medical Illustration, Rochester Institute of Technology, 1992Medical Illustrator, Mt. Sinai Hospital, 1992-93eLearning Art Director, Handshaw, 1994-98Lodestone – founded in 1999 – “Lodestone trains trainers to produce eLearning content.” Certified Technical Trainer (CTT+)Adobe Certified Master Instructor - Captivatewww.captaincaptivate.com
Josh: What are we going to cover?Captivate 7 Mobile Workflow Captivate HTML5 FeaturesWhat WorksWhat Doesn’t Work
Context and Form Factors
Context and Form Factors
Dunn and Dunn Learning Style Model
Inputs: Where is the content coming from?
Downside: No InteractivityFile type .CPVC not .CPTXEditing: What can you add?Add a title to the beginningAdd other videoText CaptionsPan and ZoomTransitionsTips: Make sure your Audio is set up properlySystem AudioTurn off all other applicationsPreferences – Move new Windows in Recording AreaClick on a diamond to add a transitionTest, test testPublishing: File > PublishSelect a Preset (What is with the quality settings?)Publish to YouTube
Poornima: Introduction to HTML5 and eLearning today
Josh: Captivate 7 -> HTML5 -> App Packager - Production WorkflowIn this workflow, we start with Captivate 7 on the left. The development file in Captivate is a CPTX file. This is a compound document that essentially orchestrates the eLearning content. From Captivate we then can publish to HTML5. At this point the HTML5 content can be opened in modern browsers that support HTML5.
Using HTML5 in Captivate 7Animations and AudioGraphics And FontsVideo – Mp4Audio and Video ImprovementsAdvanced Actions
Inserted FLV and F4v video is converted to .MP4 using the Adobe Media Encoder (AME)TIP!!! Use only progressive video as Video streaming IS NOT supported in HTML5
TIP!!! Avoid Overlapping audio in HTML5 – Try just using slide based audio if at all possible. Object based audio will work!
Interactive Objects that work: ButtonsClick BoxesText Entry Interactions
New HTML5 Features in Captivate 7: HTML5 Quiz Questions, Audio and Video in Captivate HTML5Tasks:- New Interactions (YouTube and Web)Quiz Questions – GIFT Import (to do)Drag and drop – Service area
New HTML5 Features in Captivate 7: HTML5 Quiz Questions, Audio and Video in Captivate HTML5Tasks:- New Interactions (YouTube and Web)Quiz Questions – GIFT Import (to do)Drag and drop – Service area
New HTML5 Features in Captivate 7: HTML5 Quiz Questions, Audio and Video in Captivate HTML5Tasks:- New Interactions (YouTube and Web)Quiz Questions – GIFT Import (to do)Drag and drop – Service area
What Doesn’t Work in HTML5
Transitions – Fade in and Fade out work well in HTML5Some Supported Animations – EffectsBe careful of unsupported effects – it will publish, but the intended transition will not work
AvoidRoll overs
Slide Transitions will not work.
Go to window > HTML5 Tracker
Text animations will not work… not a huge loss there.
What mobile browser will pla
Test like crazy!
What are the challenges?
HTML5 Workflow
Captivate 7 -> HTML5 -> App Packager - Production WorkflowIn this workflow, we start with Captivate 7 on the left. The development file in Captivate is a CPTX file. This is a compound document that essentially orchestrates the eLearning content. From Captivate we then can publish to HTML5. At this point the HTML5 content can be opened in modern browsers that support HTML5.
Adobe Edge CC Overview - Generate AnimationTasks:Overview of Edge Animate CCWhat is it?What can it create? How can you start using it?- Show the creation of an opening title sequence in Adobe Edge Animate- Publish out the file- Hand over to Poornima
Import Animation in App Packager and Show functionality. Describe Technology.Show the importing of an Adobe Edge animate animation.Import of Flash Toolkit for JS animation
Adobe Edge CC Overview - Generate AnimationAdd your own JavaScript
Application Packager InterfaceImport an Edge Animation in there!!!
iFrameOne HTML document inside another onePhoneGapApplication framework to create native apps using HTML5No browser frame shown when playedAccess to set of native functionsYou need to have the PhoneGap BuildPhoneGap APIUse Sensors with JavaScriptNeed an Adobe ID and LoginSet up the output types in your accountIOSAndroid
App Workflow Demo
Hybrid Workflow
Presenter is the only Hybrid offering from Adobe.
Show the Final presentation and review features.
Question and Answer
Stay in touch: Josh Cavalier@joshcavjosh@lodestone.comlodestone.com