05 Interactive Objects

Home Programma's Overigen SiteMap

05 Interactive Objects

© Z-point - 20???

Interactive Objects

=================

Editing your slider on the page

Editing your slider in Slider Studio

To edit your slider in Slider Studio

Inserting a Photo Gallery

Gallery types

Inserting a Gallery

To insert a Photo Gallery

To add photos to a Photo Gallery

To select and modify a Photo Gallery style

Editing the Photo Gallery

Inserting Google Maps

To insert a Google Map

Adding markers

Inserting rollover graphics

Rollover options

To create a rollover graphic

To edit a rollover graphic

Inserting pop-up rollovers

To insert a pop-up rollover

To edit a pop-up rollover

=================

Inserting sliders <TOP>

Sliders are a fun and exciting way to animate panels, and are ideal for a whole range of uses including advertising banners, news tickers and as alternative navigation bars. Each slider is made up of a series of panels, with just one panel visible at any one time.

Each panel can show a mixture of pictures, text, and line/shape art. Like a slideshow, each panel can be made to appear automatically at set intervals, manually via navigation buttons, or at a set time. Various animation styles can be used to control how each panel is displayed.

Pre-designed professional sliders are available from the Asset Browser, and are typically customized once on the page using the Slider Studio. Panels can be added, reordered, or deleted to create the slider of your choosing.

To insert a slider: <TOP>

1. From the Quick Build tab (Interactive Objects category),

click Slider.

2. To insert the slider where you want it to appear on the

page, position the displayed cursor then simply click the mouse.

3. In the Asset Browser dialog, select "Sliders" in the Pack Files

category, then select an individual slider from the main pane.

4. Click OK.

You can also add sliders to the page using the Assets tab (see WebPlus Help).

To select a slider: <TOP>

• Select anywhere in the slider region, then click Select Parent in the toolbar under the selected slider.

!!!-----

When added to the page, some sliders may be part of a grouped

object. In this case, you can select the slider via the Objects tab.

--------

Editing your slider on the page <TOP>

Your slider comes with a set of placeholder panels by default. A selected slider offers navigation buttons to review each panel in the slider.

To navigate between panels: <TOP>

• Click the navigation buttons directly under the selected slider.

Every slider also has a Foreground panel that displays its contents permanently. The panel is perfect for adding contact details, sale buttons, telephone numbers, or a picture that you always want to show. One you've reviewed the content you can either edit the slider directly on the page or use the more versatile Slider Studio.

To edit your slider directly on the page: <TOP>

1. Select your slider.

2. From the context toolbar, choose options to:

• add, copy or delete panels.

• name your panels.

• apply actions to panels.

Using panel navigation, each panel can then be edited like a "mini-page".

Editing your slider in Slider Studio <TOP>

Your slider can be fully customized to your liking within the Slider Studio.

The studio offers a panel-to-view display with supporting tabs for panel configuration, and lets you perform all of the operations possible from the context toolbar (above) plus additional features such as slider preview.

To edit your slider in Slider Studio: <TOP>

1. Select anywhere in the slider region, then from the Slider context toolbar, select Slider Studio.

2. In the displayed Slider Studio, edit the slider using various tabs:

• Slider Options: For modifying playback controls (animation

styles, autoplay, panel looping and animation times).

• Panels: This tab lets you Add Panel to Slider, Copy Slider Panel, Delete Slider Panel, Move Left, or Move Right. When adding, a blank panel is added at the end of the last panel in your slider.

• Panel Options: For panel naming, background color, panel

availability (display at set times).

Inserting a Photo Gallery <TOP>

In WebPlus you can add a Flash™ or JavaScript-based photo gallery to any web page, a range of eye-catching gallery types, styles, and a choice of photo navigation methods.

Gallery types <TOP>

Different Flash or JavaScript gallery types can be used to create your Photo Gallery.

Professional Flash Photo Gallery

Provides a top or bottom control bar (hosting preview

thumbnail rollovers) on top of your main photo display.

Professional Flash Photo Gallery (Live Feed)

As for Professional Flash Photo Gallery but photo content is sourced online from your Flickr photostream (as an RSS feed), another RSS 2.0-compatible image host, or SlideShowPro Director.

Flash Photo Gallery <TOP>

Provides a top or bottom control bar on top of your main photo display which offers basic navigation control and/or scrollable horizontal/vertical preview thumbnail rollovers. Photo grids and photo stacks are also available. You can also accompany your photo gallery with background music.

JavaScript Photo Gallery <TOP>

Like Flash Gallery but offers JavaScript-based photo galleries.

Photo grids, photo stacks, and lightboxes are available.

Inserting a Gallery <TOP>

The Photo Gallery is inserted on the page, just like an individual photo, except that the currently displayed photo is surrounded by a background, navigation bar and preview thumbnails.

To insert a Photo Gallery: <TOP>

1. From the Quick Build tab (Interactive Objects Items category), click Photo Gallery.

2. To insert the gallery at a default size, position the displayed cursor where you want the gallery to appear on the page, then simply click the mouse.

- or -

To set the size of the inserted gallery, drag out a region and release the mouse button.

3. Select the Gallery Type as described above.

4. Click Next.

To add photos to a Photo Gallery: <TOP>

1. For all Gallery types (except the Live Feed type) from the dialog, choose whether to:

• Add individual files

Click the Add Files button to navigate to then select the photo file(s) to open. Use Ctrl-click or Shift-click to select multiple non-adjacent or adjacent files.

- or -

Click the Add Assets button to navigate to then select the photo file(s) to open.

- or -

• Add all photos in a folder

Click the Add Folder button to navigate to a folder then select it to add its content.

2. (Optional) Select any photo thumbnail(s) for manipulation;

• To add a caption, click the Caption column and input text, numbers and characters.

• (Professional Flash Photo Gallery only) To add hyperlinks to photos, click Edit hyperlink. From the dialog, choose a Hyperlink Type—you can set no hyperlink, hyperlinks to the original image, or hyperlinks to a different link destination (e.g., Site Page or Internet Page).

3. Click Next.

To select and modify a Photo Gallery style: <TOP>

1. Select a Gallery style from the Gallery Style pane running across the top of the dialog.

2. (Optional) For the selected style, use the pane on the right to modify various gallery-wide options (autoplay,background/frame/font color, caption and navigation bar control, etc.).

3. Click Finish.

Editing the Photo Gallery <TOP>

Once added to the web page, the Photo Gallery can be edited at any time

by double clicking.

Inserting Google Maps <TOP>

Use embedded Google Maps in your web page if want to make sure that a client can locate your headquarters, attendees can find that special meeting (or event), or identify any other special interest locations. Each map will allow markers to be placed on the map to identify locations.

To insert a Google Map:

1. Click Google Map from the Quick Build tab (Interactive Objects) and drag the insert cursor across your page to set the map size.

2. From the Google Map dialog, enter your post code (zip code) or address in the Search for a location field, then click Search. As Google's geolocator is being used, WebPlus will sense your locale, and display local addresses preferentially.

Adding markers <TOP>

You can add an unlimited number of markers to your Google

Map. Each marker can display further details on hover over and mouse

click.

To add a marker: <TOP>

1. From the Google Map dialog, click Add.

2. In the Google Map Marker dialog, click a chosen location using the cursor.

3. Enter a Name for the marker. This "tooltip" displays on hover over and could represent a company or site name.

4. Assign a Click action to the marker, i.e. what gets displayed on button click.

5. (Optional) Check Open InfoWindow by default for your label to display without the marker being clicked.

6. Click OK. The marker appears on the map preview in green (to indicate it is currently selected). Repeat the process for each additional marker you wish to add.

Inserting rollover graphics <TOP>

A picture whose appearance changes in response to a mouse event is called a rollover graphic. Mouse events could typically be a hover over or mouse button press.

!!!-------

You can directly import rollover graphics created in Serif DrawPlus.

(See WebPlus Help for more information.)

---------

Rollover options <TOP>

Creating rollovers is a matter of deciding which state(s) you'll want to define, then specifying a picture variant for each chosen state. WebPlus provides several choices:

Another state, Down+Over (not illustrated) implies a mouseover that occurs when the picture is already Down, i.e. after it's been clicked. You can also specify a hyperlink event—for example, a jump to a targeted web page—that will trigger if the user releases the mouse button while in down state.

To create a rollover graphic: <TOP>

1. In a suitable image-editing program, create the variant source pictures for each state you'll be defining.

2. Click Rollover from the Quick Build tab (Interactive Objects) and drag the insert cursor across your page to set the rollover size.

3. In the Insert Rollover dialog, on the Rollover Graphic tab:

• Specify which rollover states (see above) you want to activate for each picture by checking boxes in the Rollover states section. For each one, use the Browse button to locate the corresponding source picture or click Browse Assets to locate pictures from your saved asset packs.

• (Optional) Specify Export Options for your pictures.

• Check Embed files in site if you want to incorporate the picture(s) in the site.

• Choose either Normal or Down as the button's initial rollover state.

• Check Radio button if you want to link this rollover to others on its page (that have also got this option checked), so that only one is in a 'down' state at one time.

4. Click OK. WebPlus displays the picture assigned to the Normal state.

To edit a rollover graphic: <TOP>

• Double-click the rollover graphic, to display the Edit Rollover dialog. Modify settings as appropriate.

Inserting pop-up rollovers <TOP>

The most common use for pop-up rollovers in WebPlus is to hover over a picture thumbnail to show its larger representation, usually offset next to the thumbnail.

WebPlus lets you choose the position and size of the pop-up in relation to the "hovered over" thumbnail.

To insert a pop-up rollover: <TOP>

1. Click Pop-up Rollover from the Quick Build tab (Interactive Objects) and drag the insert cursor across your page to set the rollover size.

2. From the dialog, on the Rollover Graphic tab:

• For the Normal rollover image click the Browse button, and navigate to and select the image. Click Open.

- or -

Click the Browse Assets button and locate an image from your saved asset packs.

• For the Over image, the previously chosen Normal image is used by default (typically for photo thumbnails).

However, you can Browse or Browse Assets to use a completely different image.

3. Click OK.

If captioning is required on pop-up rollovers this can be made to appear next to your Over image (see WebPlus Help for details).

For pop-up rollovers to work effectively you'll need to position the Normal and Over images on your page. Positioning is carried out from a dedicated dialog, where each state image can be moved and resized by dragging (or by setting absolute pixel values). See WebPlus Help for more information.

To edit a pop-up rollover: <TOP>

• Double-click the Normal image on the page, to display the Edit Pop-Up Rollover dialog. Modify settings as appropriate.