post

How to Build Your Own Custom Conditional Articulate Tab to Go to Any Slide, Part 2

In the first post, we learned how to build our own custom articulate tab (toolbar item) that would go to any slide. In the second post, we learned how to make this tab (toolbar item) conditional. In this post, we are going to learn how to utilize the given drop down sequence to add a little more pazazz to the button, or rather, to communicate to the end user why the button may not be working when they click on it.

As you may remember, in flash, open your TestTool.fla file from the Articulate SDK. Go to the ACTIONS layer, frame 2 under init. Click F9 to reveal your actions panel, and you will see your artModuleAPI function. Inside the switch statement make the following edits:

		case "activate_onclick":
		case "activate":
			gotoAndPlay("activate");
			break;
		case "deactivate":
			gotoAndPlay("deactivate");
			break;

Now to add our conditional statements, we want to add them to the activate side. We don’t want the toolbar item (or tab if you will) to work (or gotoAndPlay(“activate”);) if certain conditions aren’t met.

1. Add Condition (if statement)
So we added our condition:

		case "activate":
			nCurSlide = ArtAPI.GetCurrentSlide();
			//so we get the current slide number.
			if (nCurSlide>10) {
			//where 10 = whatever threshold slide you choose
				ArtAPI.PlaySlideNum(<strong>nGotoSlideNum</strong>);
 				//where <strong>nGotoSlideNum</strong> is whatever slide you want to go to upon clicking
			}
			gotoAndPlay("activate");
			break;
		case "deactivate":
			gotoAndPlay("deactivate");
			break;

2. Add Else Statement
Now we want to add an else statement to our if statement from case “activate” to initiate the dropdown box (like ATTACHMENTS). So we add the following:

		case "activate":
			nCurSlide = ArtAPI.GetCurrentSlide();
			//so we get the current slide number.
			if (nCurSlide>10) {
			//where 10 = whatever threshold slide you choose
				ArtAPI.PlaySlideNum(<strong>nGotoSlideNum</strong>);
 				//where <strong>nGotoSlideNum</strong> is whatever slide you want to go to upon clicking
			}
			else {
				gotoAndPlay("activate");
			}
			break;
		case "deactivate":
			break;

3. Edit the dropdown movie clip

Articulate Test Tool

  1. First, if your forward_panel is locked, unlock it by clicking on the lock beside the layer in the timeline.
  2. Second, open the panel movie clip by double-clicking on it. It should say Scene 1 CLIP – Forward panel.
  3. Third, ensure that the buttons are unlocked by clicking on the lock beside the layer in the timeline.
  4. Fourth, with my Selection Tool (shortcut V), I select all the buttons by dragging a box around all the buttons and delete them by pressing delete.
  5. Fifth, with my Text Tool (T), I draw a text box and write something like, “I’m sorry, but you cannot go to that section until you have completed the Introduction.” Then from the Paragraph > Format menu, I select center. Then lock the Buttons layer.
  6. Sixth, unlock the Title layer, and change your title, here, “Error Message!”. Then lock it back.
  7. Seventh, if you wish to change the Exit label, change it by unlocking btn – Submits layer and changing that text. Then lock the layer again.
  8. Eighth, when finished editing the dropdown panel, click on Scene 1.

For those who like Screenrs, check out my first ever Screenr. I must first apologize for the sound because I do not have a microphone except the one that comes with my laptop.

Then as always, click File > Save As naming it whatever you’d like. Then publish the SWF file hitting F12 (note: when you publish, you may receive an error stating, “Cannot open a protected movie.” Don’t worry about it.). Note, whatever you title your file, it must be in the art_plugins.xml file. So if this was saved beginningSect2.swf where it takes the user back to the beginning, then the XML will be:

<item>
		<enabled>true</enabled>
		<id>5050</id>
		<type>navtool</type>
		<title>Section 2</title>
		<file>beginningSect2.swf</file>
		<labeltext>Section 2</labeltext>
	</item>
post

How to Build Your Own Custom Conditional Articulate Tab to Go to Any Slide, Part 1

For the same project that I was working, I wanted to make the tabs (actually toolbar items) conditional. For example, I only wanted them to function properly (e.g. go to a specific slide) after they reached a certain point. My branching scenario had one introduction, three middle parts, and a conclusion. Everyone had to go through the introduction and conclusion while they can pick which road for the middle based on their job function, title, and/or location. If you haven’t already, view my first part: How to Build Your Own Custom Articulate Tab to Go to Any Slide.

Since you already know how to setup your art_plugins.xml file (here), let’s go right to the ActionScript.

In flash, open your TestTool.fla file from the Articulate SDK. Go to the ACTIONS layer, frame 2 under init. Click F9 to reveal your actions panel, and you will see your artModuleAPI function. Inside the switch statement make the following edits:

		case "activate_onclick":
		case "activate":
			gotoAndPlay("activate");
			break;
		case "deactivate":
			gotoAndPlay("deactivate");
			break;1

Now to add our conditional statements, we want to add them to the activate side. We don't want the toolbar item (or tab if you will) to work (or gotoAndPlay("activate");) if certain conditions aren't met. 

For example, if we don't want the toolbar item (or tab to work) until everyone has seen the introduction, we tell it not to work until they pass a certain threshold slide (e.g. slide 10). So let's add the conditions:
1		case "activate":
			nCurSlide = ArtAPI.GetCurrentSlide();
			//so we get the current slide number.
			if (nCurSlide><strong>10</strong>) {
			//where <strong>10 </strong>= whatever threshold slide you choose
				ArtAPI.PlaySlideNum(<strong>nGotoSlideNum</strong>);
 				//where <strong>nGotoSlideNum</strong> is whatever slide you want to go to upon clicking
			}
			break;
		case "deactivate":
			break;

Now if you want the button to only work between slides 10 and 15 (but not on 10 and 15) then you will need to add a condition as follows:

		case "activate":
			nCurSlide = ArtAPI.GetCurrentSlide();
			//so we get the current slide number.
			if ((nCurSlide><strong>10</strong>) && (nCurSlide<<strong>15</strong>) {
			//where <strong>10 </strong>= whatever bottom threshold slide you choose
			//where <strong>15 </strong>= whatever top threshold slide you choose
				ArtAPI.PlaySlideNum(<strong>nGotoSlideNum</strong>);
 				//where <strong>nGotoSlideNum</strong> is whatever slide you want to go to upon clicking
			}
			break;
		case "deactivate":
			break;

Now the way ActionScript is, I must say that if you want it to work only on one slide, then you need to use the double equals condition == since one equals = sets the two things equal to one another (e.g., if (nCurSlide==10)).

There, now the toolbar item (or tab) won’t work if the condition is not met. Now, if you want to get more fancy than this, see my next post: How to Build Your Own Custom Conditional Articulate Tab to Go to Any Slide, Part 2.

Then as always, click File > Save As naming it whatever you’d like. Then publish the SWF file hitting F12 (note: when you publish, you may receive an error stating, “Cannot open a protected movie.” Don’t worry about it.). Note, whatever you title your file, it must be in the art_plugins.xml file. So if this was saved beginning.swf where it takes the user back to the beginning, then the XML will be:

<item>
		<enabled>true</enabled>
		<id>5050</id>
		<type>navtool</type>
		<title>Beginning</title>
		<file>beginning.swf</file>
		<labeltext>Back to the Beginning</labeltext>
	</item>
post

How to Build Your Own Custom Articulate Tab to Go to Any Slide

I am currently working on a project where we have three parts of a course, and one of the requests of my internal customer was the ability to jump to the beginning of each particular section. In an effort to dummy proof our course, the internal customer wanted buttons on the top or the bottom of the Articulate interface. So, not having enough time to build a custom player with all the specifications that we wanted, I built tabs (actually called Tools by Articulate). For those who have access to the Articulate SDK, this is a custom toolbar item.

For those who want this already done for them see James Kingsley’s (@onEnterFrame) jumper which uses the XML file and an extra node, great for those who don’t have flash. However, I believe it can only do one tab because of the way it is called. If you want one that can build multiple tabs, James has one for sell at elearningenhanced.com for only $10.

However, if you own Adobe Flash, then simply follow these steps. First, you will need your art_plugins.xml file. Open art_plugins.xml in Notepad++ (the best text editor for Windows users). In the SDK, it contains a section that looks similar to this:

<item>
		<enabled>true</enabled>
		<id>5050</id>
		<type>navtool</type>
		<title>New Toolbar Item</title>
		<file>NewToolbarItem.swf</file>
		<labeltext>New Tool</labeltext>
	</item>

So, feel free to edit any part of this XML file. If you want multiple items, then place them one after the other in between the <modules> tags. For example:

<item>
		<enabled>true</enabled>
		<id>5050</id>
		<type>navtool</type>
		<title>New Toolbar Item</title>
		<file>NewToolbarItem1.swf</file>
		<labeltext>New Tool</labeltext>
	</item>
	<item>
		<enabled>true</enabled>
		<id>5051</id>
		<type>navtool</type>
		<title>New Toolbar Item</title>
		<file>NewToolbarItem2.swf</file>
		<labeltext>New Tool</labeltext>
	</item>

So I created buttons at the top. The <labeltext> is what will be written on the button at the top of the Articulate Player. ATTACHMENTS is generally in UPPERCASE, unless you edit it in Articulate > Player Templates > Text Labels, so if you wish to be consistent then use all CAPS.

In flash, open your TestTool.fla file. Go to the ACTIONS layer, frame 2 under init. Click F9 to reveal your actions panel, and you will see your artModuleAPI function. Inside the switch statement make the following edits:

		case "activate_onclick":
		case "activate":
			ArtAPI.PlaySlideNum(nSlideNum);
			//where nSlideNum = whatever slide you'd like
			break;
		case "deactivate":

Save As naming it whatever you’d like. Then publish the SWF file hitting F12(note: when you publish, you may receive an error stating, “Cannot open a protected movie.” Don’t worry about it.). Note, whatever you title your file, it must be in the art_plugins.xml file. So if this was saved beginning.swf where it takes the user back to the beginning, then the XML will be:

<item>
		<enabled>true</enabled>
		<id>5050</id>
		<type>navtool</type>
		<title>Beginning</title>
		<file>beginning.swf</file>
		<labeltext>Back to the Beginning</labeltext>
	</item>