Flex 4 Resize Effect Example
Line Break
Author: Roelof (13 Articles) - Author Website
Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer or traveling. He is also the co-owner of Flex-Blog.com.
YH4AAZEM8PF5 This example shows you how to use the resizeEffect along with a simple fade effect to make it look smooth!
The Resize Effect is pretty straight forward, there are just a few simple rules:
- Make sure the object you want to resize has a width and height of 100%.
- Create enough space within your application.
Below is the example with View Source enabled:
And here is the full source:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="300" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function addImage(event:MouseEvent):void { myImage.visible = true; myImage.includeInLayout = true; } protected function removeImage(event:MouseEvent):void { myImage.visible = false; myImage.includeInLayout = false; } ]]> </fx:Script> <fx:Declarations> <s:Fade duration="2000" alphaFrom="0" alphaTo="1" id="fadeIn" /> <s:Fade duration="100" alphaFrom="1" alphaTo="0" id="fadeOut" /> </fx:Declarations> <s:layout> <s:HorizontalLayout horizontalAlign="center" /> </s:layout> <s:VGroup verticalAlign="middle" horizontalAlign="center" paddingTop="10"> <s:HGroup verticalAlign="middle" horizontalAlign="center" paddingLeft="10" paddingRight="10"> <s:Button label="Add image!" click="addImage(event)"/> <s:Button label="Remove image!" click="removeImage(event)"/> </s:HGroup> <s:HGroup verticalAlign="middle" horizontalAlign="center"> <s:Panel width="100%" height="100%" title="I'm a resizable Panel!" resizeEffect="Resize"> <mx:Image id="myImage" source="http://www.flex-blog.com/wp-content/themes/revolution_news-21/images/header.png" visible="false" includeInLayout="false" showEffect="{fadeIn}" hideEffect="{fadeOut}" /> </s:Panel> </s:HGroup> </s:VGroup> </s:Application> |
If you have a question, leave a comment or post it in our flex forum!
Related posts:
- Flex 4 Effect Example: Sliding text using the Move Effect
- Flex Custom Event Example
- Image as Button in a DataGrid
- Random number in Flex
- Jump to next field using the Focus Manager
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(6 votes, average: 4.83 out of 5)
Loading ...Comments
9 Responses to “Flex 4 Resize Effect Example”
How can we avoid the break in animation when we press the buttons before the animation stops?
Hi Tolis,
You can enable/disable the buttons during the effect:
Extend the Fade with this:
2
effectEnd="button.enabled=true"
Regards,
Roelof
Hi Realof, I need your help.
I need to make such an application:
1. Selecting images from disk without loading the server.
2. Ability to edit it (increase / decrease proportionally with a slider and drag)
3.1 Reduction should work in such a way that no gaps in the editable area (the picture should “stick to the edges of the editor). One editor can be 600 * 300.
3.2 If a picture is trying to get smaller window sizes, it is necessary to increase by 20%. If even then the picture is less – to give a message.
4. When you drag a picture there should be no gaps.
5. If possible, come up with the “remove red eye” – (When you select a picture and click on the button were removed red eye in photos) or ideas to implement this function.
Can you help me in implementing or tell me the right books?
Hi Sergii,
I don’t have experience with Image editing, so I can’t point you in the right direction here.
Everything you want is possible within Flex, maybe you can find Image editing examples @ Peter de Haan’s website (blog.flexexamples.com).
Good luck!
1) For opening files (images in your case) use FileReference class which has function browse()
2) I don’t know what exactly do you want to do with image, if you only want to resize it, just check for some examples. The example to resize image with slider is defenetly somwhere on the web… But if you want to edit the image with applaying some filters or something like that you shoud learn to use filters on BitmapData objects.
Also usefull thing to learn for image editing is pixel bender ( http://www.adobe.com/devnet/pixelbender.html ). You can create effects with it whitch can be later used in actionscript.
3) I’m not sure what exactly you want, but from what I do understand, it shouldn’t be more than just repositioning the object (image) on the stage… So some basic math should do…
4) don’t know what gaps do you mean.
5) probably use some filter or something. Try searching the web there must be some examples on red exe reduction…
Have fun
I maintain Adobe’s Tour de Flex and would love to add your samples as a great resource for Flex developers. If you are interested, could you please email me?
Thanks!
Maile
Thanks Rooelof,
Really it was helpfull to me in one of my project.i would love to use your sample more and more.Can you tellme something about the zoom.When a button is clicked then the image zoomout?
Thanks for the information.
But for the developers of mobile app in Flex, this will not work.
To make Resize work on mobile projects, widthTo, widthFrom, or widthBy must be set. The same applies to height as well.
I don’t know why it is like this, could anyone give me some explanation?
rocksoccer,
I’ve run into the same issue, did you ever get an explanation?
Thanks,
R. Sparrow