WebDwarf Tutorials banner
WebDwarf logo
Manipulating Objects

This tutorial is all about manipulating objects generally -- selecting, moving and changing -- things that apply to just about any object. Topics covered here are:

Selecting an object
Selecting hidden objects
Selecting multiple objects
Selecting many objects at once
Making a permanent group
Edit objects of a group
Use the Ctrl key to temporarily ungroup
Select the object by name
Rotating, scaling and skewing
Z-order (front to back position)
Why worry about z-order?
Change the z-order
Locking objects
Controlling object outlines
Keyboard shortcuts (hot keys)
Ctrl+Z is your friend


Quick Editor button
Selecting an object

The simplest way to select an object is to click it with your mouse.

If you know the object's name, you can also select it from the Page toolbar drop-down list or the Quick Editor.

For important objects, consider giving each a unique name -- just so you can find them easily. Do this by over-typing the current name in one of the edit boxes. Some of the colored rectangles further down this page have special names, just to make identification easier.

See also: Naming objects



Selecting hidden objects

Sometimes objects may be positioned on top of each other. If so, hold down "Shift" on your keyboard while clicking -- this will cycle through each of the objects under your mouse. The workpage uses a last selected object preference. That is, if multiple objects are under your mouse pointer when you click, WebDwarf will re-select the current object if it is one of the objects. This means that you can manipulate an object even if it is completely behind another object.

Try this out with three rectangles like the ones below. Set them so they mostly overlap. Then try the following:
Drop-down object list
Drop-down object list
Quick Editor button
Selecting multiple objects

To select more than one object for some operation, perhaps a move, you have these choices:
Marquee selections do not include any objects the bounding box does not completely enclose. Suppose you have some objects on a background, and you want to select them only, without the background:
You cannot include a locked object in a multiple selection -- you'll get a helpful reminder if you try.

Marquee selection partly made
Selection fully made
A marquee selection partially made
Selection fully made
Selecting many objects at once

WebDwarf does not have the very useful Select All Below feature of SiteSpinner. However, you do have a Select All function which selects all objects on the page (provided they are unlocked). Ctrl+A is a convenient keyboard shortcut for this operation. A=All.
You can then drag the selected group to quickly close up or make a gap at the top of the page. You can also use the keyboard arrow keys to move the selection, even if it is off the bottom of your screen.



Moving Objects

With an object or group of objects selected, you can now move it around your workpage:
Quick Editor button
Making a permanent group

Until now, the groups we have been dealing with have been temporary groups -- also called selections, Click on something else, and the selection vanishes. To make your selection into a permanent group, click the main menu Arrange > Group function toolbar. Below the Group option there is another to ungroup again.

Use a permanent group if you want to keep a group of objects always together.

Also set a permanent group if you want to make a group of smaller images into one larger, more economical image. To do this, set Re-Render on for the group in the Quick Editor > Object tab. There is an example of this in the Fast Start tutorial: Merge the two images.
Quick Editor button
Edit objects of a group

Once you have grouped some objects, it becomes more difficult to make minor adjustments -- e.g. to move something slightly or edit text. If you know the object name, you can call up the object in the Quick Editor, and make the adjustment while the object is still part of the group -- even see the effect immediately on the workpage.  If you ungroup, which is very easy to do, you lose the group object's attributes (e.g. code, links etc). If the group has no group attributes, then un-grouping is the answer. If the group has attributes, there are two solutions:



Use the Ctrl key to temporarily ungroup

If you hold the CTRL key down when un-grouping a permanent group, the group will stay in place as a temporary group. This allows you to use CTRL+Click to add or remove objects from the group (as you can do with temporary groups) without losing the group object's attributes (e.g., Code, links, etc). Be sure to re-group immediately afterwards, before clicking anywhere outside the group, or you will lose the temporary group -- and its attributes.

When only one object remains in a temporary group, you will not be able to make the group permanent again. If you want to keep the group, add something back in at least temporarily -- you need at least two objects for a permanent group.

So to remove an object temporarily from the group:
Then to return an object back into the group:
It is very easy to click outside the temporary group and lose the group -- and its attributes!. If you intend to use this method, we suggest you make a little test project with say four colored rectangles and a group (give the group a name so that you know when you have lost it), and practise the technique there.



Select the object by name

When you know or have found the name of an object, you can select it by name
from say the Quick Editor, without having to click on it. It helps if you have given the object a meaningful name, instead of the default "objxxx". But as is often the case, it will have only the default name.

If the group is one you have created recently, perhaps having just copied it, you can find the parts near the bottom of the object drop-down list. If however you created the group some time ago, there is not a super-easy way to find the components of a group. The Quick Editor is helpful in showing a thumbnail of the object selected, once you have selected the object. But finding the object name is the hard part.

While previewing your page, use the "View Code" option of your browser to look at the code for your page. Search for the the name of the group object. You'll find all the individual objects that comprise the group often with names in sequence like Oobj868, Oobj869 and so on. These are the real object names with an "O" prefix. Armed with that information, you can then again select the object by name from say the Quick Editor. Confirm that you have the correct object via the Quick Editor thumbnail. Then again, you can make the changes without un-grouping.


Rotating, scaling and skewing

You can rotate, skew, scale and move most objects  either directly in the workpage or in the Quick Editor. The Editor provides the ability to enter a precise numerical value when you want it.

Most times you can resize or scale an object just by dragging an edge or a corner. If you want it to keep its correct proportions, hold the Ctrl key down while you drag.

If you can rotate or skew, the object will show special little handles, like you see on the rectangles to the right.
Quick Editor button
Scaling and rotation exercise

In this exercise, let's take the green rectangle on the left, rotate it, scale and position it to make a horizontal rectangle.

You can do this by creating your own rectangle on a fresh workpage (8x169px, with a radial gradient fill), or by copying the rectangle image -- just drag it to your workpage.
Vertical test bar
Open the Quick Editor by clicking the Quick Editor button or pressing Ctrl+Q.

Select the green rectangle with your mouse.

Move the mouse cursor over one of the rotation handles at the corner until it turns into a larger rotation handle.

Then rotate it by dragging the corner with your mouse mouse until the rectangle is almost horizontal.

As you hover your mouse over the rectangle, you should see two kinds of handles. Double crossed arrows (move handles) will reposition the rectangle.

Two headed arrow (scale handles) will stretch or shrink the rectangle.

Drag the corners until the rectangle is about 12 pixels high and 586 wide. Use the ruler bars at the left and top of your workpage to judge the size.

Use the Quick Editor > Object tab to set these values precisely. The width and height values are the reverse of what you might expect -- this is because of the 90
°
rotation.

Use the Quick Editor to set the precise rotation, Rotate, to 90.00
° and the scaling to x Scale=0.98 and y Scale=1.02.  Use either the up/down arrows in the Quick Editor or enter the values directly into the edit boxes.

If you dragged the rectangle image from your browser onto your workpage, the scale is different (about x:1.4, y:3.0). There you are working with an image. If you created your own rectangle you will be working with a rectangle not an image.

Use the keyboard arrow keys to nudge the rectangle so that the left edge is at x=100 and the top edge is at end of this text object.

At the end of this, you should have something that looks like the horizontal bar just below. And if you don't, who cares?  Hope you had fun doing it.

Quick Editor button
Rotate cursor
Move cursor
Stretch cursors
Quick Editor button
Resulting horizontal bar
See also: Rotating and skewing an image



Z-order (front to back position)

You are probably familiar with the idea of an x-axis and a y-axis on web-pages or graphs:
You can change the x-order and the y-order of objects just by dragging and dropping. Or in the Quick Editor, where you see the x,y coordinates of the center of the object.

The z-axis runs out in a third dimension from back to front -- like the pages in a closed book when you are looking at the front cover.

Your workpage displays objects in a back to front order -- objects at the front will hide objects behind. When you create a new object, it gets a z-order to place it in front of all other objects. The drop-down object list at the top of your page displays the items in z-order -- the last object you added is at the bottom of the list.



Why worry about z-order?

For simple pages, you needn't worry much about z-order. However here are three reasons why you should at least consider it:
Quick Editor button
Drop-down object list
Change the z-order

Control z-order from four buttons on the bottom toolbar. There are 4 options. From the left:
Remember "front" is bottom of the page -- this is opposite to the normal terminology where you might expect "front" to be the top of a document.

Try this example using the rectangles below -- or something similar on your own workpage. (Cloned from the Hidden Objects example above.)   
  1. Click on the topmost rectangle
  2. Press the Back button on the align toolbar. (Third button from the left in the group)
  3. This may move the top rectangle under the next one down. If it doesn't, click the Back button again and again until it does. Each click moves the rectangle one item further back in the z-order. Confirm this by inspecting the object drop-down list box
  4. Press the Forward button (second from the left). The rectangle should show on top again
  5. Experiment with the other buttons so that you feel confident in moving things forward and back in the z-order
  6. As a final test, move all rectangles to front. Then reverse the initial order so that the red rectangle is on top, then the cyan, yellow and pink
Z-order buttons
Z-order buttons
Locking objects

Once your object is positioned and set up correctly you may wish to prevent it from being accidentally changed. Do this by locking it.
  1. Select any object with your mouse. Move it a little to verify it does move
  2. Select the Key button on the Tools toolbar at the left. You can also select an equivalent in the Quick Editor > Object tab or press Ctrl-L on the keyboard. The Key icon should change to a Lock
  3. Try to move the now locked object -- it should refuse to shift
  4. Press the Lock button to unlock it
The Edit Menu Lock All and Unlock All commands will act on all objects on the page.

If an object refuses to move, check its Lock state. A locked object shows a little padlock cursor when you hover your mouse over it.

Alt+U will unlock everything on a page (hold down the alt key and press U on the keyboard).

You cannot include a locked object in a multiple selection.
Lock an object
Unlock an object
Padlock
Controlling object outlines

On the WebDwarf workpage, certain objects display in particular ways. A selected object has a dashed selection outline, and sizing handles -- the little square boxes. Objects with zero width outlines, still display as a dashed outline, even though in the final version of your page, the dashed outlines will not show.

Sometimes you may wish to not see these outlines -- you may be looking for precise alignments and the default outlines get in the way. If so, you can hide some or all of them.

Here is the full list of hotkeys (some of these are on the View menu):
1 to 4 are toggle functions. One operation hides the item, a second operation shows it again. If you get into a tangle, ALT+5 resets everything to the usual defaults. You may not see the effect of a command unless you have a selected object or zero width outlined object on your page.
Keyboard shortcuts (hot keys)

Many operations have keyboard shortcuts, written in the menus as for example:
Some common ones that are used in most Windows programs:
Another useful shortcut used by WebDwarf:
See also: Access Keys which are keyboard shortcuts for web pages.
Ctrl+Z is your friend

If you accidentally stretch or transform something you only meant to move, try Ctrl+Z to undo. Also available under Edit > Undo.

Another way of undoing changes that involve accidental transformations is the Quick Editor > Object tab Reset button.

See also:
Workpage tutorial
< Tutorials Home
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Rotate and skew handles