Author Archives: admin

XML format reference for Banner Rotator

Posted on by
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.

Cube Transform Banner Rotator Inspector Reference

Posted on by
6

source: path of the xml source which driving the banner rotator

No. of sections: number of section which the transform effect have
Transition direction: the direction of transition
Transition duration: the duration of transition
Cube color: the color of the cube

Title text color: default color of the title’s text
Title bg color: background color of the title bar
Title bg Alpha: background alpha of the title bar
Title position: position of the title bar
Data name from xml: the tag name which the data use as title text. Default is <title>

Thumbnail width: width of each thumbnail
Thumbnail height: height of each thumbnail
Thumbnail position: position of the thumbnail bar
Thumbnail resize mode: resize mode of the thumbnail
Thumbnail bg color: background color of the thumbnail bar

Enable item over low effect: enable/disable the mouse over glow effect
Glow effect size: size of the glow effect
Glow effect color: color of the glow effect
Enable keyboard control: enable/disable the navigation by keyboard
Next button target: movieclip/button instance name use to control the banner
Next button target: movieclip/button instance name use to control the banner

Loader skin: linkage name of moveclip use for loading graphics.

Save/load: load/save the setting form/to file.

Twist Transform Banner Rotator Inspector Reference

Posted on by
Reply

source: path of the xml source which driving the banner rotator

Transition direction: the direction of transition
Transition duration: the duration of transition

Title text color: default color of the title’s text
Title bg color: background color of the title bar
Title bg Alpha: background alpha of the title bar
Title position: position of the title bar
Data name from xml: the tag name which the data use as title text. Default is <title>

Thumbnail width: width of each thumbnail
Thumbnail height: height of each thumbnail
Thumbnail position: position of the thumbnail bar
Thumbnail resize mode: resize mode of the thumbnail
Thumbnail bg color: background color of the thumbnail bar

Enable item over low effect: enable/disable the mouse over glow effect
Glow effect size: size of the glow effect
Glow effect color: color of the glow effect
Enable keyboard control: enable/disable the navigation by keyboard
Next button target: movieclip/button instance name use to control the banner
Next button target: movieclip/button instance name use to control the banner

Loader skin: linkage name of moveclip use for loading graphics.

Save/load: load/save the setting form/to file.

Flip Transform Banner Rotator Inspector Reference

Posted on by
Reply

source: path of the xml source which driving the banner rotator

Transition direction: the direction of transition
Transition duration: the duration of transition

Title text color: default color of the title’s text
Title bg color: background color of the title bar
Title bg Alpha: background alpha of the title bar
Title position: position of the title bar
Data name from xml: the tag name which the data use as title text. Default is <title>

Thumbnail width: width of each thumbnail
Thumbnail height: height of each thumbnail
Thumbnail position: position of the thumbnail bar
Thumbnail resize mode: resize mode of the thumbnail
Thumbnail bg color: background color of the thumbnail bar

Enable item over low effect: enable/disable the mouse over glow effect
Glow effect size: size of the glow effect
Glow effect color: color of the glow effect
Enable keyboard control: enable/disable the navigation by keyboard
Next button target: movieclip/button instance name use to control the banner
Next button target: movieclip/button instance name use to control the banner

Loader skin: linkage name of moveclip use for loading graphics.

Save/load: load/save the setting form/to file.

Bar transform Banner Rotator Inspector Reference

Posted on by
Reply

source: path of the xml source which driving the banner rotator

No. of sections: number of section which the transform effect have
Transition direction: the direction of transition
Transition duration: the duration of transition
Cube color: the color of the cube

Title text color: default color of the title’s text
Title bg color: background color of the title bar
Title bg Alpha: background alpha of the title bar
Title position: position of the title bar
Data name from xml: the tag name which the data use as title text. Default is <title>

Thumbnail width: width of each thumbnail
Thumbnail height: height of each thumbnail
Thumbnail position: position of the thumbnail bar
Thumbnail resize mode: resize mode of the thumbnail
Thumbnail bg color: background color of the thumbnail bar

Enable item over low effect: enable/disable the mouse over glow effect
Glow effect size: size of the glow effect
Glow effect color: color of the glow effect
Enable keyboard control: enable/disable the navigation by keyboard
Next button target: movieclip/button instance name use to control the banner
Next button target: movieclip/button instance name use to control the banner

Loader skin: linkage name of moveclip use for loading graphics.

Save/load: load/save the setting form/to file.

Quick Start For Using Banner Rotator Flash Component

Posted on by
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 Component Inspector Reference

Posted on by
Reply

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

Proportion scale – set proportion scale value

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


Rotation Menu Panel


Radius – radius of the item rotation

Angle of camera view – set the angle of camera view

Focus length of the camera – set the distance between camera and the menu

Lock item rotation – set the item locking the orientation

Number of items same as data source – enable the number of item appear to be same  as in datasource

Number of item – number of item appear in the menu as the same time

Center object – the linkage name of movieclip which use as the center object

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.

RotationMenu Video Quick Start

Posted on by
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

Posted on by
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

Posted on by
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.