Liven Up Dull Web Pages with Spry Page Effects

click to enlarge

Begin experimenting with Spry paage effects by creating a new HTML file in Dreamweaver CS4. Spry widgets cannot be inserted in a Web page until the file is saved, so give it a memorable name such as “SpryEffects.” In order to keep the elements being created separate and move them around easily, insert four AP Div layout objects. The easy way to do this in the Design window is click “Insert,” “Layout Objects” and select the “AP Div” type from the expanding menu. The second object you insert will cover the first, so drag it out of the way. Do the same for the remaining insertions until you have four rectangular boxes in the Design view. Click the last three and drag them over and down to maintain some good separation between each box.

In the top left box type this text: “Begin experimenting with Spry effects by creating a new HTML file in Dreamweaver CS4.” In the top box on the right, type this: “The File Save step is important, so let’s reiterate it when the user’s mouse passes over this box.” In the bottom box on the left, “Pay attention to this requirement—Wake up!” In the bottom right hand box, insert any image or icon you have on your PC, preferably a small one. Now go back and change the font in each of the text box objects to Bold in the Properties display.

Select the first object on the top left by clicking on it. Make sure to select only the one element, otherwise you will apply the effect to all of them. Then click “Window,” “Behavior.” From the pop-up menu, click on the + sign in the Behaviors tab and then click on “Effects.” Chose “Shake” from the list of effects, making sure the “onClick” option is selected as well. The next window offers ways to customize the effect but leave the default settings in place and click “OK.” Repeat these actions for the next two boxes (top right and bottom left) but make the effects “Grow/Shrink” and “Squeeze” respectively. On the image set the effect to “Appear/Fade.” Leave the triggering effect on all “onClick” for simplicity. Save your work. Click “File,” “Preview in Browser” to see your creation. Note: To use this feature without changing settings, you should save this work in the inetpub/wwwroot folder on the computer.

You can play around with the Spry page events that trigger animation, which include various actions such as onClick, onDblClick, onFocus, onBlur, other mouse events, as well as key events like down or up. The ones most often used are onLoad, onMouseOver, onFocus, and onBlur. The possible behaviors include Appear/Fade, Blind, Grow/Shrink, Highlight, Shake, Slide and Squish. Most of the effects are customizable as well, changing the duration of the event and the type of movement or movement, such as whether to grow or shrink the element or run the blinds up or down.

When you upload your finished HTML to a live site, you have to upload the Spry CSS and Javascript (JS) files generated by the wizard automatically.