CONVERTING FLASH TRAINING TO iPAD
Dave GoodmanSoftAssist, Inc.610.265.8484 ext [email protected]
www.softassist.com
• 20 years experience• 500 engagements• 11 National Awards• Stellar Clients
Univ. of Pa HealthUHS, Inc.Johns HopkinsMontefioreMercy Health SystemLehigh Valley HospitalProCureTake CareHoughton InternationalMerck & Co.NovartisAstraZenecaSanofi AventisVolvoTerumoCR BardFederal Reserve Bank
The World Bank/IFCWorld Trade OrganizationMercedes BenzProvident BankCommerce BankCEIChildren's Hosp of Phila.ESRI InstituteThe InstitutesProcter & GambleAmerisourceBergenDept. of EnergyTriZettoBlueCross BlueShieldCareFirstAramark
1150 First Avenue Suite 960 King of Prussia, Pa. www.softassist.com Info: 610.265.8484 x14 Dave Goodman
Partial Clients
Lessons Learned
1. You will underestimate the amount of time required2. You will change your responsive design which will have a ripple
effect throughout3. Your expectations will change as you understand what is possible4. Sales staff may want more “glitz” than is practical5. This is a team effort – everyone must learn and relearn new skills6. Keep everyone informed along the way7. The technology will change – you can not project what the iPad10
will do or what html5 will become8. You will need to test and re-test multiple times
Responsive Design
Design early in your process and test
http://www.responsinator.com/
Instructional Design Issues
• Do not try to place the same content on a phone as you would on a laptop.You must redesign and collapse the content.
• Are you designing only for the iPad? Will you use the iPad eatures like the camera?
• Do you really need the graphics and the interactions? You may need to redesignand “re-conceive” your instructions.
• Minimize scrolling for the phones. Reduce your content.
• Field people, especially sales, want very brief mini-modules – 8 minutes or less.
• You do not have the same level of interactions in HTML5 as you do in Flash. Youmay need to rethink your interactions.
Browsers
(partial support)
The same courseon different browsersmay look different.
XM
One Course – or Converting a Library of Courses
XMHTML%
CSS3code
GraphicsContent
Media
XMHTML%
CSS3code
GraphicsContent
Media
XMHTML%
CSS3code
GraphicsContent
Media
Course 1 Course 2
Course 3 HTML%
CSS3
Javascript code
ENGINE = Core Functions
CSS
HTML5
XML
XM
HTML%
CSS3
A Library of Courses?
Javascript code
ENGINE = Core Functions
CSS
HTML5
XML
Video/animationNarrationGraphicsInteractions
Individual course assets are addedusing code.
Engines can convert and developa large number of courses muchmore efficiently than doing one courseat a time.
XM
XM
HTML%
CSS3
iPhone Content
Javascript code
ENGINE = Core Functions
CSS
HTML5
XML
Video/animationNarrationGraphicsInteractions
Code “asks” – is this device coming in as aniPhone? If yes, then show specific iPhonedesigned content.
iPhone xml
iPhone may haveboth less text contentand more media
Conversion Issues
Flash Conversion
Analysis
Inventory
Prototype
Code
1
2
3
4
1. Which devices and browsers2. How many courses will be converted3. What is driving the conversion4. Who will do the conversion5. What are your priorities6. Test and re-test often7. Learning on the phone is different8. Be prepared for revisions
High Level Process
A Web App, on the other hand, is basically developed for and accessed via the device’s web browser and is not downloaded. The app is not device specific.
A Native App is an app developed primarily for one particular mobile device, e.g., iPad, and is installed directly onto the device. The app is usually download via app stores online or from a corporate “store”.
Flash Interactions – Is there a difference?
Yes – the screen on the left is a non-interactive screen while the right side screen is interactive (questions and feedback).
What is Converted and What is Developed
Animation or movements, but no interactions,will be converted into an mp4 and an ogg video file.Audio and narrations will be converted to mp3.
If you have an animation and an interaction, you mustshow the animation and then initiate the interaction,or, have the animation on one screen and theinteraction on the following screen.
Course Inventory Determines Project Cost
Screen Layout Flash View Interact Sound Narration Sync Complexity
1 GR Y Y - y Y Y 1
2 Text N - - y Y N -
3 Quiz Y - QA N - - 2
4 Anim Y N DND Y N Y 3
Course Name:______________________________Analyst:___________________________________Course File Date & Location:__________________ Total # of screens:______
iPad does not have auto-play – the learner must click to initiate any action
Flash Interactions – What is the process?
.swfConvert .swf
into .fla
SoThinkTrillix
.fla Flash
EditAdd soundSynchronize
Export to Quick Time
Starting with .swf Starting with .fla
Convert QT to MP4
AVS Converter
MP4
XMHTML%
CSS3
Javascript code
Develop HTML5 Interactions
(from your inventory)
Xml files of content, graphics, narration (mp3), etc
Conversion Development
Your existing Flash course hasthe following basic components:
Course Navigation
Course Design
Audio & Narration
Video
Text Content
Interactions
Assessments
These components will be converted to:
Javascript
Responsive Design
MP3
MP$
XML
HTML5
HTML5 and XML
Conversion Development Timing & Costs
If you have a library of Flash courses that need to be converted, think ofusing an “engine” approach. The engine may require 2- 4 months to develop but onlyabout 2 days to convert each course thereafter.
If you have just a few courses that need to be converted, each course will needabout 2-3 weeks including testing and revisions. (Assumptions: the original FlashCourse has approximately 40 screens, audio and an average number ofnon-complicated interactions).
Cost depends upon three things: your inventory for each course, the number ofbrowsers and devices needed to be deployed and the level of interactionsophistication.
Resources
http://mobiledevices.about.com/lr/native_apps_vs_web_apps/1864073/2/http://msdn.microsoft.com/en-us/magazine/hh335062.aspxhttp://html5test.com/http://caniuse.com/http://www.html5rocks.comhttp://html5doctor.com/multimedia-troubleshooting/http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-designhttp://diveintohtml5.info/http://www.iorgsoft.com/compare/mp4-vs-h.264-comparison.htmlhttp://praegnanz.de/html5video/http://www.streaminglearningcenter.com/http://www.coronalabs.com/products/corona-sdk/http://www.netmagazine.com/news/are-css3-and-html5-new-flash-111301
Other Webinars
1. Three Approaches for Increasing Creative Instructional Designs
2. Why Projects Fail: Tips for Recovery
3. Responding to the 54%: What to do after the Training?
4. Investment Strategies for Learning
5. Five Learning Trends: Impact on You and How to Prepare for the Future
Q&A and a BigThank You!
Dave GoodmanSoftAssist, Inc.610.265.8484 ext [email protected]
www.softassist.com
Top Related