Wednesday, July 30, 2008

Sample Image Tile List

Sample Application demonstrating the ImageTileList with zooming effect.

View the application here....

Source Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="620" height="700" creationComplete="init()"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;

private var myArr:Array;

public function init():void{
   myArr = new Array();
    myArr[0] = {"image": "img/My Computer.png","caption": "My Computer"};
    myArr[1] = {"image": "img/My Documents.png","caption": "My Documents"};
    myArr[2] = {"image": "img/Google.png", "caption": "Google"};
    myArr[3] = {"image": "img/NotePad.png","caption": "NotePad"};
    myArr[4] = {"image": "img/WordPad.png","caption": "WordPad"};
    myArr[5] = {"image": "img/Email.png", "caption": "Email"};
    myArr[6] = {"image": "img/MediaPlayer.png","caption": "MediaPlayer"};
    myArr[7] = {"image": "img/AcrobatReader.png","caption": "AcrobatReader"};
    myArr[8] = {"image": "img/iTunes.png", "caption": "iTunes"};
    myArr[9] = {"image": "img/Ms Paint.png","caption": "Ms Paint"};
    myArr[10] = {"image": "img/Ms Word.png","caption": "Ms Word"};
    myArr[11] = {"image": "img/PowerPoint.png", "caption": "PowerPoint"};
    myArr[12] = {"image": "img/Excel.png", "caption": "Excel"};
    myArr[13] = {"image": "img/Calendar.png","caption": "Calendar"};
    myArr[14] = {"image": "img/Search.png", "caption": "Search"};
    myArr[15] = {"image": "img/My Music.png","caption":"My Music"};
    myArr[16] = {"image": "img/My Pictures.png","caption": "My Pictures"};
    myArr[17] = {"image": "img/My Videos.png", "caption": "My Videos"};

    tl.dataProvider =  myArr;
    //mySlide.visible = true;
}

private function onItemClick():void{
    myImage.source = tl.selectedItem.image;
    myShow.play();
}

private var i:int = 0;

private function onNext():void{
    if( i+5 < myArr.length){
        tl.scrollToIndex(i+5);
        i+=5;
        myShow2.play();
    }
}
private function onBack():void{
    if( i ){
        tl.scrollToIndex(i-5);
        i-=5;
        myShow2.play();
    }
}
]]>
</mx:Script>

<!--################  ################-->
<mx:Parallel id="myOver">
    <mx:Blur blurXFrom="30" blurYFrom="30" />
    <mx:Fade alphaFrom="0.6" alphaTo="1" />
    <mx:Resize widthTo="150" heightTo="150" easingFunction="Back.easeOut"/>
    <mx:Glow alphaTo="20" blurYTo="20" blurXTo="20" color="0x00ff00" />
</mx:Parallel>
<mx:Parallel id="myOut">
    <mx:Fade alphaFrom="1" alphaTo="0.6" />
    <mx:Resize widthTo="100" heightTo="100" easingFunction="Back.easeOut"/>
    <mx:Glow blurYTo="0" blurXTo="0" />
</mx:Parallel>
<mx:Sequence id="myShow2" target="{tl}">
    <mx:Fade alphaFrom="0" alphaTo="1"/>   
</mx:Sequence>
<mx:Fade id="myShow" alphaFrom="0" alphaTo="1"/>   

<!--################  ################-->
<mx:DropShadowFilter id="dsf" blurX="10" blurY="10" color="0x330000" distance="0" strength="1" />
<mx:GlowFilter id="gf" blurX="10" blurY="10" inner="true" color="0xffffff" strength="3" />

<!--################  ################-->
<mx:VDividedBox x="0" y="10" height="100%" width="100%">
    <mx:Canvas width="100%" height="100%" backgroundColor="#FFccff" >
        <mx:Button label="→" click="onNext()" x="580" y="458"/>
        <mx:Button label="←" click="onBack()" x="0" y="458"/>
        <mx:Image id="myImage" width="528" height="439"  x="46" y="10" filters="{[gf,dsf]}"/>
    </mx:Canvas>
    <mx:Canvas label="Canvas 2" width="100%" height="170" id="myCanvas">
        <mx:TileList id="tl" x="0" y="0" width="100%" height="100%"  rowCount="1"
               rollOverColor="0xffffff" itemClick="onItemClick()" selectionColor="0xffccff" backgroundAlpha="0.3" direction="vertical"  horizontalScrollPolicy="off"
               rowHeight="160" columnWidth="160">
               <mx:itemRenderer>
                   <mx:Component>
                       <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
                           verticalAlign="middle" horizontalAlign="center"
                           borderStyle="solid" borderThickness="1" borderColor="0xffccff">
                           <mx:Image id="myImage" source="{data.image}" width="100" height="100" alpha="0.6"
                               rollOutEffect="{outerDocument.myOut}" rollOverEffect="{outerDocument.myOver}"/>
                      </mx:VBox>
                    </mx:Component>
               </mx:itemRenderer>
        </mx:TileList>
    </mx:Canvas>
</mx:VDividedBox>
</mx:Application>

Using ActionScript to load Styles at run time

A sample application demonstrating the usage of loading styles at run time using action script.

StyleManager.loadStyleDeclarations( "darkroom.swf" );
StyleManager.unloadStyleDeclarations( "darkroom.swf" );



















View the application here....

Tuesday, July 29, 2008

Some Flex Resources......

Explorer series

Library Name

Simple Explanation

More

Demo

Source

ComponentExplorer

Component List


1


Style Explorer

Easy to set up style


1

2

Filter Explorer

Easy to set up a filter


1

2

Primitive Explorer



1

2

ChartSampler

Charts Sample






Flex convenient library..

Library Name

Simple Explanation

More

Demo

Source

flexlib

Base64Image

1

2

3

as3corelib

Json format can easily done

1


3

var_dump

XML and object debugging is easy

1

2


as3syndicationlib

RSS and Atom is easy to read




as3youtubelib

YouTube if you kole




as3flickrlib

Flickr if you kole




as3httpclient

Http Client




flex-object-handles

Component resize or rotate

1



SuperPanelPlus

Drag size can pierce panel




as3xls

Can read Excel




SWFAddress

URL Address and title of dynamic changes




tweener

I value and changes in the pile-up are useful. The spring or even-tempered




WiiFlash.org

Flash in the Wii remote control to use




IFrame HTML component

Flex in IFrame(HTML) if you use kole




Flex Time Entry Component


Easy to setup time

1




spellcheck


Checking the spelling of a component




Korax ColorPicker Control

Enhanced Color Picker




Flex Video Player

Features such as Stop, Play, fast-froward




Mouse Gesture Recognition

Hand writing recognition




queueloader-as3

Queuing downloader

1



Graphics

Library Name

Simple Explanation

More

Demo

Source

Reflection Manager

Specular

1



Live reflection component

Specular

1



Free Visual Reflection Component for Flex 2

Specular

1



PageFlip class

Paper shuffling




Flex Book

Flex book component




AlivePDF

AIR PDF creation




apdf

Pdf creation




QR Code

QR code tags can be easily created




BarCode Generator Demo





PaperVision3D





Blender AS3Exporter





Google Map for Flash





UMap(AS 3.0)





Image Processing Library


1



Box2D





Variable Radius Pie Chart


1



A Flex component for graph visualization


1



The Flare Visualization toolkit





Rating Component


1



RepeatingImage





TileCanvas





Fisheye Component v0.3


1



flexmdi


1



FX SlideShow





Flex2 RolloverImage component

Mouse over a picture can easily be changed

1



Flex Thumbnail Browser Component

Limited high-speed slide show

1



Animated DragTile Component





Random Walk Component

Cross bar like navigator

1



The Gauge

Clock and a small set of valves




Free Audio Visualization component for Flex 2

Sound Graph components

1



Components