WebDwarf Tutorials banner
WebDwarf logo
Objects

This tutorial contains an overview of objects -- things you put on your page. Included here are these topics:

What is an object?
Clean components
Geometry
Shading
Moving, scaling, rotating and skewing
Naming objects and components
Object Copies, Clones and Includes
Cut, Copy, Paste and Delete
Clones and included objects


What is an object?

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 selecting an object. An object comprises several components including geometry and shading.  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 transformations which determine its location, scale, rotation and skew.

Objects can share components. Many objects for example, may use the same shading. If you change the internals of the shading component, the shading on all objects that share the shading component will also change. This provides a convenient means to use common features throughout your page.

Quick Editor

Opening the Quick Editor will show the components the currently selected object is using:
Geometry: the shape and size of the object (Outline tab)
Shading: the color of the object (Shading tab)

Both tabs work in the same fashion. By selecting a component from the drop-down list boxes, you can attach a different Geometry or Shading to the current object. Detach a component from the object by selecting "No Geometry" or "No Shading" from the drop-down list boxes. You can attach only one component of each type.

To make images that are clones of each other, set the geometries and shadings to the the same for each. This is particularly useful for repeated objects such as buttons -- it means that if you edit one clone, WebDwarf automatically applies the same change to the other clones.

We discuss Geometry and Shading further below.
Clean components
The Publishing function and the main menu Edit > Clean Components, include a Clean operation that can be used to remove any objects or components that may have become orphaned -- no longer used anywhere in the project.



Geometry

Geometry is the visible component of an object. The different types of geometry include shapes, images, and text  -- others too. Geometry also includes a vector outline. This will be a rectangle for many things, like text, but shapes can be non-rectangular.

  1. Select the circle on the left toolbar to create an ellipse geometry
  2. Select the Outline tab in the Quick Editor. Adjust the Thick slider to 3 to add a thicker outline (3 pixels wide)
  3. Adjust the RGB (Red, Green, Blue) sliders to assign a dark blue color to the outline
Ellipse button
Quick Editor button
Circle with border
Shading

The shading component describes how the interior of an object will be shaded. This is different from the outline you shaded just above. Shading can be
Use the Quick Editor > Shading tab to adjust the color, brightness and contrast of an object. For more, see Gradient fills.

Shading also includes transparency. When applied to text geometry,  shading changes the background color of the text. For more, see the Rendering and Shading tutorial.

Let's try a bit of shading. Select the circle again and:
  1. Open the Quick Editor > Shading  tab. The circle should still be white inside. Notice that this shows as [no shading] in the Quick Editor. What you are really seeing as white is the white page background showing through
  2. Select Radial at the bottom of the Quick Editor
  3. Select the color 1 button and adjust the RGB sliders to create a light blue color.
  4. Select the color 2 button and adjust the RGB sliders to create a dark blue color.
  5. Adjust the Transparency slider to see the effect.
Quick Editor button
Starting cicle
Circle with flipped colors
Starting circle
Flip colors
Moving, scaling, rotating and skewing

An object includes transformations that determines its position, scale, rotation and skew. Change these with keyboard and mouse, or with the Quick Editor. More in the Manipulation tutorial.
  1. Make a circle object and move it with your mouse so that it is visible while reading these instructions
  2. Hold the Shift key down then press the Left Arrow key to squash the circle into an ellipse
  3. Hold the Ctrl key down and press the Down Arrow to rotate the ellipse to about 45 degrees
  4. Open the Quick Editor > Object tab. The Quick Editor will show the angle in the Rotate box 
  5. Note that with the Quick Editor open, the keyboard rotation is quite sluggish. If you have the Quick Editor open, it is easier to do the next steps instead
  6. Enter 10 into the Quick Editor > Object tab Rotate box. Use the rotate arrows to return the rotation to zero degrees.
Ellipse
Naming objects and components

When you create any object, WebDwarf will automatically create a unique name for it and display it in the:
For an important object, 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 punctuation -- stick to letters and numbers. More on Naming.


Drop-down object list
Quick Editor button
Try some renaming:
  1. Make sure the Quick Editor is visible. If not, press Ctrl+Q.
  2. Click on an object. Find its name in the drop-down page list and Quick Editor.
  3. Create an ellipse. Its name will now be displayed in the object drop-down list boxes
  4. In  the Quick Editor, replace the name that is displayed with ellipse
  5. Select some other object to see its name, then select the ellipse again to confirm its new name has stuck
  6. With the object ellipse still selected, select the Quick Editor > Shading tab
  7. If it is showing [no shading] as the shade, move the color sliders to create an instant new shade. Or better, make it a gradient fill that you will recognize again
  8. Give the new shading the name of "ellipse" by overtyping the name in the drop-down list in the Shading tab.
  9. Give the geometry the name of "ellipse" by overtyping the name in the drop-down list in the Outline tab.
You should now have an object called "ellipse" which has geometry and shading components that are also called "ellipse".

Ellipse
Cut, Copy, Paste and Delete

Duplicate an object and its components 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, (workpage top left) or the Edit menu items, or press Ctrl+C and Ctrl+V (standard Windows shortcuts). Copy copies an object from your page to the clipboard; paste copies from the clipboard to your page.

Remove an object by either Cutting (Ctrl+X) or Delete (Delete key). SiteSpinner makes a distinction between these two operations, but there is no difference in Web Dwarf.
Cut, copy, paste buttons
Clones

Recall that an object can share its components with other objects. This provides a convenient means to create common components that can be shared among different objects.
  1. Use the Rectangle button to create a new rectangle object. In the Quick Editor>Object tab, change the name of the object to rectangle
  2. Open the Quick Editor > Outline tab and change the name of the geometry to rectangle
  3. Open the Quick Editor > Shading tab. The name in the Shading drop-down list box will be something like shd123 which indicates the name of the new shade the rectangle would get if you added one
  4. Open the drop-down box. Scroll down to find the shading component called ellipse. It will be near or at the bottom since you just created it. (Maybe!)
  5. Scroll down the drop-down list box and select the ellipse color. This time it will be applied to the rectangle. The objects "ellipse" and "rectangle" are now using the same shading
  6. In the Quick Editor, adjust the RGB sliders to select new colors 1 and 2.  Notice how the colors change in both the rectangle and the ellipse as you make the changes
  7. Select the ellipse and open the Quick Editor > Outline tab
  8. Open the geometry drop-down box to find the "rectangle" geometry and select it
  9. After you reply "yes" to an "Are you sure" prompt, the ellipse should change to a rectangle.
Rectangle button
These two objects are now clones (sometimes called Instances) since they share the same geometry and shading. The only differences between the two are their transformations. You can position, scale, rotate, and skew them independently but if you change the shading or geometry (say, change the size), they will both change. Examples of where this becomes very convenient are:
Quick Editor > Link Tab

Use the Link tab to assign a link to the object. This is the only way to assign a link to an image, title or shape. Links within a text object will take precedence over links made by the Quick Editor. You probably would not want to assign a link to a large text object like the one holding the text you are now reading. But sometimes you can do it accidentally -- then you will see a big mass of underlined text.

See also Links: Problems with links

< Tutorials Home
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Quick Editor button
Quick Editor button