Flex開発のテンションが上がる１０個のタグ - PHP,MySQL,Flex,JSな日々＋イラストとか

Flexを使い始めて２年くらいなのですが、これからFlex初めてみようかなぁって方にはぜひ知っておいてほしい１０個のタグをリストアップしました。
プログラムをタグで記述していくスタイルなのでActionScriptなんてわからない！って方でも安心です（＾−＾）
純正クラス系

videoDisplay

http://moeten.info/flex/20090825_flexTest10/bin-release/videoDisplayTest.html
Flexなら動画再生もお手の物。flvの場所を指定するだけで再生することができる。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
    <mx:VideoDisplay id="vd" source="video.flv" width="420" height="275" x="10" y="10"/>
    <mx:Button label="ストップ" click="{vd.pause()}" y="293" x="145"/>
    <mx:Button label="再生" click="{vd.play()}" y="293" x="214"/>
</mx:Application>

SoundEffect

http://moeten.info/flex/20090825_flexTest10/bin-release/soundTest.html
音声の再生も動画と同様に１行でかくことができる。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff">
    <mx:SoundEffect id="sp" target="{this}" useDuration="false" source="sound.mp3"/>
    <mx:Button click="{sp.play();}" label="再生する" x="10" y="10"/>
</mx:Application>

DateChooser

http://moeten.info/flex/20090825_flexTest10/bin-release/dateChooserTest.html
今日の日付付きのカレンダーが作成できる。前の月や次の月にも対応しているので大変便利です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
    <mx:DateChooser x="21" y="27"/>
    <mx:DateField x="203" y="27"/>
</mx:Application>

RitchTextEditor

http://moeten.info/flex/20090825_flexTest10/bin-release/richTextEditorTest.html
簡単にテキストのエディット（装飾）ができる。内容はhtmlTextとなるので、簡単なジェネレーターとしても利用できる。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
    <mx:RichTextEditor id="rte" x="10" y="10" title="タイトル" height="246"/>
    <mx:TextArea x="343" y="10" width="351" height="119" text="{rte.text}"/>
    <mx:TextArea x="343" y="137" width="351" height="119" text="{rte.htmlText}"/>
</mx:Application>

TabNavigator

http://moeten.info/flex/20090825_flexTest10/bin-release/tabNavigatorTest.html
いくつかのコンテンツのサイトを作る場合に便利なTabNavigator。
あらかじめボタンが用意されていて、それぞれのビューに対応するのが特徴。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
    <mx:TabNavigator x="10" y="10" width="382" height="294">
        <mx:Canvas label="コンテンツ1" width="100%" height="100%">
            <mx:Text text="中身1"/>
        </mx:Canvas>
        <mx:Canvas label="コンテンツ2" width="100%" height="100%">
            <mx:Text text="中身2"/>
        </mx:Canvas>
        <mx:Canvas label="コンテンツ3" width="100%" height="100%">
            <mx:Text text="中身3"/>
        </mx:Canvas>
        <mx:Canvas label="コンテンツ3" width="100%" height="100%">
            <mx:Text text="中身3"/>
        </mx:Canvas>
    </mx:TabNavigator>
</mx:Application>

Wipe ( エフェクト系）

http://moeten.info/flex/20090825_flexTest10/bin-release/wipeTest.html
Flashと言えばアニメーション。Flexには便利なエフェクトアニメーション（blur,glow,zoom,fadeなど）がいくつもある。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Image x="10" y="10" source="wipeImage.jpg" width="308" height="475" creationCompleteEffect="WipeLeft"/>
</mx:Application>

Easingクラスを指定すればバネのように変化するアニメーションも簡単に作れる。

http://moeten.info/flex/20090825_flexTest10/bin-release/effectTest.html

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
//ばねっぽい運動などができるクラス
import mx.effects.easing.*;
]]>
</mx:Script>
    <!--エフェクト群-->
    <mx:Fade id="myFade" target="{im}"/>
    <mx:Iris id="myIris" target="{im}"/>
    <mx:Glow id="myGlow" target="{im}" easingFunction="Bounce.easeInOut" blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" alphaTo="1" color="0xffccff" inner="true"/>
    <mx:Zoom id="myZoom" target="{im}" zoomHeightFrom="0" zoomHeightTo="1" zoomWidthFrom="0" zoomWidthTo="1" easingFunction="Back.easeInOut"/>
    <!---->
    <mx:Image id="im" source="wipeImage.jpg" width="239" height="360" y="10" x="10"/>
    <mx:Button x="257" y="10" label="fade" click="{myFade.play();}"/>
    <mx:Button x="257" y="40" label="iris" click="{myIris.play();}"/>
    <mx:Button x="257" y="70" label="glow" click="{myGlow.play();}"/>
    <mx:Button x="257" y="100" label="zoom" click="{myZoom.play();}"/>
</mx:Application>

AnimationPropertyを使ったRotationX,Y,Z

http://moeten.info/flex/20090825_flexTest10/bin-release/rotationXYZTest.html
Flash10の新機能として3D空間が簡単に扱えるようになりました。AnimationPropertyを使用して、クールなアニメーションを簡単に作ることができる。⇒Flash10なFlexを作る方法。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
]]>
</mx:Script>
    <!--アニメーション群-->
    <mx:Parallel id="myAnim" target="{im}" duration="5000">
        <mx:AnimateProperty property="rotationX" fromValue="0" toValue="360" easingFunction="Back.easeInOut"/>
        <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Back.easeInOut"/>
        <mx:AnimateProperty property="rotationZ" fromValue="0" toValue="360" easingFunction="Back.easeInOut"/>
    </mx:Parallel>
    <mx:Image id="im" source="wipeImage.jpg" width="239" height="360" y="10" x="10" creationCompleteEffect="{myAnim}"/>
</mx:Application>

DataGrid or TileList

http://moeten.info/flex/20090825_flexTest10/bin-release/dataGridTest.html
データーをグリッド上にリスト表示することができる。
httpServiceを使用するとRSSリーダーを2行で作成することができる。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{hts.send()}" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
    <mx:HTTPService id="hts" resultFormat="e4x" url="http://moeten.info/maidcafe/?m=RSS"/>
    <mx:DataGrid x="10" y="10" dataProvider="{hts.lastResult.channel.item}" width="544" height="340">
        <mx:columns>
            <mx:DataGridColumn headerText="列 1" dataField="pubDate"/>
            <mx:DataGridColumn headerText="列 1" dataField="title"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

ライブラリ系

QRcode

http://moeten.info/flex/20090825_flexTest10/bin-release/qrCodeTest.html
QRコードを１行で作ることができる。⇒ＱＲコードライブラリ

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns="com.d_project.qrcode.mx.*" backgroundColor="0xffffff" viewSourceURL="srcview/index.html">
    <ns:QRCode text="qrコードのテストだよ" width="200" height="200" x="10" y="10"/>
    <mx:Text text="※ QRコード(R)は、株式会社デンソーウェーブの登録商標です。 " x="10" y="218"/>
</mx:Application>

cocomo

http://moeten.info/flex/20090825_flexTest10/bin-release/cocomoTest.html
登録が最初面倒かもしれませんが、チャットや動画チャット、お絵かチャットなどがそれぞれ１行書くだけで作ることができる。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" xmlns:rtc="AfcsNameSpace">
    <!--認証関係＠https://cocomo.acrobat.com/-->
    <rtc:AdobeHSAuthenticator id="auth" userName="名無しの権兵衛"/>
    <rtc:ConnectSessionContainer authenticator="{auth}"    roomURL="http://connectnow.acrobat.com/komugi/testMyRoom">
        <mx:Panel width="866" height="587" title="web cam" layout="absolute">
            <!--Webカメラの共有-->
            <rtc:WebCamera width="348" height="294" x="10" y="10"/>
            <!--音声の共有-->
               <rtc:AudioPublisher id="audioPub"/>
            <!--音声の取得-->
               <rtc:AudioSubscriber/>
            <!--テキストチャット-->
               <rtc:SimpleChat width="342" height="225" x="10" y="312"/>
            <!--らくがきチャット-->
             <rtc:SharedWhiteBoard width="476" height="527" x="360" y="10"/>
        </mx:Panel>
    </rtc:ConnectSessionContainer>
</mx:Application>