Category Archives: Flash Componnents

Flash Componnents

XML format reference for Banner Rotator

Aside

Reply

The basic format of the xml is show below.


<items relativepath=”true”>
<item path=”images/p1″ thumbnail=”thumbnails/p1″ width=”422″ height=”284″>
<title>Title Here</title>
<OTHER_SETTING></OTHER_SETTING>
</item>

<item path=”images/p2.jpg” thumbnail=”thumbnails/p2.jpg” width=”422″ height=”284″>
<title>Title Here</title>
</item>
</items>




<item> tag have one attribute “relativepath” which define if the images path is related to the xml file. If set to true, the path of the image will related to the xml file. e.g. if put the xml inside a folder called “gallery” and put the image files in a folder called “gallery/images”, you just need to define the image path in the xml as “images/xxxxx.jpg”.

Each <items> tag have several attribute. The definition of each attribute is show below.

path: define the image path file (large image) of corresponding slide
thumbnail: define the thumbnail image path of corresponding slide
width/height: define the dimension of the image file
You can add additional setting for each slide by adding child tag to <item> tag.
For example, we want to set the transition duration for this slide. You can edit the xml like below.



<item path=”images/p1″ thumbnail=”thumbnails/p1″ width=”422″ height=”284″>

<title>Title Here</title>

<transitionDuration>5</transitionDuration >

</item>
For settings available for each banner rotator, you can refer to this guide.

Quick Start For Using Banner Rotator Flash Component

Aside

3

This tutorial will cover the basic steps for setup the Banner Rotator Flash Component.

1. Install the Banner Rotator Flash Component.

You can follow the guide here for the installation of the component.

2. Import the banner rotator component in your project.

Create a new Action Script 3.0 project in Flash. Or, you can open your own fla file.
Open the “Components Panel” by select the menu “Window>Components”.
Drag the “XXXXXX Tansform Banner Rotator” component from the panel on the stage. You can position your component in order to fit your design.
Save the fla document in a temporary folder or your project folder.

3. Prepare images and xml for driving the component.

Prepare the images for the banner rotator. Use any image editor program (e.g. PhotoShop). Open the image and save it to jpg or png. Save the file in a sub-directory of you project folder. If you want to have a small thumbnail, you can save a small version too.

Recommended folder structure. You can put the large and thumbnail images in separated folder like below.

Open up a text editor (TextEdit on Mac, or NotePad on Windows). Save the text file as .xml in your project folder. Add the XML code below to define the image your want to load.

{code type=xml}


{/code}

Each <item> tag repersent a image. You can find here more about the parameters which can use in the XML. For more detail on the xml format, you can visit XML format reference for Banner Rotator

Select the component and open the “Component Inspector” by select the menu “WIndows>Component Inspector”. From the “Source” section, fill in the file name of the xml.

4. Set the appearance of the compoent.

Fromt the “Component Inspector”, you can set the appearance of the banner rotator. For more details on each item in component inspector, you can visit the inspector guide here. Cube Transform Banner Rotator Inspector Reference

5. Export the movie

To test the movie, you can select menu “Control>Test Movie” or press CMD+ENTER.

RotationMenu Video Quick Start

Aside

Reply

RotationMenu Video Quick Start

This tutorial will cover a quick start to build a video player for YouTube using Curve Video.

1.Create your video channel if you what to put on your own video on YouTube.

Visit www.youtube.com for more info.

2. Open you project fla or create a new project in Flash.

3. Insert the RotationMenu Video in the project

Open the component panel. Form menu>component or Command/Crtl+F7


Drag the component on the stage and give a instance name “component”




4. Build play list by YouTube playlist builder.

Open up the YouTube play list builder by select the “Build xml for YouTube” in the component inspector “source” section.

In the YouTube playlist builder, you can enter keywords, catalogue name, author/channel name to build the playlist. If you just what to have the player play the video in your YouTube channel, just fill in your user name in the “Author/Channel” field and click ok button. And the xml will be built.




P.S. You also can search the playlist from YouTube by author or keyboard and use it to build the video player.

5. Customize the RotationMenu Video

After select the source. You can custom other setting via the component inspector. For more information about the component inspector, you can visit the guide here.


6. Add scroll button

Now, we add buttons to control the scroll of the component.

Drag 2 Buttons from the component to the stage. Give a instance name “nextButton” and “prevButton”

Open the component inspector, goto “Interactive” section. Fill in the name “nextButton” and “prevButton” in the field for next button and previous button target.

7.Test Movie

Now, your video player is ready. You can test by Ctrl/Command +ENTER.

CurveMenu Video Quick Start

Aside

2

This tutorial will cover a quick start to build a video player for YouTube using Curve Video.

1.Create your video channel if you what to put on your own video on YouTube.

Visit www.youtube.com for more info.

2. Open you project fla or create a new project in Flash.

3. Insert the CurveMenu Video in the project

Open the component panel. Form menu>component or Command/Crtl+F7

Drag the component on the stage and give a instance name “component”

4. Build play list by YouTube playlist builder.

Open up the YouTube play list builder by select the “Build xml for YouTube” in the component inspector “source” section.

In the YouTube playlist builder, you can enter keywords, catalogue name, author/channel name to build the playlist. If you just what to have the player play the video in your YouTube channel, just fill in your user name in the “Author/Channel” field and click ok button. And the xml will be built.

P.S. You also can search the playlist from YouTube by author or keyboard and use it to build the video player.

5. Customize the CurveMenu Video

After select the source. You can custom other setting via the component inspector. For more information about the component inspector, you can visit the guide here.

6. Add scroll button

Now, we add buttons to control the scroll of the component.

Drag 2 Buttons from the component to the stage. Give a instance name “nextButton” and “prevButton”

Open the component inspector, goto “Interactive” section. Fill in the name “nextButton” and “prevButton” in the field for next button and previous button target.

7.Test Movie

Now, your video player is ready. You can test by Ctrl/Command +ENTER.

CurveMenu Video Component Inspector Reference

Aside

2

Source Panel

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

Build xml for YouTube – button to open the YouTube playlist builder

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

Proxy script –path of the script for cross domain issue

Enable buffering – the number of items needed to buffer before start

YouTube playlist builder

Keywords – enter keywords to search the video in youtube. You can use «+» to combine different keywords

Catalog – you can select different youtube catalog here

Author/Channel – enter the YouTube’s username or channel name here.

Number of results –number of video you want to include in this playlist

Results starting with –start number of video

Ordering –order of the video

SafeSearch setting – you can select the SafeSearch option here to restrict the results.

YouTube Server URL –url of YouTube server

Query Text –result query text which send to YouTube server.

A.Search by author– enter the YouTube’s username here and search the playlist.

B.Search by Keywords – enter the keywords here and search the playlist.

Start Index – the start index of the playlist

No. of results – no. of search result

Select Playlist – list of the playlist match the search

Item Panel

Predered item’s width/height – width/height constriant which each item appear on the screen

Distance between item – distance between each item

Default material color – color of each item when the image not loaded yet

Quality – quality of rendering

Default item color – the color of the item before image have loaded

Enable smoothing – enable bitmap smoothing when component rendering


CurveMen Panel

Item Repeat – enable item repeat/looping

Enable vertical alignment – set the alignment of the menu

Curvature – set the curvature of the menu align

Number of item in each side – number of item appear in each side

Distance between middle item and others – value of distance between middle item and side item

Scale of middle item – scale of the middle item relative to normal

Proportion scale – proportion scale of the side item

Video Player Panel

Enable auto play video – enable/disable auto play video when video loaded

Enable goto next video when video end – enable/ disable the feature which video will go next video when video ended

Enable auto zoom in when play – enable/disable the feature which video will zoom in when video start to play

Enable video controls – enable/disable video controls

Enable auto dim backgorund – enable/disable auto dim background items when video start to play

Breightness for dim background – value of brightness for the dim background

Enable click to play/pause – enable/ disable the feature which video will play/pause when user click on the video

Fullscreen resize mode – control the size of video when the video is zoomed in

Slide Show Panel

Enable slide show – enable/disable the slide show feature

Slide show interval – time interval between each item state

Slide show direction – direction of the slide when start

Slide show behavior – contiune means the slide show will contiune in one direction. Yoyo means the slide show will change direction at the end of list


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

Desaturation color effect – set this will enable the desaturation effect when no mouse over.

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

Enable click and goto item – enable/disable click and move to that item

Enable touch scroll control – enable/disable the touch scroll control

Flip touch scroll direction – flip the direction of touch scroll

Enable keyboard control – enable/disable the keyboard scroll control

ScrollBar/Slider Target – instance name of scrollbar/slider

Next Button Target – instance name of button which control the scroll to next

Prev Button Target – instance name of button which control the scroll to previous

Caption Textfiled – instnace name of synamic text which use to hold the caption text

Effect Panel

Shadow – set the value of shadow effect

Depth of field – set the value of depth of field blur effect

Skin Panel

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

Caption skin – the linkage name of movie symbol for the skin of caption.

Video Controls skin – the linkage name of movie symbol for the skin of video controls.

Back Panel skin – the linkage name of movie symbol for the skin of back panel when item flip in back side

Preset Panel

Save or load the preset to/from a file.

Custom skin for video player

Aside

1

1. Open up the skin.fla come with your product download

Opent skin.fla file com with your product download. You will see the player skin on the stage.

2. Copy the skin into your project

Right click on the skin and select copy.

Open your fla project which contains the components and open the library panel. Right click on the library panel and select “Paste”. It will import the skin with a linkage name “customControlsSkin”.

3. Edit the skin

Double click on the symbol called “controlSkin” to start edit.

You can change the color of each elements or even create your own graphics. Below show the instance name of each elements.

4. Tell component to use the skin

Open up the component inspector. Navigate to “Skin” section. Fill in the named “customControlsSkin” in the field of video skin.

­

Now, you can try to test movie for your custom skin.

Create custom xml playlist for video player

Aside

3

1. Prepare you video and poster images.

Convert you video to Flash-friendly format such as flv, f4v, m4v or mp4. Capture the screen shot of the movie or create your own image for the poster image of the movie. Place the files inside a sub folder of your project directory.

Recommend project directory structure.

root/

root/project.fla

root/media

root/media/video/*.flv

root/media/images/*.jpg

root/media/playlist.xml

2. Create an xml file.

Open up your favous text editor ( TextEdit in MAC or TextPad in Windows). Create a new text file and fill in the code below. Save the file in media/playlist.xml

<items id = "items" relativepath="true">

<item path = " images/video1.jpg" width = "320" height = "240" type = "bitmapfile">

<title>Item Title</title>

<description>Item description</description>

<video>video/video1.flv</video>

</item>

</items>

3. Insert the necessary xml tag.

You can add more new video by insert the <item/> block between <items> ….</items>

<item path = " images/video1.jpg" width = "320" height = "240" type = "bitmapfile">

<title>Item Title</title>

<description>Item description</description>

<video>video/video1.flv</video>

</item>

path – define the path of the poster image

width/height – dimension of the video/images

title – tooltip’s text

description – text appear in the back of each video

video – path of the video

* You can verify the xml by drag the xml file in IE in Windows. Error will appear if the xml is not valid.


4. Enter the xml path in the component inspector.

Now, you can enter the path name of the xml in the component inspector.

PhotoFlip Video Quick Start

Aside

Reply

This tutorial will cover a quick start to build a video player for YouTube using PhotoFlip Video.

1.Create your video channel if you what to put on your own video on YouTube.

Visit www.youtube.com for more info.

2. Open you project fla or create a new project in Flash.

3. Insert the PhotoFlip Video in the project

Open the component panel. Form menu>component or Command/Crtl+F7

Drag the component on the stage and give a instance name “component”

4. Build play list by YouTube playlist builder.

Open up the YouTube play list builder by select the “Build xml for YouTube” in the component inspector “source” section.

In the YouTube playlist builder, you can enter keywords, catalogue name, author/channel name to build the playlist. If you just what to have the player play the video in your YouTube channel, just fill in your user name in the “Author/Channel” field and click ok button. And the xml will be built.

5. Customize the PhotoFlip Video

After select the source. You can custom other setting via the component inspector. For more information about the component inspector, you can visit the guide here.

6. Add scroll button

Now, we add buttons to control the scroll of the component.

Drag 2 Buttons from the component to the stage. Give a instance name “nextButton” and “prevButton”

Open the component inspector, goto “Interactive” section. Fill in the name “nextButton” and “prevButton” in the field for next button and previous button target.

7.Test Movie

Now, your video player is ready. You can test by Ctrl/Command +ENTER.

Familiarize with xml format use in Digicrafts component

Aside

Reply

Digicrafts component use 2 type of xml to driven any component which loading external images.

1. Custom XML

2. Photoshop XML

Custom XML

It is a custom type of xml which use widely in Digicrafts’scomponent. Here is the basic structure of the xml.

<items id = "items" relativepath="true">

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

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

</items>

You can create this xml file will any text editor such as NotePad in window or TextEdit in Mac OS. It is recommeneded to save the xml as Unicode (UTF-8) format for supporting multi language.

Photoshop XML

It is a format, which design by Adobe which use for setting their own gallery. This can be generated by Photoshop or Bridge along with formatted images.

The basic format is show below.

<gallery base = "" background = "#FFFFFF" banner = "#F0F0F0" text = "#000000" link = "#0000FF" alink = "#FF0000" vlink = "#800080" date = "14/6/2008">
 <sitename>Wedding Photo</sitename>
 <photographer></photographer>
 <contactinfo></contactinfo>
  <email></email>
 <security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =  "#F0F0F0"> </banner>
<thumbnail base ="thumbnails/" font = "Arial" fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col = "5"> </thumbnail>
<large base ="images/" font = "Arial" fontsize = "3" color = "#F0F0F0" border = "0"> </large>

<images id = "images">

<image path = "156_medium.jpg" width = "155" height = "201" thumbpath = "156_medium.jpg" thumbwidth = "61"thumbheight = "80">
 <meta name="title">Ice Age</meta>
 <meta name = "window"><![CDATA[height=200,width=400,status=yes,toolbar=no,menubar=no,location=no]]></meta>
</image>

 ….

 </images>

Prepare custom xml and images

Aside

Reply

1. Prepare image for use with the components.

Resize and save your images into a folder of your website.

2. Create the custom XML file for the source.

Open any text editor (Notepad in Window or TextEdit in Mac OS) create a xml like the format show below. Save it to your website.

<items id = "items" relativepath="true">

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

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

</items>

The xml have a main tag  <items> and contains multiple <item> tag for each item.

<items> tag contains one option – relativepath=”true/false“. If set to true, path of image source is related to xml file. Else, it is related to html/swf file.

Each <item> tag has the format.

<item path=”SOURCEPATH_OF_IMAGE” width=”WIDTH” height=”HEIGHT” type=”TYPE”>

 <title>CAPTION/TOOLTIP TEXT</title>
 …..
<OTHER_OPTIONAL_TAG></ OTHER_OPTIONAL_TAG>
</item>

Attribute:

Path – path of the source image

Width/height – dimension of the image

Type – type of the source. Possible value, BitmapFile | MovieFile.