28 May 2008

Simple Flex Effects Example

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:


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 >

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: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"/>




Anonymous said...

Wors examle ever seen on internet!! You could put view source in app. Or maybe make valid archive file.

Macedonian Flex Programer

flanture said...

hello, thanks for your comment!

I'm pretty sure there are much wors(e) examples, it's not that bad, you must admit? Mxml source file is working for me quite good, maybe you haven't seen the link? Since you are anonymous, I can't send you source file, sorry!


Anonymous said...

I liked your example. It was short, concise and accurate. I could not disagree more with the first commenter.

Anonymous said...

Your example is a nice one. My only complaint is none of the tag names are visible.

I'm guessing the first commenter wanted you to publish the source code from within the example app itself, so you could access it from the flash movie's context menu. Flex Builder 2.01 and Flex Builder 3b2 will create an ancillary application to show the project source. If you're not using Flex Builder, you can still set up a "View Source" link, it just won't include Adobe's source viewer app.

Typo: the 'out' effect has extra rdquos in its id (should be 'id="out"', not 'id="”out”"').

Anonymous said...

Hey, thank you so so much for sharing your knowledge with us. You really helped me lots, because I lots one my flex classes and had no idea how to add effects for my final exam! You made it really easy :)

You rock!!!

María Belén :)

style-sha said...

This effect is applicable only to image or to all kind of controls inside the panel and even could be applied to the panel itself..?

Anonymous said...

No, the original poster was correct.

Posting the source code in your entry would have probably taken much less time and been much clearer for those of us trying to understand what you did.

Johan said...


I didn't mind that you didn't use the normal way to share the source and I'm happy that you shared the code with us. Don't listen to the trolls!


template by blogger templates