you can add any component to this highlight container. Initially the first child will be highlighted. When you click next next children, then the selected child will be highlighted.
To achieve this I have overwrite the 'addChild' function. when adding child I'm decreasing the alpha of every child to '0.5'(This is a default value.you can change it when you use this component). Then I'm changing the alpha of the first child to '1'.I'm adding a mouse click listener to every child to change the alpha of the current child and to change the alpha of the previous child.
I used HBox to implement this cutom component. You can change it to any container...
Usage:
<com:HighLightBox x="0" y="0" childAlpha="0.3"></com:HighLightBox>
Component:HighLightBox.as
package com
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import mx.containers.HBox;
public class HighLightBox extends HBox
{
private var oldItem:int=0;
[Bindable]
public var childAlpha:Number=0.5;
public function HighLightBox()
{
super();
}
override public function addChild(child:DisplayObject):DisplayObject
{
super.addChild(child);
child.alpha=childAlpha;
this.getChildAt(0).alpha=1;
child.addEventListener(MouseEvent.CLICK,glower);
return child;
}
private function glower(event:MouseEvent):void
{
this.getChildAt(oldItem).alpha=childAlpha;
(event.currentTarget as DisplayObject).alpha=1;
oldItem=this.getChildIndex(event.currentTarget
as DisplayObject);
}
}
}
Application:highLighter.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:com="com.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#3D3C3C, #3D3C3C]" viewSourceURL="srcview/index.html">
<com:HighLightBox dropShadowEnabled="true" childAlpha="0.1" width="1260" height="454" horizontalCenter="0" borderStyle="solid" borderColor="#E1E4E6" cornerRadius="6">
<mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/titanic.jpg"/>
<mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/shakespeareinlove.jpg"/>
<mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/americanbeauty.jpg"/>
<mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/thedeparted.jpg"/>
</com:HighLightBox>
<com:HighLightBox dropShadowEnabled="true" childAlpha="0.1" width="1260" height="300" horizontalCenter="0" y="460" borderStyle="solid" borderColor="#E1E4E6" cornerRadius="6" useHandCursor="true" buttonMode="true">
<mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#0595FA" backgroundColor="#4998E1" dropShadowEnabled="true">
</mx:Canvas>
<mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#08C18A" backgroundColor="#1AE9AC" dropShadowEnabled="true">
</mx:Canvas>
<mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#95704D" backgroundColor="#A78059" dropShadowEnabled="true">
</mx:Canvas>
<mx:RichTextEditor title="Title" height="290" width="307">
</mx:RichTextEditor>
<mx:RichTextEditor title="Title" height="290" width="307">
</mx:RichTextEditor>
</com:HighLightBox>
</mx:Application>
