Using the jshock editor, you can create simple PowerPoint style slideshows,
or ShockWave-like animated presentations for embedding into web pages. The
editor is a Java application that can load and save jshock .pres
files, which can then be displayed using the jshockApplet class. When you start the jshock editor, you should see a window that looks similar to he picture to the right. On the left hand side are buttons for selecting the various elements to create, and choosing the color of new elements. At the top are the menus for loading and saving, changing options and so on.
Just beneath the menus is the timeline slider. Using this slider, you can move to different times in your presentation, and adjust the positions of elements at those times. All animation in jshock is done by moving elements at different times, so as to create key frames that elements move between. To the right of the timeline slider is a text box that shows the current time position, in milliseconds.
The supported elements in jshock are:
 A bitmap image, scaled to any size Multiline text of any supported font, size and style Straight line, possibly with arrows at the start or end Freehand curve Empty rectangle. possibly with rounded corners Filled rectangle Empty oval |
 Filled oval Empty polygon Filled polygon Empty freehand shape Filled freehand shape Empty regular polygon, with an arbitrary number of sides Arc which is 90° of an oval |
Most elements are defined by a rectangle, and are created by clicking on the icons and the dragging out a rectangle in the editing area. However, the line and arc elements are created by dragging out a line. The curve, and freehand shapes are created by dragging along the path of the curve. The empty and filled polygon elements are created by clicking at each point on the polygon, and double-clicking to finish.
The color buttons in the bottom-left corner of the window allow you to choose
the foreground and background colors for newly created elements. To choose
a color, just click on the button and either choose from the palette, or
create your own color using the sliders.
 Editing Arrow
|
 Selection Box
|
To resize an element, first select it and then use the resizing boxes on the right and bottom sides, or in the bottom-right corner to change the element size. This applies for all elements except the line and arc, which must be adjusted by dragging the endpoint of the line.
Elements can also be selected by using the Select All menu item, or by choosing List.. from the Edit menu. This brings up a window showing all the elements in the current timeline by name, and allows you to select or de-select elements by clicking on them in the list. The element list window is useful for selecting elements that are off-screen or hidden behind others.
Selected elements can be cut, copied and pasted using the options under the Edit menu. Elements can be copied across timelines, or to other presentations within the same jshock editor. You can also use the Raise and Lower menu items to bring elements to the front, or send them to the back.
Every element has a number of properties such as width, height and color.
To edit these properties, either double-click on an element, or select an
element and choose Edit.. from the Edit menu. Either method will
open a window similar to one on the left to allow you to precisely edit
the various properties. Each type of element has a different editor, although
there are some similarities.
When any kind of element is edited, the name of the element will be shown at the top of the window. Each element must have a unique name, used to refer to the element by actions that change element properties. You can change the element name to anything you like, but beware that actions that refer to the element will not be updated.
On the right-hand side of the editor window is a list of all the key frames for this element. An newly created element will have only one key frame, at the time in the timeline that it was created. However, if you move the timeline slider to another time and then drag the element to a new position, another key frame will be created. The list in the editor window allows you to edit existing frames, add and delete frames. You can also change the visibility of a frame, so that an element can be made to disappear for part of the timeline. Clicking on the Go button on the right side of a row will moved the timeline slider to that time, so you can adjust the position of an element manually.
If you want an element or elements to move along a complex path, then you can use the Define Path.. menu item to draw out a path to move along. When this is chosen, a window will pop up asking for a start time, end time and path type. The start and end times are the times that the element will be at, at the start and end of the path you draw out.
If you choose the Polygon path type, then when you click Ok you should draw a path in the same way that you would draw a polygon element - by clicking on successive points, double-clicking when done. If you choose the Freehand path type, the path is defined in the same way as drawing a curve element - by clicking and dragging out the path.
The animation system used by jshock only allows elements to move as time progresses, not to change in size or color. Unlike the position, the width, height and other properties of an element are fixed for the entire presentation. However, you can use actions to change the size and color of an element at certain times, as described in the Actions and Interactivity section.
For images that are loaded from URLs, jshock can store the image as a reference to the URL instead of storing the actual image data. Because the way images are stored in .pres files is not very efficient, this is the best option where possible. For images loaded from files, you have no choice but to store the image data inside the presentation. To choose how an image is stored, click on URL or Data next to Store Image in the image element editor window.
The text element editor allows you to choose the font, size and style of text to display. To edit the actual text, click on the Edit button and enter text in the window that appears. Newlines in the text you enter will be preserved when displayed, but lines may be wrapped if the element is not wide enough to display them. You can also align the text to the left, right or center of the element rectangle by choosing the alignment you want in the element editor.
Every jshock presentation is made up of one or more timelines. Every timeline
has a unique name, a length in milliseconds, a play speed and a background
color or pattern. All the timelines in the current presentation are displayed
in the Timeline menu, with the current timeline selected. To switch
to another timeline, just choose it from the menu. To edit the current timeline,
choose Edit.. from the Timeline menu. A window similar to one
to the right will appear, allowing you to adjust the length and other
properties. The length of a timeline is the amount of time it takes to play. Once a timeline finishes, all the elements in it will remain at the position they ended up at. The speedup factor can be used to make a timeline play faster or slower. For example, a timeline with length 10000ms would take only 5000ms (5 seconds) to play when the speedup is set to 2.
The background of a timeline can be either a solid colour, a tiled image or an image scaled to fit the presentation size. Images are selected and stored in the same way as in the image element editor, described in the Editing Image and Text Elements section above. You should store images as URLs wherever possible, to reduce the size of your presentations.
To create a new timeline, choose New.. from the menu. A window almost identical to the one for editing existing timelines will appear, allowing you to set properties for the new timeline. To delete a timeline, just click on the Delete button in the timeline editor window.
To create a new presentation, choose New.. from the file menu. This will bring up a window asking for the new presentation size. Once you click Ok, a new window will be opened for you to edit the new presentation in, rather that replacing the presentation in the current window.
To close the current window, either click on the close button or choose Close from the File menu. Once all the jshock windows have been closed, the jshock editor will exit. Choosing Exit from the File menu will close all windows and exit immediately. Neither the Close or Exit menu items will ask you if you are sure before closing windows.
Every element in jshock can have an arbitrary number of actions associated
with it. Actions can be triggered by clicking on an element, or when the
mouse enters or leaves the element. To edit an elements actions, click on the
Actions.. button in the top-right corner of the element editor window.
This will open the actions editor window, which looks similar to the
image to the left. To add a new action, use the New Action section of the window in the lower-left corner. This allows you to choose the event that will trigger the action, and the type of action to be created. Clicking on the Create button will display a form for editing the action properties on the right side of the window. Each different kind of action has different properties that can be set.
The different kinds of actions are :
To edit an existing action, double-click on it from the list. After making changes, you must click on Save to save the changes. To delete an action, select it from the list and click on the Delete button. Once you have created all the actions for the element being edited, click on Ok to save them.
To edit the actions for a timeline, choose Actions.. from the Timeline menu. Timeline actions can be triggered by the MouseClick event (when the user clicks on the timeline background), or by the Timer event. The latter occurs automatically at some point in the timeline, specified by the Time field in the action properties. Timed events are the way to create looping effects in timelines, or to have the presentation move to another timeline when one finishes.