Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS6, CC
- open the "RevealFX_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "RevealFX_[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 Reveal FX created with DW Reveal 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 Reveal FX

In order to add a DW Reveal FX to a site, 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 Reveal FX into the page you need to select the HTML code in your page body where you want the effect to be applied. This code could be a paragraph or an image or any other type of html content.
If you have no code selected from your page a Dreamweaver message will appear: "You cannot add a DW Reveal FX between empty body tags".

Insert Dreamweaver Reveal Effects selection message

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

From here you can choose the effect that you want to be applied and edit its settings from the right sidebar.

Insert Dreamweaver Reveal Effects

B.1 Preview

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

Dreamweaver Reveal Effects Preview

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


B.2 Settings Sidebar

From the settings sidebar you will be able to edit the chosen effect. The parameters that you can change correspond to the chosen effect. There are some parameters that are dependent on the effect type - Fade, Slide or Zoom.


Dreamweaver Reveal Effects Settings Sidebar

B.2.a Name

The Reveal FX default name is RevealFX[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.

B.2.b Effect type

There are 3 effect types available: Fade, Slide, Zoom.
Each of these 3 effects have specific paramaters to edit.

B.2.c Fade


Dreamweaver Reveal Effects Fade animation settings

When the "Fade" effect is chosen inside “effect type” dropdown the following parameters appear:
Delay - represents the time before the effect plays. It is measured in milliseconds (ms) - (ms) - 1000 ms = 1 second.
Easing type - it's the type of the effect that is played. You can choose from the following values: ease, linear, ease-in, ease-out, ease-in-out, quick in, accelerate, super-fast, ease-in-out-back, ease-in-out-expo, ease-out-circle, ease-in-circle, ease-in-back.

B.2.d Slide


Dreamweaver Reveal Effects Slide animation settings

When the "Slide" effect is chosen inside "effect type" dropdown the following parameters appear:
Slide from - represents the point where the animation starts. It has the following options: top, right, bottom, left.
Distance - it's the distance that the object moves while playing the effect.
Fade from - it's the point where object fades in while playing the effect. It is measured in percents.
Delay - represents the time before the effect plays. It is measured in miliseconds (ms) - (ms) - 1000 ms = 1 second.
Easing type - it's the type of the effect that is played. You can choose from the following values: ease, linear, ease-in, ease-out, ease-in-out, quick in, accelerate, super-fast, ease-in-out-back, ease-in-out-expo, ease-out-circle, ease-in-circle, ease-in-back.

B.2.e Zoom


Dreamweaver Reveal Effects Zoom animation settings

When the "Zoom" effect is chosen inside "effect type" dropdown the following parameters appear:
Zoom level - represents the zoom value. It is measured in percents (%).
Fade from - is the point where object fades in while playing the effect. It is measured in percents.
Delay - represents the time before the effect plays. It is measured in miliseconds (ms) - (ms) - 1000 ms = 1 second.
Easing type - it's the type of the effect that is played. You can choose from the following values: ease, linear, ease-in, ease-out, ease-in-out, quick in, accelerate, super-fast, ease-in-out-back, ease-in-out-expo, ease-out-circle, ease-in-circle, ease-in-back.

B.2.f Play at (%)

This parameter tells the page when to play the effect (example:if you choose 30%, when the element is visible in viewport 30%, the effect will play).
You only need to add the value here as the percent (%) unit is added automatically.

Dreamweaver Reveal Effects - Play at option

C. Edit a DW Reveal FX

In order to edit the DW Reveal 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: "Please place the cursor inside the Reveal FX you want to edit." .

Edit Dreamweaver Reveal Effects

Click on the "Edit Reveal FX" button to edit its settings.

You can change the name, the effect type and edit its parameter values. After you finish changing the Reveal FX settings, click the "Update" button and the effect will be updated.

Edit Dreamweaver Reveal Effects

D. Add Existing DW Reveal FX

The "Add Existing DW Reveal FX" function helps you insert an existing Reveal 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 Reveal FX, you need to select the element where you want the Reveal FX to be added.
When you click the "Add Existing DW Reveal FX" button, a popup will appear where all the Reveal FX were inserted on a page within the existing Dreamweaver site are listed.

Add existing Dreamweaver Reveal Effect

Choose the existing Reveal FX that you want to be added to your site element.

E. Delete DW Reveal FX

In order to delete the Reveal 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 Reveal FX before deleting it."

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

Delete Dreamweaver Reveal Effects

F. 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 HTML 5 Doctype, because it has data type attributes that are HTML 5 specific. Click here for more information about the doctype and its importance.

G. FAQ

1. Can I use the license to build forms for 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.