This is now an external website
This is a continuation of the Intro document included with Web Designer,
that explores some more features.
Pop-up layers
Let’s see how easy it is to create pop-up effects like those on this page
where a pop-up speech bubble appears as you move the mouse over
certain text or graphic objects.
This is done using Layers. Open the Layer Gallery with this icon on the
top bar. The Layer Gallery should look like this, below right.
To create a pop-up effect, create a new Layer - click the New button and
give it a name like Mypop-up. This will add a new layer to the gallery,
and it will have two check-boxes both checked.
One layer is always highlighted - shown in gray - the MouseOff layer is the
bottom, base, layer and is shown highlighted here. The highlighted layer
is the current layer, where new objects will be added. In your Layer
Gallery, the new layer should be highlighted, so lets add a speech bubble
like the one shown top right. Open the Designs Gallery, go to the Speech
Bubbles category and drag ‘Bubble 5’ onto the page.
This is repelling by default. We do not want this, so in the Selector Tool
click on your new speech bubble to select it. Then right click on it and
select the ‘Repel Text Under..’ option and choose ‘Don’t repel’. Now you
can drag the object around the page and it will not repel.
Customize the content of the speech bubble. Using the Text Tool you can
edit the text. Note how the container automatically resizes as you type.
You can make the text column wider, by dragging the end of the column
indicator under the first line - try it (you have to be in the Text Tool).
Next choose what you want to trigger the pop-up. It can be anything,
some text, or a graphic object. For now just draw a simple rectangle - or
you could import a basic shape, such as this triangle from the Shapes
section of the Designs gallery. Select it the usual way, and click the Link
icon on the top bar.
You can trigger the pop-up either by just moving the mouse over it, or
when the viewer clicks on the linked object. To make it appear when
they click, use the Link tab of the dialog, but to make it appear when
they mouse-over the trigger item, use the Mouse-over tab and choose the
‘show pop-up layer’ drop down and the new layer you just created.
That’s it. Preview you website and move the mouse-pointer over your
shape. The speech bubble should appear and disappear as you move over
and away.
Your Layer gallery will look something like this now. To prevent the
speech bubble getting in the way you can hide the new layer. Just un-
check the ‘eye’ check box of the new layer.
Important: You should select the MouseOff layer when you’re done
because otherwise all new text and added objects will get added to the,
now invisible, new layer.
One last point. you can make the pop-up object appear anywhere on the
page, so it doesn’t have to pop-up immediately over the trigger object.
Just drag it to the desired position on the new layer.
Have fun.....
Last updated on 11th March 2009
This is an automatically resizing stretchy
speech bubble. You can find it in the
Designs Gallery under the ‘speech bubble’
category, called Bubble 5. Just drag and
drop it on the page.
The current layer is shown highlighted.
Just click on any layer name to make it the
current one. All new objects are always
added to the current layer. e.g. if you drop
anything on the page, draw anything or
create a new text object.
Use the check boxes under the ‘eye’
column to make the layer visible or
invisible.
Remember to select the MouseOff layer,
which is the main base layer for your web
page.
