Be the first to write a review
Getting started with the Advanced CSS Animator
Nancy will introduce you to the DMXzone’s latest extension, the Advanced CSS Animator
In this article, Nancy will introduce you to the DMXzone’s latest extension, the Advanced CSS Animator. She will introduce you to the extension and take you through 3 very simple examples of how you can use it to create some wonderful CSS Animation. And, unlike CSS animation that only works in a few browsers, the Advanced CSS Animator has seamlessly integrated jQuery functions so they work in all major browsers.
Example 3: Watch it Grow!!
Open template.html one more time and this
time, save the document as scale.html. Click on the box to select it and open
the Advanced CSS Animator. On the CSS tab, go to Advanced CSS Properties and
dropdown the CSS Transforms group. Select "ScaleX" and the right arrow to move
it to the Used Properties box. Again, you have the same From and To box and
this time, you will put 1 in the From box and 2 in the To box in order to get it to scale the width to twice its size. Now we want to add
another transform so this time, select "ScaleY" and the right arrow to move it
to the Used Properties box. Again, you have the same From and To box and this
time, you will put 1 in the From box and 2 in the To box in order to get it to scale the height by the same amount.
Applying the Scale properties to scale the box to twice its size
Specify what you want for the Easing property and the Duration and click OK. Back in the Tag Inspector, choose the Event to trigger the animation. I used onMouseOver, but you could use onClick or whatever you like. Check the result in Live View or in your browser. Very nice, but the results of this transition dictate even more the necessity of having a way to get back to the initial state, so select the box one more time and open the Advanced CSS Animator again and choose CSS/Advanced CSS Properties/CSS Transforms and choose Scale X and Scale Y as we did before. This time, select 2 in the From box and 1 in the To box and select the Easing and Duration values you wish to use. Click OK and select the inverse trigger event in the Tag Inspector (onMouseOut if you used onMouseOver the first time, etc). Try Live view or your browser to see what happens. Depending on the event you used, you should have the box and its contents grow to twice the size when the mouse is over the box (or the box is clicked) and it should revert to its original size and position when the mouse is off the box.
In my next article, I'll show you how to use the Advanced CSS Animator in your every day work, whether you design for Fortune 500 corporations or make children's games. Until then, take a look at some more examples of this magnificent tool and get a copy so you can make some cool stuff all your own!
Check out some cool demo's at:
In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".
Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.
You must me logged in to write a review.