Panache by PVII User Guide

Installing Panache

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher, including Creative Cloud versions. To install, open the relevant Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Relevant Extension Managers

For Dreamweaver MX, MX 2004, CS3, CS4, CS5, CS5.5, and CS6, use the Macromedia or Adobe Extension Manager that automatically installed with Dreamweaver.

For Creative Cloud versions, use the free PVII Extension Manager for Adobe Creative Cloud:

PVII Extension Manager for Adobe CC
( Windows and Mac)

Selecting Elements to be Animated

With Panache, you're going to be working with elements that are already on your page—elements such as headings, paragraphs, images, and DIVs, for example.

How to Select

Place your cursor inside the element you wish to animate. To ensure a good selection, you can use the Tag Selector bar that runs along the bottom of your Dreamweaver window. For example, to select a paragraph (like this one), place your cursor inside and click the corresponding <p> tag on the Tag Selector bar.

When you select the <p> tag, the paragraph will highlight. Use this method to select any element. You can also use this technique in code view, in which case the entire tag, along with its content, will highlight.

Things to Consider

When you plan your animations, there are a few things to keep in mind.

Single or Multiple Elements

You can animate a single heading and its following paragraph separately, or you can group them together and animate them as a unit. For example, to animate a heading and 2 related paragraphs...

<h1>Hello World</h1>
<p>Take me to your leader.</p>
<p>I come in peace.</p>

Wrap a generic DIV around it and select that DIV for your animation:

<div>
<h1>Hello World</h1>
<p>Take me to your leader.</p>
<p>I come in peace.</p>
</div>

Implode and Elastic Animations

Implode and Elastic animations should be restricted to a single element, as they do not work well when grouped inside a containing DIV.

Typewriter Animation

The Typewriter animation should be limited to content comprised of either headers, paragraphs, or a combination of both.

Run Typewriter:

Harmony and Layout Builder Considerations

Panache works very well in Harmony or Layout Builder pages. However, you cannot select a Harmony or Layout Builder DIV as your element to be animated. If, for example, you want to animate this entire Harmony column:

<div class="hmy-content hmy-left">
<p>Column content...</p>
</div>

Wrap the inner content inside a DIV. You can optionally assign a class name if you'd like to style that content:

<div class="hmy-content hmy-left">
<div class="my-content-wrapper">
<p>Column content...</p>
</div>
</div>

 

Viewports for Imploding and Elastic Animations

Imploding or Elastic animations are quite unique and eye-catching. To optimize the effect it is key that you choose the appropriate viewport. Let's do a little example and see how it works. Click the button below to bring in a heading using the Elastic Character animation.

Run or Replay Elastic Animation

Since we are relatively close to the middle of the page, an appropriate viewport would be the root Harmony DIV (p7HMY_2) that contains the content of this guide. That is, the area between the menu and the footer. This is a good choice viewport choice because the Implode and Elastic animations are staged between 200 and 600 pixels north and south of the element's final resting place. Our chosen viewport, then, will provide an ideal container.

Now you can choose the page-wrapper DIV as a viewport.

Control Behaviors

Panache ships with a Control Behavior that you can use to make Manual Triggers. These triggers can be used to Play and/or Replay animations, or to stop all animations, which in effect is tantamount to a Skip Animation control. To create a manual trigger with a Control Behavior, follow these simple steps:

Create your animation

After creating your animation, switch to code view. Make a new paragraph just above the root PCH DIV for your animation, which looks like this.

<div id="p7PCH_3" class="p7PCH...>

Type the text for your trigger on the new paragraph:

<p>Play/Replay Animation</p>
<div id="p7PCH_3" class="p7PCH...>

Switch back to design view.

Select the text inside the paragraph and type the following into the Link box on your Property Inspector:

javascript:;

Place your cursor inside the linked text and open the Tag Inspector panel:

Select the Behaviors tab, then the + sign.

Choose Studio VII > Panache > Panache Control Actions

The Control Action UI will open:

From the Panache ID list, choose All or the ID of the animation you want to trigger. The ID can be found on the root PCH DIV:

<div id="p7PCH_3" class="p7PCH...>

In the Action list, choose from:

Play/Replay

This action creates a toggle control. The first click/tap will run the animation. Click/tap again and the animation will replay.

Stop

This action will stop all animations and set all animated elements to the states they would assume if all animations had run and completed.

Reset

This action resets all animated content to their initial default states.

Tip: Run this behavior for All animations to provide a Skip Animation link. All staged content will be visible.

Trigger Immediately - No Delay

Checked: The trigger behavior will fire and all affected animations will run or stop immediately, without delay.

Un-checked: The behavior will use the existing Delay settings from your animation(s).

Click OK to build your Control Action link.

In Code View, your link will look something like this:

<a onClick="P7_PCHctrl('p7PCH_1','replay',1)" href="javascript:;">RUN</a>

Your Behaviors Panel will show the assigned Behavior:

Double-clicking Panache - Control Actions will open the Control Action UI in Modify Mode.

You can also click the + sign to add a second Panache Control Action to your link, which could be very handy if you wanted your link to control 2 or more animations in proximity. With 2 Actions assigned, the panel would look like this:

And your code would look like this:

<a onClick="P7_PCHctrl('p7PCH_1','replay',1); P7_PCHctrl('p7PCH_2','replay',1)" href="javascript:;">RUN</a>

Manual Trigger Styling

We've included 2 CSS classes in the Panache style sheet that you can customize. The classes will automatically affect all Panache Manual Trigger links on your page. The classes can be found near the bottom of your CSS file:

a[onclick^="P7_PCHctrl"] {
font-size: inherit;
}
a[onclick^="P7_PCHctrl"]:hover {
font-size: inherit;
}

As they are, these classes do nothing. But once you customize them, they can take on any look you want. Here are the rules we are using for the animation trigger links on this page:

a[onclick^="P7_PCHctrl"] {
display: inline-block;
padding: 15px;
text-decoration: none;
border-radius: 4px;
transition: all linear .5s;
border: 1px solid;
background-color: #F33;
color: #000;
}
a[onclick^="P7_PCHctrl"]:hover {
background-color: #000;
color: #FFF;
border-color: rgba(0,0,0,0);
}

Accessibility

Panache, as well as Panache Manual Triggers can fit inside an accessible web site. If you need to meet certain accessibility standards, we recommend adding an aria-label attribute to your trigger links. Consider this example:

<a href="javascript:;" onClick="P7_PCHctrl ('p7PCH_3','replay',1)" aria-label= "This link triggers the animation of an element already in the page. Please disregard."> Run or Replay Elastic Animation</a>

That's it. All other aspects of Panache are fully accessible.