Scroll To Top

PVII Headline Effects User Guide

Overview

Headline Effects Magic (HFX) is a Dreamweaver extension designed to breathe new life into your web pages. The HFX system provides a fully automated interface in which you can choreograph intricate animation sequences for text items on your page. While it is designed to present engaging animated heading text it can be assigned to any string of text on your page.

Use HFX to creatively enhance your message, draw focus, and increase user engagement.

What is HFX?

HFX is a text rotator system that applies animations to each rotation. The Text Items can consist of any text phrase, one or more words.

Text Items can be displayed in one of 3 Configurations:

HFX Asset Folder

When you create a HFX animation, the system will automatically create the asset files and folders necessary, and link them to your page. The main asset folder is called p7hfx.

When publishing your site, make sure to upload the entire p7hfx folder.

HFX Assets Folder

 

Installing the Extension

Extensions are installed using the Adobe Extension Manager (for CS6 and older), or a third party Extension Manager (all DW CC versions).

Unzip the product file

Unzip your product file before installing.

Save for a rainy day

Save your original product file in logical folders, named and situated where you will be able find them when you need them. A good idea is to create a new folder on your hard drive and name it PVII Extensions. When you download a product file from us, place the zip file in this folder.

Extension File Types:

Extension installer files come in 2 formats: MXP and ZXP.

To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.

To install this product:

Accessing the Headline Effects Interface (UI)

The Headline Effects Magic user interface is a simple, straightforward layout which will allow you to create and/or modify modern, cutting edge Headline Effects in seconds.

Establish a text selection or insertion point

With HFX, you're going to be working with text that is already on your page; text in elements like headings or paragraphs.

-Select the word ( or words) that you wish to apply the Headline Effect to:

-Open the HFX interface by using one these three methods:

- Insert Bar

Choose the PVII tab (or the PVII category if your insert bar is configured with a drop-down menu)

Insert Bart Icon

The Headline Effects icon is the last one in the screen capture above.

Note: Dreamweaver CC ships with the Insert Panel / Bar set to Panel View as default. To change this to the classic Insert Bar of icons that run horizontally across the top of your application window, follow our 'Restoring Dreamweaver's Classic Insert Bar' tutorial.

- Insert Panel

Choose the PVII category from the drop-down list at the top of your Insert Panel.

Insert Panel

The Headline Effects icon is the last one in the screen capture above.

- DW Insert Menu

You can always open the user interface using the main Dreamweaver menu:

Choose Insert > Studio VII > Headline Effects Magic by PVII...

Insert Menu

The Headline Effects magic user interface will open in Create mode with the selected text already entered as the first text item.

Create Headline Effects Interface

-Click the Add Text Item button to add more text items for the HFX system to rotate through.

-Set your options and then click OK to create the HFX instance.

 

Opening the Headline Effects Modify Interface (UI)

-To open the Modify interface click inside the text of an exciting HFX instance.

Click inisde existing HFX

-Click the Headline Effects Magic icon in the Insert Panel or Insert Menu.

The Headline Effects UI will launch in the Modify mode:

Modify Interface

-Using the Modify Mode you can make changes to any of the settings and options at any time.

Managing the User Interface Items

Mode

Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the id of the HFX instance being modified will also be displayed.

Text Item List

This box displays the string of text, one or more words, to be animated; one line for each string of text. Select (click) the line you wish to act on.

Add Text Item

Click the Add Text Item button to add a new string of text. A new line will be created with the default text New Text Item. The new line will be created immediately after the currently selected line.

Delete Text item

Click the Delete Text Item button to remove the currently selected line.

Move Up

The Move Up button will move the selected line in the Text Item List up one row. Successive clicks will keep moving the line up, one row per click, until the line is at the top of the list.

Move Down

The Move Down button will move the selected line in the Text Item List down one row. Successive clicks will keep moving the line down, one row per click, until the line is at the bottom of the list.

Item Text

Enter the text string you wish to display, one or more words. The system will display New Item Text as the default text when first adding a new Text Item. The box cannot be left blank.

Item Styling

These options apply to the Text Item currently selected in the Text Item List.

Item Styling Options

Color

Use the handy color picker or enter your desired color code into the box. The format for the colors can be hex, rgb, rgba, or color names. You can edit, add or remove these colors at any time.

Color Picker

Size

Select one of the preset font size options to display the currently selected Text Item at a different size. This option has no effect on the font size when left at the Default setting.

Size Options

Bold

Check this option to have the Text Item display in Bold.

Italic

Check this option to have the Text Item display as italic.

Underline

This section is only active when the Underline Transition Type is selected. The color and the thickness of the underline can be individually set for each Text Item. There is also an All button for each that will apply your current settings to all of the Text items.

Underline Type

Select the underline thickness: Thin, Medium, or Thick.

Underline Color

Use the handy color picker or enter your desired color code into the box. The format for the colors can be hex, rgb, rgba, or color names. You can edit, add or remove these colors at any time.

Item User Class

You can assign an optional User Class to the each Text Item. You can also add multiple classes . To do so, enter each class name separated by a space. The User class is a powerful feature in HFX. It allows you full freedom to customize styling for each Text Item beyond the options in the UI.

 

Options

Set the options in this section to control the operation of the HFX system.

Configuration

The HFX system can be set to operate in one of three different configurations:

Configuration Options

Show Only One Item at a Time (default mode)

Each Text item will replace the previous Text Item, only the current text Item is displayed.

Show All -Horizontal

Each Text Item will display to the right of the previous Text Item (horizontally), the previous Text Item(s) will continue to display.

Show All -Vertical

Each Text Item will display below the previous Text Item (vertically), the previous Text Item(s) will continue to display.

Transition

This section allows you to control all aspects of the Text Item transition animations.

Transitions Options

Type

Select the desired animation, choose from 15 animation types:

Animation Types

Time In View

This sets the amount of time, in seconds, each Text Item is displayed before the next Text Item is shown.

Duration

Set the number of milliseconds the animation takes for each Text Item display. This setting will determine how fast the animation moves. This option is disabled when a Character animation is selected.

Per Character Duration

Enabled only when a Character animation is selected, this option will determine the animation speed for each character. Set the number of milliseconds the animation takes for each character.

Delay Between Characters

Enabled only when a Character animation is selected, this option will determine the time delay between each character animation. Set the number of milliseconds to wait before displaying the next character.

Rotator

This section controls the auto-play Rotator functionality.

Rotator Options

Play Continually

This option allows the Rotator to play through the Text Items indefinitely.

Number of Cycles to Play

Enter the number of times you wish Rotator to play through all of the Text Items.

Pause Between Cycles

This option will pause the set amount of seconds before repeating the next cycle. Enter the number of seconds to pause. The default is 0 (zero).

End Cycle On

This allows you to choose the ending Text Item for the Rotator cycle. When the Rotator has completed the assigned number of rotations it will stop on:

  • Last Image -The Rotator will stop at the last Text Item in the Text Items list.
  • First Image - When the Rotator reaches the last Text Item it will loop back and stop at the first Text Item in the Text Item list.

Start On Page Load After

The Rotator will start automatically when the page first loads. This option is enabled by default. With this option turned off the Rotator will not run unless started by a Control Action. Enter the number of seconds to pause before starting the Rotator.

Pause When Not In View

This feature saves browser resources and is enabled by default. The HFX animations will only run when the page element to which they are assigned are currently in view.

When Finished Replay After

After the set number of Cycles has run this feature will restart the Rotator after the defined number of seconds. For example, the Rotator could run two cycles, then pause for 10 seconds and start the Rotator again, repeating the 2 Cycle - Pause 10 seconds indefinitely.

Suppress Animation on Page Load

This option controls the animation for the initial Text Item. Uncheck this option to allow the initial Text Item to animate when the page first loads.

Styling

These options apply to all of the Text Items in the Text Items List, unless over-ridden by an individual Text Item Style setting.

Styling Options

Color

Use the handy color picker or enter your desired color code into the box. The format for the colors can be hex, rgb, rgba, or color names. You can edit, add or remove these colors at any time.

Color Picker

Size

Select one of the preset font size options to display all of the Text Items at a different size. This option has no effect on the font size when left at the Default setting.

Size Options

Bold

Check this option to have all of the Text Items display in Bold.

Italic

Check this option to have all of the Text Items display as italic.

Root User Class

You can assign an optional User Class to the entire HFX construct. You can also add multiple classes . To do so, enter each class name separated by a space. The User class is a powerful feature in HFX. It allows you full freedom to customize overall styling beyond the options in the UI.

Item Marker

This option will display an item marker at the beginning of each Text Item.

Item Marker Options

 

Command Buttons

The interface contains a column of command buttons along its right edge. Three of the buttons are pretty typical and require little explanation: OK, Cancel, and Help. If you are working on an existing HFX, an additional button will appear: Remove.

OK

When you are done setting your desired options, click the OK button to build the HFX construct. The system will verify your selections and alert you to any problems that need your attention. If there are no problems, the interface will apply the changes to your page.

Remove

Available only when the interface is in Modify mode. Removes the entire HFX construct from your page.

What will be removed

The system will completely remove the html markup for the selected HFX from your page. If there are other HFX instances on the page they will not be affected.

If there are no remaining HFX instances on your page, the system will also remove the link to the HFX style sheet file and the HFX scripts file..

What will not be removed

The system will not remove the p7hfx folder, which contains the HFX CSS and script files. This ensures that you will not lose any assets you may have modified and any other pages that depend on those modified assets will continue to look and behave as expected.

Cancel

Click the Cancel button to completely abort the current operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the User Guide in your browser. This page can remain open for easy reference while you continue working in the interface.

HFX Control Actions

The HFX system also includes control actions that can be used to create HFX actions on links located anywhere on your page, or that can be used in by other scripts to control HFX actions.

Available Control Behavior Actions:

Manually Assigning HFX Control Actions

There are times when you may want to manually assigning a control action, either for use in external scripts or when building pages dynamically.

The control action function call will look like this:

P7_HFXctrl('p7HFX_1','play')

  1. The first argument is the ID of the HFX instance.
  2. The second argument is the control action you wish to apply.

The HTML markup for a typical text link with a control action applied would look like this:

<a href="#" onclick="P7_HFXctrl('p7HFX_1','play');return false;">Play</a>

The available Control Actions are:

  • P7_HFXctrl('p7HFX_1','play') - Play (Resume) Rotator
  • P7_HFXctrl('p7HFX_1','pause') - Pause Rotator
  • P7_HFXctrl('p7HFX_1','first') - Show First Item
  • P7_HFXctrl('p7HFX_1','next') - Show Next Item
  • P7_HFXctrl('p7HFX_1','prev') - Show Previous Item
  • P7_HFXctrl('p7HFX_1','last') - Show Last Item
  • P7_HFXctrl('p7HFX_1',x) - Open the specified Text Item number, where x is the number of the Text Item

Using the HFX Control Behavior

The HFX Control Behavior will allow you to assign HFX control actions using the convenient interface.

Create a new HFX Control Action

Before accessing the HFX Control Actions interface, create a null link or an image link on which to assign your actions(s). A null link might look like this:

<a href="#">Pause Rotator</a>

To access the Control Actions interface:

- Click on the null link and choose Windows > Behaviors from the main Dreamweaver menu to open the Behaviors panel.

Behaviors Panel

- Click the + symbol and choose:

Studio VII > Headline Effects Magic> Headline Effects Magic - Control Actions

The Control Actions dialog will open:

Behavior Interface

- Select the relevant HFX instance from the Headline Effects Magic ID drop-down list.

- Select a Control Action from the Action drop-down list:

  • Play
  • Pause
  • First
  • Next
  • Previous
  • Last
  • Show Item Number...

- Click OK.

The link you created earlier will now look like this:

<a href="#" onClick="P7_HFXctrl('p7HFX_1','pause')">Pause Rotator</a>

- To finish your task, and to prevent the page from jumping when the null link is clicked, add a ;return false;

<a href="#" onClick="P7_HFXctrl('p7HFX_1','pause');return false;">Pause Rotator</a>

Modifying an existing HFX Control Action

 

- Select the element that contains an existing Headline Effects Control behavior.

- Double-click the Headline Effects Magic- Control Actions behavior in the Behaviors Panel to open the interface.

Modify Behavior

The HFX Behavior Modify interface will open.

Select or reset the options.

Click OK to apply the revised behavior.

 

Menu