In this project I wanted to demonstrate a fun animation idea that you might find useful in some of your projects.

It is everyone’s favorite information panel that is tucked away until it slides out of hiding when you call upon it!  (Insert fireworks display here)

We have three slightly different examples on the screen for you – let’s take a look at each of them.

Right Side Panel

This panel is made up of three smartShape elements.

1. The large text box in blue.
2. The grey bar that identifies the panel.
3. The grey button with the little chevron that changes direction which is used to open and close the panel.

The button has an Execute JavaScript action on it which runs the following code. You should notice that I am using a single variable here called help to track if the panel is open or closed.

if (window.help==0) {

$(document).ready(function() {
$(“#infoPanelc”).animate({left: “-360px”}, 1000);
$(“#panelBarc”).animate({left: “-360px”}, 1000);
});
cp.changeState(“panelBtn”,”close”);
help=1;
}

else {
$(document).ready(function() {
$(“#infoPanelc”).animate({left: “0px”}, 1000);
$(“#panelBarc”).animate({left: “0px”}, 1000);
});
cp.changeState(“panelBtn”,”Normal”);
help=0;
}

The default state for the panel is closed so we have the variable help with a default value of zero. When the user clicks the button we check that variable. If it is zero – which it is – we are going to animate two things – infoPanel and panelBar. We are also going to change the state of the button so that the chevron points the other way and then change the variable to a value of 1.

The next time you click the button – the help variable will not be zero which means that the else statement will fire this time. Basically – we are doing the opposite of what the if statement accomplished. We animate the two items back to their starting point, change the state of the button back, and return the variable value back to zero.

Rinse and repeat as often as you wish.

Left Side Panels

On the left side of the screen you will find four panels which are actually images I crafted in PowerPoint and brought to the stage.

In the upper left corner you will find four colored buttons and a command to choose a color. Each color, as you might guess, controls the corresponding colored panel. Since each panel only has a single button to control both the opening and closing – we need to use variables again to track whether the panel is open or closed. As such, I created four variables called orange, green, blue, and yellow to match the particular panel they are tracking.

What you might observe here is that I am actually playing with the z-index values of these panels so that the panel which is open is always underneath so that it allows the remaining tabs to be visible. I am also not allowing more than one tab to be open at a time. So if you open a panel and then choose a second color – the first panel will close while the second is opening.

if (window.yellow==0) {

$(document).ready(function() {
$(“#blueTabc”).animate({left: “0px”}, 1000);
$(“#yellowTabc”).animate({left: “350px”}, 1000);
$(“#greenTabc”).animate({left: “0px”}, 1000);
$(“#orangeTabc”).animate({left: “0px”}, 1000);

$(“#re-yellowTabc”).css(“zIndex”,”1″);
$(“#re-blueTabc”).css(“zIndex”,”10″);
$(“#re-greenTabc”).css(“zIndex”,”20″);
$(“#re-orangeTabc”).css(“zIndex”,”30″);

});
blue=0;
yellow=1;
green=0;
orange=0;
}

else {
$(document).ready(function() {
$(“#yellowTabc”).animate({left: “0px”}, 1000);
});
yellow=0;
}

We have a very similar  IF/ELSE  statement like the one for the information panel on the right side of the screen. So the if statement says that if yellow equals 0 we are going to perform four animations – one for each panel. You should notice that the yellow one moves the left edge (currently off screen) in a positive direction (right) by 350 pixels and the other three panels (because we don’t know which might be open) move back to their starting position of 0px. **Note – even though the left edge of the objects are actually at a negative X-axis value, the starting position – wherever it is – uses a zero reference.**

You then see that we are adjusting the z-index values for each of those four panels just so that yellow ends up underneath. This took a bit of digging to figure out as the ID  ( yellowTab )  that we gave the object is not the ID that captivate is using. Just like the addition of the letter c (for Canvas) – to the end of the ID for manipulation of the object – we had to add an re- to the beginning of that in order to change the zIndex property.

Then we adjust all off the variables to reflect which one is open and which ones are closed. As with the right side panel – clicking the button again will close the panel. Notice that if I click the same button a second time in a row and the else statement is fired, that I only need to animate the yellow tab back since the others would already be closed.

Bottom Panels

These were the most challenging of the panels. I was not happy with the look of a separate button but trying to animate buttons themselves was not working well. I could get them to move the first time but then they would lose their button properties and then if you simply hovered over the original location of the button it would snap back to that position.

I still wanted to achieve something a little better so believe it or not – the bottom panels actually use two buttons – one to open and a different one to close. So each panel has four smartShapes.

1. Opening Button
2. Text Area Shape
3. Tab
4. Closing Button.

By default, all the panels are closed with the opening buttons shown and the closing buttons hidden. When you click the opening button – it immediately is hidden but triggers the animation of both the Text Area Box and the little tab. When the animation is complete – the closing button appears but is zIndexed to appear under the text box but above the tab and is the same size as the tab so that it does not stand out.

Now you can click the tab again to close the panel but this time – the closing button is immediately hidden so you don’t see some weird box in the middle of the screen and the two shapes animate back to the starting position where the opening button reappears.

No variables are used in this example since there are separate buttons with different code. The closing button will close the respective panel but the opening buttons will not only open the respective panel but close all the others just like those on the left side of the screen.