The Basics: Creating and Animating the Calendar

Introduction

In this tutorial we will explain how to animate your calendar. Below is an example of the end result.

Insert the DMXzone Calendar on your page. All the settings in the first tab are also displayed in the preview window of the extension.

1. Define your site in Dreamweaver and Create a new page
   Define your site in Dreamweaver and choose the option to create a new page. You can read more about this at this page.

2. Applying the extension
   Choose the  icon from the DMXzone object bar to apply the extension. The following  popup appears:
   
   
   
   

• Setting the DMXzone Calendar Animation Options
  At the Animation tab, the Effect sets the animation effects for opening and closing the calendar. Some of the effects have an additional option for the Direction in which the effect is displayed.
  
  
  
  The available effects are:
  
  slide – slides down the calendar from the left/right/up/down on the form field on open and slides it back on close;
  
  scale – scales the calendar from a small square to a big one on open and scales it back to a small one on close before it disappears;
  
  puff – scales down and fades in from a puffed up version on open and puffs up and fades out on close;
  
  pulsate – pulsates and fades in on open; pulsates and fades out on close;
  
  fold – unfolds right and down on open; folds up and left on close;
  
  explode – implodes the calendar on open and explodes it on close; what is important to remember for this effect is that it is rather heavy and only shows up right when the speed is set to a custom value of above 500 (1000 for a better effect)
  
  drop – drops and fades in the calendar from the left/right/up/down on the page;
  
  
  clip – opens by revealing itself from the middle in a clipping motion and closes by clipping back to the original position;
  
  bounce – bounces in from the left/right/up/down on open; bounces out from the left/right/up/down on close;
  
  Slide and Fade – slides up and fades from the top left corner under the form field on open; slides back up and fades out to the same corner on close;
  Fade
  
  The available Directions (left, right, up, and down) are applicable only to the effects slide, drop, and bounce and pertain to the direction from which the effect starts.
  
  
  
  We set the Effect to "slide" and the Direction to "up".
  
  
  


• Setting the Speed of the Animation Effect
  At the Animation tab under the Speed setting, you can choose from three predefined speeds (slow, normal, fast) or enter a custom value (a positive integer, 1000 = 1 second) in milliseconds
  
  
  
  Note that if you have more than one month displayed the speed of your effect will be faster to keep the overall duration the same.
  
  
  
  We set the Speed to a Custom value of 500.
  
  
  
  
  
  
  
  
  
  
  
  The Easing effect is used to fine tune the type of animation.
  
  
  
  To see a more detailed explanation of the types of graph-like effects click here  
  
  Your Easing effect should be in coherence with the main effect that you selected earlier. We will use linear easing (the first one) for this tutorial.
  
  
  We see our effects in the Preview field.
  
  
  
  Press OK, save and preview the result in your browser.