[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Flex3 and rollover effect

Posted on 2011-10-28
5
Medium Priority
?
539 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:yarekGmail
  • 4
5 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 37054914
Do you still need a help?
0
 

Author Comment

by:yarekGmail
ID: 37055614
yes !
Regards
0
 
LVL 29

Expert Comment

by:dgofman
ID: 37058422
ok I will check tonight
0
 
LVL 29

Expert Comment

by:dgofman
ID: 37060812
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
 
LVL 29

Accepted Solution

by:
dgofman earned 2000 total points
ID: 37060841
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

Featured Post

The IT Degree for Career Advancement

Earn your B.S. in Network Operations and Security and become a network and IT security expert. This WGU degree program curriculum was designed with tech-savvy, self-motivated students in mind – allowing you to use your technical expertise, to address real-world business problems.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
In this article I will be showing you how to subnet the easiest way possible for IPv4 (Internet Protocol version 4). This article does not cover IPv6. Keep in mind that subnetting requires lots of practice and time.
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses
Course of the Month19 days, 4 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question