RationXYZを使ったサンプルアプリ
RationXYZを使ったサンプルアプリです。
単純にTweenerでXYZを変化させているだけです。
こんな感じ
http://moeten.info/flex/20081016_fp10Test/bin-release/test07.html
リンクボタンとかがそのまま動くのがいいね。
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" creationComplete="init()" backgroundGradientColors="[0xffffff,0xcccccc]" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Script> <![CDATA[ import caurina.transitions.Tweener; private function init():void{ hts.send(); htsTid.send(); } private function onTidChange():void{ hts.send({"tid":tidBox.selectedItem.tid}); } private function onResult():void{ tl.rotationX = Math.random()*180; tl.rotationY = Math.random()*180; tl.rotationZ = Math.random()*180; tl.x = Math.random() * 100; tl.y = Math.random() * 100; tl.z = Math.random() * 100; Tweener.addTween( tl ,{ x:10, y:10, z:10, rotationX:10, rotationY:10, rotationZ:10, time:1, delay:0.3, transition:"easeInOutCubic", onComplete:function():void{ myGlow.play([tl]) } }); } private function onItemClick():void{ tl.selectable = false; myImage.visible = true; tlHide.play([tl]); myImage.x = detailCanvas.x = Math.random()*this.width; myImage.y = detailCanvas.y = -100; myImage.z = detailCanvas.z = 100; myImage.rotationX = detailCanvas.rotationX = Math.random()*180; myImage.rotationY = detailCanvas.rotationY = Math.random()*180; myImage.rotationZ = detailCanvas.rotationZ = Math.random()*180; Tweener.addTween( myImage ,{ x:this.width/2 - myImage.width, y:this.height/2 - myImage.height/2, z:0, rotationX:10, rotationY:10, rotationZ:10, time:1, delay:0.3, transition:"easeOutCubic" }); Tweener.addTween( detailCanvas ,{ x:this.width/2 , y:this.height/2 -120, z:0, rotationX:10, rotationY:10, rotationZ:10, time:1, delay:0.9, transition:"easeOutCubic" }); } private function onMouseMove():void{ // tl.rotationX = (tl.width/2 - tl.mouseX) * 0.01; // tl.rotationY = (tl.height/2 - tl.mouseY)* 0.01; } private function onImageClick():void{ tlShow.play([tl]); tl.selectable = true; myImage.visible=false } private function tlNextPage():void{ tlPageEffect.play(); tl.verticalScrollPosition = tl.verticalScrollPosition + 4; } private function tlPrePage():void{ tlPageEffect.play(); if( tl.verticalScrollPosition <= 4 )return; tl.verticalScrollPosition = tl.verticalScrollPosition - 4; } ]]> </mx:Script> <!--############# #############--> <mx:HTTPService id="hts" url="http://moeten.info/maidcafe/?m=api&tid=13&type=shop" resultFormat="e4x" result="onResult()"/> <mx:HTTPService id="htsTid" url="http://moeten.info/maidcafe/?m=api&tid=list&type=shop" resultFormat="e4x" result="onResult()"/> <!--############# #############--> <mx:DropShadowFilter id="dsf" blurX="5" blurY="5" color="0x000000" distance="0" /> <!--############# #############--> <mx:Sequence id="tlPageEffect" target="{tl}"> <mx:Fade alphaFrom="0" alphaTo="1"/> <mx:Glow id="myGlow" alphaFrom="1" alphaTo="0" blurXFrom="20" blurYFrom="20" blurXTo="0" blurYTo="0" color="0x00ff00"/> </mx:Sequence> <mx:Parallel id="myShow"> <!--<mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>--> <mx:Zoom zoomHeightFrom="0.1" zoomWidthFrom="0.1" zoomHeightTo="1" zoomWidthTo="1" duration="1000" /> </mx:Parallel> <mx:Fade id="tlShow" alphaFrom="0.2" alphaTo="1" duration="600" /> <mx:Fade id="tlHide" alphaFrom="1" alphaTo="0.2" duration="1000" /> <!--############# #############--> <mx:TileList id="tl" x="0" y="0" width="700" height="400" dataProvider="{hts.lastResult.item}" mouseMove="onMouseMove()" backgroundAlpha="0" borderThickness="0" rowCount="4" columnCount="7" verticalScrollPolicy="off" itemClick="onItemClick()" rollOverColor="0xffffff" selectionColor="0xffffff"> <mx:itemRenderer> <mx:Component> <mx:Image source="{data.image.image1}" width="100" height="100" verticalAlign="middle" horizontalAlign="center"/> </mx:Component> </mx:itemRenderer> </mx:TileList> <mx:ComboBox id="tidBox" x="681" y="10" dataProvider="{htsTid.lastResult.item}" labelField="todouhuken" rowCount="10" width="109" change="onTidChange()"> </mx:ComboBox> <mx:LinkButton x="720" y="44" label="＜" click="tlPrePage()"/> <mx:LinkButton x="759" y="44" label="＞" click="tlNextPage()"/> <mx:Image id="myImage" source="{tl.selectedItem.image_big.image1}" visible="false" click="onImageClick()" width="300" height="400" filters="{[dsf]}" showEffect="myShow" hideEffect="Fade"/> <mx:Canvas id="detailCanvas" x="423" y="130" width="314.5" height="379" dropShadowColor="0x000000" dropShadowEnabled="true" showEffect="myShow" hideEffect="Fade" visible="{myImage.visible}" cornerRadius="5" backgroundAlpha="1" backgroundColor="0xffffff" borderStyle="solid" borderThickness="3"> <mx:Label x="10" y="10" text="{tl.selectedItem.shopname}" fontSize="20" width="288.5" height="32"/> <mx:Grid x="10" y="50" width="288.5" height="313"> <mx:GridRow width="100%" height="100%"> <mx:GridItem width="100%" height="100%"> <mx:Label text="カテゴリー"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Label text="{tl.selectedItem.category}"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%" height="100%"> <mx:GridItem width="100%" height="100%"> <mx:Label text="マップ"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Label text="{tl.selectedItem.zyuusyo}"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%" height="100%"> <mx:GridItem width="100%" height="100%"> <mx:Label text="電話番号"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Label text="{tl.selectedItem.tel}"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%" height="100%"> <mx:GridItem width="100%" height="100%"> <mx:Label text="公式サイト"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:LinkButton label="{tl.selectedItem.url}" click="{navigateToURL( new URLRequest( tl.selectedItem.url ) ) }"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%" height="100%"> <mx:GridItem width="100%" height="100%"> <mx:Label text="営業時間"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Label text="{tl.selectedItem.eigyoujikan}"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%" height="100%"> <mx:GridItem width="100%" height="100%"> <mx:Label text="メニュー"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Label text="{tl.selectedItem.menu}"/> </mx:GridItem> </mx:GridRow> </mx:Grid> </mx:Canvas> </mx:Application>
