Flex3 and rollover effect

Hello experts,
I am trying to get a zoom effect for items contained inside a tileList.

I have found exxactly what I need:
http://blog.flexwiz.net/sources/listdemo/bin/ListDemo.swf

trouble is : that's for flex4 and I use flex3 : can someone help me ?
Regards
yarekGmailAsked:
Who is Participating?
 
dgofmanConnect With a Mentor Commented:
Forgot changing background and depth, here is new version

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private const OVER_OFFSET:uint = 40;
            private const IMAGE_WIDTH:uint = 160;
            private const IMAGE_HEIGHT:uint = 120;
            private const IMAGE_COLOR:Number = 0x999999;

            private function moveHandler(event:MouseEvent):void {
                moveEvent.end();
                resizeEvent.end();
                moveEvent.target = event.target;
                resizeEvent.target = event.target;
                moveEvent.xTo= event.target.x + (event.type == MouseEvent.ROLL_OVER ? -OVER_OFFSET : OVER_OFFSET); 
                moveEvent.yTo= event.target.y + (event.type == MouseEvent.ROLL_OVER ? -OVER_OFFSET : OVER_OFFSET); 
                resizeEvent.widthTo = event.target.minWidth + (event.type == MouseEvent.ROLL_OVER ? OVER_OFFSET * 2 : 0); 
                resizeEvent.heightTo = event.target.minHeight + (event.type == MouseEvent.ROLL_OVER ? OVER_OFFSET * 2 : 0); 
                event.target.setStyle("backgroundColor", event.type == MouseEvent.ROLL_OVER ? 0xcccccc : IMAGE_COLOR);
                if(event.type == MouseEvent.ROLL_OVER)
                    holder.setChildIndex(event.target as DisplayObject, holder.numChildren - 1);
                
                moveEvent.play();
                resizeEvent.play();
            }
        ]]>
    </mx:Script>
    <mx:Move id="moveEvent" duration="250"/>
    <mx:Resize id="resizeEvent" duration="250"/>
    
    <mx:Array id="sampleData">
        <mx:Object name="Pic 1" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_001.jpg"/>
        <mx:Object name="Pic 2" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_002.jpg"/>
        <mx:Object name="Pic 3" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_003.jpg"/>
        <mx:Object name="Pic 4" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_004.jpg"/>
        <mx:Object name="Pic 5" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_005.jpg"/>
        <mx:Object name="Pic 6" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_006.jpg"/>
        <mx:Object name="Pic 7" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_007.jpg"/>
        <mx:Object name="Pic 8" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_008.jpg"/>
        <mx:Object name="Pic 9" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_009.jpg"/>
        <mx:Object name="Pic 10" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_010.jpg"/>
        <mx:Object name="Pic 11" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_011.jpg"/>
    </mx:Array>

    <mx:Canvas id="holder" width="100%" height="{IMAGE_HEIGHT}" verticalScrollPolicy="off" backgroundColor="#ffffff"> 
        <mx:Repeater id="rp" dataProvider="{sampleData}"> 
            <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off"
                       minWidth="{IMAGE_WIDTH}" minHeight="{IMAGE_HEIGHT}" 
                       rollOver="moveHandler(event)" rollOut="moveHandler(event)"
                       backgroundColor="{IMAGE_COLOR}" x="{rp.currentIndex * (IMAGE_WIDTH + 4)}">
                <mx:Image id="img" source="{rp.currentItem.imageURL}"
                          verticalAlign="middle" horizontalAlign="center"
                          left="4" right="4" top="4" bottom="4"/>
            </mx:Canvas>
        </mx:Repeater> 
    </mx:Canvas>
</mx:Application>

Open in new window

0
 
dgofmanCommented:
Do you still need a help?
0
 
yarekGmailAuthor Commented:
yes !
Regards
0
 
dgofmanCommented:
ok I will check tonight
0
 
dgofmanCommented:
Here is my implementation for Flex SDK 3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function moveHandler(event:MouseEvent):void {
                moveEvent.end();
                resizeEvent.end();
                moveEvent.target = event.target;
                resizeEvent.target = event.target;
                moveEvent.xTo= event.target.x + (event.type == MouseEvent.ROLL_OVER ? -10 : 10); 
                moveEvent.yTo= event.target.y + (event.type == MouseEvent.ROLL_OVER ? -10 : 10); 
                resizeEvent.widthTo = event.target.minWidth + (event.type == MouseEvent.ROLL_OVER ? 20 : 0); 
                resizeEvent.heightTo = event.target.minHeight + (event.type == MouseEvent.ROLL_OVER ? 20 : 0); 
                moveEvent.play();
                resizeEvent.play();
            }
        ]]>
    </mx:Script>
    <mx:Move id="moveEvent" duration="250"/>
    <mx:Resize id="resizeEvent" duration="250"/>
    
    <mx:Array id="sampleData">
        <mx:Object name="Pic 1" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_001.jpg"/>
        <mx:Object name="Pic 2" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_002.jpg"/>
        <mx:Object name="Pic 3" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_003.jpg"/>
        <mx:Object name="Pic 4" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_004.jpg"/>
        <mx:Object name="Pic 5" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_005.jpg"/>
        <mx:Object name="Pic 6" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_006.jpg"/>
        <mx:Object name="Pic 7" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_007.jpg"/>
        <mx:Object name="Pic 8" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_008.jpg"/>
        <mx:Object name="Pic 9" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_009.jpg"/>
        <mx:Object name="Pic 10" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_010.jpg"/>
        <mx:Object name="Pic 11" imageURL="http://blog.flexwiz.net/sources/listdemo/bin/images/pic_011.jpg"/>
    </mx:Array>

    <mx:Canvas id="holder" width="100%" height="100" verticalScrollPolicy="off" backgroundColor="#ffffff"> 
        <mx:Repeater id="rp" dataProvider="{sampleData}"> 
            <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off"
                       minWidth="100" minHeight="{holder.height}" 
                       rollOver="moveHandler(event)" rollOut="moveHandler(event)"
                       backgroundColor="#cccccc" x="{rp.currentIndex * 104}">
                <mx:Image id="img" source="{rp.currentItem.imageURL}"
                          verticalAlign="middle" horizontalAlign="center"
                          left="4" right="4" top="4" bottom="4"/>
            </mx:Canvas>
        </mx:Repeater> 
    </mx:Canvas>
</mx:Application>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.