上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




マウス位置でスクロールするサムネイルリストを作成してみました。考え方がわかれば、思っていたより簡単に作れるものなんですね。



Main.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="onCreationComplete()">

<mx:Script>
<![CDATA[
private var _scrollLength:Number;
private var _friction:Number = 10;
private var _space:Number = 50;
private var _mousePos:Number = 0;
private var _mouseOverFlg:Boolean = false;

/**
* CreationCompleteイベント
*/
private function onCreationComplete():void {
_scrollLength= cnvMain.width;

// EnterFrameイベント追加
this.addEventListener(Event.ENTER_FRAME, onFrame);
}

private function onFrame(e:Event):void
{
if (_mouseOverFlg) {
// Mouse X座標位置取得
_mousePos = cnvMain.contentMouseX;
}

var percent:Number = _mousePos / (_scrollLength - 1);
var pos:Number = (_scrollLength - (hboxImage.width + _space) - _space) * percent;
hboxImage.x = hboxImage.x - ((hboxImage.x - _space - pos) / _friction);
}
]]>
</mx:Script>

<mx:Canvas id="cnvMain" width="300" height="110" backgroundColor="#FFFFFF"
paddingTop="5" paddingBottom="5"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
mouseOver="{_mouseOverFlg=true}" mouseOut="{_mouseOverFlg=false}">

<mx:HBox id="hboxImage" paddingTop="10" paddingBottom="10">
<mx:Image source="./img1.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img2.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img3.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img4.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img5.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img1.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img2.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img3.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img4.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img5.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img1.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img2.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img3.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img4.jpg" width="100" height="100" scaleContent="true" />
<mx:Image source="./img5.jpg" width="100" height="100" scaleContent="true" />
</mx:HBox>

</mx:Canvas>
</mx:Application>


以下、実行結果です。

実行結果



こちらのサイトを参考にさせていただきました。
http://www.5ive.info/blog/archives/386

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。