December 5, 2005 Program Summary

“A Crash Course in Flash
and Principles of E-Learning”

Presentation and Summary by Michael LeBien

Speaker Michael LeBienEveryone walked away without a scratch after my crash course on Macromedia Flash, e-learning, and tips on designing effective computer-based instruction.

A wise man once said that it's better to bite off more than you can chew, and then chew it. And so I chewed these HUGE topics down to essentials that I hoped would satisfy the various interests of the diverse attendees. After talking about Flash for almost an hour, we took a break and for the last half hour I talked about e-learning and what the research shows about effective computer-based instruction.

Informally extending the presentation beyond the 8:30 p.m. ending time gave me enough time to also talk about an e-learning development tool called Flash Companion, a product by Rapid Intake that makes it easy to develop e-learning courses.

I formatted this summary to allow easy scanning so that people can more easily find the specific topics they are interested in.

Part 1 — An Introduction to Flash and Flash Companion

What is Flash?

Flash refers to three things:

1) The application program for creating animations, interactive Web-based media rich Websites, user-interfaces, and rich Internet applications.

2) The player, which is a plug-in for Web browsers, and that enables flash created content to be viewed by a Web browser.

3) The standalone projector file, which is basically allows you to see flash content without needing a Web browser (for things like self-running multimedia presentations launched from the desktop or from a CD-ROM).

Each time a new version of the flash application comes out, a new player version also comes out in order to display some of the new features that the application has. The player is free and is included in the installation of all the major Web browsers. Since the new version of Flash just came out recently (Flash 8), my demonstrations were done using the previous version (Flash MX 2004 Professional).

What are some of Flash's benefits?

  • Content created in Flash will look consistent across different computer platforms and different browsers. Check (http://en.wikipedia.org/wiki/DHTML) to understand why other technologies such as DHTML fail to do this.

  • Vector and bitmap animations: Vectors have a much smaller file size than bitmaps (gifs, jpegs). Flash can animate both, but has particular features for creating vector animations. Flash uses its own compression technology which makes the file sizes small and therefore download quickly.

  • Audio and video integration without annoying popup player windows. Examples:

    HTML example: Grand Funk Railroad Website (click on the audio/video links to download mp3 and video examples).

    Flash example: Annie Lennox Website (click the music link and go to one of her albums to listen to song clips. Some of the songs also have an icon for watching video. Notice everything is integrated into one screen compared to the html example which must load media players such as Quicktime and Windows Media player which cover the Web page content).
Will people be able to see your Flash content?

The player (version 6 or higher) is on around 95% of browsers that access the Internet. More people have the Flash player than the Windows Media Player, Quicktime, the Real One Player, and even Java and Adobe Acrobat. 90% have the current player 7 and 80% of browsers will have the new player (version 8) one year after its release.

Basics of the Flash work environment?

Watch these short “show and tell” movies about the basics of the Flash work environment. The stage, layers, timeline, panels, keyframes, and animation tweens.

More animations and Flash 8 filters (and now, drop shadows!)

Flash makes it very easy to animate objects. Examples:

  • Here are some hilarious Flash animations: Jib Jab — famous for the Bush/Kerry “This land is my land” cartoons.

  • Here is a Macromedia tutorial about character animation which talks about two new features of Flash 8 (drop shadows & custom easing). Yes, that's right, drop shadows generated automatically! Custom easing is another new feature of Flash 8. Basically the new easing panel allows you to easily manipulate how objects move over time. Instead of having objects move at a constant speed in an animation, easing allows you to have objects start off slow and then speed up, or start off fast and slow down. And that is just the basics of what the easing control panel allows you to do.

Great Flash templates to help you learn from the experts

For $65-$75 you can get a great looking Flash Website which you can modify to your heart's desire. These tutorials can be helpful for learning how seemingly complex things are done in Flash. However, I would only recommend buying one of these templates if you are already familiar with Flash basics (tweens, masking, a bit of ActionScript, movieclips, buttons and graphic symbols). Go to http://www.templatemonster.com.

Flash Video is soooo easy now

Flash 8 Pro features — Here's a complete list:


  • Filters — Drop shadows, blur, glow, and more. Now you don't have to use PNG files just to get a nice looking drop shadow for text or graphics. Plus they can be created on the fly for your animations. Awesome!

  • Mobile device emulator — Flash MX 2004 Professional has templates for designing content for mobile devices (PDA's, cell phones, etc), but Flash 8 Professional has an emulator so you can test your content inside Flash to see how it's going to work and look on whatever device you are designing for.

  • New Video codec — basically a new technology for compressing video which is even better, creating clearer, smaller videos.

  • Object level undo — that means you can mess around with different objects like text fields, shapes, animations, photos, components, etc. But if you want to Undo something you may have done hours ago, you can just undo what you did for a particular object.

  • Flash 8 video alpha channel support — this means you can have transparent backgrounds. Check this out! http://theflashblog.com/?p=77

Two wild Flash sites we visited

One that will trip out your eyes, the other that lets you zoom in from a world view down to your neighborhood. We could even see the building we were in in REAL TIME!!!...Sorry, just kidding. It was a few years old, but still amazing.


Creating e-learning using Flash Companion

Flash Companion is a tool developed by Rapid Intake that makes it a lot easier to create Flash-based e-learning. This online tutorial that I created shows you what Flash Companion does, what it looks like and the benefits of using it.

Part 2 — E-Learning and Instructional Design Principles

What is e-learning?

Most of the information about what e-learning is, and how to design effective e-learning comes from the book “E-learning and the Science of Instruction” by Ruth Clark and Richard Mayer. These two highly respected professionals in the field of instruction review what the research shows about how people learn from computer-based instruction, which factors inhibit learning, and how to design effective computer-based instruction.

E-learning has many definitions, but Clark and Mayer basically define it as training delivered on a computer (via CD-ROM, Internet, intranet), which uses content relevant to the learning objectives, and uses some instructional methods, such as examples and practice.

Types of e-learning:

  • There is self-paced Web-based courseware (examples included learning phonetics, Egyptian Valley of the Kings, teaching rules of conduct during warfare), online documents, assessments, simulations, collaboration systems (i.e. blogs, wikis, discussion forums) and live events such as Webinars, mentoring sessions, and virtual classroom events. Some products such as Macromedia Breeze allow for live training via videoconferencing, sharing the computer desktop, and converting Powerpoint presentations to Flash format for easy browser display of lecture material, etc.

  • Blended e-learning refers to combining various types of learning such as self-paced courseware with regular classroom learning followed up by online collaborative discussion forums. Rapid e-learning refers to strategies for designing and developing instruction quickly.

Why the growth in e-learning?

E-learning is a multi-billion dollar business, with thousands of universities and businesses using it in some form. The main reasons are:

  • Reduced travel costs for training/learning, reduced instructor and facility costs. Reduced instructional material duplication and distribution costs.

  • Increased consistency in training delivery.

  • Scalability. If you build something for 10 people, it can be relatively easy to have 10,000 use the same material with little effort or incremental cost if the infrastructure is there.

  • Anytime/anywhere - If people have an Internet connection.

  • Increased collaboration among disparate populations.
Specific advantages of e-learning
  • You can have practice exercises with automated tailored feedback. So as learners make decisions during the e-learning they can receive feedback about their decisions.

  • Integration of collaboration with self-study and blending learning.

  • Use of simulations to accelerate expertise. This is of particular interest to me. According to Gartner Inc., a premiere research and advisory firm, by 2006, 50 percent of enterprises will use simulations to train sales and customer support personnel and 70 percent of all off-the-shelf and custom e-learning content will include some use of simulations (Gartner, 2003). According to their research interviews, e-learning simulations are the fastest growing sector of the e-learning industry. They predict an increase in spending for simulations from $300 million in 2002 to $37 billion by 2011.

Why use Flash for e-learning?

  • Flash displays multimedia content consistently across different browsers and platforms (MacOS, Windows, Unix, Linux). HTML is limited in terms of interactivity and integrated multimedia, and DHTML is not integrated consistently on the major browsers.

  • Flash can create highly interactive, multimedia experiences using video, audio, animations, and simulations all integrated into one screen. With proper design, usability can be greatly increased and facilitate the learning experience.

  • Flash has pre-built learning interaction components you can use for testing, and all the data can be tracked using a learning management system. For example a company with 1000 learners can track who has taken certain e-learning courses, what their scores were, the date and time taken to complete courses, etc.

  • Architecture issues — Flash can be used in multiple ways to create e-learning. Flexibility is crucial for e-learning. You want to be able to modify aspects of your course such as layout, navigation controls, and text format, without having to go through every screen in your course and editing it. If you are serious about trying to understand these types of issues, I would recommend the book “Using Flash MX to Create E-learning.”

The “spacing effect,” and importance of retrieval for learning

Before getting into what the research shows about designing effective computer-based instruction, I first asked the attendees a couple of questions that are related to research about learning in general. The following questions are from a respected researcher in the field of learning and e-learning named Will Thalheimer, Ph.D. He has a number of white papers I highly recommend that discuss the results and implications of leading peer-reviewed research on learning.

  • Question 1: Who will know more on May 1st?

    A) A learner spends 6hrs/day for 3 days (Feb 1, March 1, April 1) learning material.

    B) Learner spends 6 hrs/day on April 1, 2, and 3 learning material.

    C) Both the same.

    The answer is (A). The reason for this is due to a well researched phenomenon called the “spacing effect.” Spacing essentially means repeating the things you want learners to know. Spacing can be achieved by: including learning objectives or pre-questions in the beginning of the lesson, and having post questions after the lesson. It is also very effective to space out repetitions of learning such as practice opportunities, quizzes, and examples. Repeating the learning material in different ways and over time will aid in learning and long term retention.

  • Question 2: Which will create the best performance 1 week later?

    A) Listening to a 4 hour presentation followed by 2 hours of listening to a review of the material.

    B) Listening to a 4 hour presentation followed by 2 hours of answering questions, without any feedback.

    C) Both the same.

    The answer is (B). The reason for this is because answering questions requires retrieving the information you learn. Retrieval leads to recall. Basically the more you retrieve information, the bigger the retrieval path becomes, making it easier and faster to recall it. Retrieval is another well researched process.

  • Question 3: Which will provide the best learning outcomes?

    A) Provide 5 learning objectives before they start a 45-minute presentation.

    B) Provide the same 5 objectives, one at a time throughout a 45-minute course.

    C) Both the same.

    The answer is (B). The reason is that learners often don't remember the objectives they read. Plus, learners often don't pay attention to learning objectives. Therefore it is better to space them out and have them close to the learning event the objective is about. Personally I don't pay much attention to learning objectives when I'm taking a class because they are either boring to read or require too much effort to memorize. Or sometimes objectives have terminology that I've not yet learned and therefore I can't incorporate them into my existing knowledge.
What the research shows about designing effective e-learning

Again, this information is based on the book “E-learning and the Science of Instruction” by Ruth Clark and Richard Mayer.
1) Let learners control the pacing — have 'next' and 'previous' buttons for navigation. Let learners replay and pause audio narrations, videos and animations.

2) Give learners control, but not too much control. Learners want control but don't know the best ways to improve their learning. They overestimate what they think they can remember. Therefore, instead of letting learners skip over a lesson without taking any kind of quiz or doing some practice which will show them what they do and do not understand, have your navigation controls force the learners to go through the quiz or practice BEFORE they can skip to the next lesson. This is less important for advanced learners who may already know a lot of the content and should be able to move freely through a course. So it depends on your learners.

3) Irrelevant graphics/sounds/video can depress learning. This is a 'no brainer.' Everything should support the learning event.

4) Conversational style is more effective than formal style. Examples:
    • Formal:
      “This program is about what types of plants survive in different environments. The goal is to learn what type of roots, stem, and leaves allow a plant to survive in a certain environment. Some hints are provided throughout the program.”

    • Conversational:
      “You will be visiting different countries to see how different plants survive in different environments. Your mission is to learn what type of roots, stem and leaves will allow a plant to survive in each environment. I will guide you by giving you some hints.”
5) Use audio narration when you can. As Ruth Clark and Richard Mayer mention in their book, “When it's feasible to use audio, there is considerable evidence that presenting words in audio rather than onscreen text results in significant learning gains.”

I was particularly happy to see that sentence because it has been something obvious to me for a long time. For me personally, reading takes a lot more effort. However, they mention that you should provide text of the narration if learners will have a hard time understanding or hearing the audio (e.g., English is not their native language, deaf learners, a lack of sound cards or speakers, etc.)

There are several development issues regarding the use of audio. It is a lot easier to edit some text in an online lesson than to redo an audio clip, especially if you hired professional talent for the narration and you want to make changes later on. This could require you to hire that talent again, just to re-record small changes. However, it is easy for designers and developers to use their own voice, and editing and compressing audio for Web delivery is fairly easy. The other concern is whether learners have a speaker on their computer.

6) Onscreen agents can improve learning. Online or pedagogical agents, as they are often called, are characters that are like coaches that pop up on the screen to help guide learners, or give them feedback. The initial research shows that they can help learning, that animated characters are just as effective as a real person, but that a real voice (for audio) is more effective than a computer generated voice. However, they mention that further research is needed. Personally I would find it a bit odd listening to a Mickey Mouse character give me feedback or hints about doing heart surgery, or leaderships skills.

7) Use audio descriptions for animations and graphical simulations. This is because trying to read text and at the same time watch an animation or graphical simulation overloads our visual processing abilities.

8) Using text is important for constantly referenced material
, like procedures/directions.

9) Use frequent job-relevant practice — This forces review and retrieval of the information taught, and provides a real-world context to the learning material.

10) Use worked examples — worked examples are problems that are partially worked out and require the learner to complete the steps. Clark and Mayer mention that they “are on of the most powerful methods you can use to build new and rich knowledge in long-term memory.”

These last three examples are from an article by Ty Johnson, Vice President of SoftAssist, entitled “The Nine Too-Often-Neglected Principles of e-Learning Design” available through the E-learning Guild.

1) Give students opportunity to mess up. We often remember our screw-ups the most. E-learning can let us make mistakes in total privacy without the embarrassment of doing it on the job.

2) Here's a good feedback technique for tests. After learners have made a commitment by choosing a particular answer, let them have the option of seeing why the other answers were either right or wrong. This allows them to learn even if they got the answer wrong. The feedback become the instructional strategy

3) Cheap simulation branching. E-learning often incorporates some use of simulations to facilitate learning. There are a number of different types of simulations, but many are 'branching' simulations where the learners must make a choice about something, and the content they are presented with is dependent on their choice.

For example, an e-learning course on diagnosing hypothermia might present a learner with a scenario where they are given symptoms of a patient and then they have to make a decision about how to treat them. They might be given three choices of what they can do. When they make a particular treatment choice the program can 'branch' to a new page where the patient starts having a reaction to the treatment. These types of simulations can get very complicated if you have to design and develop for a huge number of choices that a learner can make. This can take a long time to create and be very expensive, but is sometimes necessary.

If you want to give the learner choice, but limit the work needed to create all the consequences of all the possible choices, you can eliminate the branching and have a completely linear program. When the learner makes a choice that isn't the best choice, you can have feedback that tells the learners why their choices aren't the best, and then simply say something like “let's assume you chose the correct answer and see what happens,” and then continue along a linear path you have developed. No branching, less development, less cost, less time to create.

Photography by Bruce Mills

“A Crash Course in Flash
and Principles of E-Learning”
Date: Monday evening, December 5, 2005

“A Crash Course in Flash and Principles of e-Learning” gave us a whirlwind tour of Flash and its benefits for Web-delivered content. We focused on designing and developing online learning, commonly known as e-learning -- which is quickly becoming the instructional delivery method of choice for thousands of companies worldwide.

Here is a sampling of the topics discussed or demonstrated:

  • What is Flash, and what are its benefits and drawbacks?
  • How does Flash compare with HTML-based content delivery?
  • What does the Flash work environment look like?
  • How do you use Flash for instructional purposes?
  • What are some of the principles of instructional design and e-learning?
  • What does research indicate about the effective design of educational multimedia?
  • How do you design and develop e-learning?
  • How do you use Flash Companion, the rapid development tool for e-learning?
  • What's new in Flash version 8?

Michael LeBien, who has a background in training, technical writing, instructional design, and Web site design. He has a bachelor degree in Economics from Cal Poly and a masters in Educational Technology from San Diego State University. Mike is interested in the design and development of e-learning based on proven instructional methods for computer-based learning.


Disclaimer, credits, copyrightGet Acrobat ReaderSome articles or linked resources may be in Portable Document Format (PDF). To download the free Acrobat Reader, click the icon at right. To install the Reader, double-click the downloaded file.

Disclaimer and credits