An Object is the principle element displayed on a page. When you select Text or a Picture and move it with your mouse you are actually selecting an Object. An Object is comprised of several components including: Geometry, Shading, Audio, Action and Behavior. An Object does not need to have any of these components but it must have a Geometry component to be visible. The Object itself includes a transformation matrix which determines its location, size, rotation and skew.
A unique feature of the IMS data structure is its ability for Objects to share components. Many Objects for example, may use the same Shading. If the Shading on one of these Objects is changed the shading on all Objects that share the Shading component will also change. This provides a convenient means to create Clones and multiple instances of an Object.
If it is not already open, open the Quick editor by pressing the Q button on the left toolbar.
Components of an Object
Geometry
Geometry is the visible component of an Object. The different types of Geometry include: Rectangle, Ellipse, Polygon, Path, Image. Text, Title and Code. Geometry also includes a vector outline. This will be a rectangle for Rectangles, Images, Text, Titles and Code. Ellipse's Polygons and Paths are non rectangular.
Select the Circle on the left toolbar to create an Ellipse Geometry.
Display the Geometry Dialog (Geo Tab) on the Quick editor. Adjust the Width slider to 1 to add a vector outline. Adjust the RGB sliders to assign a dark blue color to the outline.
Open the Geometry Editor (Spinner and Engine) on the components toolbar at the left (Picture of a Set Square and Compass). Explore some of the additional operations that are available.
The Levels dialog is used to adjust the color, brightness and contrast of an Image Object. See the Image tutorial for more information on manipulating and enhancing Images.
Shading
Shading describes how the interior of an Object will be shaded. Shading can be Flat, Liner, Cylindrical or Spherical. Web Engine and SiteSpinner can also apply Scaled Texture, Stretched Texture or a Tiled Texture. Shading also includes Transparency and Transparency Mapping. Shading is ignored when applied to Text Geometry and only Transparency can be applied to Image Geometry.
With the Circle still selected select the Shading dialog (Shd tab) on the Quick Editor. Say yes when asked to add Shading to this Object. The circle should now be gray.
Select the Radial button at the bottom of the Quick Editor.
Select the Col 1 button and adjust the RGB sliders to create a light blue color.
Select the Col 2 button and adjust the RGB sliders to create a dark blue color.
Adjust the Transparency slider to see the effect.
Open the Shading Editor (Spinner and Engine), select the Fill Setting dialog. Move the Cross Bar with your mouse to adjust the location of the highlight.
Try assigning a Texture Map to the Object.
The following advanced components are used for Animation in Web Engine
Sound (Web Engine V2)
Sound references a midi or wave audio file. Use the Sound Editor to assign a sound to an Object. Use the Behavior Editor to control the audio.
Action (Web Engine V2)
Action describes the motion an Object will have. See the Animation tutorial for an introduction to animation.
Behavior (Web Engine V2)
The Behavior component describes a collection of Interactive and Dynamic Triggers and Events. See the Behavior tutorial for an introduction to Behaviors and Events.
Moving, Rotating, Scaling and Skewing
An Object includes a transformation Matrix that determines its position, size, rotation and Skew. These can be changed with the Keyboard and Mouse or through the Quick Editor and Object Editor.
Select the Object Dialog (Obj tab) in the quick editor.
Select the Circle and move it with your mouse so that it is visible while reading these instructions.
Hold the Shift Key down then press the Left Arrow Key to stretch the circle into an Ellipse.
Hold the Ctrl Key down and press the down arrow to rotate the Ellipse to approximately 45 degrees. The angle will be displayed in the quick editor.
Enter 10 into the Quick Editor rotate box. Use the Quick Edit rotate arrows to return the rotation to zero degree.
When an Object is correctly positioned and scaled, you can lock it to prevent accidental changes to it.
With the ellipse still selected, select the LOCK symbol on the component toolbar at the left or on the Quick Editor. The symbol should change to a Lock.
Select the ellipse Object any try moving it with your mouse. It should stay at its current location.
Select the LOCK symbol. It should change back to a Key. Try moving the Ellipse again.
If an Object refuses to move, check the Key/Lock symbol to see if it has been locked into place. Many of the Objects in this project including this text, are Locked.
Naming Objects and Components
When you create any Object a unique name will automatically be created for it. This name will be displayed in the Quick Editor Object dialog, in the Object List drop box on the Page toolbar and in the Object list drop box on the Object toolbar in IMS Web Engine. The Web Engine Object bar will also display the names of the components that are assigned to the current Object.
You can change the name of the Object and its Components to something more descriptive by typing the new name into the edit boxes. Do not use blanks or non standard characters.
Make sure the Quick Editor is visible. Press Ctrl-Q if it is not. Select the Object Dialog (Obj tab).
Select THIS Text Object with your mouse. Its name is "ObjText" and it will be displayed in the Object drop boxes on the Page Toolbar near the top center of the IMS Window, on the Object toolbar in Web Engine and in the Quick Editor Object drop box.
Select the Ellipse. Its name will now be displayed in the Object drop boxes.
In the Quick Editor replace the name that is displayed with "Ellipse".
Select this text Object to see its name then select the Ellipse again to see its new name.
With the ellipse Object "Ellipse" still selected, select the Shading Dialog (Shd tab) in the quick editor. Enter the name "Ellipse" into the edit box. Next select the Geometry Dialog (Geo tab) and enter the name "Ellipse" into its edit box. You should now have an Object called "Ellipse" that has Geometry and Shading components that are also called "Ellipse".
Cut, Copy, Paste and Delete
An Object and its components can be duplicated using Copy and Paste. The new Object will be a completely independent replica of the Original. Changes made to either the original or copy will not effect the other. To copy the current selected Object use the Copy and Paste buttons or menu items or press Ctrl C and Ctrl V.
An Object can be removed by either Cutting (Ctrl X) or Deleting (Del key) it but there is a difference.
Cut (Ctrl X) will remove an Object from the current page but leave in the data base and on any other Page that it is Included (see below).
Delete (Del Key) will completely remove the Object from the entire Data Structure including any other pages that it is Included (see below). It will not however, delete any components such as Shading or Geometry that are currently being used by any other Object.
Objects may sometimes become orphaned if they have been Cut from every Page. Components may sometimes become orphaned if they are not being used by any Object. The Object and Publishing editors include a Clean operation that can be used to remove any Objects or components that may have become orphaned..
Clones and Included Objects. (Engine and Spinner)
As previously mentioned an Object can share its components with other Objects. This provides a convenient means to create common components that can be shared amongst many different Objects.
Select the Rectangle button to create a new Rectangle Object. In the Quick Editor change the name of the Object to Rectangle.
Open the Geometry dialog (Geo tab) and change the name of the Geometry to "Rectangle".
Open the Shading dialog (Shd tab). SAY NO when asked to create a new shading component. The name in the Shading drop box will be "****" which indicates that the Object does not have a shading component. Open the drop box and scroll down to find the shading component called "Ellipse". It will probably be near the bottom since you just created it. Say YES when asked to assign a new Shading component. The Objects "Ellipse" and "Rectangle" are now using the same shading. In the quick editor, adjust the RGB sliders to select new "Col 1" and "Col 2" colors. You should see the colors changing on the rectangle Object as you change them.
The colors have also been changed on the Ellipse Object but you will not see them until the ellipse is redrawn.
Select the ellipse Object. The color of the ellipse should change to match exactly the color of the Rectangle.
With the ellipse still selected, open the Geometry Dialog (Geo Tab) in the Quick editor. Open the drop box to find the Geometry called "Rectangle" and select it.
The ellipse should change to a rectangle.
These two Objects are now Clones (sometimes called Instances) since they both share the same Geometry and Shading. The only difference between the two are their transformations. You can position, rotate, scale and skew them independently but if you change the Shading or Geometry (add rounded corners), they will both change. Examples of where this becomes very convenient are:
Create shading for your buttons, navigation bars, corporate colors etc. When you share these components you will be certain they match.
Create shared geometry for navigation bars, buttons etc.
If you need to modify a shared component, change it on any one Object and it will change throughout the entire project.
Whereas Clones are different Objects that share the same components, an Included Object is an Object that is shared by more than one Page in the project. The significance is that the Object also has the same transformation matrix. If you change an Included Object on one page including its location and size, it will change on ever page in which it is included.
Read all these instructions first.
Select the Rectangle Object and move it to the top of this page. A quick way to move it is to select it and then enter a new Y location into the Quick Edit Object dialog. If you change its Y position to 200 it will move to close to the top of the page.
Select the Main link to return to the main Page. (Remember that this page link is called "Objects, Components and Clones".
Select the Edit Menu, Include and "Include Page". The rectangle should now appear at the same location on the current page. Stretch the rectangle and move it to just below the green horizontal bar.
Return to this page by selecting the "Objects, Components and Clones" link. You should see that the rectangle has been reshaped and moved on this page to match exactly how you changed it on the Main Page.
Copy the rectangle Object "Ellipse", return to the main page and select the Edit menu, Paste Copy operation. Change the "Ellipse" rectangle in any way and return to this page. You will notice that the original "Ellipse" Object has not changed.
The Include Operation is a powerful feature that provides numerous benefits.
Create a single navigation bar and Include it on all your pages. If you need to add or modify it in any way it will automatically change on all pages in your project.
Create a generic web page and Include the common elements to ensure that every page is identical.
Create common elements that can be shared by more than one page.
This project includes several Included Objects on most pages. Can you spot them?
The Object Editor (Engine and Spinner)
SiteSpinner and Web Engine include an Object Editor that provides several advanced options and capabilities. The Object editor can be Opened by selecting the Object Editor on the Components toolbar at the left or by right clicking on the Object you wish to edit.
Right click the ellipse Object "Ellipse" to open the Object Editor. The Components Dialog will display the name of the current Object and the name of all its components. The edit buttons for each component can be used to open the respective editors. The component drop boxes can be used to change the components that belong to this Object. (See the next section). Select the Help button for information on the other operations that are available.
Select the Transformation Dialog. This is an expanded version of the Quick Editor transformation operations and can be used to precisely set the Objects transformations. The Reset Button will reset all the Objects transformations to their default which will cause the Object to appear at the top left of the work window.
Select the Joints dialog. These operations are used in Web Engine to set the Objects pivot point (axis of rotation) and Attach point for articulated motion. See the animation tutorial for more details.
Select the Link Dialog. Use this dialog to assign a link to the Object. This is the primary way to assign a link to an Image, Title or Vector Graphics. Links assigned to a Text Object will take precedence to links within the Text. You probably would not want to assign a link to a large Text Object like this.
Select the Options Dialog. These special options can be used to target the Object to a specific output, to hide an Object while a page is loading and to create simple Mouse Over effects. Uncheck the box "Set Visible on Mouse Over". Exit the Object Editor and verify that the Auto HTML preview is selected in the Preview Format drop box. Preview the current page (Single Greater Than button or F9 function key). Locate the ellipse Object and move your mouse over it. This should cause it to disappear.
