In some courses you don’t want the user to “scrub” back and forth by using the progress bar slider. Of course you can disable the progress bar alltogether but then you will loose the visual indication of how far the user has progress in the course.
By using a custom Flash file it is possible to manipulate this Adobe Captivate progress bar slider so that it will show the progress but the user can’t interact with it.
The progress bar slider uses an event listener to check if the user interacts with the slider. To remove the possiblity of the user to interact with the slider we can simply delete these event listeners.
This is all the code you need in order to “lock” the Adobe Captivate Progress bar slider.
A word of caution! Once you have deleted these event listeners there is no way to reactive them again. Therefore you can’t disable the interaction on some slides and reactivate it on others.
I included the Flash source file and a published SWF in case you don’t have access to Adobe Flash.
The same can be achieved with Actionscript 3.0 so I thought I would post the code here. The AS3 code is very similar to the AS2 code so I will not explain it in detail. Take a look at the AS2 tutorial instead for a full explanation.
// Create the menu variable var myCustomMenu:ContextMenu = newContextMenu();
// hide the standard menu items
myCustomMenu.hideBuiltInItems();
// create your custom menu items. var menuItem1:ContextMenuItem = newContextMenuItem(".: Developed by www.cpguru.com :."); var menuItem2:ContextMenuItem = newContextMenuItem("-> Click here to visit our webpage");
// set up a listener for menuItem2
menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openWebsite);
// push the custom menu items to the menu
myCustomMenu.customItems.push(menuItem1, menuItem2); this.contextMenu = myCustomMenu;
// the function to open up your website function openWebsite(e:ContextMenuEvent):void{ varurl:String = "http://www.cpguru.com"; var request:URLRequest = new URLRequest(url);
navigateToURL(request, '_blank'); }
Wouldn’t it be nice to add your own custom right click menu to your Adobe Captivate projects? Actually that’s a pretty simple task using a little Flash file to “inject” a new menu and substitute the standard Captivate / Flash menu with that. You could add information about who developed the project, link to your website, contact details etc.
Here is a little tutorial on how to create such a custom right-click menu in Flash (AS2) and add it into Adobe Captivate.
Demonstration:
The movie below has the regular / standard Adobe Flash and Adobe Captivate right-click menu:
The movie below has a custom right-click menu:
The Flash code:
The full code is available below, but I will go through all the code line-by-line and explain them.
This line will create a variable to hold our custom menu.
1
var customMenu = newContextMenu();
These two lines is what we will show in the custom menu. You simply insert your own text between the ” ” brackets and that is what will be shown in the menu. Now the important thing here is that you also need an “action” to occur when the user clicks that menu item. This action is usually a function and it can simply be an empty function if you don’t want anything to happen when the user clicks. The function names above are “emptyFunction” and “openWebsite”.
1 2
customMenu.customItems.push(newContextMenuItem(".: Developed by www.cpguru.com :.", emptyFunction));
customMenu.customItems.push(newContextMenuItem(" -> Click here to visit our website!", openWebsite));
This will hide the standard right-click menu items.
1
customMenu.hideBuiltInItems();
This will put our custom menu items into the menu.
1
_root.menu = customMenu;
Here is our function called openWebsite. This will execute if the user clicks the associated menu item.
1 2 3
function openWebsite(){ getURL("http://www.cpguru.com", "_blank"); }
Here we have our emptyFunction, which will be executed when the user clicks the associated menu item. Since the function is empty no action will be taken.
1
function emptyFunction(){};
Below here is the full code.
Full code for the custom Adobe Captivate right-click menu:
// Custom right click menu that can be used with Adobe Captivate
// setup the new menu var customMenu = newContextMenu();
// create the menuitems
customMenu.customItems.push(newContextMenuItem(".: Developed by www.cpguru.com :.", emptyFunction));
customMenu.customItems.push(newContextMenuItem(" -> Click here to visit our website!", openWebsite));
// This will hide the regular menu items and substitute the default right click menu with our own menu
customMenu.hideBuiltInItems();
// Subsitute menu with our custom menu _root.menu = customMenu; // function to open the URL on click function openWebsite(){ getURL("http://www.cpguru.com", "_blank"); }
// empty function for the first line of our menu
function emptyFunction(){};
Steps to complete in Adobe Flash and Adobe Captivate:
So what you need to do is to create a new Flash file. Set the size to 100px x 100px as we don’t want to display anything - just execute some code.
Once you have your new Flash file open then click F9 to open up the actions panel and paste in your code. Now you just need to save your Flash file and publish it (CTRL+Enter).
Now you need to insert this Flash file into your Captivate project. Insert it on your first slide and just let it display for the standard 3 seconds. That’s actually all you need to do. Now when you view your published movie and right-click you will see your own custom menu.
A couple of things to keep in mind:
- Once you have injected your custom menu into your Adobe Captivate project you cannot get back the default Flash right-click menu without removing the Flash file and republishing your project.
- It shouldn’t be used in projects where you rely on catching right-clicks in Captivate simulations etc.
I originally started off the blog by posting information and links to some stock flash components that I have used in some of my projects.
It’s been a while since I’ve done that and I found some nice components since then so I thought I would make a new post with some links to stuff you can use in Captivate.
All the files are from Flashden.net, which is – in my opinion – the best place to buy stock flash components. Remember that when you buy these components you also get the Flash soucefile (fla) so you can modify and customize the components to fit your projects.
Text animation
If you – like me – don’t like the original text animations in Captivate then here is an alternative. It’s pretty basic but a rather nice effect. Everything can be edited in an XML file so you don’t need to have any Flash skills to use it.
An interactive worldmap made in Flash. You can add hotspots with information, links etc. and all is done in an XML file. I used it in a project as a navigation menu. I had to branch the users of the E-learning module based on their location so I used this component (I did change the map to something more subtle) and modified the code so that a click on a hotspot would jump to the relevant Captivate slide.
This is one of my favourite files right now. It’s a quiz made in Flash and I really think it’s executed to perfection. I used this component in quite a few different projects now.
It’s easy to customize and easy to setup and get started with. You can modify most of the settings and questions in an external XML file. The file is just US$12 and that is really a bargain.
I remember this type of game from when I was a kid. It’s a simple memory game where you need to match two cards together.
It comes in two different versions. One version matches on identical cards and the other version you can match different images together. I used the latter version as a small break in a course and the user had to match product quotes with product images. It won’t report scores to Captivate or an LMS but you could implement that if you have Flash skills.
Everything is setup and modifed through an external XML file so it’s easy to get started with.
A simple straightforward multiple choice and true/false quiz, which can be used in Captivate. If you want to give your quizzes a different look than the Captivate one you can use this. Please note that in this form it will not report scores to Captivate or an LMS but if you know Flash you can write that code yourself. I used this quiz on a couple of occasions to provide a break in a chapter. I wasn’t interested in tracking the score but only to make the user think about the things they gone through so far.
If you import an flash swf into Captivate you sometimes get a warning that “this script contains _root and may not function properly”. In most cases your imported swf will still work like intended, but some swf’s might not.
Until recently the only way to fix it was to change the code in your Flash animation so it avoids using _root. I just stumpled upon an fix from Adobe, which is aimed at imported Raptivity content. However, it can be used for other swf’s that reference _root and doesn’t work in Captivate.
Adobe Captivate uses different variables to keep track of things when it runs. These variables can be read from Adobe Flash and used for many different purposes.
In this post I’ll show you how to grab two variables from Adobe Captivate and then make a simple progress indicator you can use in your courses. The progress indicator it self is made in Adobe Flash and it’s a very simple process. You can download all sourcefiles from this post.
Lets start by looking at the two variables we need to read from Adobe Captivate.
rdinfoCurrentSlide – This variable contain the current slide/page of the Captivate project. Adobe Captivate counts the slides from 0 so basically 0 = page 1, 1 = page 2 etc.
rdinfoSlideCount – This variable contain the total amount of slides/pages in your Captivate project.
The Flash component:
So now that we know which variables we need it’s relatively simply to get the data from them. I assume that you have basic knowledge of Adobe Flash and know how to set up a dynamic text field on the stage.
Open flash and create two dynamic text fields. Give them the instance names of curSlide_txt and totSlide_txt
Copy and paste the Actionscript below into Flash and save/publish your Flash file.
Now open up a Adobe Captivate project and import the Flash file you just made as an animation. Set it to start 0.5 seconds into the page and select no transition. I added the flash animation to my first slide in Captivate and selected “Display for rest of project”.
That’s all there is to it. If you publish your Captivate project now you can see the current slide and total slide.
Now all you need to do is make some nice graphics in Photoshop/Flash and make your progress indicator match your Captivate project.
This is one of my favourite components at the moment. In a lot of courses you need to have external PDF files with additional information. I was getting bored with the plain old non-interactive boring way of displaying PDF’s and found this component. It’s really a great way to highten the experience for the user. Furthermore this component allows the user to download your PDF file as well, which I haven’t seen before.
The price of US$ 30 is ridiculously low.
Here is the feature list from the author:
Features:
• XML driven
• OOP coded
• Uses CSS to format text fields
• Smoothing of pages forced
• Pages get an internal shading
• Pages get scaled on load, which enables you to make crisp zoomed images
• Only a few items in the library to change with a blank stage
• Auto thumber
• Print options
• Internal linking
• External linking
• PDF download button
• No annoying tooltips, still with user support
• Liquid layout
• Book becomes visible when 8 pages have loaded
• No flipping beyond the last loaded page
• Flash8 support
New:
• Contact form
• Full screen background image
• Reverse read direction
• Print bug fixed
• Define which buttons you need in the top bar
• Even more layout options
