Behaviours

Dreamweaver behaviours are actions triggered by an event from the user. These events are something carried out by the user such as clicking the mouse. The actions are written by the program in JavaScript.

You attach behaviours to an object in the web page, then you select an event to trigger it.
When setting up a behaviour click on object to apply it to (all page, image, layer etc)

Look at example below of a 'sound' behaviour triggered when page loads.

Some behaviours are simple, others are complex.

Some simple behaviours to try out.
Bring down the behaviours panel and examine them in the program before clicking on the coloured text below to run them.
(1) Check Plugin will check if you have a particular plugin before carrying out an action.
In this example if you have Flash you will go to a Flash enabled page, otherwise to a non flash enabled page.
Another example could be Windows media player.

(2) Check browser can be set up to see if you have a particular set up before proceeding.This seeks to sort out what happens if people are using old browsers

(3) Go to url acts in the same way as typing in the web address of a page you want to visit

There are a lot of behaviours as can be seen here. They are opened from the docked behaviours panel.

The example below show a behaviour called 'Play Sound' created by clicking on the + symbol in the Behaviours Panel. Clicking on Bart makes him make a sound.

As there are so many behaviours only a few will be illustrated in detail.

(1) 'Open Browser Window'

(a) Insert an image into the web page . This will be used to trigger the new window.
(b) Open the Behaviours Panel and select the image inserted
(c) Select the plus button in Behaviours and select the Open Browser Window behaviour.
(d) In the dialogue box select the URL of the page to open, select its size and what attributes you want it to open with by clicking the appropriate boxes.
(e) Select 'onClick' or on'MouseOver' event.
(f) Preview the behaviour.

Try this one below by moving the mouse over the graphic.

(2) Pop Message

This is another behaviour which opens a message window when the user triggers it.
You can use it together with another behaviour, as below, but use 'onClick' to trigger it.

(3) Drag Layer

This behaviour creates layers that the user can drag around the browser window.
It could be used to move layers that are in the way of other things on the page or to allow the user to build up a layer from parts. The information layer at the start of the page is controlled by a drag layer behaviour.

To build up a picture follow the following steps
(1) You need first to create the layers to be moved and a target layer. Name the dragable layers.
(2) Put images in each of the dragable layers.
(3) Click on the behaviours panel in Window menu
(4) Select all the panels by clicking on the body tag
(5) Click on the + sign on the behaviour panel and select drag layer. OnLoad is selected by default and it is best left this way. You could select OnClick, but this gives some problems unless set up correctly.
(6) Build up a 'Drag Layer' behavoiur for each named layer to be moved. In the dialogue box select each layer to be moved in turn. You can constrain movement of each but work out how much to do it in each case, so it is best left 'unconstrained'

Have a look at this example by clicking on the image below.

Timeline Animation

You can create time based animation in Dreamweaver by using the Timelines Panel in the Window menu. The animations are much cruder than you can make using Macromedia's specialist programs, Flash and Director. You don't need any specific plugins to play them, but you need a new browser version capable of running DHTML.

NB: You must attach animations to layers, so make the layers containing the images beforehand and place them on the page. Then load the Timelines Panel from the Window menu.

Have a look at a crude animation created using timelines by clicking on the boat from within browser.

Another timeline created as a banner for a site.

How does Timelines Panel work?

Have a look at the illustration below.
This shows
(1) The FRAMES are like the columns of a spreadsheet or table or the frames of a movie film to record to movement
(2) The CHANNELS (like the rows of a spreadsheet or table) enable more than one object to be animated at the same time
(3) The red rectangle is the PLAYBACK HEAD. You can drag it to view a particular frame.
(4) The B channel allows you to set behaviours to execute in a particular frame.
(5) The top line has PLAYBACK CONTROLS to test the animation and sets up number of frames per second (Fps)
(6) AUTOPLAY check box adds the 'PlayTimeline' behaviour to the body tag when the page loads.
(7) LOOP check box sets animation to play continually, although you can set the number of playbacks.

Creating Animations

(1) Select the layer to be animated.
(2) Go to Modify menu and select Timeline
(3) Move playback head to frame 1 if necessary.
(4) Pick up the layer by its handle and drag it across the path wanted.
(5) When you reach you destination release the mouse
(6) Test the animation by using the playback controls.

Animations can be complex involving a number of layers and can be linked to behaviours. These are added by clicking on the desired frame in the B channel and then starting a new behaviour in the Behaviours Panel
They can be edited, but only at KEY FRAMES as between the animation is interpolated.
This is illustrated below.

Dreamweaver Index