Category Archives: Flash Componnents

Flash Componnents

Prepare xml and images with Photoshop

Aside

Reply

If you are using Photoshop CS4, the Web Photo Gallery is not in default installed. You can follow the guide below for installing the plug-in.

http://generatex.com/cs4.html

1. Prepare your photos in Adobe Photoshop.

Fill in the meta information about your photos.

Open the file info diaglog

http://www.digicrafts.com.hk/components/assets/Tutorial/xml-Photoshop/Galerie0quickstart11.jpg

Fill in the meta information.

http://www.digicrafts.com.hk/components/assets/Tutorial/xml-Photoshop/Galerie0quickstart21.jpg

Put all prepared photo in a folder.

2. Export your photos to Web Gallery

Open export to Web Photo Gallery dialog.

http://www.digicrafts.com.hk/components/assets/Tutorial/xml-Photoshop/Galerie0quickstart31.jpg

Select the source folder of the photo.
Select the destination of the photo gallery.

http://www.digicrafts.com.hk/components/assets/Tutorial/xml-Photoshop/Galerie0quickstart41.jpg

Click “OK” button to export photo to web gallery.

Then you will create a folder, which contains prepared images and necessary files.

http://www.digicrafts.com.hk/components/assets/Tutorial/xml-Photoshop/tutor7.jpg

DockMenu 3D Component Inspector Reference

Aside

Reply

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

Aside

Reply

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.

Add Link to the Item Click

Aside

Reply

1. Disable the getURL in component inspector.

2. Give the menu a instance name. e.g. menu_mc

3. Add the code below in the frame of the menu.

import com.digicrafts.events.*;

function handleClickEvent(e:ItemEvent):void

{

navigateToURL(new URLRequest(e.item.link));

}

menu_mc.addEventListener(ItemEvent.CLICK, handleClickEvent);

Loading swf in PageTurn 3D

Aside

Reply

1. Create a wokring Page Turn 3D

2. Edit link in the xml file.

For custom xml, you can add the follow new item for page of swf.

<items id = "items">
......
<item path = "page_front.swf" width = "128" height = "128" type = "moviefile">
<title>Item Title</title>
<description>Item description</description>
</item>

....

</items>

For PhotoShop xml

Edit the photos.xml file and change the following

....
<image
path = "page_front.swf"
width = "350"
height = "350"
thumbpath = "1.jpg"
thumbwidth = "200"
thumbheight = "200">
<meta name = "title"><![CDATA[description]]></meta>
<meta name = "type">moviefile</meta>
</image>
....

Adding link and link target to item click action

Aside

Reply

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.

Getting Started with Reflector CS Flash Component

Aside

Reply

1. Prepare your graphics

If you already have some graphics, which is a MovieClip, you can skip this step.

On the stage, select the graphics, which you want to apply reflection.  Press F8 or select “menu > convert to Symbol” to convert graphics into a MovieClip.

Select the movieclip. Give an instance name from the property box. E.g. “iphone_mc”

2. Insert the Reflector CS

Open the components panel from menu > window > component.

Drag the Reflector CS from the panel to the stage.

3. Link the graphics to Reflector CS

Select Reflector CS on the stage. Press Ctrl+F7 or “menu > window >component inspector” to open component inspector.

Click the add ( + ) button on the inspector and you will prompt for the target name. Fill in the instance name of the movie clip. E.g. “iphone_mc”.

Now you can test the movie. You will see the reflection added on the movieclip. You can further adjust the effect from the component inspector.

Components and Extension Installation

Aside

1

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.