写真をバサっと置く風なFlash
今日からHatenaをはじめます。よろしくです。
前々から写真をバサっと置くみたいなFlashを作ってみたくてトライしてみました。
基本はMoveを使うことで、意外とうまく行きました。
初めてCSSを使って見ました。
これはFlexについてくるスタイルシートエクスプローラーで確認するとラクチンです。
http://moeten.info/hatena/20071113_photo/bin/main.html
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" creationComplete="initApp();" verticalScrollPolicy="off" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html"> <mx:Style> .my{ borderColor: #b7babc; borderThickness: 4; dropShadowEnabled: true; backgroundColor:#ffffff; borderColor:#ff80ff; cornerRadius:3; themeColor:#ff80ff; borderStyle:solid; } </mx:Style> <mx:Script> <![CDATA[ import mx.managers.DragManager; import mx.containers.Canvas; import mx.controls.Image; import mx.effects.Rotate; import mx.effects.Move; import mx.effects.Effect; private function initApp():void{ var i:int = new int(); for( i = 1 ; i<= 3 ; i ++ ){ //キャンバスの作成 var mycanvas:Canvas = new Canvas(); mycanvas.width = 300; mycanvas.height = 300; mycanvas.horizontalScrollPolicy = "off"; mycanvas.verticalScrollPolicy = "off"; mycanvas.x = Math.round( Math.random()*200 ); mycanvas.y = Math.round( Math.random()*200 ); mycanvas.styleName = "my"; //画像の作成 var image:Image = new Image(); image.source = "asset/0" + i + ".jpg"; image.width = 300; image.height = 300; //ドラッグ関係作成中 mycanvas.addEventListener(MouseEvent.MOUSE_DOWN , mouseDownHandler ); mycanvas.addEventListener(MouseEvent.MOUSE_MOVE , mouseMoveHandler ); mycanvas.addEventListener(MouseEvent.MOUSE_UP , mouseUpHandler ); //ステージにアッド mycanvas.addChild( image ); this.addChild( mycanvas ); //ムーブ var move:Move = new Move(); move.target = mycanvas; move.yTo = Math.round( Math.random()*200 ); move.xTo = Math.round( Math.random()*500 )+100; move.duration = 1000; move.play(); //回転 var rotate:Rotate = new Rotate(); rotate.originX = -50; rotate.originY = -50; rotate.duration = 1000; rotate.target = mycanvas; rotate.angleFrom = Math.round( Math.random()*100 ); rotate.angleTo = Math.round( Math.random()*100 ); rotate.play(); } } private var isMouseDown:Boolean = false; private function mouseDownHandler(event:MouseEvent):void{ isMouseDown = true; if(!DragManager.isDragging){ } } public function mouseMoveHandler(event:MouseEvent):void{ } public function mouseUpHandler(event:MouseEvent):void{ isMouseDown = false; } ]]> </mx:Script> </mx:Application>