Building Dynamic Pages

From Documentation
Jump to: navigation, search

Building Dynamic Pages

You can include animations and other interesting effects in your site by adding actions to individual objects or pages. You can make objects move on, off, and around the screen, hide or show them, bump them with other objects, have them exchange places, and so on. Site visitors can drag them around the page. You can even have actions respond to a site visitor's entry in a form. No programming is required. You build actions by simply choosing a series of options from menus.

When you use actions, note that:

  • Due to limitations of Internet Explorer and other browsers, actions work only in versions 4.0 and later of Internet Explorer.
  • You can use actions on pages with AutoFrames; do not use actions on pages with frames that were scripted by adding HTML directly.
  • For reliable performance, make sure you select HTML5 as the HTML output method on the Layout Properties panel.

How Actions Work

An action consists of a trigger event that causes the action to begin, a message and various parameters specifying what the action does, and one or more targets that perform the action.

  • A typical trigger event can be a mouse click or simply hovering over a button (called a "mouse over"). But the trigger event can also be an event such as a site visitor entering or exiting a page. In that case, loading the page might trigger pictures to fly across the page. A trigger event can also be another action, so one object flying off the page could make another object fly on.
  • The action message might be to show or hide an object, make an object fly off the page, make an object stick to the pointer so the site visitor can drag it around the page, display a dialog or alert, and so on.
  • The target can be one or more objects on the page, the page itself, or a MasterBorder.

You add an action to the object that triggers it. For example, suppose you want to add an action to a button so when a person clicks the button Picture A flies off the page. The action you add to the button has the trigger event "when clicked," plus the action message "fly off the page," and Picture A as the target.

To sequence actions, you can trigger one with another. For example, suppose that you want the animation to continue so that as soon as the first action makes Picture A fly off the page, the second action makes Picture B fly on. In that case you add an action to Picture A with the trigger event "motion ended," the action message "fly onto the page," and Picture B as the target.

These are, of course, only basic examples of what you can do with actions. Many more ideas are presented throughout this section.

Adding Actions to Objects and Pages

You can add an action to any object, Layout, or MasterBorder. NetObjects Fusion comes with several actions you can apply by choosing options from menus. Just specify a trigger event to start the action, the action itself, and the object you want it to target.

You can add any number of actions to an object. For example, one action might cause a button to highlight when you mouse over it, while another action removes the highlighting when you move the mouse away.

Because MasterBorders can apply to several pages, any object in the Layout that's targeted by an action involving a MasterBorder must be available in all Layouts using that MasterBorder.

  1. In Page view, select the item you want to trigger the action, and click the Actions tab on the Properties panel.

Clear the Object initially visible in browser option to hide the object when the page loads. For example, if an action targeting this object makes it fly onto the page, you will want to hide the object until the fly action is triggered.

  1. Click the plus (+) button on the Properties panel to add a new action.

The Set Action dialog appears.

  1. Specify the action's trigger event in the When field.

Click the When menu button next to the field, point to a trigger category, and click the trigger event you want.

The trigger events available depend on the object you're adding the action to. These can include:

  • Mouse. Mouse options do not apply in some cases, including text objects, Layouts, and frames. Mouse options are for triggering an action when the site visitor clicks the object, mouses down or up (for example, you might display a pushed-in picture of a button on mouse down), or moves the pointer over or off the object.
  • Object. Triggers the action when the object is either hidden or shown as the result of another action that targets this object.
  • Page. Triggers the action when the page finishes loading, or when the site visitor opens another page.
  • Transition, Motion, Drag. In a sequence of actions, triggers the action at the start or end of another action that targets this object. For example, ending a drag might trigger another action to restore the object you dragged to its original position.
  • Custom. These are messages you create to trigger one action with another for specialized action sequences. See Tailoring Actions with Custom Messages.
  1. Make sure Standard Action is displayed in the action type drop-down list. For information about scripted actions, see Scripting Your Own Actions.
  2. Specify the object your action is to target in the Target field.

The action can target any object on the page, the Layout itself, or even the MasterBorder. By default, it targets the object triggering it. To target another object, click the Target menu button next to the Target field and choose an object from the Object Tree panel. If you add a "Fly Out to Top Right" action to one picture and target it at another, for example, clicking the first picture can trigger the target picture to fly off the page.

You can also cascade an action to several objects at once; see Targeting Several Objects with One Action.

  1. Specify the action you want to occur in the Message field.

Click the Message menu button next to the Message field, point to a category, and click the action you want.

Your choices for actions depend on the object you're targeting. These can include:

  • Object. Includes options for hiding, showing, or otherwise arranging the target in relation to other objects; adding a delay between the trigger event and a subsequent action; loading different images to use for a picture, say to show a highlighted button when a site visitor mouses over it. For examples, see Creating a Button Rollover and Sequencing Actions for a Slide Show.
  • Data Source. The choices available for the Data Source target are: First Page, Previous Page, Next Page, Last Page, Add Record, Edit Record, Delete Record, Reload Data, Update Record.See Setting Data Source Contexts for more information.
  • Transition, Motion. Redraws the object in any of several ways, or causes it to move in some way across, on, or off the page.
  • Drag. Makes an object stick to the pointer so site visitors can drag it around the page. One action might make the object stick on mouse down, while another lets the object go on mouse up. For an example, see Colliding One Object with Another.
  • Get Property, Set Property. These actions are typically used as components of scripted actions or parameter values, in particular when working with values entered in forms.
  • Location, Dialog, Window, Browser. These options appear on the menu if the target is a Layout or MasterBorder. Use these options to open another URL after an animation occurs, display a dialog, set the size, position, or some other state of the window; or check what browser the site visitor is using, say to trigger a different set of actions depending on the browser type.
  • Custom. These are messages you create to trigger one action with another in specialized action sequences. See Tailoring Actions with Custom Messages.
  1. If the action you specify requires parameters or can be tailored with additional parameters, specify a value or expression in the Parameters field.

Click the Parameter menu button next to the Parameters field and click an available option. For example, for a Fly message you can choose a direction parameter like In from Top.

For some actions, you can click Values on the Parameters menu to choose from a wider selection of values.

The Parameter Values dialog appears, listing all parameters currently available for this action and their default values.

To modify a value, select a parameter and edit its value in the field at the top of the dialog. Depending on the parameter, you might type the value, or choose it from a drop-down list, or from the Color Picker, Picture File Open dialog, or Link dialog. Click OK when you're done editing parameters.

  • Expression on the Parameters menu to display the action's JavaScript expression.You can also write your own JavaScript expression to generate a parameter value. See Scripting Parameter Values.
  1. Click OK in the Set Action dialog.

Adding an Action to Linked Text

In addition to adding an action to a text block, you can also add an action to linked text by creating a smart, Blank link and then setting the text to have an action instead of linking to another page. A text link can be a trigger, but cannot be a target.

  1. In Page view, select the text.
  2. From the Object menu, choose Link, or click the Link tool on the Standard toolbox.

The Link dialog appears.

  1. Select Smart Link as the link type and select the Blank link.
  2. Click the Link button.
  3. Click the text you selected earlier. The Text Properties panel now has a Link tab indicating a link is defined for the text.
  4. On the Text Properties panel, click the Link tab, then click the Actions button.

The Actions dialog appears.

  1. Click the plus (+) button and add an action as described in Adding Actions to Objects and Pages.
  2. Click OK in the Actions dialog.

Tailoring Actions with Custom Messages

You can simplify some action combinations or create specialized sequences by triggering actions with custom messages. A custom message is a simple text string you create that becomes available in the When menu as a trigger and in the Message menu as an action. You can then send it as a wildcard action from one object to trigger whatever action is added to another. Some actions also use custom messages as parameter values.

Say you want clicking any of several buttons to trigger an action on a picture, but you want to periodically change the action from Wipe to Iris. Instead of having to change each button's action message from Wipe to Iris, you can have each button send a custom message that triggers a Wipe or Iris action added to the picture. Controlling the effect of each button then requires modifying only the picture's action.

To create a custom message:

  1. Select the object you want to trigger the first action in a sequence, and click the plus (+) button on the Actions tab of the Properties panel.

The Set Action dialog appears.

  1. In the Set Action dialog, open the When or Message menu, and choose Custom, Edit.

The Custom Messages dialog appears.

  1. Click the plus (+) button.

The Add Message dialog appears.

  1. Type a name for the message and click OK. Do not use spaces or punctuation in message names to avoid causing problems when you publish.

The message is added to the Custom Messages dialog. You can remove it by selecting it in the dialog and clicking the minus (-) button.

  1. Click OK in the Custom Messages dialog.
  2. In the Set Action dialog, create an action that sends your custom message to the target.

For example, to make clicking the source object trigger an action added to a picture, fill out the Set Action dialog like this: enter Mouse, Clicked in the When field; the picture object in the Target field; and your custom message, which is now available in the When and Message menus, in the Message field.

  1. Click OK in the Set Action dialog to close it.
  2. Select the target object, click the plus (+) button on the Properties panel, and add the action you want the custom message to trigger.

The Set Action dialog reappears. Enter your custom message in the When field, and specify a target and action in the remaining fields.

  1. Click OK in the Set Action dialog.

Targeting Several Objects with One Action

You can target an action at a container object a Layout, MasterBorder, Layout Region, text box, or table to apply the action to every object in the container. For example, clicking a button could hide all objects in a Layout Region. Just select the Cascade message option in the Set Action dialog when you create the action.

Cascading messages work best with custom messages. See Showing One Object While Hiding Others for an example.

  1. In Page view, place the objects you want to target in a Layout, MasterBorder, Layout Region, text box, or table.

Actions sent to a Layout or MasterBorder apply to the entire page, not just the Layout or MasterBorder. So cascading a Hide message at a Layout makes the entire page go blank. To hide only a subset of objects on the page, put the objects in a Layout Region and target it instead. Also, hiding the Layout as a Layout Region (or in any container) also hides its contents without cascading.

  1. Select the object you want to trigger the action, and click the plus (+) button on the Actions tab of the Properties panel.

The Set Action dialog appears.

  1. Create an action targeting the container of objects you want the action to apply to.

When filling out the Set Action dialog, enter the page, Layout, MasterBorder, Layout Region, text box, or table in the Target field.

  1. Click OK in the Set Action dialog.

Triggering the source object targets the action at the container and then at each of its objects as they're listed in the Object Tree panel.

Keep in mind that the container responds to the action if it can. If the container doesn't know how to respond, it is possible that the child objects might know. In this case, you can cascade the action so the child objects can respond appropriately. For an example of cascading an action, see Showing One Object While Hiding Others.

Modifying Actions

You can modify an object's actions, for example, to change a trigger event, to reorder actions if the object has more than one, to disable an action, or to delete it altogether. In Page view, select the object whose actions you want to modify, and click the Actions tab on the Properties panel.

  • To change the sequence of actions, select an action and click the up or down arrow at the bottom of the panel.

If two or more actions share the same trigger event, they occur in the order listed.

  • If you don t want to publish an action now but might want to later, or if you want an action available only to use in a scripted action or JavaScript expression, clear that action's check box. Next time the site is published, this action is not included, but it is still available to insert in a script or expression.
  • To change an action's properties its name, trigger event, target, action message, and so on double-click the action and make changes in the Set Action dialog.
  • To delete an action, select the action and click the minus (-) button.

Scripting Your Own Actions

In addition to the actions NetObjects Fusion provides in the Message menu, experienced JavaScript programmers can script their own actions.

  1. In Page view, select the object you want to trigger the scripted action, and click the plus (+) button on the Actions tab of the Properties panel.

The Set Action dialog appears.

  1. Select Scripted Action from the action type drop-down list.

A text box appears in the dialog.

  1. Enter your scripted action in the text box using JavaScript.

NetObjects Fusion doesn't verify code you enter, so be sure to use valid syntax. You can use any combination of typing, inserting existing script text from a text file (click Insert Script and open the file from the File Open dialog), or inserting a call to an existing action or function.

To insert a call to an existing action, click Insert Action. A list of the actions you added to the object appears. Select an action to insert and click OK. NetObjects Fusion inserts the action at the insertion point in the text box, in the form $(ActionName).

  1. Click OK in the Set Action dialog.

If you re scripting an action and need to define JavaScript functions or other parameters, insert the defining script into the Between Head Tags field of the Layout HTML or Master HTML as appropriate.

Scripting Parameter Values

You can customize an action's parameter values instead of choosing from the ones NetObjects Fusion provides by generating them with a JavaScript expression. For example, you might use the value a site visitor types in a form object as the number-of-seconds value in a Delay action.

If you know JavaScript, you can enter expressions directly. You can also modify code for the default values NetObjects Fusion creates, and you can assemble expressions out of an object's other actions. For example, an expression might test for a particular condition like time of day and then trigger actions you created with the Set Actions dialog based on that condition. Just as the Values dialog often lists several values, an expression can generate one or more values, too.

  1. In Page view, select the object whose parameter values you want to script, and add any actions you want to use as components of the JavaScript expression.

For these actions, ignore the When field, since each action is triggered by the expression. Also, if an action's only purpose is to be called by the expression, disable the action by clearing the check box next to it on the Actions tab of the Properties panel.

  1. Create the action whose parameter value you want generated by the expression, as described in Adding Actions to Objects and Pages. Or, open an existing action by double-clicking it on the Actions tab of the Properties panel.
  2. In the Set Action dialog, open the Parameters menu and choose Expression.

The JavaScript Expression dialog appears. If the action already has default parameter values, the dialog displays the code for those values.

  1. Enter your own JavaScript to generate the parameter value, or modify the code that's already there. NetObjects Fusion doesn't verify code you enter, so be sure to use valid syntax.

To build your expression around existing actions, click the Insert Action button, select an action from the Actions dialog, and click OK. NetObjects Fusion inserts the action at the insertion point, in the form $(ActionName).

  1. Click OK in the JavaScript Expression dialog and again in the Set Action dialog.

When the action is triggered, it uses the parameter values generated by your expression.

Adding Timeline Actions

With NetObjects Fusion Timeline Editor you build animations by simply designing the animations with your mouse, and you may set a trigger event by choosing a series of options from menus. See Creating Timeline Animations.

  1. In Page view, select the item you want to trigger the Timeline action, and click the Actions tab on the Properties panel. The Set Action dialog appears.
  2. Select Timeline Action from the action type drop-down list.
  3. Select an animatiom from the Animation drop-down list.
  4. Select a message from the Message drop-down list. The available choices are: Stop, Play, Pause, Go To, and Cancel Animation.
  5. Open the Parameters menu if available, to add parameters to the Timeline action.
  6. Check the Loop animation, Delay, or Backward options.
  7. Click OK to close the Set Action dialog.

Creating a Button Rollover

You can use the Set Image and Use Image actions to give three-dimensional feel to a button, for example, by highlighting it when the site visitor's pointer passes over it, by making it appear pushed in when pressed, and so on.

For this example, you need three pictures of a button one showing how it looks when the page loads, one showing it highlighted, and one showing it pressed. This example applies to images of buttons, but not to form buttons. The Set Image action is not available for form buttons.

  1. In Page view, place the picture of the button as it looks when the page loads.
  2. To add an action to the button, click the Action tab on the Picture Properties panel, and click the plus (+) button. The Set Action dialog appears.
  3. In the When field, from the Page drop-down menu choose Page Loaded. Click the Target Menu button next to the Target field and, from the Object Tree dialog that appears, select the button object. In the Message field, from the Object drop-down menu choose Set Image.
  4. From the Parameters drop-down menu, choose Values.

The Parameters dialog appears.

  1. Identify when to use which picture file. Make sure the "loaded" version of the button is selected for the Image 1 (Normal) value. Then select the highlighted button for Image 2 (Highlighted), and the pressed version for Image 3 (Depressed).
  2. To specify a picture file in a Set Image action's Values dialog, select a value, click the button next to the edit field, and open a file from the Picture File Open dialog. Click OK.
  3. Add four actions to the button, filling out the Set Action dialog for each action like this:
Action 1. Enter Mouse, Mouse Over in the When field; the button itself in the Target field; and Object, Use Image in the Message field. Then open the Parameters menu and click Image 2 (Highlighted).
Action 2. Enter Mouse, Mouse Out in the When field; the button in the Target field; Object, Use Image in the Message field; and Image 1 (Normal) in the Parameters field.
Action 3. Enter Mouse, Mouse Down in the When field; the button in the Target field; Object, Use Image in the Message field; and Image 3 (Depressed) in the Parameters field.
Action 4. Enter Mouse, Mouse Up in the When field; the button in the Target field; Object, Use Image in the Message field; and Image 2 (Highlighted) in the Parameters field.

To link the rollover button to another page, you can add one more action. In the When field, from the mouse drop-down menu choose Clicked, in the Target field choose layout, in the Message field from the Location menu choose Go to URL, and in the Parameters field from the drop-down menu choose Values and select the link to go to.

  1. Preview the page to test your rollover. Mouse over the button to see it highlighted, and click it to see it pushed in.

Colliding One Object with Another

This example demonstrates a drag action, collision detection, and custom messages, where dragging one object into another makes the second object fly off the page.

  1. In Page view, add two objects to the page.
  2. Make sure the first object (the one you plan to drag) is in front of the second object.
  3. Make a note of each object's ID as it appears on the Action tab of the properties panel.
  4. Select the first object and create a custom message named FlyAway, as described in Tailoring Actions with Custom Messages. Create an action to use in creating the custom message and then delete it.
  5. Add an action to the first object (as described in Adding Actions to Objects and Pages) so that mousing down on it makes it stick to the pointer until you mouse up.

In the Set Action dialog, enter Mouse, Mouse Down in the When field; the first object in the Target field; Drag, Start Drag in the Message field; and Until Mouse Up in the Parameters field.

  1. Add a collision detection action to the first object like this:

In the Set Action dialog, enter Page, Page Loaded in the When field; the first object in the Target field; and Drag, Set Collision Detection in the Message field. Then open the Values dialog from the Parameters menu and specify the second object for the Object ID value (type the object's ID exactly as it appears on the Actions tab of its properties panel), and enter FlyAway for the Message value. When the first object is dropped over the second, it sends the FlyAway message to the first object.

  1. Add yet another action to the first object that's triggered by the FlyAway message and tells the second object to fly off the page.

In the Set Action dialog, enter Custom, FlyAway in the When field; the second object in the Target field; Motion, Fly in the Message field; and Out To Top in the Parameters field.

Then preview the page to test your collision. Drag the first object over the second, drop it there, and watch the second object fly off the page.

Showing One Object While Hiding Others

Here's an example of cascading a custom message to build a sequence of actions where displaying one object selectively hides others.

Say your page displays a map showing the locations of five company offices. For each location, a button superimposes a text box on the page profiling that office's activities. When a site visitor clicks a location, you want to hide any profile that's currently visible, and then display the one describing the selected location.

  1. In Page view, place the buttons and text boxes in the Layout area, arranging them however you want.
  2. Select one of the buttons and create a custom message called HideAllProfiles, as described in Tailoring Actions with Custom Messages.
  3. To each button, add an action, as described Adding Actions to Objects and Pages, so clicking the button cascades the HideAllProfiles message to the Layout.

In the Set Action dialog, enter Mouse, Clicked in the When field; the Layout in the Target field; and Custom, HideAllProfiles in the Message field. Also, check the Cascade message option.

  1. Add a second action to each button so clicking it targets a Show message to the text box associated with the button.

In the Set Action dialog, enter Mouse, Clicked in the When field; the text box this button should display in the Target field; and Object, Show in the Message field.

  1. Select each text box, and on the Actions tab of the Properties panel, clear the Object initially visible in browser option.
  2. Add an action to each text box that's triggered by the HideAllProfiles message and hides the text box.

In the Set Action dialog, enter Custom, HideAllProfiles in the When field; the text box itself in the Target field; and Object, Hide in the Message field.

Then preview the page. Clicking a button should send HideAllProfiles as a cascading action message to the Layout. The Layout doesn't have any actions triggered by this message so it doesn't respond. But it does cascade the message down to its embedded objects. As a result, every object on the page receives the message. But only those objects with actions triggered by the message the text boxes respond by hiding themselves. Next, the button sends a Show message to its associated text box, which makes itself visible.

Without cascading messages you d have to add four additional actions to each button one for hiding each text box. If you didn t use a custom message to trigger the text boxes to hide, cascading a Hide message to the Layout would hide every object on the page.

Sequencing Actions for a Slide Show

Here's an example of using custom messages and a delay action to build a slide show. When the page loads, a slide flies onto the page, stays there for the duration of time specified by a delay, flies off, and is followed by another slide.

Before you begin, gather the pictures you want to show in each slide and set the HTML output to HTML5.

  1. In Page view, create a Layout Region, and in it, place pictures and text for your first slide.

By creating each slide in a Layout Region, you can include multiple objects per slide.

  1. Select the Layout Region and clear the Object initially visible in browser option on the Actions tab of the Properties panel.

You clear this object so the slide doesn't appear until an action triggers it to fly onto the page.

  1. Create three custom messages named ShowPicture, PictureIsIn, and DelayIsDone, as described in Tailoring Actions with Custom Messages.

Using custom messages rather than a generic End Motion trigger to trigger each slide's entrance and exit lets you control exactly which motion triggers what.

  1. Add five actions to the Layout Region, as described in Adding Actions to Objects and Pages. For each action, fill out the Set Action dialog like this:

Action 1. Enter Page, Page Loaded in the When field; the Layout Region in the Target field; and Custom, ShowPicture in the Message field.

Action 2. Enter Custom, ShowPicture in the When field; the Layout Region in the Target field; and Motion, Fly in the Message field. Then open the Values dialog from the Parameters menu, enter a Direction value of 270 (degrees), and make sure Visibility is set to Show, which tells the picture to fly in from the left. Also enter PictureIsIn as the Completion Message.

You define the Fly action's parameters in the Values dialog, instead of choosing In From Left from the Parameters menu, so you can trigger the next action with a custom message.

Action 3. Enter Custom, PictureIsIn in the When field; the Layout Region in the Target field; and Object, Delay in the Message field. Then open the Values dialog from the Parameters menu and enter DelayIsDone as the Custom Message, and 2 for the Delay value.

The arrival of the first slide triggers a two-second delay after which the DelayIsDone custom message is sent to trigger the next two actions.

Action 4. Enter Custom, DelayIsDone in the When field; the Layout Region in the Target field; Motion, Fly in the Message field; and Out To Right in the Parameters field.

After two seconds, the slide flies off the page.

Action 5. Enter Custom, DelayIsDone in the When field; the Layout Region in the Target field (you change this later); and Custom, ShowPicture in the Message field.

Also after two seconds, another slide flies onto the page.

  1. Create the second slide by copying and pasting the entire Layout Region, and placing the copy directly on top of (not inside) the first Region.

Copying the Layout Region copies its actions, too, so you don t have to add the same actions over and over to subsequent slides.

To stack Layout Regions without inserting one in the other, select the Regions and align them using the Align buttons on the Multi-Object panel.

  1. Select the new Layout Region, replace its contents with the contents for your second slide, and delete its first action from the Actions tab on the Properties panel.

To make sure you re working with the second Layout Region's actions, open the Object Tree (from the View menu choose panels, Object Tree), and select the Region.

  1. Copy and paste the second Layout Region once for each remaining slide. Align the resulting Regions on top of each other as you did in step 5. While working with each Layout Region, replace its contents with those for a new slide.

You can uncover a Layout Region to work on in Page view by selecting Regions in the Object Tree panel and using the Hide Object or Show Object command on the Object menu. Also in the Object Tree panel, you can rename Regions Slide1, Slide2, and so on to keep track of which slide is which.

  1. Edit the last action of all but the last slide so it targets the next slide in the show.

Double-click the action on the Actions tab of the Properties panel to open the Set Action dialog and change the target.

  1. For the last slide, deactivate all but the first action by clearing the box to the left of the action.

By deactivating rather than deleting actions that target another currently nonexistent slide, you can easily add slides to your show later by reactivating and targeting the actions at a new slide. Make sure that HTML5 is selected as the HTML output method on the Layout Properties panel and that Word wrap is cleared on the HTML Options dialog you access from the Site Settings General tab. Then preview the page to test your slide show.

Loading the page sends a ShowPicture action to the first slide, triggering it to fly onto the page. The completion of the Fly action sends a message that triggers a two-second delay, after which another custom message triggers both the exit of the current slide and the entrance of the next.

Customizing Default Actions

The trigger events, action messages, and default parameter values available in the Set Action dialog are defined in the JavaScript Beans (.jsb) and JavaScript (.js) files in the NetObjects\NetObjects Fusion\NetObjects System folder. If you're experienced in JavaScript programming, you can add your own .jsb and .js files to provide even more choices in the Set Action dialog.