Open Flex Builder and go to File > New Project > Flex Project and name your project as MyEffects. In Design view take new Panel to the stage, set ID - mPanel , title – My Effects, Horizontal align – center, Vertical align – middle. Now inside this new panel, drag Image component. Set ID – mImage, scale content – true. Move to Category View for Image component, within Style choose center horizontalAlign and middle verticalAlign. Create assets folder inside your project, insert any image and for Image component, set Source for that image.
OK, we created our playground and we can open our box with toys. Let’s try Zoom effect first. Just below Application tag, insert Zoom tag like this:
< id="over" duration="100" zoomheightto="1.3" zoomwidthto="1.3">
Everything is simple here, but you also have to add another property inside Image tag:
rollOverEffect="{over}"
In this way we have made connection between two tags Image and Zoom with over ID. In the same way you can add rollOutEffect or any other like this:
< id="”out”" duration="200" zoomheightto="1" zoomwidthto="1"> and
rollOutEffect="{out}" as Image tag property.
You may notice different duration properties, which means, as you expected, that rollOut will last twice longer than rollOver. Insert another tag, Blur tag for mouseDownEffect:
< id="down" duration="1000">
In order to apply more than one effect on one action we need to use Parallel tag. If we put Zoom and Blur tags between Parallel tag, give new tag id – over while deleting Zoom and Blur id property. Something like this:
< id="over">
< duration="100" zoomheightto="1.3" zoomwidthto="1.3">
< duration="1000">
< /mx:Parallel >
< duration="100" zoomheightto="1.3" zoomwidthto="1.3">
< duration="1000">
< /mx:Parallel >
Don’t forget also to delete mouseDown property or you will get an error. You can combine several effects for same action. It’s up to you to decide when is enough. You can choose between AnimateProperty, Blur, Dissolve, Fade, Glow, Iris, Move, Pause, Resize, Rotate, SoundEffect, Wipe, Zoom.
download source
p.s. this is post number 100!
.
update: since this Flex example still gets lot of attention here is the source:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="422" width="481">
<mx:Parallel id="over">
<mx:Zoom duration="100" zoomHeightTo="1.3" zoomWidthTo="1.3"/>
<mx:Blur duration="1000"/>
</mx:Parallel>
<mx:Rotate id="down" angleFrom="0" angleTo="360" duration="500"/>
<mx:Zoom id="out" duration="200" zoomHeightTo="1" zoomWidthTo="1"/>
<mx:Panel x="10" y="10" width="458" height="400" layout="absolute" title="My Effects" id="mPanel" horizontalAlign="left" verticalAlign="top">
<mx:Image id="mImage" scaleContent="true" horizontalAlign="center" verticalAlign="middle" source="frost.jpg" width="332" height="240" rollOutEffect="{out}" rollOverEffect="{over}" mouseDownEffect="down" horizontalCenter="0" verticalCenter="-7"/>
</mx:Panel>
</mx:Application>
*_*
