How Penn State Statistics Department tackles the issue of aging flash content.

1. Taking out the flash:
Modernizing interactive course content
John Haubrick, Robert Carey, Tom Varughese
STAT OnlineDepartment of Statistics

2. Participants
will be able to…
 Identify challenges associated with
replacing flash content.
 Apply a process and identify various tools
to replace old interactive content in an
online course.

3. The problem...
Flash is Dead!!
 Adobe will no longer support
Flash in 2020

4. What does this
mean?
 Unsupported software means:
 No support... duh
 No Fixes/Patches
 No Security Updates
 It will slowly die out
 And you should really stop using it
 No really stop using flash

5. Why is this a
problem?
 Flash exploits find themselves
in the top ten list of
vulnerabilities year after year.
Sources: McAfee Labs / Recorded Future

6. …and browsers have had enough!
 Microsoft, Google, Mozilla, and Apple have all announced that they too will
remove support for Adobe Flash by the end of 2020.
 Most major browsers (besides IE) now have Adobe Flash disabled by default.
“By the end of 2020, we will remove the ability to run Adobe Flash in Microsoft
Edge and Internet Explorer across all supported versions of Microsoft Windows.
Users will no longer have any ability to enable or run Flash.” – Microsoft

7. Our challenge…
 Over 2300 public web
pages
 Originally designed in
early 2000s
 Moving to new CMS
 Hundreds of flash objects
 Limited time and
resources

8. Decisions:
Pedagogical and Technical
Pedagogical
 What is the purpose of the interactive? (…is it
even ‘interactive’?)
 Does it support the learning of the content (and
objectives)?
 Is there a better way to convey the meaning?
Technical
 Is there a low-tech solution to convey the same
meaning?
 Is there an accessible (and mobile-friendly) way
to re-create the interactive?
 Is it worth the effort?
(...and level of effort)

9. Project Management Triangle
Pick two…

10. Possible Solutions
Video Conversion Image Conversion
Creation Toolkits Interactive JavaScript

11. Solution: Video Conversion
with Flash Converters
 Adobe Animate
 Mozilla Shumway (retired)
 Google Swiffy (retired)
 Swivel
Advantages & Challenges
+ Low effort
– Mixed results
– Low quality source files
– Aging software
– Realtime conversion

12. Scenario 1:
You’ve got a video that gets the job done.
Convert it!
L03_cotton_weight.swf
Now you’ve got an .mp4 that can be
hosted anywhere!
You can make it more accessible by
adding captions and a transcription.

13. Solution: Video Conversion
with Screen Captures
 Adobe Captivate
 Camtasia
 Kap
 QuickTime
 ShareX
 Zoom
Advantages & Challenges
+ Low effort
~ What you see is what you get
~ Moderately accessible

14. Scenario 2:
You’ve got an object with a few controlled interactions.
Before After
1
2

15.  Adobe Illustrator
 Tools for SVG
 Heroku App
Advantages & Challenges
Solution: Image Conversion
with Scalable Vector Graphics
+ Native to browser
+ Infinitely scalable
+ Responsive
+ Themed to course website
+ Enhance with JS
~ Editable
~ Learning Curve
– Not 100% accessible

16. Scenario 3:
You’ve got something that’d work well without animation.
Trace it!
Example 1

17. Scenario 3:
You’ve got something that’d work well without animation.
Example 2

18. Scenario 3:
You’ve got something that’d work well without animation.
Example 3

19. Scenario 4:
You’ve got something to reveal.
Use a tooltip!
Tippy.JS

20. Workflow
Adobe Illustrator

21.  H5P Interactive Video
 H5P Agamotto
 H5P Image Hotspots
Solution: Creation Toolkits
like H5P
Advantages & Challenges
+ LaTeX Support
– Webhost Required

22. Before After
1
2
3
Scenario 5:
You’ve got something to explore.

23.  D3.js (Data-Driven Documents)
 H5P (HTML5 Package)
 three.js (3D JavaScript)
 Green Sock (Animation Platform)
 WebGL (Graphics Library)
 WebRTC (Realtime Communications)
 HTML5 Canvas API
 Anime.js
Advantages & Challenges
three.js
+ Highly customizable
- Medium/High Effort
- Developer skills recommended
Solution: Interactive JavaScript
the web is alive!

24. Scenario 6:
You’ve got something with complex interactions.
Script it!

25. Have fun with it!
Video Source: https://bl.ocks.org/mbostock/1256572

26. Have fun with it!
Source: https://seeing-theory.brown.edu/

27. Questions and Answers

28. John Haubrick
jmh491@psu.edu
Bob Carey
rpc5102@psu.edu
Tom Varughese
stv5038@psu.edu
Contact

29. Thank You!

30. Sources
 Homestar Runner – Flash is Dead!!
https://www.youtube.com/watch?v=L0nuQ5o2DYU
 Bitmap VS SVG
https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg
 SVG File icon by Chameleon Design, IN
https://thenounproject.com/search/?q=svg%20file&i=116633
 https://www.adlnet.gov/flash-article
 “I’ll Take Your Questions Now” GIF
(2001). Atlantis: The Lost Empire. Walt Disney Pictures.
 “Flying DeLorean” GIF
(1985). Back to the Future. Universal Pictures.