Your SlideShare is downloading. ×
Converting Flash Training into HTML5
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Converting Flash Training into HTML5


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. CONVERTING FLASH TRAINING TO iPAD Dave Goodman SoftAssist, Inc. 610.265.8484 ext 14
  • 2. • 20 years experience • 500 engagements • 11 National Awards • Stellar Clients Univ. of Pa Health UHS, Inc. Johns Hopkins Montefiore Mercy Health System Lehigh Valley Hospital ProCure Take Care Houghton International Merck & Co. Novartis AstraZeneca Sanofi Aventis Volvo Terumo CR Bard Federal Reserve Bank The World Bank/IFC World Trade Organization Mercedes Benz Provident Bank Commerce Bank CEI Children's Hosp of Phila. ESRI Institute The Institutes Procter & Gamble AmerisourceBergen Dept. of Energy TriZetto BlueCross BlueShield CareFirst Aramark 1150 First Avenue Suite 960 King of Prussia, Pa. Info: 610.265.8484 x14 Dave Goodman Partial Clients
  • 3. Lessons Learned 1. You will underestimate the amount of time required 2. You will change your responsive design which will have a ripple effect throughout 3. Your expectations will change as you understand what is possible 4. Sales staff may want more “glitz” than is practical 5. This is a team effort – everyone must learn and relearn new skills 6. Keep everyone informed along the way 7. The technology will change – you can not project what the iPad10 will do or what html5 will become 8. You will need to test and re-test multiple times
  • 4. Responsive Design Design early in your process and test
  • 5. 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 redesign and “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. You may need to rethink your interactions.
  • 6. Browsers (partial support) The same course on different browsers may look different.
  • 7. XM One Course – or Converting a Library of Courses XM HTML% CSS3 code Graphics Content Media XM HTML% CSS3 code Graphics Content Media XM HTML% CSS3 code Graphics Content Media Course 1 Course 2 Course 3 HTML% CSS3 Javascript code ENGINE = Core Functions CSS HTML5 XML
  • 8. XM HTML% CSS3 A Library of Courses? Javascript code ENGINE = Core Functions CSS HTML5 XML Video/animation Narration Graphics Interactions Individual course assets are added using code. Engines can convert and develop a large number of courses much more efficiently than doing one course at a time.
  • 9. XM XM HTML% CSS3 iPhone Content Javascript code ENGINE = Core Functions CSS HTML5 XML Video/animation Narration Graphics Interactions Code “asks” – is this device coming in as an iPhone? If yes, then show specific iPhone designed content. iPhone xml iPhone may have both less text content and more media
  • 10. Conversion Issues Flash Conversion Analysis Inventory Prototype Code 1 2 3 4 1. Which devices and browsers 2. How many courses will be converted 3. What is driving the conversion 4. Who will do the conversion 5. What are your priorities 6. Test and re-test often 7. Learning on the phone is different 8. Be prepared for revisions
  • 11. 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”.
  • 12. 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).
  • 13. 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 must show the animation and then initiate the interaction, or, have the animation on one screen and the interaction on the following screen.
  • 14. 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
  • 15. Flash Interactions – What is the process? .swf Convert .swf into .fla SoThink Trillix .fla Flash Edit Add sound Synchronize Export to Quick Time Starting with .swf Starting with .fla Convert QT to MP4 AVS Converter MP4 XM HTML% CSS3 Javascript code Develop HTML5 Interactions (from your inventory) Xml files of content, graphics, narration (mp3), etc
  • 16. Conversion Development Your existing Flash course has the 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
  • 17. Conversion Development Timing & Costs If you have a library of Flash courses that need to be converted, think of using an “engine” approach. The engine may require 2- 4 months to develop but only about 2 days to convert each course thereafter. If you have just a few courses that need to be converted, each course will need about 2-3 weeks including testing and revisions. (Assumptions: the original Flash Course has approximately 40 screens, audio and an average number of non-complicated interactions). Cost depends upon three things: your inventory for each course, the number of browsers and devices needed to be deployed and the level of interaction sophistication.
  • 18. Resources
  • 19. 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
  • 20. Q&A and a BigThank You! Dave Goodman SoftAssist, Inc. 610.265.8484 ext 14