Flex開発のテンションが上がる10個のタグ
Flexを使い始めて2年くらいなのですが、これからFlex初めてみようかなぁって方にはぜひ知っておいてほしい10個のタグをリストアップしました。
プログラムをタグで記述していくスタイルなので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
音声の再生も動画と同様に1行でかくことができる。
<?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コードを1行で作ることができる。⇒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
登録が最初面倒かもしれませんが、チャットや動画チャット、お絵かチャットなどがそれぞれ1行書くだけで作ることができる。
<?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>
以上です。
Flexには他にもチャート(グラフ)系クラスやカメラクラスなどもありますので、ぜひとも少ないコードで大きな楽しみを作ってみてください。