How to create an specific number of repeated characters without using a loop

Justin | tips | Wednesday, October 23rd, 2013

I’ve run into an issue on a few occasion where I wanted to dynamically create a string of repeated characters (usually spaces or tabs) an exact number of times. It always struck me as a bit of a headache to have to create a loop to join all the of the pieces of the string together.

Recently, I found a simpler way. The solution relies on the Array constructor. The Array constructor can accept either an array of values, or a number. If you pass a number, an array with that length is created with each item being empty. We can take advantage of the fact that the items are empty. Any character we use to join the array into a string is the only thing that will be shown, because the items themselves are empty.

var n = 3;
var str = '.';
var result = new Array(n+1).join(str); //creates "..."

Here’s what it looks like in a single line:

var result = new Array(4).join('.'); //creates "..."

(You need to add one since the join string appears between array items).

Far simpler and cleaner than creating a loop!

This code can be used in JavaScript or ActionScript.

Local Playback of YouTube Embeds

Justin | tips | Thursday, October 3rd, 2013

The easiest way to embed a YouTube video in another webpage is to use Share > Embed, found on any YouTube video page.

YouTube has recently made a slight modification to this code by removing the protocol (http:) at the beginning of the URL:

<iframe width="560" height="315" src="//" 
frameborder="0" allowfullscreen></iframe>

In many respects, this an improvement. The lack of a a protocol means that this link will inherit the protocol from its container page. So if the container page is https (a secure page), the YouTube video will be as well. This avoids a security warning to IE users when loading unsecured content (the http YouTube video)  within a secured (https) webpage. This is a more flexible method, as long as your page is on a web server.

However, it means that the embedded content will not preview locally from your hard drive.

To view a working embed from you local drive, modify the embed so that the src attribute begins with http:

<iframe width="560" height="315" src="" 
frameborder="0" allowfullscreen></iframe>

The same protocol policy goes for URLs used with Google’s Hosted Libraries (like jQuery).

Advanced Page Tracking with Articulate

Justin | Instructional Design,tips | Tuesday, May 1st, 2012

At my job as a Creative Technology Manager at Pearson, I do a significant amount of work on interactive training with our Instructional Design team. Over the last 7 years, we’ve developed a highly-reusable, modular set of Flash templates that can handle all sorts of advanced interaction. As rapidly as the team can generate a course from the Flash templates, there are smaller projects where products like Captivate and Articulate are more appropriate. In the case of Articulate (Presenter), this is even more true when the client already has their materials in Powerpoint form, and would like to continue editing the Powerpoint assets. Articulate can export the Powerpoint slides as an interactive course (to run as a Flash/HTML-based module). Additionally, Articulate has SCORM tracking as an export feature for use with Learning Management Systems (LMS).

While we often produce LMS-based projects, we also frequently utilize other tracking modalities (to generate custom completion certificates, or when deployment to non-LMS sites is a client requirement, etc). The nifty thing we’ve discovered in these cases, is that we can publish an Articulate project for SCORM, and overwrite the JavaScript hook to serve our particular scenario.

To write your own custom hook: export your project with the LMS tracking turned on. Duplicate the player.html file that has been generated so that you can refer back to the unedited file. Open your duplicated file in a text editor.

Open a new script tag after the existing ones in the head tag:

<script language="JavaScript1.2">

Inside this <script> tag, you can now begin to override the default LMS configurations.

//Configuration Overrides
//set this to false if you don't want the overhead of recording debug information
var blnDebug = false;
//type of LMS to use
var strLMSStandard = "NONE";
//set this to true when debugging to force the debug window to launch immediately
//set to empty function to prevent a js error from another file
LoadContent = function(){};

By setting strLMSStandard to NONE the JavaScript exported from Articulate will utilize functions from the lms/NONEFunctions.js file (instead of the files using SCORM or AICC functions).

Continuing inside the <script> tag you started, you can override any of the “NONE” functions (since you script comes after the embedding of the other scripts). The essential function is NONE_SetDataChunk, which is called each time a new screen (i.e. slide) is shown. This function receives a string that includes which pages have been visited, and which page is currently active. You can use this information to trigger you desired events (and make sure to close your <script> tag at the end).

//Override function in the NONEFunctions.js file
function NONE_SetDataChunk(strData){
   //example strData looks as follows:
   var pageNum = strData.split('lastviewedslide=').pop().split('|').shift();
   pageNum = parseInt(pageNum) - 1;    //convert to array numbering
   //you can then use the pageNum value to trigger an outcome
   return true;

Not only have we used this generate custom certificates on non-LMS web servers, but we also combine this functionality with our comment tracking system. In the development and client review stages of a project, we use this code to trigger and update a button onscreen. When clicked, this button takes the visitor to our comment tracking system, opens and a new ticket, and pre-populates the field that identifies the current slide. That way we effectively solicit and apply feedback to each element of the project.

Quick Tip: Installing Adobe Extensions

Justin | extensions,tips | Wednesday, November 16th, 2011

If you have multiple versions of Adobe (or Macromedia) software installed, you probably have multiple versions of Extension Manager, the application that helps you install and manage extensions. This can lead to some confusion.

When you double-click an MXP (or ZXP) file, your operating system open your default version of Extension Manager. This may not be the version that you want, however. Suppose you have Flash Pro CS4 and Flash Pro CS5 installed. Your system will (probably) automatically launch Extension Manager CS5 when you attempt to install a new extension. This is okay if you want to install the extension in Flash CS5, but it will not be available in Flash CS4.

There are other issues that crop up when you have versions installed in multiple languages (and in some cases, if your language is not English). Luckily, there’s a simple way ensure that you’re using the correct version of Extension Manager.

  1. Launch the version of Flash Pro (or Dreamweaver, or Fireworks) in which you’d like to install the extension.
  2. Go to Help > Manage Extensions… and it will launch the matching installation of Extension Manager.

Features vs. Bandages

Justin | ActionScript,tips | Thursday, April 28th, 2011

At my part time job with Pearson, I’m a member of a team that maintains a large template system for e-learning projects. This template system allows us to produce very large media-rich courses in a relatively short span of time. In these projects, as well as others, I try to teach and maintain a system of adding features, rather than bandaging functionality that needs to change. When a client request comes in, I challenge myself and my colleagues to consider how this request could be made part of our permanent (and ongoing) system, rather jury rigging the current system to temporarily support new functionality. This feature-based approach has several long-term advantages that I will elaborate on this post.


Page 1 of 512345