Overview

Background Animator Magic (BAM!) is another PVII widget designed to breathe life into your web pages. It is unprecedented in both its approach, as well as its performance. BAM! does things that simply cannot be done with the tools that come with Dreamweaver. Once again, PVII makes Dreamweaver better.

What does BAM! do?

In a nutshell, BAM! automatically sets up any element on your page—from the body, to DIVS, to paragraphs, to lists, and even to forms—to display a rotation of background images. But unlike traditional rotators, such as Image Rotator Magic or Art Gallery Magic, BAM! images are bound to a specific element and positioned at runtime to display perfectly and automatically...under your page content. The rotation can slide in, fade in, slide and fade, or run in an elegant Ken Burns motion animation. The choice is yours. There exists no other tool like it!

Like all PVII tools, it comes with an interface from which you can assign powerful options and a myriad of settings.

BAM! runs under under your targeted element, so the text on your page is always on top and never hidden. You can even choose from 19 colored masks to sit between your content and your BAM!. The masks can then be assigned a custom level of transparency for just the effect you want.

Installing Background Animator Magic (BAM!)

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. To install AGM, open your Adobe Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Accessing Background Animator Magic

There are 3 ways to access BAM!. Choose the one most suitable to your workflow. When you open the interface, the system will detect the appropriate mode (Insert or Modify) based on where your cursor is.

When you are Creating a new BAM! instance, place your cursor on your page where you want to build your widget. If Modifying an existing instance, place your cursor anywhere inside the existing instance and use one of the 3 methods below to open the UI. The system will always open in the correct mode.

1. Insert Bar

Switch to the PVII category. BAM! is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. BAM! is the last one in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Background Animator Magic by PVII

To fine tune your selected element, open the Apply to Element drop-down list, from which you will be able to choose any page element in the page hierarchy, from the body tag down to the element your cursor was inside of when you opened the BAM! UI.

BAM! Options & Settings

The BAM! interface makes customizing your rotator easy!

Creating a new BAM! instance

The UI allows you to easily define and configure a rotator. Once configured, the UI can be used to modify (edit) your rotator as often as you like.

Position your Cursor at or near where you would like your rotator to be created

Use Design View, Code View, or the Tag Selector Bar:

Open the BAM! UI. You will be able to refine the insertion point once the UI opens.

Mode

When the UI opens, it will be in either Create or Modify Mode, depending on where your cursor was.

Apply to Element

To fine tune your selected element, open the Apply to Element drop-down list, from which you will be able to choose any page element in the page hierarchy, from the body tag down to the element your cursor was inside of when you opened the BAM! UI.

Note: When you need to modify an existing BAM! instance, you can always spot it in the drop-down listing, because its line will always begin with BAM. And since you can select the body tag, it means you can easily create a full-page background rotator. You can also assign BAM! to DIVs, paragraphs, spans, sections, ULs, and forms, among other tags.

Command Buttons

Add Image

Adds a new image after the one that is selected

Delete Image

Deletes the selected image.

Move Up

Moves the selected image up in the listing.

Move Down

Moves the selected item down in the listing.

Import Images

Use the Import Images system to quickly import images from a folder on your hard drive or any drive connected to your computer. All images in the folder you select will be returned to the BAM! interface, allowing you to quickly select one or more images from the listing. If the images are stored in a location outside of your currently defined Dreamweaver Site, you will be prompted to copy those images into your site.

Open the Import Images interface

The Import Images interface will open whenever you click on the Import button in the main AGM interface.

Click the Import button to open the Import Images interface.

The Import Image window will open:

The Import Images interface.

Select Image folders

-In the Full Size Images Folder box use the handy Browse button to locate the folder.

The Choose Folder dialog

Browse to the folder where your full-size images are and select any image (you must select one of the images).

Then click OK.

All the images in that folder will appear in the Select Images to Add column:

Make your selection using normal operating system methods for your computer or use the Select All button at the bottom of the listing.

Selection/Action Buttons

You need to select one, several, or all of the images in the listing. You can CTRL Click to select (or deselect) images individually or Shift Click to select a group of images. If you want to select all of the images in the listing you can click the Select All button.

To deselect all images click the De-Select All button.

Complete the Import

Click the OK button to complete the import and return your selected images to the main BAM! UI.

Image Path

When you import images, the path to each image will be displayed in the Image Path box, which can be used to change the image at any time. In fact, if you only have a handful of images, you can use the Browse button to get your images instead of importing them.

Alt/Title

Since BAM! rotates background images (as opposed to embedded images) search engines and assistive readers need to be brought into the loop. While other rotators have no way of doing this, BAM! has worked it out! The text you enter into this box will become part of an embedded list of images used by BAM! to populate your rotator. This list also serves to make the background images used by BAM! readable by assistive readers and locatable by search engines.

Size

Choose one of 3 size parameters for your background images: Cover (Fill), Contain (Fit), or Natural. The default is Cover, which is what you'll want to use in most cases.

Note: If you need another look, BAM! Size options are similar to the CSS background-size values of Cover, Contain, and Auto (Natural).

Position

The default Position is Centered. But you have several additional choices in this list that you can choose. The options equate the allowable keyword values for the CSS background-position property.

Other Options

The following options allow you to quickly fine-tune your BAM! rotator.

Page Load

Set the first image in your BAM! rotation (Start with Image), whether or not to Auto Play on Startup (when the page first loads), and whether to use a Random Image Order.

Controls

Pause on Control Actions. In most cases you will not need to use this option. We included it for special cases when you use the included suite of Control Behaviors (described in the next section).

Show Pause/Play Icon

The optional Pause/Play icon will be positioned near the top-right edge of the element to which you've assigned your BAM!.

Image Display Time

This is the length of time that transpires before BAM! cycles to the next image.

Rotator Cycles

Play Continually, choose a Number of Cycles, and whether to End Cycle On the first or last image.

Styling

Rounded Borders

Conveniently round the corners of your BAM! rotator.

Mask Color

Ah! This can be thought of as the secret sauce that makes BAM! especially tasty. As you've read in the introduction (at least we hope you have), BAM! is configured at runtime to sit beneath the content element to which you have assigned it. The Mask sits between BAM! and your content, allowing you to create a transparent window between your content and the rotating images. This means that you have total control for how BAM! looks from within the peace and quiet of the BAM! user interface. You can select one of 20 colors (including Transparent) that correspond to the same color choices we provide with our most popular menu and page-building tools (Adaptive Menu Magic and Harmony).

BAM Mask Color Chart

As you can clearly see, we've left nothing to chance. and we do all the work for you!

Mask Opacity

In addition to setting a Mask Color, you can also set the Mask Opacity—a handy way to control how clearly your images peek through the mask.

Animation

Choose among:

  • None
  • Fade
  • Slide
  • Slide with Fade
  • Ken Burns (a choreographed set simulatic fluid motion)
  • Auto Multi (a choreographed set utilizing the following 5 animations together)
  • Slide In Right
  • Slide In Left
  • Slide In Top
  • Slide In Bottom
  • Zoom In

Transition Duration

Set the length of time the animation runs in milliseconds. The higher the number, the slower the animation.

Ken Burns Speed

Set a separate, dedicated speed for the Ken Burns animation.

Note: There is a logical relationship between the Ken Burns Speed and the Image Display Time. The Image Display Time should be set at least two seconds shorter than the Ken Burns Speed.

UI Command Buttons

The right edge of the UI contains a set of command buttons.

Command Buttons

OK

Build the BAM!

Remove

Click this button to remove the selected BAM!. If this is the only one on your page, the links to the BAM! CSS and script files will also be removed.

Cancel

Close the UI without adding a BAM! to your page.

Help

Open this user guide.

BAM! Control Actions

We included a convenient suite of Control Actions, which might be useful to you.

Before accessing the special UI, 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 Images</a>

To access the Control Actions UI, use the Behaviors panel (Windows > Behaviors).

Click the + symbol and choose:

Studio VII > Background Animator Magic > Background Animator Magic - Control Actions

The Control Actions dialog will open:

Select the relevant BAM! instance from the Background Animator drop-down list.

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

Click OK.

The link you created earlier will now look like this:

<a href="#" onClick="P7_BAMctrl('p7BAM_1','pause')">Pause Images</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_BAMctrl('p7BAM_1','pause'); return false;">Pause Images</a>

Note: Using the Actions, you can create your own toolbar controls including Pause/Play, Previous, Next, First, Last, Specific Image.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.