Posts Tagged ‘Flash’

Easy Mobile Learning (Sort of…)

Ok, so you have some existing e-learning with audio, video, animation that your users access online with their personal computers  (Do we still use the phrase “personal computers?”). Maybe you have created your course in something like Articulate Presenter or Flash where a large part of it consists of more listen-and-learn content and less click-and-read.

Why not make it available on mobile devices as another option so that users can access at least part of (the less interactive part) while on the road? Now by mobile format, I don’t mean true mobile learning. I simply mean video files that can be played on your IPod, Iphone, Ipad, Blackberry,  or Android device much as you would a video podcast.

Here is an easy way to convert your online learning to a mobile format.

Step 1: Get some screen recording software

Get yourself a copy of  Camtasia Studio 6 or 7 from Tech Smith. I use Camtasia and not something like Captivate from Adobe  because, not only is it cheaper, but it has a great Pan and Zoom feature that allows me to effectively zoom in on parts of the presentation and pan across the screen.  These are very important features when adapting something for the small screen that was originally intended for the big screen.

Step 2: Record

Record the main stage area of your course with Camtasia. Camtasia, allows you to record not only what appears on your computer screen, but also the system audio before it comes out of the speakers. This will give you the best sound quality. If you don’t have it set right, you may end up recording  the audio that has been picked up by your external microphone as it comes out of your speakers.  I had to fool around with the audio properties somewhat to get the settings right. In Camtasia Studio 7, in the audio options I chose Record System Audio.

System Audio

In Camtasia Studio 6, you will need to go into the audio options and choose either the Stereo Mix or Speaker Audio. Test it out on a short clip and see if it captures the audio correctly.

Once you know how to do it, you can record anything that you can see and hear on your computer just the way it was created. It is a great way to keep a copy of a video you like, extract audio from a flash movie, create a video from a flash movie. Whatever.

Tip: Some programs like Articulate allow you to let the entire course  play automatically from one section to the next. If you can, set it up to do auto play so that you don’t have to stop and start the recording and have multiple recordings to import into Camtasia. If you can’t do this, you can make smaller movies for each section of your course and then combine them in Camtasia.

Step 3: Import into Project

Once you have your recording(s), you will import them into Camtasia for editing. You will need to create a new Camtasia project. I suggest you choose a size for your project closer to the size of the output you want to create so that you can see how much you will have to zoom in on the material. However, if you want to create multiple sizes and formats for new devices as well as older ones you may want to start with a larger size and scale your videos down later with another tool.  In my case, I wanted to create output for older Blackberry Curves as well as newer Ipod Touches and Iphones.  I wanted various sizes to take advantage of the larger screens so I set my project setting to 640 x 480 and used another tool to process the other sizes and formats of videos.

Step 4: Edit

Once you have your movies in the Camtasia program, it is time to edit them. This will consist mostly of starting from the beginning  and progressing to the end all the while zooming in on key parts of your presentation that might not be as visible on a smaller device.

You will need to make some judgment calls.  Sometimes this may mean showing a full screen and then zooming on a particular image or bullet point, other times you may have to sacrifice showing the larger screen with associated images and pan around the screen focusing on individual elements. Since this is only good for narrated courses where the user can fill in the blanks by listening, there will be some trade-offs.

We did this for one client who had a course that was about an hour in length. In this case, we had to break the video into three parts to make it easier for users to download and  watch them in reasonable chunks. This meant also finding logical breaks and creating a clear title for the beginning and end of each part.

Step 5: Convert

Once you are done the editing, you can export the course from Camtasia and start converting the videos to other formats and sizes. In our case, we chose one of the output formats that produced a standard MP4 file. Once we had the MP4 file, we ran it through a program like Format Factory to give us the various sizes and formats for common mobile devices.  With newer smart phones this can mean quite large resolutions so make sure you keep this in mind when exporting from Camtasia. Also, keep in mind some older devices only handle 320 x 240 video and some only run 3GP. In most cases MP4 is the best format for devices out there.


Though the final product may not be as interactive as some people would like, this is one more good option to make existing elearning content accessible for people on the go.

Continue Reading No Comments

Tell No One. Visualizing Elearning (Part 2)

Chicken and Pig

Most of us have seen a blockbuster that has gone way overboard in terms of “visualization” — sacrificing both a comprehensible story line and any semblance of character development to the spectacle.   Sure these can be nice to look at, but, in the end, are as shallow as the latest Hollywood holographic teen idol.  Some are like a poorly made Fajita — lots of flash and sizzle but no real meat (or Tofu if you prefer) in the middle.

Having said that, as elearning developers, that’s probably not the problem most of us have to contend with. We usually have to work with budgets not big enough to buy a dozen donuts and a coffee.  Not only that, instead of creating a course on how the robots in the movie Transformers were made, we probably have to create a course on the workings of actual electrical transformers. Instead of explaining how the end of the world might come about in 2012, we are more likely to have to describe how “The International Financial Reporting Standards” put an end to old accounting practices in 2013. These are not subjects that motivate most people to reach for a bag of popcorn.

As a result, we need to figure out how to make our productions at least mildly engaging in order to hold our audience long enough that they actually learn something.  That means visualizing on a budget.

One way we can start, (and this might seem really trivial to some of you) is to use representative stock icons to replace or support onscreen text or narration.  Web sites like iStockphoto allow you to purchase some really nice 3D icon sets for your elearning projects.

Here are a few reasons to use icons:

1. They are cheap.  One set of 12 icons costs approximately $10 US. That’s not bad. You will probably have to buy more than one set to get all the images you need but still you can’t beat the price.

Piggy Bank

2. You can have a relatively uniform look and feel for your images. Since the artists usually create multiple sets of icons to cover a wide variety of areas such as multimedia, computers, environment, office icons etc., you will find many different images to represent things in roughly the same graphical style.  In addition, because these images are icons, they are usually very generic looking and can fit in with almost any project you might have.  It’s time to throw away that cheesy clip art!

Industry Icons

3. You can use one icon to represent a number of different concepts. One of the beautiful things about human beings is that they can understand abstract symbolism. Once you associate a concept with an image, people can make connection easily and immediately.

Doctor Icon

4. Icons are in vector format and can be re-sized without lose of quality and animated easily in programs like Adobe Flash.   We keep our library of icons in a Flash file as a kind of vector image library.  That way we can create little animated scenes for our projects or simply put them on the stage and export them in any number of formats and sizes.  It’s pretty handy.

To sum up, using icons allows you to “show” and not “tell” by representing concepts visually with simple, uniform, and high quality images.  They provide an inexpensive and easy way to enhance your elearning titles. You are not going to win any special-effects awards, but perhaps your project will be a little more effective and come in under budget.

Continue Reading 2 Comments

Engage Interactions and Lectora

This tutorial will show you how to incorporate Articulate Engage interactions into Lectora. We had to write these procedures out for someone on our team anyway so we thought we would pass them on to you.

Here at Pinched Head, we like Articulate Engage for some things because it’s fairly easy to use. They have focused their efforts on creating a select number of high-quality flash-based interactions that can add a lot to an otherwise static elearning project. We’ll write a more detailed review of Engage at some point down the road.  For now,  here is a Camtasia screen movie of the process followed by a summary review of the steps.

My narration is no James Earl Jones but I hope it is helpful.

Summary of Steps

  1. Create your Engage interaction.
  2. Export your Engage interaction to web output.
  3. In the folder where Engage exports your interaction, rename the “engage.swf” to <whatever>.swf
  4. Also rename the “engage_contents” folder to <whatever>_contents (the same name  you chose for the .swf. We do the above two steps in order to differentiate between multiple Engage interactions that we include in our Lectora title. It would simplify things if Articulate named these other files uniquely (it always names them “engage.swf ” and”engage_content”) but that is a subject for our future product review.
  5. On the Lectora page where the Engage Interaction will go, add an Animation to the page either by selecting the Animation icon at the top or by going to Add>Object>Animation.
  6. Place the Engage Interaction <whatever>.swf on the page.
  7. When embedding a .swf file to a Lectora page,  put the following parameter in the flash animation properties: wmode=opaque. This ensures that any menu that you create on the page will appear on top of this flash movie (see earlier post on adding a slide-out menu to Lectora). This applies to engage movies, flash movies and any Camtasia or Captivate flash videos that are embedded directly on the page.
  8. Important: Place the folder named <whatever>_content in the /images folder so that you can preview the interaction while working in Lectora.
  9. Important: After publishing the Lectora title, place the interaction folders also in html/images (or in scorm/html/images for SCORM titles.) for each Engage interaction.
Continue Reading 5 Comments