知っておくと便利な小技
こんな感じに既存のクラスだけでおもしろいエフェクトをつけることができます。
http://moeten.info/flex/20080529_todayTip/bin-release/main.html
アイテムの追加時アクション
<mx:RemoveItemAction startDelay="400" filter="removeItem"/> <mx:AddItemAction startDelay="400" filter="addItem"/>
プロパティやスタイルをだんだんと変更
<mx:AnimateProperty id="myAnime" targets="{[tl1,tl2]}" property="scaleX" fromValue="0" toValue="1" duration="1000" easingFunction="Back.easeOut" />
音声再生が一行でOK
<mx:SoundEffect id="mySounds" source="@Embed(source='70.clickbutton.mp3')" volumeFrom="0.1" volumeTo="0.1"/>
知っておくと便利なページ
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #CBDAFF]" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.effects.easing.*; //初期化関数 private function init():void{ myHTS.send(); myAnime.play(); } ]]> </mx:Script> <mx:HTTPService id="myHTS" url="http://moeten.info/maidcafe/?type=shop&tid=13&cid=1&m=api" useProxy="false" resultFormat="e4x" showBusyCursor="true"/> <!-- sound , additemeffect , print dg , animation --> <!-- プロパティやスタイルをだんだんと変更することができる--> <mx:AnimateProperty id="myAnime" targets="{[tl1,tl2]}" property="scaleX" fromValue="0" toValue="1" duration="1000" easingFunction="Back.easeOut" /> <!-- アイテムが追加や削除されたときに実行 tl1用--> <mx:Sequence id="itemsChangeEffect1"> <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/> <!--音声再生が一行でOK--> <mx:SoundEffect id="mySounds" source="@Embed(source='70.clickbutton.mp3')" volumeFrom="0.1" volumeTo="0.1"/> <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> <!-- アイテムが追加や削除されたときに実行 tl2用--> <mx:Sequence id="itemsChangeEffect2"> <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> <!-- tl1 --> <mx:TileList id="tl1" dragEnabled="true" dragMoveEnabled="true" width="100" columnWidth="100" columnCount="1" height="557" x="10" y="10" direction="horizontal" dataProvider="{myHTS.lastResult.item}" allowMultipleSelection="true" itemsChangeEffect="{itemsChangeEffect1}"> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image source="{data.image.image1}" width="100" height="100"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:TileList> <mx:Label x="113" y="211" text="ドラッグ>" fontSize="30"/> <!-- tl2 --> <mx:TileList id="tl2" dropEnabled="true" dragMoveEnabled="true" width="100" columnWidth="100" columnCount="1" height="557" x="246" y="10" direction="horizontal" allowMultipleSelection="true" itemsChangeEffect="{itemsChangeEffect2}"> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image source="{data.image.image1}" width="100" height="100"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:Application>