3-D Gallery

From KickApps Documentation

The 3-d Gallery component displays photos and videos in a three dimensional carousel arrangement reminiscent of Apple's CoverFlow. Clicking on videos in the 3-d Gallery causes them to play within this component.

Contents 1 Properties 2 Content 3 Background & Border 4 Layout 4.1 Layout Constraints 5 Events 5.1 Standard Events 5.2 3d Gallery Events 6 Actions 6.1 Standard Actions 6.2 3d Gallery Actions

Properties

Properties are configurable aspects of a component that let you customize the way it looks and how it works by changing their values in its configuration panel in the App Studio. You can also use JavaScript to change widget properties after the widget loads on a page using the setComponentProperty() method method of the Widget JavaScript API. Finally, you can use widget property values in Actions using our bracket literal syntax. For a listing of all properties on KickApps components, see our Properties Reference.

Button Color

Choose one color for the component's buttons

Button Icon Color

Choose a fill color for the icons in the component's buttons

Slider Color

Sets the background color of the slider

Font Color

Color of the font used in the optional title

Show Title

Choose whether to show the title of the selected media item near the top of the component

Show Slider

Choose whether to show the slider control centered at the bottom of the component

Camera Focus

Similar to moving camera back and forth along the Z-index towards and away from the vanishing point, but also fans out photos as you move in closer.

Camera Zoom

Zoom out to take in more photos or zoom in to see details

Camera Y

Define the camera's vertical position to shoot from above or below the floor on which the display items rest

Camera Z

Define the camera's position along a line drawn from the camera to the vanishing point behind the selected item

Selected Item Border Color

Choose a color for the border around the selected item (one in the middle)

Selected Item Border Thickness

Define the thickness of the border around the selected item (one in the middle)

Reflection Opacity

Define the opacity of the reflection on the floor

Start at center

Positions the items in the component such that the first item in its feed appears in the middle of the widget, rather than on the far left side.

Auto Rotate

Advance through the items in the component with a configurable rotation speed

Loop until interaction

When Auto Rotate is enabled, the 3d Gallery will advance through each item until it reaches the last one, at which point it will return to the first item in the feed and continue advancing from there. Clicking or mousing over the 3d Gallery will stop the auto-rotation.

Rotation Speed

Set the number of seconds that should pass before the component advances to the next item.

Content

• Feed
  • Pick a previously saved feed from the dropdown, or enter the URL to an mRSS feed
• Playlist
  • Select photos or videos from your KickApps library to compose a playlist

Background & Border

Background Colors

Choose two different colors to create a gradient or, for a solid color, choose the same color in both options.

Background Opacities

Set the opacity for each half of the background color or gradient. Accepts integer values from 0 (transparent) to 100 (opaque).

Gradient Rotation

Spin the gradient up to 360 degrees. If 2 different border colors are set, these will also rotate with the rest of the background.

Border Colors

Choose border colors for the left and right sides of the button component. If gradient rotation is in use, these colors will rotate with the gradient rotation setting.

Border Thickness

Choose the thickness of the border colors, in pixels.

Corners

Round any of the corners of the selected component. Possible values range from 0 (flat) to 99 (very round). By default the link option is enabled so that you can set all of the corners to the same corner radius value at the same time.

To set different corner radius values on one or more corners, click the link icon to un-link the corner radius input fields.

Layout

There are two types of containers: the widget canvas itself (background of the entire widget) is considered a container, and you can also create containers that enclose components within your widget. Like any standard component, containers that you create can be moved around the stage, resized, and styled. The most powerful feature of Containers, though, is their ability to fix the positions of their constituent components via layout constraints, which we'll cover below. To create a container, select multiple components, right-click, and select "Group in new container".

You can configure a container's background color, opacity, border color, border thickness, corner radius, and background image in its Properties panel:

You can also mask content in a container by selecting the Mask Content checkbox at the bottom of the panel above. With masking enabled, components that belong to the container but fall outside its bounds will be hidden. To indicate this, when you're editing a container that has masking enabled in Design mode, and then add a component outside the bounds of the container you're in, that component will be translucent:

Masking is useful for situations in which you want to animate a component into a container after it loads initially.

Layout Constraints

Layout constraints let you anchor components a certain distance away from the sides and axes of their containers. Components with layout constraints enabled maintain their offset distances when their containers are resized. To set layout constraints, double click on your container, then single click on a component within it. The Layout Constraints panel will appear:

The checkboxes along the top side of the square in the Layout Constraints panel can be used to anchor the selected component to the left, vertical center, and right sides of its container. The checkboxes along the left side of the square can be used to anchor the selected component to the top, horizontal center, and bottom sides of its container.

When you select a checkbox, a text input field appears across the box from it. The number in this field represents the offset distance, in pixels, from the selected side of the container. For example, this is what it looks like when you anchor to the left side:

If you then resize this container, the component maintains its distance from the left side:

Similarly, you can anchor a component to the top of its container, and it will maintain its distance from the top when its container is resized:

You can also anchor components to the horizontal and vertical center lines of their containers. This component is anchored to the horizontal center of its container. It maintains its distance from the horizontal center when its container is resized.

This component is anchored to the vertical center of its container. It maintains its distance from the vertical center when its container is resized.

Components anchored to opposite sides of their containers expand and contract to maintain their offsets. Below is a component anchored to both the left and right sides of its container. Note how it expands to maintain its distances from the left and right sides.

The component below is anchored to both the top and bottom sides of its container. It contracts when its container is resized.

Events

Standard Events

• Click
• Component hidden
• Component loaded
• Component shown
• Double click
• Mouse down
• Mouse up
• Roll out
• Roll over

3d Gallery Events

• Media Change

Actions

Standard Actions

• Drag/Stop Drag
• Set depth
• Show/Hide
• Tween Blur
• Tween Color
• Tween Drop Shadow
• Tween Glow
• Tween Property
• Update Property
  • For a listing of all properties on KickApps components, see our Properties Reference.

3d Gallery Actions

• Change Selection
• Set Media URL