ReviewMyElearning.com

Creating an Articulate Popup

I was recently asked by a client to create a set of buttons that would popup extra info about a slide.
There were four main challenges to this.

  1. Each slide would have unique info. Or maybe none at all.
  2. The buttons should disable if there was no extra info for that slide.
  3. The info contained HTML (links).
  4. The popup needed to cover the slide content.

Here is a screenr of the end product.

I was able to solve 1&2 by reading a custom XML file which contians the extra info per slide. If a node is empty I disable the button. Easy Peasy.
At first I tried popping up the default Articulate alert:

_level65.Message("Your message to the learner","Message Title");

But that didnt really fit in with the look and feel of the course nor does it allow HTML. So I decided to build my own popup.
The trouble with that was getting it on top of the content.
I am loading my swf into the "Powered By" area of the Articulate Skin. This gets loaded late in the game and at a level below much of the content. Specificly Engages and Quizes.
The solution is to get my swf to convience it's Dad to load another swf for me.
I need to keep track of that new swf cause I am going to open/close it plus send my tips to it.
Let's look at the code. This is in my swf with the buttons. It is just a sampling of the full code... I left out the XML bits and simplified this to one button. But the concept is the same for both buttons.
First I create new movieclip at level 65 and load my other swf into it. I took a shot at level 65 because I know that's where the default Articulate Alert lives and it is on top of all the content.


var whereToLoad:MovieClip = _level65;
var popholder:MovieClip = whereToLoad.createEmptyMovieClip("popholder", whereToLoad.getNextHighestDepth());
var popup:MovieClip = whereToLoad.popholder.loadMovie("player/myAlert.swf");

Next I make sure my popup is hidden and move it where I want it.


whereToLoad.popholder._visible = false;
whereToLoad.popholder._y = 25;
whereToLoad.popholder._x = 250;
whereToLoad.popholder.box.tip_txt.html = true;

Finally I attach a function to my button that will display the popup.
In that function I set the content of the title and the tip then flip visible to true.


help.onRelease = showHelp;
function showHelp() {
	whereToLoad.popholder.box.tip_txt.text = "Monkeys can stay underwater for 7 minutes!";
	whereToLoad.popholder.box.title_txt.text = "Did You Know?";
	whereToLoad.popholder._visible = true;
}	

There ya go!
If you create something cool from this please tell us about it!

Update: @dtssmithers pointed out to me that when you run the code here the popup box loads before the _visible is set. So it does't actually hide it... This is a result of me paring the code down for the demo. It would be best to use a MovieClipLoader and then set _visible only after the onLoadInit event has fired. I actually took a shortcut and put this bit of AS2 on the first line of the myAlert.swf:

this._visible = false

I also attached an example of the XML file used for the tips and tools.

AttachmentSize
tips.xml384 bytes

Comments

I saw you blog on "Creating an Articulate Popup" and wanted to know what editor you were using and did it integrate with directly to Articulate?

TIA

Very nice! Thanks for sharing. Good to know this sort of thing is actually doable using Articulate too.

In function showHelp (), I changed the code so the code is holistic and without any further need. Simply add at the var declarations var helpOn=false;

function showHelp() {
if (helpOn) {
whereToLoad.popholder.box.tip_txt.text = "";
whereToLoad.popholder.box.title_txt.text = "";
whereToLoad.popholder._visible = false;
helpOn = false;
} else {
whereToLoad.popholder.box.tip_txt.text = "Monkeys can stay underwater for 7 minutes!";
whereToLoad.popholder.box.title_txt.text = "Did You Know?";
whereToLoad.popholder._visible = true;
helpOn = true;
}
};

Thanks!

@dtssmithers
http://travisthoughts.com

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Images can be added to this post.
  • You may use [inline:xx] tags to display uploaded files or images inline.
  • You may use <swf file="song.mp3"> to display Flash files inline
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
  _  _  _  _  _               _                                              _           _    
(_)(_)(_)(_)(_) _ (_) (_)_ _(_)
_(_) _ (_)(_) _ _ _ _ _ _ _ (_)_ _(_)
_(_) _ (_) (_) _(_)(_)(_)(_) _(_)(_)(_) (_)_(_)
_(_) (_) _ _ (_) _ (_)_ _ _ _ (_) (_)
_(_) (_)(_)(_)(_)(_) (_)(_)(_)(_)_ (_) (_)
_ (_) _ _ _ (_) _ _ _ _(_) (_)_ _ _ (_)
(_)(_)(_)(_)(_) (_) (_)(_)(_)(_) (_)(_)(_) (_)

Enter the code depicted in ASCII art style.