Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the reasons Ajax is so popular with web developers is because it allows you to add cool effects like animation and fading items in and out, without the use of third party plug-ins. Adobe's Spry framework contains a full set of really cool effects and in this exercise, we'll see just how easy it is to apply them to your page. I have our Current.htm exercise file open. So if you are following along with me you are going to want to open this up. In our previous exercise we have completed our Accordion Widget, and we're going to add an effect to the image in the Accordion widget. So I am going to go on to a page and I am going to select the image. Now if you don't see the image, you will need to expand the first Accordion panel and remember you can do that by either clicking the Spry Accordion tab and clicking on the name of that, or clicking on the tab itself and then clicking on the eye icon that will show up on the right hand side.
So I am going to stick with current selection because I have my image selected. I can choose an effect duration. I am going to have the effect last for one second. So notice that again it's in milliseconds. And I can have it fade in or appear. I am going to have it appear because I want it to fade in. Now when I choose Appear notice that I have the option bringing it up from a certain opacity and making it appear certain opacity. So I can actually have the final appearance at a lower opacity, which is a really neat effect. I think what we're going to do here, however, is I am going to go ahead and do 40% to 100%. Now feel free to modify it if you want to or try different settings.
That's the part of the fun of using these effects. I am of the school of thought though that less is more and going from 0%-100% is a really strong effect. So you get this big flash going on. I want it to be a little bit more subtle. Now I also do not want to select Toggle effect. The Toggle effect means the first time, it fades in; the second time, it fades out. It's very useful for showing and hiding objects. So you can have that Toggle going on and it remembers what it did in the previous time and it will just reverse it the next time. So I will say OK. Now notice that in our Behaviors panel we have our Appear/Fade effect. And we also have a default event. So these spry effects are driven by events. Right now OnClick is default event. Well that's not really what I want. I mean for that to work someone would have to actually click on the image to be able to see this effect. I want them to see the effect when it loads up.
So we're going to go ahead and preview this and now I'll scroll down my Accordion widget and I'll open this up and now every time I click on a painting I can see that I get that nice little neat little sort of flashing/fading effect. Now, there is no limit to how many of these effects you can add to your page. You could animate this while it's fading in. I am of the design school of less is more, however. I think if you overload the page with too many effects it begins to really overwhelm the actual information on the page. So I want to encourage you to experiment with all of those spry effects to find out which one is going to work best for your applications. In our next exercise, we'll take a look at hand coding spry content.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.