Dazzle your viewers with 3D photo navigation using 3D ImageFlow Gallery.
Create an amazing gallery with cool perspective effects in seconds and
give your photos stunning 3d and camera effects. Add and edit your
images directly in Dreamweaver. Interact with other components like the
Flash MP3 Player or Spry elements and effects to glue everything together.
3D ImageFlow Gallery Manual
Using 3D ImageFlow Gallery to interact with Spry Behaviors
Introduction
In this chapter we'll show you how to interact with Spry Behaviors. We'll demonstrate how to make a text layer appear and disappear when selecting images in your gallery.
How to do it
- Create your
gallery.
Create a new or open an existing HTML page and save the page, insert the gallery.
- Draw a layer
Go to the Layout tab and select the
icon (Draw
AP DIV) to draw a layer (also known as a div). We'll draw it beneath
our gallery. Enter some text or add an image in your layer.
- Hiding the Layer/Div
Select the Layer and choose hidden in the Vis dropdown box.
- Select The 3D ImageFlow Gallery Image
That Initiates The Behavior
Select the 3D ImageFlow Gallery in your browser and select the Images tab in your property inspector. Choose an image that you want to apply the behavior to.
- Adding The Behaviors Connector
Click on the
icon and DMXzone
Behaviors Connector pops up.
- Add The Spry EffectAppearFade Behavior
In the Available Behaviors tab, choose the EffectAppearFade Behavior behavior (in the Effects Folder).
You can choose from two Available Events. The When image comes to front event adds a behavior when the main image slides in. The When image goes back event adds a behavior when the image moves away. We select the When image comes to front event.
Select the
icon to apply
the behavior. The following popup appears:
- Setting the Appear/Fade Properties
Select the name of the Div you drew in the Target Element and set the Effect to Appear and press OK. This will make the layer appear when the first image of your 3D ImageFlow Gallery is selected.
Now lets add another behaviour when we move away from the first image by selecting When image goes back.
Select the icon to apply
the behavior. The Target Element should still be set on div "apDiv1" so all we need to do is to set the Effect to fade. This will make the layer fade when the first image of your 3D
ImageFlow Gallery is deselected.
- Final Steps
Save your files, upload them to your server and you are ready to go. You should see the layer fade in and when you go to the second image it should fade out.
We just showed you a few features of what you can do with the new tool. There are boundless possibilities. Unleash your imagination and stay tuned for the latest demos on DMXzone.com!