Articulate: Word of Mouth Blog

The Articulate Blog

Gabe Anderson

Word of Mouth is the Articulate blog, hosted by Director of Customer Advocacy Gabe Anderson.

Gabe loves to share his passion for all things tech and enjoys learning from Articulate customers around the world.

Contact Gabe or follow him on Twitter here.

Articulate 101: Improve Download Time for Your Presenter Course

Tuesday, February 26th, 2008 by Phil Corriveau

32 Comments


This is the 26th post in the Articulate 101 series. It was written by Articulate MVP Phil Corriveau (AKA Spectre), who uses Articulate tools to help power Fannie Mae’s elearning programs.


During lunchtime, I often take a quick jaunt to the local sandwich shop. On most days, I can get in and out in relatively no time at all. But then there are those days when I encounter a long line. It is during these times that I ask myself, “is it worth the wait?”

Nobody likes to wait. This can apply to anything, including the viewing of online courseware. We would like to think that users hang on to (and wait for) our every word. But the reality is that if users have to wait too long for content to be delivered to them, they may not wait…they may simply drop out and move on to something else.

This article will provide you with some tips on how you can reduce — or eliminate — your customers’ wait time.

Don’t assume everyone has a lightning-fast network connection
I’m sure that this has happened to many of you at one time or another: You finish developing your content that downloads quickly and plays flawlessly in your work location…but later find out that it runs like molasses on the outside.

Many have fallen into the trap of performing tests of online content only in their office — and later find out that some of their customers experience delays in the download and playback.

The fact is that customers will have different experiences in how quickly they can access content over the internet. A number of factors affect this experience, including internet connection speed, internet traffic on the network (such as wi-fi hotspots) and the location/connection speed of the internet site itself. For example, customers who access courses from the airport or hotel, or use a lower-end DSL connection will likely encounter longer download (and wait) times.

With that in mind, it is a good idea to have a sense of your target audience’s internet connectivity before designing your content. If the intended audience is internal employees only, a good start would be to contact your IT department, as they should be able to fill you in on network capabilities, limitations and potential bottlenecks.

However, when dealing with external audiences, gathering this info can be more challenging. One approach would be through a Quizmaker evaluation/questionnaire included in existing online courses. For example, in my course content, I ask customers the following questions:

  • What kind of internet connection did you use to access the course (i.e., corporate network, cable, DSL, wireless hotspot, dial-up)?
  • Did the course run smoothly and without delays?

Although this survey is far from scientific, I have been able to obtain a reasonable gauge on connectivity speeds and determine the amount of robust content to use in the next course I design.

Size matters
There is naturally a correlation between file size and its impact on download time. Keeping that thought in mind, you should aim to keep your files as small as possible. This approach will not only minimize wait times for your customers, but will also reduce the load on networks and servers (your IT department will thank you).

Videos and simulations — created from such products as Adobe Captivate and TechSmith’s Camtasia — can be the biggest culprits of bloated file sizes if not tended to carefully. Fortunately, each of these applications offers a number of compression options. You are encouraged to check out the companies’ websites, as most offer many useful tips that can help you reduce published content to a more reasonable size.

In the case of Articulate Presenter (AP) and Articulate Engage (AE), you have control over the size and quality of the published audio and images — resulting in slides that can be published out at relatively small file sizes.

AP Quality

There are no set rules on ideal file sizes for your content, as that will be dictated by your audience. But this Download Time Calculator can help you determine download times for a file using a variety of connection speeds:

Launch the Download Time Calculator in a New Window

Test for the lowest common denominator
As mentioned earlier, testing only with your office connection can lead to unpleasant surprises down the road. A good game plan — whenever possible — is to run your course in a test environment that you think is representative of the slowest connection and performance possible for your audience. This will help give you peace of mind that your content can run anywhere!

For internal use, the IT department should be able to provide some guidance on how to best handle the testing. If you don’t have the luxury of running your course through the desired test environment, an excellent alternative is to use a connection simulation tool called NetLimiter. Through this utility, you can test your product against slower connection speeds.

As always, it is best to “test early, test often.”

Preloading = less wait time
In addition to reducing file sizes, another step to minimizing wait times is through the preloading of files ahead of time. AP actually uses such an approach — downloading two slides ahead of the one currently being played. Although this is very helpful in reducing delays, sometimes it is not enough…

One shortcoming of AP is that it does not preload content inserted in a slide, such as Flash, Quizmaker and Engage files. What this means is that these files will not begin downloading until the specific slide is reached. As a result, your customers can encounter delays.

The solution to this is through the use of a custom preloader file. By creating such a preloader, you can specify — in a certain order — which files you want downloaded. In my tests, this solution has proven to be quite effective in reducing or eliminating wait times for Flash and Engage content

In a nutshell, the custom preloader is nothing more than a Flash file with ActionScript that resides in the logo panel. For your convenience, I have posted a demonstration of this preloader that includes an attachment of the source file in Flash MX 2004 format. Feel free to download and modify this file — which includes developer instructions — to meet your needs.

Preloader Demo
View the Preloader Demo

As we’ve covered throughout this article, customer wait times is an often-overlooked consideration. I hope that you find these tips and examples helpful in designing and creating content that does not test the patience of your audience.


Subscribe to the blog via email or RSS feed to make sure you don’t miss out on tomorrow’s tip.


Phil is a member of Fannie Mae’s Customer Education Group in Washington, DC. His 20 years of experience has involved technical writing, instructional design and standup training, as well as audio production, video production and interactive media development.

32 Responses to “Articulate 101: Improve Download Time for Your Presenter Course

[...] Improve Download Time for Your Presenter Course [...]

29 Really Useful Articulate Tutorials - Articulate - Word of Mouth Blog  |  Posted at 12:59 pm on February 29th, 2008 |  #

Cool! Thanks! I was just trying to figure this out.

Stella Anderson  |  Posted at 04:22 pm on October 27th, 2008 |  #

Can you provide instructions for using the preloader using a format other than a .fla file?

Jackie  |  Posted at 12:45 pm on January 22nd, 2009 |  #

Hi Jackie. Just to clarify, the FLA I attached in my demo is a Flash source file. With this file, you make the necessary code tweaks in the Flash app and publish it to an SWF file. The resulting SWF can then be inserted in Articulate as a logo.

SWF is a great format for this functionality, as it integrates nicely into the Articulate Player.

Another option–although I believe it would be more complicated to implement–is through the use of a JavaScript file. But you would have to jump through some extra hoops to make it work.

Does that info help?

Phil  |  Posted at 08:42 pm on January 22nd, 2009 |  #

Hi Phil–I tried opening the file to no avail…thought there was a version issue but there was not. I made an attempt to create my own preloader–it is partially working. Is there a chance that you might be available for a short phone exchange? I have a course that needs to go live yesterdays ago, but the load time for slides that contain .swfs is very long. My users would abandon the course given the long wait time.

Jackie  |  Posted at 08:25 pm on January 23rd, 2009 |  #

Jackie, for the slow reply. You are welcome to private message me (Spectre) here on the forums and we can take it from there.

Phil

Phil  |  Posted at 10:14 am on January 29th, 2009 |  #

Hi Phil.

Quick question, we are using custom preloaders. In the past we have used them on courses with the side navigation panel. This time we want to use them with the no sidebar view. I assume it will work the same. Is that correct?

Kim

kim Stockwell  |  Posted at 01:35 pm on March 11th, 2009 |  #

Hi Kim. Using the logo panel is by far the easiest implementation for the preloader…but it can be done other ways. I encourage you to check out my answer to a similar question in the AP Forum: http://www.articulate.com/forums/articulate-presenter/7283-delay-loading-flash-content-slides-lms-2.html#post39010.

I hope you’ve found the preloader helpful.

~Phil

Phil Corriveau  |  Posted at 01:48 pm on March 11th, 2009 |  #

Hi Phil –

This is going to seem like a very basic question and although I have been using Articulate for over 1 year, I am new to the preloaders. We have been using the logo panel preloaders for all of our courses to date. Those courses also use the standard view.

I know I can I can go into my template player and select logo panel. I guess to clarify my question, does the fact that I am using the no sidebar view, negate the fact that the logo panel is selected and when I publish, I select my custom preloader under the logo option? Is the View Mode and the Sidebar options related?

Thanks so much!
Kim

kim Stockwell  |  Posted at 02:23 pm on March 11th, 2009 |  #

Actually, that’s a great question. The bottom line is that if the logo panel does not appear–even if you selected the preloader logo during publish–the preloader will not work. At least from my experience, that is what happens.

As a result, another means of implementing the preloader is necessary.

I hope that answers your question.

~Phil

Phil Corriveau  |  Posted at 02:32 pm on March 11th, 2009 |  #

Tried to open the file with Flash MX Professional 2004 and I got an “unexpected file format” message. I know I am way back level on the Flash code. Do I need to move to more current level.

Marc Miller  |  Posted at 12:38 pm on March 21st, 2009 |  #

Hi Marc. I just re-uploaded the attachment–which should now work for you and anyone with MX 2004. If not, please let me know.

~Phil

Phil Corriveau  |  Posted at 03:05 pm on March 23rd, 2009 |  #

Phil,
Firstly, great idea on the preloader. I have been looking for this for years. I have one problem, I downloaded your file, I have Flash MX 2004 but it will not open.

May I ask for another copy. Thank you for your help.

Respectfully,
Malcolm

Malcolm Duncan  |  Posted at 03:02 pm on April 30th, 2009 |  #

Hi Malcolm. Sorry that it’s not working for you. If you can e-mail your address to me (philc at spamex dot com), I’ll be happy to send you a copy.

-Phil

Phil Corriveau  |  Posted at 03:55 pm on April 30th, 2009 |  #

Philip Corriveau or Gabe
I have a very large tutorial with many videos. The videos are currently playing in Engage called from presenter. In using the preloader, do I list every swf file used in the engage presenataion (tabbed videos) AND the engage file, just the engage file, or what? Thanks

Jack Brown  |  Posted at 05:39 pm on June 15th, 2009 |  #

Hi Jack. You want to load each SWF file in the order that they would appear in the slides.

For Engage interactions, you would load each of the files that exists for the Engage interaction. I usually first publish my Articulate Presentation using the Web option and look at the folder contents–which will show me the directory names and structure for each Engage interaction (and of course other inserted content). Based on that, I add my list of files to the preloader code.

One caveat…the preloader will currently not work with FLV videos (only SWFs). I hope to add this functionality down the road.

Hope this helps…

Phil

Phil Corriveau  |  Posted at 08:33 am on June 16th, 2009 |  #

Hi Phil,

I am currently working on a course that makes extensive use of FLVs. I would love to connect with you to talk about adding this preloader functionality. I am considering offshore programming resources for this project but would rather connect with someone stateside.

Shoot me a note

Cheers
Mark

Mark Dorosz  |  Posted at 02:14 pm on November 3rd, 2009 |  #

Hi Mark. Your timing is impeccable! I just finished revamping the preloader to include FLVs. You can download the “new and improved” source files from the Attachments menu (I updated it tonight). Although the new version has tested out very well for me, I would appreciate any feedback on how this works for you.

-Phil

Phil Corriveau  |  Posted at 11:11 pm on November 3rd, 2009 |  #

Hi Phil,

It was meant to be! I will be testing the preloader on some pretty heavy video content so let’s keep out fingers crossed:

http://www.knowledgescreen.com/rapidvideo

I’ve reached to you via LinkedIn in case your open to consulting gigs.

Cheers
Mark

Mark Dorosz  |  Posted at 10:05 am on November 4th, 2009 |  #

Hey Phil,

I have been able to successfully download the files and open up the various assets.

Where do I plug in my list files to be loaded and how do I publish the result preloader. I have Flash CS4.

Cheers
Mark

Mark Dorosz  |  Posted at 10:28 am on November 4th, 2009 |  #

Mark, in the nutshell here’s how you do it:
1. Open the FLA file.
2. In the first Actionscript on the timeline, edit the code to reflect the files you want preloaded (I have programmer’s remarks that tell you where to edit).
3. Once done, you would publish the Flash file out as an SWF (be sure to choose ActionScript 2.0)
4. The SWF would be added to the logo panel in Articulate.

I noticed in your pilot (which looks terrific BTW) that you have videos playing very early on. This could be problematic for the initial videos when using this specific preloader, as the preloader (at the least the way I designed it) needs time to download content first. If possible, I would recommend going on the content for the first minute or so.

Hope you find that helpful!

-Phil

Phil Corriveau  |  Posted at 01:42 pm on November 4th, 2009 |  #

One other thing: make sure to publish out the SWF in version 7 or higher.

Phil Corriveau  |  Posted at 02:21 pm on November 4th, 2009 |  #

Hi,

This is very helpful. Would this also work on preloading mp4 files?

peter  |  Posted at 09:09 pm on November 12th, 2009 |  #

Hi Peter. I haven’t tried it on MP4 files, but I see no reason why it wouldn’t work with them.

Phil Corriveau  |  Posted at 09:30 pm on November 12th, 2009 |  #

Confirmed…the custom preloader works with MP4 files.

PHIL CORRIVEAU  |  Posted at 11:01 pm on November 18th, 2009 |  #

Hi Phil,

I’ve downloaded your file, and I’ve managed to open it up and edit the list of files. However it doesn’t seem to do anything. Does this preloader only work when the files are actually loaded onto a server?

I’m also concerned that the preloader isn’t able to find the files. The string I’m using is “data/swf/fm_test.swf” like in your examples. However, when I tracked down the logopanel.swf, the pathing doesn’t seem like it would work, but of course I can’t get it to go with what I think it should be. (ie. “../data/swf/fm_test.swf”)

Is there anyway for you to modify the text box in your file to display some usefull info? Maybe just update the text box each time it starts downloading a new file. Just so I can see that something is happening.

I’m trying to load in regular swf files. There is AS code in those files, but I can’t see how they would hurt the download.

Any advice/help you can offer would be greatly apprieciated.

Thanks.

sheena  |  Posted at 01:49 pm on November 23rd, 2009 |  #

Hi Sheena. You will need for the files to reside on a server for this to work.

Regarding your concern about whether or not files are being “found” by the preloader, the best way to determine this is to use the free browser sniffer HTTP Watch (http://www.httpwatch.com). By using this tool, you can see which files are being called (including path), which files were successfully downloaded and which ones weren’t. With this tool–which I find indispensable–it pretty much provides all of the info you’ll need to troubleshoot preloaded files.

Hope that helps!

-Phil

Phil Corriveau  |  Posted at 07:20 pm on November 23rd, 2009 |  #

Hi PHIL,
I am trying to use this preloader with FLV files, I published it and put it on my server but now it seems none of my movies upload AT ALL…..they used to before the preloader. It has a lot of video… HELP PLEASE…

Adriana  |  Posted at 09:28 am on December 17th, 2009 |  #

HEllo again, beside the previous post I have encountered various well dificulties/questions… I read that I could make the prloader transparent and put it in a slide at the beggining.. But what happens if someones passes the slide and the preloader isn’t finished… And secondly Which file are EXACLTY the ones that I have to write in the Actionscript:
1.Wich Engage files??/
2.Wich quizmaker files??
3. Wich any other files??

I am really new to flash and preloaders..
Iwould appreciate the help
Thanks,
Adriana

Adriana  |  Posted at 10:51 am on December 17th, 2009 |  #

Hi Adriana- not sure if this is related to your first comment about the FLV files not playing at all, but you might want to make sure your server supports FLV MIME type:

FLV does not playback when deployed on a server

gabe  |  Posted at 03:25 pm on December 17th, 2009 |  #

Hi Adriana. Sorry that you’re running into problems. It sounds like you’re just learning Flash…I’m afraid you will encounter difficulties with the preloader if this is the case.

With that said, if you place the preloader file on a slide, the preloader will stop working once the user leaves the slide. That’s why the logo panel is the ideal place for the preloader (if possible), because it is always running.

In terms of files to preload, it depends on your project. I typically publish using the Web option, then look at the various Engage/Quizmaker directories and identify the files I think should be preloaded (usually the largest ones). Yes, the process can be tedious, but it is worthwhile for many. Don’t forget to check out the free browser sniffer HTTP Watch for troubleshooting.

Also, keep in mind that the preloader is not officially supported by Articulate. I shared it in hopes that it may help some people (which I believe it has)…but it will probably not work for everyone.

I don’t know if that’s the answer you’re looking for, but I hope it helps a little bit.

Phil Corriveau  |  Posted at 08:37 pm on December 17th, 2009 |  #

Thanks for this very helpful lesson. Does the preloader work when the course is published to Articulate Online? So far, I don’t see any difference. I admit that what exactly gets loaded to the Articulate Online server when I publish to it is a mystery to me. For example, are the swf files included?

Thanks in advance for your patience and help.

Trudie  |  Posted at 09:05 am on February 10th, 2010 |  #

Leave your comment below.




Want more? Check out 525 Entries in the Archives »