In last week’s post we saw how to access a Captivate Variable using cpVariables. This week, we’ll see how we can allow the Captivate Author to choose which variable the widget will access. To do this, we must venture into the mysterious world of SQUARE BRACES [][][][][][]!!!!!
Now you’ve probably used [] before with Arrays. However, the [] can also be used to access an objects properties or methods. Much like what ’.’ is used for.
For example, if we wanted to change a Display Object’s x location. We would type out the name of that object, then use ‘.’ to access the object’s x property.
1 | displayObject.x = 100; |
This is known as Dot Syntax! Nice and simple. However, we could also access the Display Object’s x property using [] instead. Here’s how:
1 | displayObject["x"] = 100; |
This will result in the exact same action as the first example. So the formula for dot syntax was: Object DOT Property. For square brace syntax the formula is: Object BRACE String-Of-Property BRACE. Writing a String of the property inbetween the [] is extremely important. If you wrote:
1 | displayObject[x] = 100; // This won't work |
That code is not going to work out for you. So remember your quotations!
Let’s try this with a few other properties.
1 2 3 4 5 6 | displayObject["x"] = 100; displayObject["y"] = 100; displayObject["alpha"] = 0.5; displayObject["graphics"].beginFill(0xFF0000); displayObject["graphics"]["drawCircle"](10,10,10); displayObject["startDrag"](); |
Take a look at the third line. You can use dot syntax after a [] to access a sub-property of the []‘s property. Or you could do the same by piling [] on top of [] like with the fourth line. You can also use [] to call methods, as shown in the fourth and fifth lines. Just remember, when calling a method with [], you still need to put the () afterwards.
This is all nice to know, but [] requires a lot more typing than dot syntax does. And to be honest, it doesn’t give you anything that dots don’t. Where []s become powerful, is when they’re used in conjunction with variables. Strings can be saved to variables, which means you can do this:
1 2 |
This changes the Display Object’s x location to 100, just like the first example. So which property this code will edit, depends on the value of the propertyName variable. This means if we made a change to the propertyName variable, then we’d set a different property to 100. For example:
1 2 3 4 5 6 7 | var propertyName:String = "x"; if (displayObject.x >= 100) { propertyName = "y"; } displayObject[propertyName] = 100; |
So with this code, if the display object’s x position is under 100, then we’ll make it jump to 100. However, if it is over 100, then we’ll make it jump to 100 on the y axis instead.
Here’s the point: [] = dynamic coding.
Let’s try a demo! Below you can edit the red circle by typing in the name of the property you want to change, then the value you want to assign it, and clicking the execute button.
So the text field where you type the property name is called property_txt, and the text field where you type the value is called value_txt. See if you can work out how this code works:
1 | circle[property_txt.text] = value_txt.text; |
We plug the text in the property_txt input field in between the braces to access the property by the name of what’s written there, and then set it equal to the text in the value_txt text field.
There you go! How to dynamically access object properties!
What does this have to do with Captivate Variables?
If you remember from last time, you access all Captivate Variables (System and User) from the cpVariables object. The []s work just as well with cpVariables as they do with any other object. Remember last time we accessed the cpInfoCurrentSlide Captivate System Variable using dot syntax?
1 | cpVariables.cpInfoCurrentSlide; |
How do you think we’d access it with []?
1 | cpVariables["cpInfoCurrentSlide"]; |
So once again, that string could be saved to a variable and then stuck in between the [].
1 2 |
OR that string could be saved in a Widget Property and then stuck between the [].
1 | cpVariables[properties.captivateVariable]; |
You may already see where this is going. You can set up your Properties Dialog Interface with one of those Input Text Fields shown in the demo above, save its value to a Widget Property, and then use that Widget Property to access the variable at runtime
DING!
The Captivate Author can now customise the widget to access the variables THEY created.
And now would be an excellent time for me to plug the eSeminar I did a couple months back that shows you how to create an interface that saves text from a Text Input Field to a Widget Property!
Okay, so how about we put one of these interfaces into the Variable Formatter widget we made last week.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | package { import fl.controls.TextInput; import flash.text.TextField; import flash.text.TextFieldAutoSize; import widgetfactory.StaticWidget public class FormatVariableCase extends StaticWidget { // The field where the Captivate Author will type the name of their User Variable. private var variableName_txt:TextInput; override protected function enterPropertiesDialog():void { // The message we will display to the Captivate Author var title_txt:TextField = new TextField(); addChild(title_txt); title_txt.text = "Type the name of the User Variable you'd like formatted"; title_txt.autoSize = TextFieldAutoSize.CENTER; title_txt.y = 10; // Move it to the center of the stage. title_txt.x = stage.stageWidth / 2 - title_txt.width / 2; // The field where the Captivate Author will type the name of their User Variable variableName_txt = new TextInput(); addChild(variableName_txt); // Make the input field appear 10 pixels below the text. variableName_txt.y = title_txt.y + title_txt.height + 10; // Make the input field as wide as the text shown above it. variableName_txt.width = title_txt.width; // Move the input field to the center of the stage. variableName_txt.x = stage.stageWidth / 2 - variableName_txt.width / 2; // If the Captivat Author has already defined a variable in a previous session... if (properties.variableName != undefined) { // Make that the default text of the input field. variableName_txt.text = properties.variableName; } } override protected function saveProperties():void { // Save the variable name to properties. properties.variableName = variableName_txt.text; } // All variable editing happens at runtime. // As soon as this widget is set to appear on stage, // it will make the edits to the User Variable. override protected function enterRuntime():void { // Read the variable that the Captivate Author designated var stringToEdit:String = cpVariables[properties.variableName]; // Lets say it has a value of: jaSOn // Makes the whole string lower case. // Example would now be: jason stringToEdit = stringToEdit.toLowerCase(); // Extracts the first letter and saves it // In our example that would be: j var firstLetter:String = stringToEdit.charAt(0); // Make first letter upper case. // Example: J firstLetter = firstLetter.toUpperCase(); // Cuts out the first letter from the string. // Example: ason stringToEdit = stringToEdit.slice(1, stringToEdit.length); // Add the upper cased first letter to the rest of the rest of the word // Example: Jason stringToEdit = firstLetter + stringToEdit; // And we're done! Assign our working string back to the Captivate Author's designated Variable. cpVariables[properties.variableName] = stringToEdit; } } } |
Download the widget and try for yourself!
Would you believe I still have more to say on the subject of Captivate Variables? Yes, prepare yourself for an impending Captivate Variables Part 3! Which may or may not be coming next week. Sort of depends on what I feel about writing about.
Pingback: Tweets that mention Accessing Captivate User Variables – Part 2 | The Widget King -- Topsy.com
Excellent. Cleared up a problem I was having with reading parameters from the properties object. Thanks, Tristan!
i have a request from a client who want to the time to display. I have seen plenty of widgets that are supposed to display project time, but none of them will pause with the project. Also I tried using cpInfoElapsedTimeMS, but that just runs and runs and runs. I would love to see how I can a: display the time remaining in the captivate movie, or b: learn how to display the time remaining in the captivate movie.
I read you all the time and I hope I didn’t miss a blog entry or discussion.
thanks
Chris.
What you could probably do is use the rdInfoFrameCount variable (which tells you how many frames there are in the Captivate Movie) together with the rdInfoCurrentFrame variable (which tells you what the currently viewed frame is) to work out how far the audience has progressed through the movie. Another useful variable is rdinfoFPS which will tell you how many frames of the movie make up one second.
Another excellent article Tristan.
I was wondering why [] is being used over dot syntax.
Your article helps me a lot to solve the puzzle.