Comments Here’s a new version of the distortion effects.
Thanks for all your tremendous feedback on the previously released distortion effects. Some of that feedback is now included in this updated version. This version adds various features and updates. Here’s an excerpt:
Exceed Bounds
Much of the feedback I’ve received was about making the flip effect more realistic. The hint was to let its bounds overlap while the flip effect is coming towards the user. (flipping in). The new exceedBounds property on the Flip effect does exactly that and is now turned on by default!
Pop mode UP
The Pop effect now has an additional mode. The default mode is DOWN, which pops a display object off a stack/pile, away from the user. The new UP mode pops it towards the user.
Scaling Support
Some of you have experienced issues with distortions done on display objects that are below other display objects, which are being scaled. You can scale display objects either using UIComponent’s or DisplayObject’s scaleX, scaleY properties or with modifying the DisplayObject’s transform matrix (a and d properties). This version of the distortion effects supports any scalings applied to any parent display objects in your display list.
Support of More Environments
My goal with these effects always was to support all possible environments where you can use these effects and distortions. With environments I meant i.e. using distortions or utilities in a non Flex framework environment, using only the Flash Player API. But also the use in different Flex framework containers and effect setups, i.e. States and Transitions, hideEffects, ActionScript effects, with ViewStacks, custom containers etc.
This version increases the number of environments to support to the point that I currently haven’t heard of an environment that isn’t supported. If you have one, let me know and feel free to send me an isolated example and I’ll try to help out.
This version added support for some States and Transition usages i.e. with supporting multiple siblings and improves error handling in case views cannot be initialized.
See them in action here.
Download here!
And if you’re interested in the source code of the cube example, download it here.
These effects are the best. Thanks!
I’ve used the CubeRotate effect in my app. See it here: http://www.rozengain.com/guitar-scales/v2/GuitarScales.php
Very nice
good work!
Smooth, very smooth.
Good job Alex.
Fantastic, i have one question, let say i make a popup:
myWindow = PopUpManager.createPopUp(this, Titlewindow, false);
now from the window it self i’d like to call a flip effect, (MAC OS X dashboard info button) So that the entire titlewindow changes to another title window.
(sorry for repost, but i posted on old thread first)
Very nice work.
Alex,
Can you please elaborate on how to use com.adobe.ac.util.DisplayObjectBoundsUtil to find the bounds of an object that has a distortion applied? I’m tried to rotate a graphic around the y-axis using a Distortion from your library, and I’d like to find the x-value of its left edge during this rotation. I’ve messed around with the DisplayObjectBoundsUtil class, as you suggested on your previous blog post regarding this library, but I’m having no luck.
I think your library is fantastic; however, some comments above the methods so it’s easier to understand would be greatly appreciated.
Thanks!
I try flip version, it will remain a dirty ghost for 1 sec during flipping, do you know how to fix it?
very very good!
Great job, Alex!
But I can’t make it work the way I need it. I need the effects being triggered like you did with the “>” “>” buttons.
Could you please make that code available?
Hey Alex,
.
I love the effects. Great Job !!
I was wondering how easy would it be to apply like the flip effect to a native apollo window like the apple dashboard widgets.
Thanks
cheers:)
firdosh
Hi Alex,
Your cube distortion effect is awsome, i really like it and plan to implement it in some of my future flex apps. I’ll be sure to post you a link to see.
Lanny i looked at your guitar link, looks cool.
Tom
Hi Alex,
Where can i download the source for the cube example ?
Tom
man, is there an version that can be authored in flash as opposed to flex. Let me know. Great effect!
Hi Alex,
great work. I have a problem with the cuberotate effect: when the next view (the one being “rotated in”) has some data bindings in place, a weird effect happens if I try to update the binding source just before the animation begins. For example, suppose that the next view must display a value entered in the previous one..
At this link:
http://rafb.net/p/LTixeG85.html
you’ll find some code to reproduce the problem. With this code, the first time I press the “forward” button box2 gets suddenly shown (no effect), then box1 is already displayed and the animation is played. Commenting out the first line of the rotateRight() functions, this does not happen anymore.
Have you any idea on a possible solution?
Thank you very much
Cosma Colanicchia
I’ve verified that the same things happens with other mxeffects such as Door, but not with built in ones (e.g. mx:Fade)
Cosma
Hey Alex, is there any way to use your cube effect in flash?
Thanks in advance,
Kees
I am flipping an object to it’s back side and back to the front successfully. However if I change the size of one of the sides (in this case I have slideout panel) then the flip of course shows a line on the screen because the dimensions used to calculate the flip have changed. How to handle the case when the dimensions of flip sides are changing between flips?
“I try flip version, it will remain a dirty ghost for 1 sec during flipping, do you know how to fix it?” I got this problem to, only the first time..than its gone and it’s working ok(?) Any solutions?
I am playing around with the Flip, when I compiled the app in Flex Builder then deployed the bin dir out to my server, the Flip effect is not working, is there something else I need to do??
thanks a lot
its interesting
thanks very much
These are (still) great !
I notice it seems a lot faster and smoother too.
Did I imagine seeing a demo at Scotch where the CubeRotate effect had a lightening/darkening tint on the faces ? I don’t see to get that here with this new release…
Very cool!
Very nice. Question though… On the simple flip effect, is there a way to give the panel thickness? That way when it flips we will be able to see a side, even if the side is simply a solid color? This would give it a better 3D look.
I tried DistortionEffects with Moxie, and got an “Invalid Bitmap Data” error, anyone has any success?
Hi,
I try combine two flip CubeEffect with two different buttons (like a auhlmann sample) and three sides?. First button flip-back effect and second flip_top.
Any idea?
OMFG this is _awesome_.
Is there a way of using this effect in Flash?
Tangent, DistortionEffects worked for me with Moxie straight out of the box.
Hi Alex – love your work.
Does DistortionEffects support parallel composite effects?
As soon as I put one of your effects into any parallel, I get undesirable behaviour. Works fine with sequence.
e.g.
Parallel
Door
Zoom
Move
/Parallel
results in the Door effect animating in place, followed by a jump to the end position for the move and zoom. Remove Door and the Zoom and Move animate smoothly as expected.
Thanks, Ben
How can I use it in the FLex building 3 ?
Hey i m finding automata theory a bit difficult. i will be really grateful if u send me some stuff concerning how to get a required regular expression from a given statement. for eg:- give the regular expression of the language containing even no.of 1’s and odd no. of 0’s. hoping fur a positive reply
Alex,
thanx a lot for that great code!!! got that stuff running in FLEX 2 and 3. Did anyone try to port that to the AIR Framework – without the browser??? Can anyone give a little bit help for the first steps ???
very nice thank you very much. I will work on it…
I like this , i gonna use this.
Thank you.
thanks good site!
These are too great !
thanks. I love you. I my name is marlin.
Great work Alex! I saw you at MAX 06 and couldn’t wait to try this out.
One problem/solution I came across – when transitioning between containers in a ViewStack, the selectedIndex property wasn’t being updated after each transition. This was causing problems with resizing, since the viewStack doesn’t seem to care about updating the non-active views. To fix I added the following to the “onTweenEnd” method of DistortBaseInstance:
if(currentTarget.parent is ViewStack){
var myVS:ViewStack = ViewStack(currentTarget.parent);
myVS.selectedIndex = currentTarget.parent.getChildIndex(currentTarget);
}
Thanks again!
Thanks for the post. I was just reffered to this page by a friend of mine who thought I would find it interesting. It was a great read. Thanks
I am using the cube rotate effect and it is working fine for me and most users, but I got reports from some users that they couldn’t get to the views that were supposed to rotate in. I got one user with the debug player to send the error info. The problem seems to be invalid bitmap data. I can’t reproduce the problem.
Do you have any idea what is causing this. Here is the error dump.
ArgumentError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData$iinit()
at sandy.util::DistortImage/::renderVector()
at sandy.util::DistortImage/initialize()
at
com.adobe.ac.mxeffects::SimpleDistortion/com.adobe.ac.mxeffects:SimpleDistortion::initDistortImage()
at com.adobe.ac.mxeffects::SimpleDistortion/renderCorners()
at com.adobe.ac.mxeffects::SimpleDistortion/push()
at
com.adobe.ac.mxeffects.effectClasses::CubeRotateInstance/::updateComing()
at
mx.effects::Tween/http://www.adobe.com/2006/flex/mx/internal::doInterval()
at mx.effects::Tween$/::timerHandler()
at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
at flash.utils::Timer/flash.utils:Timer::tick()
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
infosThanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.s@onlineshop-artikelverzeichnis.de
Thank you for the useful informations.
I did a lot of experimenting with that phantastic cuberotate code from alex. Succeded in jumping to a specified face of the cube ( only in 1 shot – only rotating 1 time). The rotate back effect work phantastic with manipulating the siblings array. Rotation exactly 1 time, 2 times 3 times and so on.
alex how did you realize this multiple rotation i n t o the proper side ???
My flipBack’s work correctly. What must the flipIn look like ???
Can anyone help ??
thanks wovo42
Hi Alex,
This is great stuff! Does it work Flex Builder 3?
Thanks in advance.
Hi Alex,
This is great stuff! Does it work with Flex Builder 3?
Thanks in advance.
thanks for share
Thank you also from me, gonna try that on FlexBuilding
Anyone hire us? We have 30 Adobe Flex programmers. Our rate is only 7 USD per hour. Our website is http://www.busycode.com
My email is: cogoing@gmail.com
Thanks,
Andy
Hi Alex Thanks good site!
Hello Alex,
nice work thank you very much
Wow, fantastic Effect thank so much
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
super Effect Alex, thanks you for this
Thank You for another very interesting article. It’s really good written and I fully agree with You on main issue, btw. I must say that I really enjoyed reading all of Your posts. It’s interesting to read ideas, and observations from someone else’s point of view…
I am using the cube rotate effect and it is working fine for me and most users, but I got reports from some users that they couldn’t get to the views that were supposed to rotate in. I got one user with the debug player to send the error info. The problem seems to be invalid bitmap data. I can’t reproduce the problem.
Hi Alex, great effect, thank you for the example
@Is there a way of using this effect in Flash?
Yes in another article I read something
Yeah i am pretty sure you can use it in flash, i saw it somewhere in a tutorial.
Great job Alex, wonderful effect
fantastic stuff, many thanks
hey nice site, interesting articles
nice work thank you very much
great effect…
I am using the cube rotate effect and it is working fine for me and most users, but I got reports from some users that they couldn’t get to the views that were supposed to rotate in. I got one user with the debug player to send the error info. The problem seems to be invalid bitmap data. I can’t reproduce the problem.
Hi Alex,
Your cube distortion effect is awsome, i really like it and plan to implement it in some of my future flex apps. I’ll be sure to post you a link to see.
Lanny i looked at your guitar link, looks cool.
Toner
Is there a way of using this effect in Flash?
Three phrases should be among the most common in our daily usage. They are: Thank you, I am grateful and I appreciate.
These are (still) great !
I notice it seems a lot faster and smoother too.
Did I imagine seeing a demo at Scotch where the CubeRotate effect had a lightening/darkening tint on the faces ? I don’t see to get that here with this new release…
I like this , i gonna use this.
Thank you.
Alex,thanks for very interesting article
Irina.
execellent work, super effect
good Infos
Those effects are really great!
I’m including them into my flex app and the results are more than amazing!
I hope this is the right place to make a couple of questions regarding the rotating cube:
1. I create a custom component with a Panel and a Grid with 3 columns (of fixed width) which loads some information retrieved from an URL given as parameter
If I create 3 instances of my custom component into a VBox, they look all equal, but if I create them into a viewStack, the first component is correct, but the other 2 has different column width (they seems to be all at 1/3 of total width), while the retrieved data are correct.
2. When defining the “faces” into the viewstack, I have to hide somehow the faces which are not visible? This is because I can see, during the rotation effect, the other “faces” behind the cube but, once the cube has rotated to show all faces, all the behind faces are disappeared, as if the animation hides those elements but at the beginning they are visible
Thanks,
Luca
Wow, what amazing effects! Thanks a lot for this distortion effects update it will be very effective on my sites
Nice job!
This kind of job sharing is what makes Flex bigger. Thanks for not keeping your ideas only for yourself!
Buen trabajo!
Este tipo de altruismo con el curro es lo que hace a Flex más grande.
Gracias por no quedarte tus ideas sólo para tí mismo.
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings. Bye bye.
good job Alex, the Effect is fantastic
I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good work!
Thanks it helps me a lot…
I’m gonna try this tomorrow in Flex Builder 3.
Simon from Cleverkabel
Thanks for very interesting article. btw.
I really enjoyed reading all of your posts.
It’s interesting to read ideas, and observations from someone else’s
point of view… makes you think more. So please keep up the great work.
Greetings
Yes you are right … i have learned quit a lot here. i will visit this blog regular now.
Thanks for sharing this information with us.
Very nice. Question though… On the simple flip effect, is there a way to give the panel thickness? That way when it flips we will be able to see a side, even if the side is simply a solid color? This would give it a better 3D look.
Wonderful Article i enjoyed reading it, thanks for sharing with us!
Thank you very much for that code.
perfect work alex thank you
Thanks for very interesting article.
Alex,thanks for very interesting article.
Thanks for stuff, very interesing.
Thank for writing this article.Nice work
Hi Alex
).
First of all congrats for a great job. I’ve used your distortion effects on a Adobe AIR CMS I developed for a client and he was impressed (we, me and my client, are both Mac OS X users
Now I started working on (yet another!?) flash web gallery and a custom Adobe AIR CMS for it. The problem I ran into concerns the switch (with any of your effects) from one section to the other. I have sections A, B and C. I can go from A to B and C, from B to A and from C to A. when trying to create a general function to handle the switch from one section to another the effect no longer works.
Ex:
var cr:CubeRotate=new CubeRotate(vs.selectedChild); cr.siblings=[newSection];
cr.smooth=true;
cr.duration=1000; cr.direction=’RIGHT’;
cr.play();
//vs is my viewstack.
//newSection is the target section, a canvas in my viewstack
Any help would be greatly appreciated.
Thanks in advance and keep up the good work.
Andrei
Interesting article!
Thanks
It’s very good article. Great site with very good look and perfect information.
Good idea! Best regards.Thanks for all.
Great and excellent article t’s realy helpful. Thanks again.
Thank you for this helpful discussion. I will use it to improve my website.
Hello All,
This looks fantastic, I am trying to run the examples in Flex Builder 2.0.1 and am getting an error in Simple Flip.mxml Type Flip was not found or was not compile time constant. Can anyone please help out a newbie?
thanks
Hi, it was very helpful. I must try to use this effects on my websites. Thanks.
Good job.
It’s beautiful effect.
Hey , thank you very much for this great stuff! Keep up your great work! Greetings Daniel
Hello there at thise moment im visting my family near Vegas maybe You Can give me any adivces or some links to pages wehere I can find info about confereces like thise one – my website
Very nice article. Thanks for taking the time to write it down. Keep up the good work.
I am using the cube rotate effect and it is working fine for me and most users, but I got reports from some users that they couldn’t get to the views that were supposed to rotate in. I got one user with the debug player to send the error info.
Thanks. It’s very helpful. Good idea.
Thanks … !
Very nice article. Thanks for taking the time to write it down. Keep up the good work.
There are many useful informations in this article. Thanks and greetings from Thuringia!
It’s very good article. Great site with very good look and perfect information.
There are many useful informations in this great article! Thanks!
Great article. Thanks and greetings!
There are many useful informations in this article. Helpful comments – i like it…
Thank you for the good articles have helped me a lot. Thanks
Wow, this looks realy great!
Thanks for your work.
Hey, this is great stuff, cool and easy to use. I’m working on an app using rotating cube effect, as soon as I’m done I’ll post an url.
Thanks for sharing.
Could you please explain me how to make cube turn by clicking a button which is outside the cube? and not in “side.mxml”
I think this looks awesome. I just have a little problem though… I’ve only first even heard of Flex about 2.5 months ago and I’ve learned quite a bit so far. I’ve been developing an app that’s pretty complicated and so far it’s been going fairly well.
The problem is that I don’t quite get how the files need to be structured & uploaded. I know how to include the SWC in FlexBuilder 2, but that’s about as complicated as I understand with the files.
I’m at a point in the app where I’ve been planning to use some of these effects. (The cube in particular). The problem is I don’t know how to implement the download into anything, or even as a stand alone app. I’ve inluded the SWC, added folders, made multiple projects with different folders as the root–and the only thing I get is errors and/or empty apps.
I’ve looked at the readme and read the urls that it points to, but have really gained any insight into how I need to go about setting things up so that I can play with the components/examples/effects. I just need a hand in getting started.
Thanks,
Todd
Nice constribution. Thank you and greets from germany!
Could you please explain me how to make cube turn by clicking a button which is outside the cube? and not in “side.mxml”
and thanks very nice
Hi Alex
I am trying to give some of these effects to windows in an AIR application.
Can you please guide me as to how to go about doing it? (I get the effect but it only happens inside the window, not to the entire window)
Thanks!
Rishi
Very nice. Useful thing. Good job Alex!
good job Alex, the Effect is fantastic
These are too great !
Hi Alex
I am trying to give some of these effects to windows in an AIR application.
Yeah,Very good comment..
Nice constribution. Thank you and greets from germany!
Hi Alex,
Very nice effects! I’ve posted an example showing how to integrate the flip effect with ILOG Elixir OrgChart component on our blog at: http://blogs.ilog.com/elixir/2008/02/11/orgchart-with-flipping-renderers/
thanks admin veri nice
the effekt is fantastic, good work
Best Regards
Wellness Bayerischer wald
Thanks a ton!
This is gonna be my default effect for the login/forgot pass/register panels transitions
-Vivek
Your articles have helped me a lot. Thanks
Really nice dude. Will definitly use it!
Hey, this is great stuff, cool and easy to use. I’m working on an app using rotating cube effect, as soon as I’m done I’ll post an url.
Thanks Alex
There are many useful informations in this great article…I really enjoy reading the whole blog that you write. Thanks!
Thx a lot kodugum
Senin anani bir yerde sikistiririm varya
Nice constribution. Thank you and greets from germany!
Thanks a lot…
Hi Alex, that was a gr8 work. I’m a newbie to flex. Can you tell me how to use the cube effect.
Is it enough, if I modify the panel component to my desired style ?
which file should I run to get the effect working?
can somebody explain me the steps.
Thanks in advance.
Vinod kumaar.V [aka] V
what shld I do to get the effects working for me???
thanx in advance.
Hi Alex,
can you tell me how to use your effects ???
i’m stuck…
I love the effects. Really cool.
I was wondering how easy would it be to apply like the flip effect to a native apollo window.
Really nice. I love it.
thanks my friends good web site
thank you
yeah, this effects works with flash, thats great!
thanks man for the post!
thankss you
great article. can i translate this article to my site?
hello, it’s very nice site, realy good articles. thanks for all
Hey Alex,
.
I love the effects. Great Job !!
I was wondering how easy would it be to apply like the flip effect to a native apollo window like the apple dashboard widgets.
Thanks
cheers:)
Kalender Maxx
Really nice effekt. Love it!
Just move on with your work…
Great work and keep doing the same in the future…..
Alex,
First off thank you very much for getting this effect together. It works great in most circumstances.
I was wondering if anyone has figured out how to either fix or workaround the following issues I’ve seen using the CubeRotate effect:
1) The effect seems to ignore the display stack! As a simple example, create a repeating cube rotate on a timer. Then use the PopupManager with a TitleWindow to create a popup. The CubeRotate effect will bring itself to the front of the display stack! Instead of rotating in the background with e nice blur over it, the rotation will bring itself to the front and show completely normally and obscure the popup window.
2) The effects do not seem to respond correctly to movement. I think another person mentioned this in their usage when chaining effects together. A simple scenario to reproduce this is to lock the cube effect to the right side of the window. Then resize the browser window while the effect is in progress. The effect stays where it is at until the end of the effect.
Any help on these would be appreciated.
really useful effect Alex, Thanks you for this work
Greetings Marketing Bayern
Thanks for the great effects! I have some feed back for you. The main issue I noticed is a sticking effect when your bitmap fill switches on the flip effect. This doesn’t seem to happen all the time but when the processor usage is high it happens pretty much all the time.
These are wonderful effects – definitely to be used as our Operating Systems get a lot more graphically based. This is because people are going to start getting used to pop-ups and fancy effects when they access windows etc. and so we will be forced to bring this sort of thing into our web development. Plus, the Web Browsers will be forced to include a lot of interesting graphics into their browser platform as well (I see FireFox is already doing some stuff…)
I too was trying to make a generalize function to handle the transition/rotation from the current view to the new view. At the end of the rotation the new view disappears. I seen this asked above but not to many answers. Did anyone figure this out?
I think there may be some event goings on in the mxml version that I am not accounting for in the AS version.
function rotate( target:UIComponent , sibling:UIComponent ):void
{
var seq:Sequence = new Sequence();
var cr:CubeRotate = new CubeRotate();
cr.target = target;
cr.siblings = [sibling] ;
cr.direction = “TOP”;
cr.duration = 1000;
seq.addChild(cr);
var actR:RemoveChildAction = new RemoveChildAction(sibling);
seq.addChild(actR);
var actA:AddChildAction = new AddChildAction(target);
seq.addChild(actA);
seq.play();
}
Nice work Alex.
hey alex,
these effects look great, but i seem to have a problem, maybe you might help me on this one:
i have an existing app with a viewstack that contains ~40 children that all contain some complex subelements. when i try to use the door effect for example on child 4 and child 25, it seems that the initialize method of every child of the viewstack is executed before the effect is applied. since the children are of a somewhat complex structure the flasplayer throws the following exception:
#1502: Ein Skript wurde länger als die Standard-Timeout-Zeit von 15 Sekunden ausgeführt.
i think it takes to long to init all the 40 children.
so my questions are:
-am i right assuming that all children are initialized?
-is the initialisation necessary ?
-can i turn the initialisation off or can you imagine some other workaround ?
thanx in advance.
We use the effects in our sofftware.
http://www.softcapital.com/labs/demo/radarlite.html
This works very good, but I wonder whether there will be a version that supports Pixelbender so we could get a more smoooth transition.
If you consider this, then thanks in advance
Cheers,
Lars