Flex | Flash | Air | AS3
Fade effect in Flex
August 8th, 2009 in FlexThe following lesson shows you how to set a fade effect to display a caption only when the user hovers over an image.
The image used in this example is taken from http://interfacelift.com/wallpaper_beta/details/1975/cheetah_beauty.html
1. Create a new flex project named FadeCaption, leave the name of the main MXML application as it is and set the layout to vertical.
2. Open the main application to edit the code. First let’s add components to display the image and its caption.
<mx:Canvas> <mx:Image id="img" source="1.jpg" width="320" height="240" /> <mx:Box id="caption" height="30" width="320" alpha="0" backgroundColor="#000000" backgroundAlpha=".5" bottom="10" horizontalCenter="0" horizontalAlign="center"> <mx:Label text="Cheetah beauty @ Cologne zoo" styleName="captionText" /> </mx:Box> </mx:Canvas>
We set the alpha property of the box to zero so that it doesn’t appear at the application’s launch.
3. Next create a “fadeIn” and a “fadeOut” effect with these names as their respective id and set their alphaFrom and alphaTo properties.
<mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" /> <mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
4. We want to fade in the caption when the user hovers over the image and fade out when the mouse is out of the image.
Add a script tag to create the functions that will play the effects. Use the play() method to play the effects and set the target to an array that contains caption (the id of the canvas).
private function showCaption():void{
fadeIn.play([caption]);
}
private function hideCaption():void{
fadeOut.play([caption]);
}
5. Add a rollover and a rollout listener to the canvas that contains both the image and the caption to call the functions.
<mx:Canvas rollOver="showCaption()" rollOut="hideCaption()" > <mx:Image id="img" source="1.jpg" width="320" height="240" /> <mx:Box id="caption" height="30" width="320" alpha="0" backgroundColor="#000000" backgroundAlpha=".5" bottom="10" horizontalCenter="0" horizontalAlign="center"> <mx:Label text="Cheetah beauty @ Cologne zoo" styleName="captionText" /> </mx:Box> </mx:Canvas>
6. At this point, if you try to run the application you should see that there is a problem. When the caption is supposed to disappear, the text contained in the label is still visible.
Indeed, to make effect work on text, you need to embed fonts.
To do so add a Style tag and embed the Arial font by using its system font name and define a selector named captionText:
<mx:Style>
@font-face {
src: local("Arial");
fontFamily: ArialEmbedded;
}
.captionText {
fontFamily: ArialEmbedded;
color : #ffffff;
fontSize : 16pt;
}
</mx:Style>
Set the label’s stylename to captionText.
7.Now all should work perfectly.
Here’s the final code, run the application to test it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #0C3404]">
<mx:Style>
@font-face {
src: local("Arial");
fontFamily: ArialEmbedded;
}
.captionText {
fontFamily: ArialEmbedded;
color : #ffffff;
fontSize : 16pt;
}
</mx:Style>
<mx:Script>
<![CDATA[
private function showCaption():void{
fadeIn.play([caption]);
}
private function hideCaption():void{
fadeOut.play([caption]);
}
]]>
</mx:Script>
<mx:Canvas rollOver="showCaption()" rollOut="hideCaption()" >
<mx:Image id="img" source="1.jpg" width="320" height="240" />
<mx:Box id="caption" height="30" width="320"
alpha="0" backgroundColor="#000000" backgroundAlpha=".5"
bottom="10" horizontalCenter="0" horizontalAlign="center">
<mx:Label text="Cheetah beauty @ Cologne zoo" styleName="captionText" />
</mx:Box>
</mx:Canvas>
<mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" />
<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
</mx:Application>
Feb 22nd, 2010
great work.