DockMenu 3D Component Inspector Reference

Source Panel

Source XML – path of the xml file which use to populate the component.

Use thumbnail as source – (Photoshop xml format only) use thumbnail as the source of image to populate the component.

Proxy script – the path of the script for cross domain issue.


Items Panel

Preferred item’s width/height/depth – set the dimension of the item.

Default material color – the default material color when the image is not loaded.

Quality – quality of rendering.

Enable smoothing – enable/disable bitmap smoothing. Disable to increase performance.


3D Camera Panel

Camera angle – the vertical angle between eye level and camera. Value should between 0 to 90 degree.

Distance between camera and dock – the distance between the position of camera and dock. Lower the value will zoom in the dock.
Dock Panel

scale – the scale of items when no scale effect

Magnification – the scale of the biggest item when scale effect.

Radius – the effect area of the scale effect

Enable panel – enable/disable the dock panel

Panel width – the width of the panel

Panel Thickness – the thickness of the panel

Color of the panel – color of the panel when no texture defined

Color of the panel (side) – color of the side of the panel

Texture of panel – texture used to draw the panel. Can be path to image file or linkage name of movie clip symbol

Texture of indicator – texture used to draw the selected indicator. Can be path to image file or linkage name of movie clip symbol


Tooltip Panel

Tooltip mode – display mode of the tooltip.

Tooltip distance – the distance between item and tooltip.

Tooltip alignment – alignment of the tooltip. Support top, bottom, right and left alignment.

Individual tooltip can custom via xml. Within the <item> tag., add the <tooltipFormat> tag for custom style.

<tooltipFormat>
 {
 widthLimit:-1,
 tipSize:5,
 cornerRadius:10,
 padding:10,
 border:1.5,
 backgroundColor:'000000',
 backgroundAlpha:0.8,
 backgroundColor:'000000',
 borderColor:'FFFFFF',
 textColor:'FFFFFF'
 }
</tooltipFormat>


Interactive Panel

Enable item over glow effect – enable/disable the glow effect when mouse over

Glow effect size – set the size of glow effect.

Glow effect color – set the color of the glow effect

Enable click to link – enable/disable click to link feature. You can custom the link via xml.

Enable click to select – enable/disable click to select feature

Allow multiple selection – enable/disable multiple selection feature

Animation type – define the type of animation when item selected.

Effect Panel

Shadow – set the value of shadow effect

Reflection – set the value of reflection effect


Skin Panel

Loader skin – the linkage name of movie symbol for the skin of loader.


Preset Panel

Save or load the preset to/from a file.

DockMenu 3D Quick Start

1.Install the components

Follow the link to install the component.

Components and Extensions Installation

2.Follow the tutorial below to prepare the xml and images use by the components.

Familiarize with xml format use by Digicrafts components >

Prepare images and xml by PhotoShop >

Prepare images and custom xml >


3.Insert DockMenu 3D in your project.

Open your existing fla file or create a new one.

Open component panel. Press Command/Crlt + F7 or mainmenu>window>Component.

Drag the component from the component panel on the stage.

Resize the component and change the instance name

4. Put the source images and xml in the right directory

Copy the images and xml file to your project directory. Make sure the file structure is show below. ( I put the images and xml file in a sub directory “media” ).

5.Apply the source xml path with component inspector

Open component inspector. Press Shift +F7 or from mainmenu>window>component inspector.

Fill in the source xml path in the source input box.

*Path of the xml is related to html. If your swf and html is in directory, you need to put the path of xml related to the html which hold the swf.

6.Change the settings in component inspector

You can change the setting in component inspector. Most of the setting can be preview in real time.

Refer to the DockMenu 3D UI Component Inspector for more information on the settings.

7.Publish the movie.

You can now press Command/Crlt +Enter to test your movie.

Adding link and link target to item click action

1. Add link in the xml file.

For custom xml

<items id = "items">

<item path = "menu/icon_1.png" width = "128" height = "128" type = "bitmapfile">
<title>Item Title</title>
<description>Item description</description>
<link>URL_TO_YOUR_FILE</link>
<linktarget>_BLANK</linktarget>
</item>

For PhotoShop xml

<image
path = "1.jpg"
width = "350"
height = "350"
thumbpath = "1.jpg"
thumbwidth = "200"
thumbheight = "200">
<meta name = "title"><![CDATA[description]]></meta>
<meta name = "link"><![CDATA[http://www.abc.com]]></meta>
<meta name = "linktarget"><![CDATA[_BLANK]]></meta>
</image>

2.Enable getURL action in component inspector.

Components and Extension Installation

1. Download and install Adobe Extension Manager CS3 1.8+ if you haven’t install it. You can download the newest version here: Download Adobe Extension Manager CS3.

2. Unzip the downloaded file (productname_v_x_x_x.zip).

3. Start Adobe Extension Manager CS3, from Start > All Program > Adobe Extension Manager CS3.

4. In Adobe Extension Manager CS3, go to menu File > Install Extension

5. In the file browser dialog box, navigate to the directory where you unzip your files.

6. Select ProductName.mxp and press OK. Installation will start.

7. Install finished. You can find the installed product in the Components Panel of you Flash CS3.