Custom skin for video player

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

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

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.

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

Enable smoothing – enable bitmap smoothing when component rendering


PhotoFlip Panel

Item Repeat – enable item repeat/looping

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

Rotation of side item – value of the rotation for the side items

Proportion scale – proportion scale of the side item

Z Distance – z distance between middle item and side item

Distance between camera – distance between the camera and the component

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

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

Reflection – set the value of reflection effect

Skin Panel

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

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.

PhotoFlip Video Quick Start

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

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

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

Prepare xml and images with Photoshop

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

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

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

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