[flexcoders] Animated border around thumbnails - similar to MTV header

2009-01-06 Thread asli_binal
Hi everyone,
I'm looking for advice on how to easily accomplish the following task.
I already have a Flex app that displays four thumbnail images in a
vbox on the right side, and when I click on one, that image is
displayed in a larger format within the same app (left of the vbox).

What I'd like to do next is place a border/rectangle around the
thumbnail, and have that border move down to the next thumbnail using
a timer. So, I have a couple questions: (see the MTV header)

1. Is it best to use a custom image class with border or is it better
to use drawRect to place a rectangle over the mx:Image? Or use a
TileList instead of vbox and make the timer automatically scroll
through the thumbs?


I basically want to accomplish something similar to the animated
marquee/header on mtv.com (is the effect they use on the images
mx.effects.move?)

...and I'm a beginner with any custom components and animation - so
any clues/help would be appreciated.

Thanks



Re: [flexcoders] Animated border around thumbnails - similar to MTV header

2009-01-06 Thread Josh McDonald
I'd make the border a Degrafa surface (or just a mx:Box with a border).
Add a moveEffect and a resizeEffect, put it in the same container as the
thumbnails, but last in the list so it'll be on top. If they're in a hbox or
something like that and you don't want to mess up the layout of the
container, set

myBorderComponent.includeInLayout = false;

And it will be in the same container but won't affect the layout. Then,
every time you want to hilight another thumbnail, simply call:

myBorderComponent.move(nextThumbnail.x, nextThumbnail.y);
myBorderComponent.width = nextThumbnail.width;
myBorderComponent.height = nextThumbnail.height;

And the moveEffect and resizeEffect should do the rest.

-Josh

On Wed, Jan 7, 2009 at 11:39 AM, asli_binal abi...@gmail.com wrote:

 Hi everyone,
 I'm looking for advice on how to easily accomplish the following task.
 I already have a Flex app that displays four thumbnail images in a
 vbox on the right side, and when I click on one, that image is
 displayed in a larger format within the same app (left of the vbox).

 What I'd like to do next is place a border/rectangle around the
 thumbnail, and have that border move down to the next thumbnail using
 a timer. So, I have a couple questions: (see the MTV header)

 1. Is it best to use a custom image class with border or is it better
 to use drawRect to place a rectangle over the mx:Image? Or use a
 TileList instead of vbox and make the timer automatically scroll
 through the thumbs?


 I basically want to accomplish something similar to the animated
 marquee/header on mtv.com (is the effect they use on the images
 mx.effects.move?)

 ...and I'm a beginner with any custom components and animation - so
 any clues/help would be appreciated.

 Thanks


 

 --
 Flexcoders Mailing List
 FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
 Alternative FAQ location:
 https://share.acrobat.com/adc/document.do?docid=942dbdc8-e469-446f-b4cf-1e62079f6847
 Search Archives:
 http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo! Groups
 Links






-- 
Therefore, send not to know For whom the bell tolls. It tolls for thee.

Like the cut of my jib? Check out my Flex blog!

:: Josh 'G-Funk' McDonald
:: 0437 221 380 :: j...@gfunk007.com
:: http://flex.joshmcdonald.info/
:: http://twitter.com/sophistifunk