Captivate 6 has just been released with a myriad of new and awesome features. I’m happy to say that widgets have been given a fair amount of attention in this new release, and a number of the features we’ve drooled about over the years have been implemented by Adobe!
Hot on the heels of Captivate 6 will of course be WidgetFactory 6. Although it’s not documented yet, I will be releasing it as soon as possible. I’ve just got caught up with a last minute feature which should make life easier for those building Question Widgets. WidgetFactory 6 has a lot of new and exciting features in it as well, but that’s a post for another day. It is now time to start the drooling.
HTML 5 Widgets
Perhaps the biggest feature of Captivate 6 is the new HTML5 export. However, as you already know, widgets are coded in ActionScript, which doesn’t run without the flash player. So how do widgets fit into the HTML5 export?
In Captivate 6, Widget Developers are now able to write HTML5 widgets. Now that name may be somewhat misleading, because you can’t actually code an entire widget from scratch in HTML5 and JavaScript. The Properties Dialog, Stage, and Widget Panel Preview all still use Flash SWFS. What Adobe has done is alter the .wdgt format to allow us to specify an alternate HTML5 runtime mode. So when Captivate goes to publish the project, if it’s publishing for Flash it will package the widget SWF into the export just as before, but if it’s publishing for HTML5, it will package the widget’s HTML5 runtime instead. This means that a SINGLE .wdgt file can work for BOTH SWF and HTML5 export.
Now there is a little bad news. Currently only Static Widgets support HTML5. So if you have any Interactive or Question widgets up for sale, unfortunately you’re not going to be able to create a HTML5 export for them just yet. But not to worry, I have it on good authority that support for HTML5 Interactive and Question widgets will be coming speedily in the future.
With the announcement of HTML5 widgets, I can also confirm that I’m working on a HTML5 version of WidgetFactory. Once I’ve updated all Infosemantics widgets to work with Captivate 6 and released WidgetFactory 6, I’m going to start developing a new Static widget for Infosemantics which will have both a SWF and HTML5 export. This should aid the progress of the HTML5 WidgetFactory.
Now if that doesn’t get you excited, then this will.
Library Access
Okay now this is huge. From the very start, accessing the library this has been somewhat of a holy grail for widgets. Well it’s time to call back your knights of the round table, because Captivate 6 widgets can do just that!
Here’s how it works: When the widget is in Properties Dialog mode, it can invoke a Captivate Library browser dialog, the audience uses the dialog to pick an object from the library (this can be either an image, sound, animation swf, or video), you then load the image/sound/animation/what have you into the widget and do whatever you want with it.
Widgets can load items from the library in Runtime, Stage, and Properties Dialog mode, but they can only browse the library in Properties Dialog mode.
Every item in the Captivate library comes with an id. If there is a particular object you want to access at Stage or Runtime mode, then you add this id to a list of Library Resource that the widget will request from Captivate. Then you save that ID to a widget property and in Stage or Runtime mode, use that ID to load the object into your widget once again.
I really can’t wait to build some widgets that use this. Did you see I mentioned sounds up there? SOUNDS! Finally a practical way for users to customize sounds! And that’s just the tip of the iceberg.
Localization
The last major feature for widgets is Localization. Up till now, most widget interfaces have been written in English; as it is the most common language of Captivate users. Now however, Captivate will inform the widget what language the user’s Captivate install is running. So if their Captivate install is French, you can detect that and display your widget interface in their native language. Hopefully this will make widgets much easier to use for everyone earth wide. So I recommend making friends with people who can translate to the following languages.
- English (US)
- English (International)
- English (Canadian)
- Danish
- Deutsch
- Spanish
- French
- Italian
- Dutch
- Norwegian
- Portuguese
- Portuguese (Brazilian)
- Swedish
Mmmm… Europe.
Does anyone know how to speak Canadian English?
Minor Features
That’s pretty much all the exciting stuff, but there are a few minor features that probably won’t concern anyone unless they happen to be building a Widget framework… But let no one say I was not thorough.
- Captivate now directly informs the widget what version of Captivate it is running in. This should make supporting different versions of Captivate easier in the future.
- In Stage mode, Captivate informs the widget of the stage mode dimensions. This is because stage.stageWidth and stage.stageHeight can’t be trusted in this mode.
- As the new Interactions in Captivate are really just widgets in disguise, you can add your own .wdgt file to the Gallery/Interactions folder under the Captivate install folder and they will appear inside Captivate’s Interactions dialog. There is a new tag in the .wdgt file that allows you to specify an image to represent the widget in the Interactions folder. (Fun Fact: All the Captivate Interactions are Static widgets so that they can be exported to HTML5)
Another Important Note
Technically this is not a widget feature, but it’s still important. SO IF YOU’VE ALREADY STOPPED READING THEN START AGAIN.
DOWN HERE! YES YOU. YOU NEED TO READ THIS.
Okay. A big physical change has been made to the Captivate runtime. Previous to Captivate 6, Captivate would load and build every slide in the movie and hold them in memory until the movie was closed down. In Captivate 6 this is no longer the case. Captivate now only builds the slide currently being viewed by the user. Once the movie moves to the next slide, the old one is removed from memory. Slide objects are only created when they enter runtime, and are deleted the moment they exit runtime. This means that widgets are now created the VERY INSTANT they enter runtime. So if you’ve used the enterMovie() template to make the widget to do stuff before it enters runtime, this will not work in Captivate 6. So if you find that your widget is working perfectly in Captivate 4, 5, and 5.5 but not in 6, this is most likely the cause of the problem. Don’t worry, I’ve made sure that the enterMovie() template method still gets called, but only just before enterRuntime() is called.
This is a big change, but it’s not a bad change. In all honesty, this is how the Captivate runtime should have been working from the very start. This method takes up much less RAM and memory, and we know most of the audience are watching the Captivate movie on pretty low end computers, so this is a very good thing.
Don’t freak out too much though. Unless your widget is seriously bending the rules of Captivate, then it’s not likely the runtime change will affect you; but it’s something you need to be aware of nevertheless.
In a future post I’ll explain how you can use widget rooms to bypass this runtime loading and unloading and allow your widget to keep monitoring the movie long after its time has past.
Until then, I’m going back to work on WidgetFactory 6.
Did I mention it’s awesome?
Hi Tristan,
Great article – I cam here second after the official web site
Are the new smart learning interactions just widgets ? Can we build our own and is there any advantage in doing so ?
rgds Paul
Yep, the new learning interactions are widgets. If you stick your widget file under the Gallery/Interactions folder of the Captivate install file then they will appear inside Captivate under the Learning Interactions list.
Are there any advantages? Not really, interactions don’t come with any extra abilities, but they would come with extra publicity. It’s possible more people would buy your product if it was a new ‘Learning Interaction’ rather than a new ‘Captivate Widget’.
Tristan thank you for the tremendeous amount of work you put into making life easier for us widget developers. Widget Factory has been a life saver on so many accounts and I’m looking forward to WF6 (and of course the WF6 HTML5 edition).
/Michael
tristan,
do you know if this below still works in cap6?
var myRoot:MovieClip = MovieClip(root);
var mainmov:MovieClip = MovieClip(myRoot.parent.root);
I don’t seem to be getting anything when I use in 6, but works fine in 5.5
ta
WL
Hey WL,
As of Captivate 6, only certain Captivate Variables can be accessed from mainmov. If you’re using the widget template, you must now access them through the m_VariableHandle variable in the Captivate Widget Template.
Tristan,
How could I go about accessing the closed captions in Captivate 6. Previously I used “mainmov.cpCC_mc.cc_txtString” but now it doesn’t seem to work?
Okay, for Captivate 6 you’d access the closed caption text like this:
mainmov.cpCC_mc.ccTxt_tf.htmlText
However, the ccTxt_tf is only created when the Closed Captions are visible on stage, when they aren’t they’re unloaded. So you’d have to do a check to see if ccTxt_tf exists before you try and edit the text. The check would be something like this:
if (mainmov.cpCC_mc.ccTxt_tf == null) {
// Change the closed captioning text in here.
}
Pingback: Flash-Factor » Blog Archive » Looks like it’s not over yet!
Hey Tristan,
This isn’t really relevant to this post but I’m hoping you might be able to answer a couple of questions regarding widgets. I’m wondering if I could develop one that can simplify the creation of some presentations I am making, and am looking to achieve the following:
-Insertion of javascript code into the presentation (like in the “On-Entry” or “On-Exit” javascript window) after every slide, and possibly only with certain slides, such as hidden ones or question slides.
-Insertion of javascript code into the presentation ON every occurrence of a question slide.
-Insertion of javascript code into the presentation AFTER every occurrence of a question slide (or possibly creating a new blank 0.1s slide containing on-entry javascript code after every occurrence of a question slide?)
-Insertion of javascript code into the presentation on the LAST slide of the presentation.
Just looking for a way to possibly use a widget to help automate the process of some presentations I’m working on. Not sure if this is even possible, which is why I thought I’d ask the King himself
Thanks!
Hi Ouija.
As far as I know, ActionScript can only call javascript functions (though the ExternalInterface class) and can’t execute self written blocks of javascript code. So you’d have to write the functions you want to call into the Captivate movie template found in the program files.
Here are my responses to the features you outlined in your comment:
1: Entering and exiting a slide can be detected by listening to the WidgetEvent.ENTER_SLIDE and WidgetEvent.EXIT_SLIDE events. You can code your widget to look for something special on a slide that will determine if the javascript will execute. However, hidden slides are not included in the export of the movie and you can’t detect where they would be included.
2: Once again, you could listen to the WidgetEvent.ENTER_SLIDE event and then check the slide object to see if it’s a question slide (you could use the ‘currentSlide’ property to access the slide currently being viewed).
3: Same as 2, but just use WidgetEvent.EXIT_SLIDE instead.
4: That’s quite simple. In your WidgetEvent.ENTER_SLIDE handler, just create an if statement for: (cpVariables.cpInfoCurrentSlide >= cpVariables.rdinfoSlideCount). If that is true, then the slide you’ve just entered is the last slide.
If you’re building this widget for Captivate 6, you’d have to make sure the widget is placed on the first slide and is made to display for the rest of the project.
Does this give you enough information to answer your questions?
Thank you for this great article !
I wonder if the following event and vars will still exist in Captivate 6 because we develop many widgets using theses vars ?
- CPSlideEnterEvent.CPSLIDEENTEREVENT
- CPSlideExitEvent.CPSLIDEEXITREVENT
- cpInfoCurrentSlideLabel
- cpInfoCurrentSlideType
- cpInfoCurrentSlide
- cpCmndGotoSlide
- rdCmndGotoSlide
- cpInfoLastVisitedSlide
- rdInfoSlideCount
Also, i’m not sure to understand the explanation of how the HTML5/Flash widget will be working. Will we have to develop 2 version of the same widgets or the Flash will be accepted in HTML5 ?
Thank you !
Hi Josue,
All the variables and events you mentioned above are all still in Captivate 6, with the exception of cpCmndGotoSlide and rdCmndGotoSlide. However, you can perform the same operation done by these variables, by calling the gotoSlide() on the movieController property: movieController.gotoSlide(slideNumber, true);
Also, I believe cpInfoCurrentSlideLabel only works if you have accessibility turned on for the project.
I’m afraid I don’t have a list of the new Captivate Variables available in CP6 and I don’t know of anyone who has released an article on that so far either. I don’t really use Captivate Variables that often, I find usually the movieController object contains a lot more information.
Tristan,
I’m trying to migrate my widgets so I replace my event listeners CPSlideEnterEvent.CPSLIDEENTEREVENT and CPSlideExitEvent.CPSLIDEEXITREVENT with WidgetEvent.ENTER_SLIDE and WidgetEvent.EXIT_SLIDE. The only problem I have is when I create a function, I’m not sure what to use for event…
My old way of doing it was:
function myFunction(event:CPSlideEnterEvent){
}
What would be the right code: event:WidgetEnterEvent or event:WidgetEvent ???
Thank you again !!!
And by the way, do you have a list of all the new Captivate 6 variables ?
Thank you Tristan for all of your great work. As a newbie, I thought I was getting the hang of this, but I guess not.I am struggling with updating my event listeners from Captivate 5.x to 6.0. I am specifically trying to listen to the enter slide, pause, resume and exit slide events.
My old widget used the following:
//varHand.addEventListener(CPSlideExitEvent.CPSLIDEEXITEVENT, onPauseMovie);
//varHand.addEventListener(CPMovieResumeEvent.CPMOVIERESUMEEVENT, onResumeMovie);
//varHand.addEventListener(CPSlideExitEvent.CPSLIDEEXITEVENT, onSlideExit);
//varHand.addEventListener(CPVariableValueChangedEvent.CPVARIABLEVALUECHANGEDEVENT, onVariableChange);
I’ve updated them to:
varHand.addEventListener(WidgetEvent.ENTER_SLIDE, onSlideEnter);
varHand.addEventListener(WidgetEvent.PAUSE, onPauseMovie);
varHand.addEventListener(WidgetEvent.RESUME, onResumeMovie);
varHand.addEventListener(WidgetEvent.EXIT_SLIDE, onSlideExit);
I’ve placed some debug code in to see if anything fires, but nothing is firing.
Any insights are most appreciated.
Hi Mark,
As far as I can see your code is fine, you just have to change where you’re listening for these events. Just try taking ‘varHand’ away, and see if the event listeners work then.
Tristan,
Hi Tristan,
I am trying to publish a quiz project but i want the score to be recorded in a spreadsheet. Can u help on this.?
I can record the scores in Adobe.com but everyuser needs an ID to update their score. so that option i am leaving.
Hi Deepak,
I don’t really have a solution for this problem. I have heard of people using Google Forms to publish quiz results. But I don’t actually know how it’s done. Maybe do some searches on Google, or post something on the Adobe Captivate Forum. But I haven’t heard of anyone directly publishing to a spreadsheet before.
Tristan,
Hi Tristan,
Can you tell me variable names for TOC? I want to get status of a slide in TOC, if its marked as viewed or not?
Is this possible?
Regards
Hi Rakesh,
I’ve searched Captivate quite extensively for a variable like this in the past, but I have yet to find one. There are functions you can call to forcibly tick an item in the TOC, but I have yet to find one that will tell you if a slide has been marked as viewed in the TOC.
Tristan,