
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.
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 = falseI also attached an example of the XML file used for the tips and tools.
| Attachment | Size |
|---|---|
| tips.xml | 384 bytes |
Comments
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