Converting Flash Training into HTML5

20
CONVERTING FLASH TRAINING TO iPAD Dave Goodman SoftAssist, Inc. 610.265.8484 ext 14 [email protected] www.softassist.com

Transcript of Converting Flash Training into HTML5

Page 1: Converting Flash Training into HTML5

CONVERTING FLASH TRAINING TO iPAD

Dave GoodmanSoftAssist, Inc.610.265.8484 ext [email protected]

www.softassist.com

Page 2: Converting Flash Training into HTML5

• 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

Page 3: Converting Flash Training into HTML5

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

Page 4: Converting Flash Training into HTML5

Responsive Design

Design early in your process and test

http://www.responsinator.com/

Page 5: Converting Flash Training into HTML5

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.

Page 6: Converting Flash Training into HTML5

Browsers

(partial support)

The same courseon different browsersmay look different.

Page 7: Converting Flash Training into HTML5

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

Page 8: Converting Flash Training into HTML5

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.

Page 9: Converting Flash Training into HTML5

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

Page 10: Converting Flash Training into HTML5

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

Page 11: Converting Flash Training into HTML5

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”.

Page 12: Converting Flash Training into HTML5

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

Page 13: Converting Flash Training into HTML5

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.

Page 14: Converting Flash Training into HTML5

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

Page 15: Converting Flash Training into HTML5

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

Page 16: Converting Flash Training into HTML5

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

Page 17: Converting Flash Training into HTML5

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.

Page 18: Converting Flash Training into HTML5

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

Page 19: Converting Flash Training into HTML5

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

Page 20: Converting Flash Training into HTML5

Q&A and a BigThank You!

Dave GoodmanSoftAssist, Inc.610.265.8484 ext [email protected]

www.softassist.com