<?xml version="1.0" encoding="utf-8" ?><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://purl.org/rss/1.0/" 
			xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" 
			xmlns:cc="http://web.resource.org/cc/" xml:lang="ja">
<channel rdf:about="http://100th.blog96.fc2.com/?xml">
<title>百匹目の猿</title>
<link>http://100th.blog96.fc2.com/</link>
<description>ActionScript勉強中。</description>
<dc:language>ja</dc:language>
<items>
<rdf:Seq>
<rdf:li rdf:resource="http://100th.blog96.fc2.com/blog-entry-52.html" />
</rdf:Seq>
</items>
</channel>
<item rdf:about="http://100th.blog96.fc2.com/blog-entry-52.html">
<link>http://100th.blog96.fc2.com/blog-entry-52.html</link>
<title>rotationYでcoverflow風に表示する</title>
<description> 前回のエントリでは、Papervision3Dを使ってcoverflow風の表示をしてみましたが、今回はFlashPlayer10から使えるようになったDisplayObject.rotationYでカバーを回転させてみました。          	  今回も、並んでるカバー（のつもりの板）をクリックすると、それが中央に表示されます。今回のサンプルではPapervision3Dは使用していませんが、前回と同じくtweener_1_33_74_as3.zipは使用しています。なのでサンプルコードをパブリ
 </description>
<content:encoded>
<![CDATA[ 前回のエントリでは、Papervision3Dを使ってcoverflow風の表示をしてみましたが、今回はFlashPlayer10から使えるようになったDisplayObject.rotationYでカバーを回転させてみました。<br />  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="400" id="coverFlowBlogSample" align="middle"><br />  <param name="allowScriptAccess" value="sameDomain" /><br />  <param name="allowFullScreen" value="false" /><br />  <param name="wmode" value="opaque" /><br />  <param name="movie" value="http://blog-imgs-40.fc2.com/1/0/0/100th/coverFlowSample20090815.swf" /><param name="quality" value="high" /><param name="wmode" value="gpu" /><param name="bgcolor" value="#000000" />	<embed src="http://blog-imgs-40.fc2.com/1/0/0/100th/coverFlowSample20090815.swf" quality="high" wmode="gpu" bgcolor="#000000" width="500" height="400" name="coverFlowBlogSample" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" /><br />  </object><br />今回も、並んでるカバー（のつもりの板）をクリックすると、それが中央に表示されます。<br /><br />今回のサンプルではPapervision3Dは使用していませんが、前回と同じく<a href="http://code.google.com/p/tweener/">tweener_1_33_74_as3.zip</a>は使用しています。<br />なのでサンプルコードをパブリッシュするにはダウンロードしたtweenerをflaファイルを同じディレクトリに展開しておく必要があります。<br /><br />サンプルのスクリプトは、flaファイルの最初のフレームにアクションとして書いています。<pre style="border: 1px solid gray;">import caurina.transitions.Tweener;<br />// カバーのサイズ<br />var spSize:Number = 200;<br />// カバーの間隔<br />var interval:Number = 50;<br />// 中心座標<br />var cx:Number = stage.stageWidth / 2;<br />var cy:Number = stage.stageHeight / 2;<br />// カバー配列<br />var coverArray:Array = [<br />            createCover(1, 0x0000CC),<br />            createCover(2, 0x0033CC),<br />            createCover(3, 0x0066CC),<br />            createCover(4, 0x0099CC),<br />            createCover(5, 0x00CCCC),<br />            createCover(1, 0x00CC00),<br />            createCover(2, 0x33CC00),<br />            createCover(3, 0x66CC00),<br />            createCover(4, 0x99CC00),<br />            createCover(5, 0xCCCC00)<br />            ];<br />// カバーの初期処理<br />for (var i:uint = 0, iEnd:uint = coverArray.length; i &lt; iEnd; i++) {<br />  var sp:Sprite = coverArray[i];<br />  // 表示する<br />  addChild(sp);<br />  // ｙ座標とｚ座標の初期値を設定する<br />  sp.y = cy;<br />  sp.z = 0;<br />  // クリックイベントリスナを登録する<br />  sp.addEventListener(MouseEvent.CLICK, createClickHandler(i));<br />}<br />// カバークリックイベントハンドラを生成して戻します<br />function createClickHandler(idx:uint):Function {<br />  return function (e:MouseEvent):void {<br />    // クリックしたカバーのインデックスを指定して再配置<br />    arrangeCover(idx);<br />  };<br />}<br />// 初期状態で表示されるカバーのインデックス<br />var cIdx:uint = coverArray.length / 2;<br />// 配置する<br />arrangeCover(cIdx);<br />// 移動情報配列<br />var movingInfoArray:Array = new Array();<br />// 指定したインデックスを選択した状態でカバーを配置します<br />function arrangeCover(idx:uint) {<br />  // カバーにトィーンを付加する<br />  for (var i:uint = 0, iEnd:uint = coverArray.length; i &lt; iEnd; i++) {<br />    var sp:Sprite = coverArray[i];<br />    if (i &lt; idx) {<br />      // 指定インデックスより左ならｙ軸を中心に-90度傾ける<br />      addTween(sp, cx - (idx - i) * interval - spSize /2, spSize / 2, -90);<br />    } else if (i &gt; idx) {<br />      // 指定インデックスより右ならｙ軸を中心に90度傾ける<br />      addTween(sp, cx + (i - idx) * interval + spSize / 2, spSize / 2, 90);<br />    } else {<br />      addTween(sp, cx, 0, 0);<br />    }<br />  }<br />  // 重ね順を更新する<br />  for (i = 0; i &lt; idx; i++) {<br />    addChild(coverArray[i]);<br />  }<br />  for (i = coverArray.length - 1; i &gt; idx; i--) {<br />    addChild(coverArray[i]);<br />  }<br />  addChild(coverArray[idx]);<br />}<br />// 指定したオブジェクトにトィーンを付加します<br />function addTween(sp:Sprite, newX:Number, newZ:Number, newRotationY:Number):void {<br />  Tweener.addTween(sp, {<br />           x:newX,<br />           z:newZ,<br />           rotationY:newRotationY,<br />           time:0.3,<br />           delay:0,<br />           transition:&quot;easeOutSine&quot;<br />             });<br />}<br />// 背景色<br />var bgColor:uint = 0x000000;<br />// サンプル用のカバームービークリップを生成して戻します<br />function createCover(num:uint, col:uint):Sprite {<br />  var sp:Sprite = new Sprite();<br />  // 背景を描画する<br />  sp.graphics.beginFill(col);<br />  sp.graphics.drawRect(0, 0, spSize, spSize);<br />  sp.graphics.endFill();<br />  // ラインを描画する<br />  sp.graphics.beginFill(0xFFFFFF);<br />  for (var i:uint = 0; i &lt; num; i++) {<br />    var w:Number = spSize / num;<br />    var lw:Number = 10;<br />    var lx:Number = i * w + w / 2 - lw / 2;<br />    sp.graphics.drawRect(lx, 10, lw,spSize - 20);<br />  }<br />  sp.graphics.endFill();<br />  // グラデーションを描画する<br />  var mtx:Matrix = new Matrix();<br />  mtx.createGradientBox(spSize, spSize, 0, 0, 0);<br />  sp.graphics.beginGradientFill(GradientType.LINEAR,<br />                                          [0xFFFFFF, 0xFFFFFF],<br />                                          [0.8, 0.0],<br />                                          [0x00, 0xFF],<br />                                          mtx);<br />  sp.graphics.drawRect(2, 2, spSize - 4, spSize - 4);<br />  sp.graphics.endFill();<br />  // 床面反射を生成する<br />  var bd:BitmapData = new BitmapData(sp.width, sp.height, true, 0x000000);<br />  mtx = new Matrix();<br />  mtx.scale(1.0, -1.0);<br />  mtx.ty = sp.height;<br />  var rect:Rectangle = new Rectangle(0, 0, sp.width, sp.height);<br />  bd.draw(sp, mtx, new ColorTransform(), BlendMode.NORMAL, rect, true);<br />  var reflect:Bitmap = new Bitmap(bd);<br />  reflect.smoothing = true;<br />  // 床面反射のグラデーションを生成する<br />  var reflectGrad:Shape = new Shape();<br />  var g:Graphics = reflectGrad.graphics;<br />  mtx = new Matrix();<br />  mtx.createGradientBox(reflect.width, reflect.height, Math.PI / 2);<br />  g.beginGradientFill(GradientType.LINEAR, [bgColor, bgColor], [0.4, 1.0], [0, 255], mtx);<br />  g.moveTo(0, 0);<br />  g.lineTo(0, reflect.height);<br />  g.lineTo(reflect.width, reflect.height);<br />  g.lineTo(reflect.width, 0);<br />  g.lineTo(0, 0);<br />  g.endFill();<br />  // カバーを生成<br />  var cover:Sprite = new Sprite();<br />  sp.x = -spSize / 2;<br />  sp.y = -spSize / 2;<br />  cover.addChild(sp);<br />  reflect.x = -spSize / 2;<br />  reflect.y = spSize / 2;<br />  cover.addChild(reflect);<br />  reflectGrad.x = reflect.x;<br />  reflectGrad.y = reflect.y;<br />  cover.addChild(reflectGrad);<br />  return cover;<br />}<br /></pre>　<br />最初のimport文はTweener用です。<br /><br />coverArrayは、表示するカバー（スプライト）の配列デス。一番下で定義しているcreateCoverメソッドでSpriteオブジェクトを生成しています。今回は、床面反射画像も同時に生成しています。<br />カバー画像を上下逆にした画像の上に黒のグラデーションを重ねて床面反射としています。<br /><br />arrangeCoverメソッドが、カバーをクリックしたときに実行されるメソッドで、この中で位置調整やrotationYをしています。<br />指定されたインデックスより左のものは-90度、右のものは90度ｙ軸を中心に回転するようTweenerを実行します。<br />実際にTweener#addTweenを実行するのは、arrangeCoverメソッド内で実行されているaddTweenメソッドです。<br />また、中心に近いものほど前面に表示したいのでaddChildしなおすことで重ね順を変えています。<br /> ]]>
</content:encoded>
<dc:subject>Flash CS4</dc:subject>
<dc:date>2009-08-15T00:23:17+09:00</dc:date>
<dc:creator>HundredthMonkey</dc:creator>
<dc:publisher>FC2-BLOG</dc:publisher>
</item>
</rdf:RDF>