Getting started with 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?