Adobe Captivate 7 and All Things Mobile

1,570
-1

Published on

This session was first presented at the Adobe Learning Summit 2013 co-located with DevLearn. #AdobeCaptivate #elearning #mobile

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,570
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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
  • Adobe Captivate 7 and All Things Mobile

    1. 1. •Captivate 7 Mobile Workflow •Captivate HTML5 Features •What Works •What Doesn’t Work
    2. 2. Video HTML5 Native App Hybrid
    3. 3. Text Caption, Highlight Box, Smart Shape, Image, Animation, Character, PIP video
    4. 4. sym.$(“whatever").show(); main movie object function
    5. 5. <iframe>

    ×