Billboard Transition Effect in Flash Player 10

Didn’t really know what else to call this one. I’m sure you’ve all seen those billboards, though, that periodically spin small sections of themselves around to reveal a whole ‘nother billboard beneath advertising still more crap you don’t need, can’t afford but have to have. I just love those things. Used to mesmerize me for hours as a kid. Well maybe not hours, but for longer periods of time than your usual kid. Anyway, I always though that would be a pretty cool thing to do in Flash. Of course it could have been done using Papervision3d (or one of the countless other 3d packages all the rage these days) long ago. But now, using Flash Player 10 (which the example below, of course, requires), it can be done natively within Flash.

Seems if you run it long enough producing transition after transition, processing power will go through the roof. I'm not sure why. I thought I scrubbed everything away in the cleanup() method of OBO_BillboardTransition.as. If anyone sees something I missed, please don't hesitate to say.

Also, the image (or movieclip or what-have-you) you pass to the class as the imgfront property (the item that will be transitioned out), must already be added to the display list. Bad things may happen otherwise.

And well, it could use a bit of cleaning up. You're welcome to play with it as you desire..

i was wondering if you could explain why there is a visible rectangular “ghosting” on the tooltip (look closely and you can see a faint rectangle that is probably the container of the movie clip that contains the tooltip)? Is there any way to get rid of it?

fyi, sorry for contacting you here on this post but there was no other way to contact you

thanks

question4you ·August 06, 2008

I’m not sure I’m looking at the same thing, but what you may be seeing is the result of having a low alpha object combined with a dropshadow. You could try making sure the alpha is set to 1 and/or remove the DropShadow filter (which is set in the addTip() method). You also might want to pick up the latest copy at http://www.onebyonedesign.com/flash/ui/ (along with a few other things). Hopefully that’ll help out..

a couple of things. if you look at the tooltip example “you” posted (not one that i downloaded an compiled myself in flash) on the link above, it definitely has a square ghost box around the entire tool tip. check it out. you don’t see that?

I played around with this locally. What i discovered is this. It’s definitely the _ds (dropshadow) filter that’s causing the ghosting. If you comment it out, the ghosting goes away. I played with every possible dropshadow parameter (set quality high, no alpha, high strength, etc) all to no avail. I even tried all these combos with alpha of 1 on the the tooltip itself. Still didn’t work.

What i DID discover is this. Not sure if you have any insights. The reason the ghosting is showing up on your blog post example and my downloaded attempts of your classes is that the UNDERLYING SHAPE in the blog post example is a shade of GRAY (eg. 0x3e3e3e). The minute you change it to a non grey tone (could be anything), like black, blue, green, etc, the ghosting goes away.

The reason you don’t see the ghosting in your class examples page is the background shapes are NOT gray but solid black! wtf?? Try it yourself and tell me if you don’t see what i’m seeing.

The dropshadow filter must be having a problem overlaying a neutral shade of gray object. Could it be a blend mode problem??

NOTE: i ask the question because i’ve seen this ghosting on a lot of online web examples and it occasionally has started creeping up in my own work and i couldn’t pinpoint it until now. Sucks when you use a lot of gray / neutrals in your work.

If you have any insights i’m dying to nip this one in the bud. Not being able to use filters over neutral gray would seem like a bug to me.

Sidenote: what tool do you use to make your class documentation. i’ve seen other’s use it. it’s tight and neat and i’d like to use the same myself.

thanks (sorry for long post)

question4u ·August 07, 2008

Another separate question. I’d like to see the example you outline in this post. however, it requires flash player 10 which i haven’t installed yet.

If i install FP10, does it install along side of my existing 9 player or does it replace it. It might not be a big deal, but i don’t want it to screw up my existing FP9 dev environment.

thanks

question4u ·August 07, 2008

Now that you mention the dark greys, I know what you’re talking about. I have seen this problem both in my own work and others’. I really have no idea what may cause this or what the solution may be. Perhaps a different color shadow (dark grey rather than black, e.g.) would do the trick. It is annoying, but I’ve seen it so much, that I tend to ignore it these days.

The documentation generator is Adobe’s ASDoc.exe which comes with Flex (both Flex Builder and the free Flex SDK). It’s a command line program, but I’ve made two different GUI’s for it using SWFKit for one and AIR for another. See this post for more info: http://blog.onebyonedesign.com/?p=70

When installing the Flash player 10 beta, the new version will only replace (and it will replace) the browser plugin. The standalone player used in Flash development will remain version 9, so current development should not be affected. There’s more information here: http://labs.adobe.com/technologies/flashplayer10/

I have been admiring this effect for 2days now and I have tried to get it into Flex but I am having a problem understanding the _numsections bit, etc. I am so used to using effects that have been built for Flex that I don’t know where to begin to get this preped for Flex, using the xmlns=” ” and then just using a viewstack with click functions to have the transition play between navigation.

Please spare some help when you have time to assist with this, but only if you have time, I won’t dare rush you in anyway.