Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS6, CC
- open the "HoverFX_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "HoverFX_[version-no].mxp" file using Adobe Extension Manager;
- restart Dreamweaver.

Install Dreamweaver Reveal Effects using the Adobe Extension Manager

A.2 Where to find the extension in Dreamweaver


Extend Studio products are available in the "Insert" window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.
If the "Insert" window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

Adobe Dreamweaver Insert Tabs - Dreamweaver Reveal Effects


If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow.


Adobe Dreamweaver Insert Window - Dreamweaver Reveal Effects

The Extend Studio products should appear in the pop-up list.

Adobe Dreamweaver Insert Window - Dreamweaver Reveal Effects

A.3 Registration

A.3.1 How to register the extension

When you'll first start the extension, a registration pop-up will appear. Paste the code from the email that you have received from Extend Studio after buying the extension or click on "Use as trial" to use it free for 10 days.

Register Dreamweaver Reveal Effects

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This page contains animated Hover FX created with DW Hover FX . Not for commercial use!".
After you register the extension, all you have to do is to edit one of the effects that were created with the trial mode and update it in order to remove the "Commercial use" Javascript alert.
After registering the extension, the "Commercial use" Javascript alert will not appear when you view the page in browser.

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Add a DW Hover FX

B.1 Overview

In order to add a DW Hover FX, you need to create a html page inside a site. If you don't know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
In order to insert a DW Hover FX into the page you need to select the image from your page where you want the effect to be applied.
If you don't have an image selected in your page a Dreamweaver message will appear: "You must select a IMG tag in order to apply a HoverFX effect".

Insert Dreamweaver Reveal Effects selection message

After clicking the "Add Hover FX" button, the DW Hover FX editor will appear.

From here you can choose the effect that you want to be applied - which you can preview in the left side and edit its settings from the right sidebar.

Insert Dreamweaver Reveal Effects

B.2 Preview

Inside the Preview area you can choose from the 30 available hover effects. Here you can see each effect in action and also replay it if you want to see how it animates after you change its settings.

Insert Dreamweaver Reveal Effects

Each effect has predefined settings that you can edit from the right sidebar.


B.3 Settings Sidebar

From the settings sidebar you will be able to edit the chosen hover action. The parameters that you can change correspond to the chosen action.
The "Overlay" hover action adds the effect over your entire image area, while the "Caption" hover action pushes the image and appends a caption element to it.


Insert Dreamweaver Reveal Effects

B.3.a Name

The Hover FX default name is hoverFX[number]. You can insert any name inside the field. The name should not contain spaces or special characters and can include only letters and numbers, with no space between them.

Insert Dreamweaver Reveal Effects

B.3.b Hover Action

There are 2 types available: Caption and Overlay. The "Overlay" hover action adds the effect over your entire image area, while the "Caption" hover action pushes the image and appends a caption element to it.

Insert Dreamweaver Reveal Effects

B.3.c Easing


It represents the effect that plays when you hover the image. You can choose from the following values: quick-in, accelerate, super-fast, ease-in-out-back, ease-in-out-expo, ease-out-back, ease-out-circ, ease-in-back, ease-in-circ, ease, ease-in, ease-in-out, ease-out.

Insert Dreamweaver Reveal Effects

B.3.d Direction


This parameter appears in the settings sidebar when you select the "Caption" hover action.
It sets the direction from where the caption pushes the image - top or bottom.

Insert Dreamweaver Reveal Effects

B.3.e Color


Allows you to set the color of the image caption or overlay.

Insert Dreamweaver Reveal Effects

B.3.f Transparency (%)


You can choose the overlay / the caption transparency. It is set in percents. Choose a smaller percent value for a bigger transparency.
You will be able to preview it inside the left preview area.

B.3.g Font color


It allows you to choose the overlay or the caption text color.

Insert Dreamweaver Reveal Effects

B.3.h Duration (ms)


Represents the duration of the easing effect. It is measured in milliseconds (ms) - (ms) - 1000 ms = 1 second.

Insert Dreamweaver Reveal Effects

Allows you to add the link to the page you want to open when you click the image.

Insert Dreamweaver Reveal Effects

You can choose to open the page in the same tab or in a new tab inside the browser.

Insert Dreamweaver Reveal Effects

C. Edit DW Hover FX

In order to edit the DW Hover FX you have to select it inside Dreamweaver.
If your mouse cursor is placed somewhere else on the page, you will get the following Dreamweaver alert message: "You must select an image with a Hover FX effect in order to edit it.".
Click on the "Edit Hover FX" button to edit its settings.
You can change the name, the effect type and edit its parameter values. After you finish changing the Hover FX settings, click the "Update" button and the effect will be updated.
Note: When you change the preset, the content of the Hover FX will be modified - it will be replaced with the one from the chosen preset.

Insert Dreamweaver Reveal Effects

D. Add Existing DW Hover FX

The "Add Existing DW Hover FX" function helps you insert an existing Hover FX on one or more elements in your page, so that you won't have to recreate an effect with the same parameters and values again.
In order to add an existing Hover FX, you need to select the element where you want the Hover FX to be added.
When you click the "Add Existing DW Hover FX" button, a popup will appear where all the Hover FX were inserted on a page within the existing Dreamweaver site are listed.

Insert Dreamweaver Reveal Effects

Choose the existing Hover FX that you want to be added to the selected image.

E. Delete DW Hover FX

In order to delete the Hover FX you have to select it inside Dreamweaver. If your mouse cursor is placed somewhere else on the page, you will get the following Dreamweaver alert message: "You must select a Hover FX before deleting it."

In order to remove a Hover FX from an element in your page, click the "Delete Hover FX" button. The effect will be removed from the correspondent element.

F. Changing the content

After adding the DW Hover FX to the image and insert it, go back to the Dreamweaver design view. An "eye" icon will be added on the image.
Click on that icon and you will be able to change the Hover FX content.

Insert Dreamweaver Reveal Effects

G. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC.
2. The page where you use the form must have a HTML5 Doctype, because it has datatype attributes that are HTML5 specific. Click here for more information about the doctype and its importance.

H. FAQ

1. Can I use the license to add the extension in an unlimited number of websites?
Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support [at] extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install it in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.