• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 851
  • Last Modified:

Flash presentations that expand out over the surrounding html page (or seem to)

I'm wanting to understand how flash presentations are created that seem to float above the html page below.

Here is one example: http://www.viewpoint.com/demos/Ford_f_series_exp_300x100_on_aol/index.html

I've also seen them where they were banner ads that had a button to click to expand the ad out over the surrounding html.  There was one for the movie "hostel 2" that was really cool.

How is this done?  Can anyone help me?  This is really the coolest thing ever!
0
marglar
Asked:
marglar
  • 3
  • 2
  • 2
  • +1
2 Solutions
 
rascalpantsCommented:
This is normally done with CSS and a div layer...  as long as you have the below parameter set when you embed the flash object, then you are okay...

<param name="wmode" value="transparent">


basically, you would be having your flash movie sit on top of the other parts of the html...  the size of the SWF file in dimensions would be the largest viewable area of the ad you are creating...  your Div layer needs to be this size as well.

then you use some CSS code to place the div layer at a specific place on the page, and then you use Javascript to change those values out when someone interacts with the Flash part of the page.


let me know if you need any help building this out.


BTW...  I would say that 90% of all people who surf the web would say "Those stupid flash ads are the most annoying things ever!"...  so you might want to rethink this if this is just a banner add on a web site.



rp
0
 
Jason ThompsonSenior UX DesignerCommented:
I agree with rp; those things are the most annoying things ever when they just pop-up (especially if they have sound).  However, if done as a user-controlled option ("Roll over to see a clip", etc), I think they're very effective and a good method to squeeze more compelling information and visuals into a banner ad without annoying people.

Also note that the example you gave us was two separate flash files...the banner and the overlay content.

If you do make one of these, having multiple SWFs (one loading another with loadMovie) like this would be ideal.  This keeps you initial banner size low (as required by many sites), and also only loads content the user is interested in.  AND you can better track who's viewing what (eg: 1000 banner views, 125 rollovers on area A (loading SWF A), 50 rollovers on area B (loading SWF B), etc.

Cheers!
0
 
marglarAuthor Commented:
Thanks everyone.  Any chance of seeing an example of this? I'd love to see an example of a banner that expands over the top of the html page.  Thats what I'm really after.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Jason ThompsonSenior UX DesignerCommented:
It requires registration, but you can grab a bunch of sample banners here:
http://www.dartmotif.com/downloads/downloads_templates.asp

If you want to bypass the coding and focus on creative, they offer an ad development kit for Flash here:
http://www.dartmotif.com/about/about_adkit.asp

I'm not sure how tight the coding is integrated with their ad-serving service, but at least it'll give you an idea of what's possible.
0
 
marglarAuthor Commented:
Thanks!

0
 
Jason ThompsonSenior UX DesignerCommented:
Hey marglar, any chance you'll be closing this question soon?
0
 
treymaanCommented:
I would like to see some sample code, if that is possible.  Thanks!
0
 
rascalpantsCommented:
FYI...   point roll is a company that we are working with to do these types of banners...  not sure about your clients budget, but you should look into them...  i think they have like 60% of the market for these types of banners.

and as mentioned above, you create two swfs... the initial one, and then the panel that expands.  

still not a huge fan of the intrusive ones, but the expandables on user interaction can be a very powerful user experience.  

rp
EE/ZAPE
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now