Subtitles of the Movie

In this movie, I review a technology related to the Spry widgets that I covered in the previous movies. Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript. Effects are often used to highlight information, create animated transitions or alter a page element visually for a duration of time. You can apply effects to HTML elements without needing additional custom tags. I have some examples here on this page that I've shown previously. Let me show them again. I have three Spry effects here. The one on the right is a change color of this APDIV tag. Here is a wiggle of the APDIV tag, and just for variety, I have also effects applied to picture; the picture shrinks. In order to apply an effect like this to any element on your page, it must be currently selected or it must have an I.D. If, for example, you're applying highlighting to a DIV tag that is not currently selected, the DIV must have a valid I.D. value. If the element doesn't already have a value, you'll need to add one to the HTML code. You're going to apply these effects from the Behaviors panel. Right here, in the middle of panel there is a Effects Option. Notice you can Appear-Fade, Blind, Grow-Shrink, Highlight, Shake, Slide, or Squish. So these effects can alter an element's capacity scale, position and styling, such as background color. You can also create interesting visual effects by combining two or more properties. Because these effects are Spry based, when the user clicks on an object with an effect, only the object is dynamically updated without refreshing the entire HTML page. Let me now go ahead and demonstrate applying some of these effects. Let me start this review by removing the existing Spry effects that I have here on this APDIV tag, the shake there, selected here in the Behaviors panel, and then just click on the Remove Event; we'll get rid of it. I have another one here in this APDIV tag, a highlight, and likewise, let's remove that one. So the Spry effects include Appear-Fade, so let's add an Appear-Fade to this APDIV element by choosing Appear-Fade. Notice I have some parameters and properties that I can set here, including event duration, target element, current selection, or notice that I can also choose anything that has an I.D. attached to it on this page. Let's fade from 100%, click OK, and now let's preview this in the browser; save the changes, and we click on the APDIV, and it disappears. Let's refresh the page, make it disappear again. So the Appear-Fade makes an element appear or fade away. Let's delete that one, and let's do the next one. Highlight changes the background color of an element; this is the one that I had on there before. Let's highlight this, and let's choose an end color; let's go with black. I can choose a start color as well; let's choose blue, and a color after-effect; let's choose yellow. click OK. Again, the best way to learn these Spry effects is to apply them and then preview them immediately in your browser. So it goes to blue, fades to black, and then ends up yellow, a kind of interesting effect. The Blind Up and Down simulates a window blind that goes up and or down to hide or reveal the element. Let's apply this effect to my other APDIV right here. Here, the parameters are effect duration to blind up or blind down, percentages here from blinding up and blinding down, click OK, and let's preview this. You can just see how straightforward this is, requires some experimentation. And there's the blind. You also have a Grow-Shrink, which I demonstrated here on this image; a Shake, which simulates the shaking of an element from left to right. The Squish is interesting; it makes the element disappear into the upper left hand corner of the page, and as I mentioned before, you can also combine these effects. Let's go ahead and combine some of these effects here in that APDIV tag, and let's add a Highlight, as well a Squish, and let's target the current selection, and let's see how this is going to look. There's the change in color and also the Squish, a kind of interesting effect. Now when you use one of these effects, various lines of code are added to your file in the code view here. One line identifies the Spry effects.js file, which is necessary to make it work. Whatever you do, do not remove this line from your code, or the effects will not work. See if we can find that line of code that indicates the JS file. And there's the line of code for two of those JavaScript files, the Spry assets Spry effects.js and Spry menu bar.js. So there's the effects file, and there's the one for the Spry menu bar, and that'll then wrap up this section of the tutorial. In this session, you've got a good overview of Dreamweaver CS3 behaviors, Spry widgets, and Spry effects.