Flex: October 2008

Monday, October 27, 2008

Video Player with Fullscreen,play,pause,stop,mute,volume,progress

?xml version="1.0" encoding="utf-8"?>
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" cornerRadius="14" backgroundAlpha="0" width="100%" height="100%">
mx:Script source="ascript.as" />
mx:ArrayCollection id="playlist">
mx:String>videos/AdobeBand_640.flv
mx:String>videos/phone.flv
mx:String>videos/sample.flv
mx:ArrayCollection>
mx:Style source="new.css"/>
mx:HBox >
mx:VideoDisplay id="videoDisplay"
width="260"
height="220"
playheadUpdate="changeProgressBar()"
volume="{volumesl.value}"
complete="reply()"
doubleClickEnabled="true"
doubleClick="makeFullScreen()" />
mx:List id="mylist"
dataProvider="{playlist}"
click="loadButton_list(event)"
dropEnabled="true"
dragEnabled="true"
height="100%"/>
mx:HBox>
mx:HSlider id="progress"
thumbSkin="@Embed(source='skins/thumb.png')"
showTrackHighlight="true"
slideEasingFunction="undefined"
liveDragging="false"
tickColor="black"
trackSkin="@Embed(source='skins/prg.png')"
width="{videoDisplay.width}"/>
mx:ControlBar>
mx:Button id="loadButton"
styleName="Play"
toggle="true"
click="plyBtn(event);" />
mx:Button id="unloadButton"
styleName="Stop"
toggle="true"
click="unloadButton_click(event);" />
mx:HSlider id="volumesl"
minimum="0"
maximum="1"
width="75"
snapInterval="0.1"
allowTrackClick="true"
trackSkin="@Embed(source='skins/vol.png')"
change="volchange()"
thumbSkin="@Embed(source='skins/thumb.png')" />
mx:Button id="fs"
styleName="Fscreen"
toggle="true"
click="makeFullScreen()"/>
mx:Button id="mute"
toggle="true"
styleName="Mute" width="34"
click="SoundOff()"/>
mx:ControlBar>
mx:Application>

ascript.as
----------
import flash.events.*;
public static var vol:int;
private function reply():void
{
videoDisplay.play();
SoundOff();
}
public function loadButton_click(evt:MouseEvent):void
{
volumesl.value=vol;
var url:String =mylist.selectedItem.toString();
videoDisplay.source = url;
vol=volumesl.value;
if (loadButton.selected )
{

videoDisplay.play();
vol=volumesl.value;
}
else
{
videoDisplay.pause();
}
}
public function plyBtn(evt1:MouseEvent):void
{
volumesl.value=vol;
videoDisplay.source = "videos/sample.flv";
vol=volumesl.value;
if (loadButton.selected )
{
videoDisplay.play();
vol=volumesl.value;
}
else
{
videoDisplay.pause();
}
}
public function loadButton_list(evt:MouseEvent):void
{
var url:String =mylist.selectedItem.toString();
videoDisplay.source = url;
var i:int=videoDisplay.source.length;
progress.minimum=0;
progress.maximum=i;
videoDisplay.play();
}
public function SoundOff():void
{
if (mute.selected)
{
videoDisplay.volume=0;
}
else
{
videoDisplay.volume=volumesl.value;
}
}
public function volchange():void
{
vol=volumesl.value;
mute.selected=false;
}
private function unloadButton_click(evt:MouseEvent):void
{
videoDisplay.close();
videoDisplay.source = null;
videoDisplay.mx_internal::videoPlayer.clear();
videoDisplay.volume=0;
progress.value=0;
loadButton.selected=false;
}
private function changeProgressBar(): void
{
progress.value = videoDisplay.playheadTime
}
private function makeFullScreen():void
{
fs.enabled="false";
if(stage.displayState == StageDisplayState.FULL_SCREEN)
{
stage.displayState = StageDisplayState.NORMAL
videoDisplay.width=260;
videoDisplay.height=220;
}
else
{
stage.displayState = StageDisplayState.FULL_SCREEN
videoDisplay.width=810;
videoDisplay.height=590;
}

}

new.css
-------

Canvas
{
borderThicknessLeft: 14;
borderThicknessRight: 14;
borderThicknessTop: 2;
borderThicknessBottom: 12;
headerHeight: 28;
backgroundAlpha: 0;
cornerRadius: 28;
titleStyleName: "mypanelTitle";
roundedBottomCorners: true;
backgroundAlpha: 0;
highlightAlphas: 0, 0;

}
.Play
{
skin:Embed(source='skins/play.png');
over-skin : Embed('skins/play pushed.png');
downSkin: Embed('skins/pause hot.png');
selectedUpSkin: Embed('skins/pause hot.png');
selectedOverSkin: Embed('skins/pause pushed.png');
selectedDownSkin: Embed('skins/play.png');
}
.Play1
{
skin:Embed(source='skins/play.png');
}
.Mute
{
skin:Embed(source="skins/sound1.png");
over-skin : Embed('skins/sound2.png');
selected-up-skin:Embed('skins/sound3.png');
down-skin:Embed('skins/sound3.png');
}
.Stop
{
skin:Embed(source='skins/stop hot.png');
over-skin : Embed('skins/stop pushed.png');
}
.Fscreen
{
skin:Embed(source='skins/FS.png');
}

/* CSS file */

Monday, October 20, 2008

playing videos one after one

http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white" viewSourceURL="srcview/index.html">
private function reply():void
{
videoDisplay.play();
}
public function loadButton_click(evt:MouseEvent):void {
var url:String = "http://www.helpexamples.com/flash/video/
clouds.flv";
videoDisplay.source = url;
}
private function unloadButton_click(evt:MouseEvent):void {
videoDisplay.close();
videoDisplay.source = null;
videoDisplay.mx_internal::videoPlayer.clear();
}
]]>
minimum="0.0"
maximum="1.0"
value="1"
snapInterval="0.01"
liveDragging="true" />
backgroundAlpha="{slider.value}"
backgroundColor="{colorPicker.selectedColor}"
width="160"
height="120" complete="reply()" />
label="Load"
click="loadButton_click(event);" />
label="Unload"
click="unloadButton_click(event);" />

Sunday, October 19, 2008

Gradient Canvas Style explorer

Fr customizing Canvas with different gradient colors for border and
for different styles, check this Gradient Canvas Style explorer

http://afoucal.free.fr/wp-content/GradientCanvas/v2.1/index.html

Dissolve Effect of a Image

?xml version="1.0" encoding="utf-8"?>
!-- Simple example to demonstrate the Dissolve effect. -->
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

mx:Panel title="Dissolve Effect Example"
width="95%" height="95%" layout="horizontal"
paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

mx:VBox height="100%">
mx:Label text="Nokia 9930"
fontSize="14"
visible="{cb1.selected}"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

mx:Image source="@Embed(source='assets/Nokia_6630.png')"
visible="{cb1.selected}"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
mx:VBox>

mx:VBox height="100%" width="100%">
mx:Text width="100%" color="blue"
text="Use the Dissolve effect to show or hide the text, image, and button."/>

mx:Spacer height="100%"/>

mx:Button label="Purchase"
visible="{cb1.selected}"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
mx:VBox>

mx:ControlBar>
mx:CheckBox id="cb1" label="visible" selected="true"/>
mx:ControlBar>
mx:Panel>
mx:Application>

Adding & Deleting Effects of a TileList

?xml version="1.0"?>
mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

mx:Script>
![CDATA[
import mx.effects.easing.Elastic;
import mx.collections.ArrayCollection;

[Bindable]
private var myDP:ArrayCollection = new ArrayCollection(
['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']);

private function deleteItem():void {
// As each item is removed, the index of the other items changes.
// So first get the items to delete, then determine their indices
// as you remove them.
var toRemove:Array = [];
for (var i:int = 0; i < tlist0.selectedItems.length; i++)
toRemove.push(tlist0.selectedItems[i]);
for (i = 0; i < toRemove.length; i++)
myDP.removeItemAt(myDP.getItemIndex(toRemove[i]));
}

private var zcount:int = 0;
private function addItem():void {
// Always add the new item after the third item,
// or after the last item if the length is less than 3.
myDP.addItemAt("Z"+zcount++,Math.min(3,myDP.length));
}
]]>
mx:Script>

!-- Define a custom data effect as a Sequence effect. -->
mx:Sequence id="itemsChangeEffect1">
mx:Blur
blurYTo="12" blurXTo="12"
duration="300"
perElementOffset="150"
filter="removeItem"/>
mx:Parallel>
mx:Move
duration="750"
easingFunction="{Elastic.easeOut}"
perElementOffset="20"/>
mx:RemoveItemAction
startDelay="400"
filter="removeItem"/>
mx:AddItemAction
startDelay="400"
filter="addItem"/>
mx:Blur
startDelay="410"
blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0"
duration="300"
filter="addItem"/>
mx:Parallel>
mx:Sequence>

mx:Panel title="AddItemEffect/RemoveItemEffect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

!-- This TileList uses a custom data change effect -->
mx:TileList id="tlist0"
height="100%" width="100%"
fontSize="18" fontStyle="bold"
columnCount="4" rowCount="4"
direction="horizontal"
dataProvider="{myDP}"
allowMultipleSelection="true"
offscreenExtraRowsOrColumns="4"
itemsChangeEffect="{itemsChangeEffect1}"/>

mx:Button
label="Delete selected item(s)"
click="deleteItem();"/>
mx:Button
label="Add item"
click="addItem();"/>

mx:Panel>
mx:Application>

Flex