Expandable flash with div toggle?
- Started
- Last post
- 8 Responses
- monstroyer
I'm trying to figure out a way to recreate this behavior. A flash video player is shown at 50% height. When clicked the flash expands to full height along with it's container div pushing down the page below it.
As seen here: http://www.visitnorway.com/
I know of the flash expandable banners where the flash expands over page content but this is the first time I've seen it paired with a div toggle.
I'm wondering if the solution would be to have flash call a javascript function with ExternalInterface.call and have it trigger a jQuery toggle effect? But not having much experience in AS or JS it's just a guess at this point.
Anyone with any insight into this?
Thanks!
- kerus0
kinda cool effect, aside from that i got nothin
- spraycan0
yes the point is do we need to call externalInterface(never used this but know what you're refering to), maybe you can just create the width effect in flash(video on play) then wrap the vid in a div and by intrisiq properties the div will pull down anything below it, just a guess
- or possibly the reverse? Have flash@100% and then call JS to to resize the div and have flash flood the container. I dunno...monstroyer
- yes that's another option but the one i gave you is simpler (all this counting on the intrinsiq property of the div element)spraycan
- whatthefunk0
Cisco does this well -
(click the third thumbnail in the slider, then click the watch video link)
http://www.cisco.com/
- prophet0
google specs for "sliding billboard". many vendors and media have examples and even as code available. also, can you just call a js function in flash like getURL("javascript:someFunction... and use something fancy like a jquery effect?
- prophet0
a similar question posted here:
http://www.ultrashock.com/forums…
- acrossthesea0
Maybe this solution will work:
1. Set the flash embed to 100% height so it will fill up the allotted vertical space in its containing div.
2. Have a JS function that toggles the height of the div containing the flash area. This should automatically move down all the HTML content below as long as they are in the document flow. I'd actually use jQuery to handle this part since it has very simple built in animations.
3. Call that function as needed from your flash piece using ExternalInterface.
4. As the div resizes, your flash piece should also be resizing (since it was set to 100% height in the embed) and you should use eventlisteners to listen for stage size changes so you can anchor things to the bottom (like the video controls in the Norway example).
5. Party
- monstroyer0
Thanks, this is the direction that all my weekend googling seems to be pointing me in. Hadn't thought about the stage size eventlisteners... Will give it a shot.
- fyoucher10
Check out rich media vendors like PointRoll, EyeWonder, EyeBlaster, etc. Maybe check out some of their demo links and see how they're doing it.