More Objects

SmartBuilder allows you to import your own custom objects that were created in Flash, and use them in your SmartBuilder lesson.  These SDK objects must follow the Widget Documentation located in the Shared Library > SmartBuilder Widgets > Documentation folder in the Home Tree.

The terms SDK object and Widget are interchangeable.

Widgets are essentially treated the same as other SmartBuilder objects, except that they are usually more specific in their functions.  SmartBuilder offers a number of these specialty objects for your use.

Each Widget looks and acts a little differently.  All will have a placeholder of some sort on the Authoring Stage, and context specific methods for Triggers, Conditions, and Responses.

Widgets cannot automatically control other objects or the lesson.  In addition to being placed in a lesson, they will often need to be "hooked up" to the lesson or other objects in order to provide the desired functionality.  Luckily, properly designed Widgets will provide "hooks" (methods) that allow them to be useful via actions in the Action List.

Cookie Object

This object will allow you to save and retrieve cookies on a user's computer, provided that that user's security settings will allow cookies.

You can use this object to store a bookmark, a student name, or even a score, on the user's computer.  There is a template in the Template > - Master Page: Resources folder that deals with bookmarking using cookies, and it is best to take a look at it if you're planning on implementing that functionality.

You must set the name and the value of the cookie as well as how long you want to keep the cookie (in days).

Note: You will most likely leave the Path section blank.  If you are an advanced user, and want to save and retrieve cookies from different lessons, you may wish to choose a path to the shared cookies.  Be aware that cookies can only be retrieved/saved from a directory that is in their path.  For example, if the lesson is located at "example.com/section4/lesson2" (making your default path for the cookie "/section4/lesson2"), then you cannot choose "/section4/lesson10" as your path.  You must choose "/section4" or just "/" and it will work.

cookie setCookie

Email object

This object is used to launch the learner's default email client.  It can pass information directly into the new email, including the following fields:

  • To
  • CC
  • BCC
  • Subject
  • Body

This widget will NOT automatically send an email from a server.  Every server handles emails differently, and since there are no standards, it would be impossible for SmartBuilder to try to execute any server-side scripting.  If you wish to send emails directly from the server, you can use the URL Data object to communicate with a PHP or other language script executing the actions, which would have to be built completely outside of SmartBuilder.

Note, that you don't have to fill in all the fields, only the ones that you care about.

Google Analytics Object

This object allows you to track or report status to Google Analytics.

You must specify your Google Analytics ID in the Account ID Property of the object.

Then you can use the methods to communicate information.

The 2 object-specific response methods are:

For more information on Google Analytics, please view their website here:

http://code.google.com/apis/analytics/docs/

HTML Frame

This widget allows you to control URLs of other html frames that are possibly outside of SmartBuilder.

The HTML Frame object is a very unique object for when you have a SmartBuilder lesson embedded inside a larger website.  For example, a help site, where you are using frames (e.g., a frame on the left for the Table of Contents, one at the top for the header, and one in the center for the content).  The HTML Frame objects allows the SmartBuilder object to control those other frames, for example changing the Table of Contents to another section.

It was created for a specific organization, and we made it available to everyone, but chances are, most users will never have a situation that warrants using the HTML Frame object.

It has 2 methods.

setURL(url) - To change the target frame url. Internally, it calls "setFrameTarget" through the Flash interface, which takes the window path and the url.

setFramePath(path) - This is just another way to dynamically change frame path during runtime.

The object has no visiblity on the stage during runtime.

IFrame object

This object will allow you to embed HTML in your SmartBuilder lesson.

An example of this would be a lesson that has instructions on navigating a company's resource website.  It has the real website embedded in the middle of the lesson, and instructions on where to go below it.  It could also have a question based on that embedded content.

Below is a lesson with a menu, page navigation, and instructions with the Flash Help site embedded in the middle.

Some other possible examples of using the IFrame effectively are:
  • Embedding YouTube videos (follow the instructions in this video to see how).
  • Displaying external resources (such as help or a website).
  • Displaying internal resources that are easier to build en masse in a different technology (e.g., a glossary built in HTML, or a PDF resource).
  • Getting around embedding things directly in SmartBuilder, such as AS3-based Flash content, or content from other tools (like Articulate).
The IFrame object has a few limitations, but often these are not significant barriers.  They are:
  • IFrame always shows up on top of other content.  Since it is technically a popup window without borders or bars, it will always float to the top, even if you layer other objects on top of it on the Authoring Stage.
  • Your lesson cannot scale proportionally.  It must be fixed size.  IFrame does not scale with the content, so it will look strange if the background can change size, but the IFrame does not.
  • IFrame is only visible after publishing.
  • IFrame is also incompatible with some of the 508 functionality, and both cannot be used in the same lesson.

You can resize the IFrame object on the stage, or specify the size in the Properties panel.

To point the IFrame to the content of your choice, you have 2 options - one to point to a live URL on the web, or to point to an asset that has been uploaded to SmartBuilder that will be bundled with your lesson.

  • You can specify the URL in the Properties panel.  You can set the URL via the action list as well.
  • Similarly, you can use the Embed code provided by YouTube, Jing, and hundreds of other web-based tools (you could even put a SmartBuilder lesson inside a SmartBuilder lesson!).
  • You can specify the Asset in the Properties panel only.  For more on uploading Assets, see the page here.

Icon Tracker

This object is similar to the Percent Tracker, however instead of reporting a value between 0 and 100 based on a smooth gradation, it allows an author to provide feedback based on a whole number.  It is useful for telling how many points are possible, and also how many points the learner has earned.  An example might be a quiz with 10 questions.

You can customize the Spacing between icons property to change the look of the Icon Tracker.  You cannot change the graphic.  However, if you have a need for a custom graphic, you can request the source file of the widget or a customized widget from Suddenly Smart.

Menu with Pages

This object will automatically create a list of the pages from the Lesson.  You can customize the look and feel of this object using the Properties panel and Text Toolbar.

More often than not, this menu will be located on the Master Page.

Setting up the Menu Widget:

After placing the menu object on the Master Page, you will need to set up the following actions:

Trigger: Page Controller > onPageChange
Response: Menu Widget > setSelectedPageIndex > Page Controller > getPageIndex

This will update the Menu Widget, even if a means other than itself is used to change pages.  If a "next" button is used to advance the lesson then we still want to Menu Widget to show a checkmark.

Trigger: Menu Widget > onSelection
Response: Page Controller > gotoPage > Function > Menu Widget > getSelectedPageIndex

This will allow the user to click on the items in the menu to go directly to that page.

Note: You can check the Allow skip ahead checkbox in the Properties panel if you want your learner to be able to use the menu to go to pages ahead of their current page, or clear the checkbox if you want to only allow them to use the menu to get to previously viewed pages.

A more customizable menu that allows topics, customizable skins, and selecting which pages are part of the menu can be found here.

Menu with Topics and Pages

This object is similar to the Menu Object, but allows you to create topics or folder to organize your menu pages.

You can customize the look and feel by modifying and loading a specially created SWF into the "Custom skin" Property.  You can obtain the FLA needed to generate the SWF by contacting support -at- suddenlysmart.com.

More often than not, this menu will be located on the Master Page.

Before you can use this object, you must specify which pages are part of the menu, by clicking on the Edit Structure property.  The following actions are required for the menu object to operate properly.

 

 

 

 

 

 

Choosing which pages to show in the Menu:

Setting up the Menu actions:

After placing the menu object on the Master Page, you will need to set up the following actions:

Trigger: Page Controller > onPageChange
Response: Menu Widget > setSelectedPageIndex > Page Controller > getPageIndex

This will update the Menu Widget, even if a means other than itself is used to change pages.  If a "next" button is used to advance the lesson then we still want to Menu Widget to show a checkmark.

Trigger: Menu Widget > onSelection
Response: Page Controller > gotoPage > Function > Menu Widget > getSelectedPageIndex

This will allow the user to click on the items in the menu to go directly to that page.

Note: You can check the Allow skip ahead checkbox in the Properties panel if you want your learner to be able to use the menu to go to pages ahead of their current page, or clear the checkbox if you want to only allow them to use the menu to get to previously viewed pages.

You can also store and retrieve the state of the object by following the directions here.

RTMP Streaming Video Object

This object allows you to use a streaming media service to host your video content (usually a paid service provided by a 3rd party), and to bring that video into SmartBuilder.  You can even use cue points like the regular video object to trigger events in SmartBuilder.

To use this object, you need to know both the URL and the Stream.  These are placed in the appropriate property fields in the Properties panel.  Here is an example URL and Stream that you can use for testing.

URL: rtmp://dk2isqp3f.rtmphost.com/flowplayer
Stream: honda_accord

SWF Messenger

This object is similar to the Streaming SWF object.  The widget is placed on the Authoring Stage and a SWF is loaded into it, allowing SWFs to embedded in SmartBuilder lessons.  Using this SWF Messenger widget will allow you to:

  • Fire an event from a SWF that SmartBuilder can catch and use as a trigger.
  • Send a message from SmartBuilder to the SWF, which can be used to change the state of the SWF.

Scalable Shapes

This object is similar to both Graphic objects and Shape objects.  Like a Graphic object, it is just a placeholder that can load SWFs.  When the SWF is loaded, it is displayed, and (like a Shape) can be resized without distorting the corners and a Color Property can be set to customize the way it looks.

Scaling proportionally without Widget Scaling with Scalable Shape Widget

Notice how the elements on the left and the bottom do not distort.

After choosing the Scalable Shape, you will have to choose the SWF that you want to load.

You can preview these object in the Media Select window and see how they look and scale in a similar manner to the examples above.

These SWFs have to be specially created in Flash and contain ActionScript to work properly.  There are a number located in the Shared Library > SmartBuilder Media & Assets > Design Elements subfolders.  Mostly in the Scalable Shapes subfolder.  They can be used to make backgrounds for displays, and often go well with Graphic Effects.

If you wish to learn how to create your own Scalable Shapes we can send you the source files, or you have an idea that you would like to see created, please email us with the design and we can build it and share it with everyone.

 

Search object

This object will allow you to run searches on the text in your entire lesson, and then go to the page with that text.  Because of this, it makes the most sense to place this object on the Master Page.

The search object itself is the search results box, and requires an Input Text object and a Button or Hotspot to work properly.

The following outline will show you how to set up a Search widget.  Depending on the layout and functionality of your lesson, you can change the actions as you see fit.  For example, you may want to have the search results always be visible if the search functionality is located inside a popup display that is built into the interface.  Or you may want to set the trigger to Input Text > onValueChange instead of having a search button.

URL Data Object

This object is used to send data to a server.  It is similar to the Server Communication object built into SmartBuilder, except for the following differences:

  • It can send data across domains, and
  • the lesson does not wait for a response from said server.

Typical uses for a URL Data object include sending information to a server where server-side script will capture it, or launching a certain page or search results based on data captured in SmartBuilder.  See this forum post for more information on how to use it.

Samples using the URL Data object

Here is a sample action that will send an update command with a value being passed along.  Of course, there needs to exist some sort of server-side script that can store this in a database.  Essentially this is the same as entering http://www.website.com/serverScript.php?query=update&q1=45&q2=2009 into the address bar of your browser.

Trigger: Submit Button > onClick
Response: URL widget > addParam > "query" = "update"
Response: URL widget > addParam > "q1" = "45"
Response: URL widget > addParam > "q2" = InputText 1 > getText
Response: URL widget > setURL > "http://www.website.com/serverScript.php"
Response: URL widget > invoke

Here is an example of sending a search query to google, essentially the equivalent of entering "http://www.google.com/search?q=e-learning" into the address bar of your browser.  Since it automatically shows a bunch of search results and changes the webpage, it would make sense to invoke this in a new window so that it doesn't navigate away from your lesson.

Trigger: Submit Button > onClick
Response: URL widget > addParam > "q" = "e-learning"
Response: URL widget > setURL > "http://www.google.com/search"
Response: URL widget > invokeInNewWindow

Note: When using the "invoke" method, another name value pair is appended at the end of the url.  This is "&rand=1111111111111", where the string of 1s is a randomly generated number.  This is to prevent caching and the same value being ignored if sent multiple times.  Your server-side script should allow for this value to be received, but it can disregard it (basically, just make sure that your script can handle this extra data without breaking).  This is currently not the case with "invokeInNewWindow" method, but this method may be updated in the near future as well to keep everything consistent.

Volume Controller

This is an object that provides a volume controller to your lesson.  It controls the lesson volume, which will include any background audio, voice over narration, sound effects, etc.  It will not pause or play any audio.

There are several of these objects with different skins.  They operate identically.

Widget Download Page

For those of you that do not have a separate, installed environment that we do not have access to, you can ignore this post. For those that do, since Suddenly Smart does not have access to your environment, you must upgrade your widgets. Luckily, this is as easy as uploading or replacing graphics!

Right-click to do a ‘Save As’ on the widget file.  Remember that you will need to upload it to SmartBuilder as ‘widget.zip’, so do not rename this package.  If you want to download multiple widgets at once we suggest storing them in separate folders.  However, once uploaded into SmartBuilder, you will be able to edit the meta-data for this widget.  We suggest naming the widget according to function (eg. ‘Cookie Object’) to mirror the names on the widget list.

If you do not already have any widgets, or a certain widget, you will need to upload these into the "Shared Library > SmartBuilder Widgets" folder. Choose "Upload Media & Assets", and then pick "A SmartBuilder Widget" from the radio buttons. Upload the widget.zip and remember to rename the meta-data.

If you are updating an existing widget, then you need to find the widget (usually located in the "Shared Library > SmartBuilder Widgets" folder.)  Select that widget in your list, and use the ‘Replace’ function to update the widget package.  Upload the widget.zip and remember to rename the meta-data.  By using the ‘Replace’ function, you ensure that all existing instances of that widget in your learning content will automatically be updated the next time it is referenced from a work in progress lesson.

When you bring a widget into SmartBuilder, it needs to be called "widget.zip". That is why they all have the same name.  If you plan to download all of them, keep them separated in subfolders. When you upload each one, and it prompts you to enter Meta Data, you can change the name from "widget" to the name given on this page, or the subfolder name where you found the widget. Keeping these widgets named the same as the folder will help if support issues arise later.

Let us know if you have any issues during the process. You can reach me at 760.635.5700x207 or via email ndhillon at suddenly smart dot com.

Widget Name Date updated  
Cookie Object  April 15, 2010 Download
Email Object  August 19, 2009 Download
Google Analytics Object  February 28, 2011 Download
IFrame Object  November 02, 2010 Download
Icon Tracker  August 19, 2009 Download
Menu with Pages  February 28, 2011 Download
Menu with Topics and Pages  November 13, 2013 Download
RTMP Streaming Video Object  March 7, 2012 Download
SWF Messenger  August 21, 2009 Download
Scalable Shapes  April 15, 2010 Download
Search Objects  August 21, 2009 Download
Tabs Object  April 24, 2012 Download
URL Data Object  February 28, 2011 Download
Volume Controller - Blue  August 21, 2009 Download
Volume Controller - Grey  August 21, 2009 Download
Volume Controller - BlueIce  November 4, 2009 Download