Flex 4, Grid Gallery effect

Here’s an after midnight project I undertook.

So I’ve always wanted that grid gallery layout and effect for my images or slides. So I decided to make it happen. A useful tool in this was TweenMax from the greensock library (I love their tween effects, easy and to the point).

So here’s the simple code for this grid effect:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ width=”600″ height=”400″ backgroundColor=”#171717″ minHeight=”600″>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import com.greensock.*;
import com.greensock.easing.*;
//var imgArr = new Array(“assets/img1.jpg”,”assets/img2.jpg”,”assets/img3.jpg”,”assets/img4.jpg”);

private function moveGrid(slideNum)
{
switch(slideNum)
{
case 1:
TweenMax.to(grid, 1, {x:0,y:0, ease:Quint.easeOut});

break;
case 2:
TweenMax.to(grid, 1, {x:-400,y:0, ease:Quint.easeOut});
break;
case 3:
TweenMax.to(grid, 1, {x:0,y:-200, ease:Quint.easeOut});
break;
case 4:
TweenMax.to(grid, 1, {x:-400,y:-200, ease:Quint.easeOut});
break;
}
//        rollOver_(slideNum);
}
]]>
</fx:Script>

<s:Group width=”400″ height=”200″ horizontalCenter=”0″ verticalCenter=”0″>
<s:layout>
<s:BasicLayout clipAndEnableScrolling=”true”/>
</s:layout>
<s:TileGroup id=”grid” x=”0″ y=”0″>
<s:Rect width=”400″ height=”200″>
<s:fill>
<s:SolidColor color=”0xd54f4f”/>
</s:fill>
</s:Rect>
<s:Rect width=”400″ height=”200″>
<s:fill>
<s:SolidColor color=”0x2f977d”/>
</s:fill>
</s:Rect>
<s:Rect width=”400″ height=”200″>
<s:fill>
<s:SolidColor color=”0xfffca2″/>
</s:fill>
</s:Rect>
<s:Rect width=”400″ height=”200″>
<s:fill>
<s:SolidColor color=”0x12f0af”/>
</s:fill>
</s:Rect>
</s:TileGroup>

</s:Group>
<s:HGroup top=”20″ horizontalCenter=”0″>

<s:Button label=”1″ click=”moveGrid(1)”/>
<s:Button label=”2″ click=”moveGrid(2)”/>
<s:Button label=”3″ click=”moveGrid(3)”/>
<s:Button label=”4″ click=”moveGrid(4)”/>
</s:HGroup>

</s:Application>

GridGallery

Tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *