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.

CSS Animation

In the early days of the web, most
animation was done with Animated GIFs. They provided a little bit of movement
but due, in part, to the 255 color limitation on a GIF, the animations didn't
always look that great. Along came a little program called Future Splash and
their now famous "Baby on the Beach". Now THAT was animation. Future Splash
was quickly purchased by Macromedia and Flash was born. Unfortunately, Flash
was all too often overdone by animators and would-be animators who put bandwidth-consuming
splash pages on everything. Flash began to get a bad name when in reality, it
wasn't the program, but rather the use of the program that deserved the heat.
Flash has since evolved to do a lot more than animation and Flash is truly an
amazing tool, but what is really stealing the spotlight lately is CSS Animation
with the coming of CSS3.

As you would expect, the biggest problem
with CSS3 at the moment is browser adoption. Google Chrome, Opera (Labs
version) and Safari 4 support it fairly well due to the Webkit and Mozilla
engines they utilize. All well and good, but who is going to spend weeks
developing applications for 10% of the public? Firefox support is coming by
way of beta at the moment but not as of this writing in the release version.
Internet Explorer does not support CSS3 yet but has promised some support in
IE9, purported to be available around the end of this year.

Meet the DMXzone Advanced CSS Animator

The DMXzone creative gurus put their heads
together over this dilemma and came up with a solution that will work whether
you are running Chrome Latest or Internet Explorer 6! Enter the Advanced CSS Animator, a Dreamweaver
CS5 extension so versatile that it can determine what user selections will work
with just CSS and what selections need a little help to work in the browsers we're
stuck with today. Where needed, the

CSS gets a little help from jQuery scripts
that allow you to easily upload them to a Scripts Library so there is nothing
to stop your effects from working in whatever browser your users might be
viewing your content.

The Advanced CSS Animator installs
like any other Dreamweaver extension, by either double clicking on the file to
open the Extension Manager or opening the Extension Manager through the main
computer menu or from within Dreamweaver at either Commands/Manage Extensions,
Help/Manage Extensions or the Extend Dreamweaver button at the top of the
program interface window. If you use the second way, then just click Install
on the Extension Manager interface and navigate to where you saved the Advanced
CSS Animator and it will install the extension for you.

Restart Dreamweaver to get the extension
recognized by the program and you're ready to go. Since it's important to me
that this article show you the WOW factor, I'm going to take you through a few
demonstrations and explain how the extension works as we go along. With this
article, I have included a zip file with the completed examples used here and a
page called template.html to get you started. It's not a real Dreamweaver
template, but rather a very simple file with a div that defines a box that you
will animate in different ways in each demonstration.

Like any Dreamweaver Extension, the Advanced
CSS Animator requires an open document so you will need to create a new
HTML document in order to activate the Behaviors Panel to gain access to the
extension. As with Dreamweaver CS4, the Behaviors Panel is coupled with the
Tag Inspector panel. Once you activate that panel and select Behaviors,
clicking the + sign will reveal the dropdown list of Behaviors available
and DMXzone is listed. If you have other DMXzone behaviors installed, you will
see a menu listing all of them, but if not, then just Advanced CSS Animator.
Clicking on that choice will reveal the interface pictured below.

The Main Interface of the Advanced CSS Animator

The first thing we notice is two tabs
labelled CSS and Presets. The CSS tab allows you to select CSS properties
in three groups, Basic CSS Properties, Advanced CSS Properties or Custom property,
which allows you to create your own custom settings. The Presets tab is
shown on the right with the Built In Presets showing and a folder below it
where you can store Custom Presets that you create. Let's see how this works,
ok?

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.