A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: How to make an EXPANDING banner

  1. #1
    Junior Member
    Join Date
    Jan 2015
    Posts
    3

    How to make an EXPANDING banner

    Hi I am new to using this forum and am hoping for some help on an issue I have making a banner ad.

    Would anyone be able to help me figure out how to make the below banner?

    http://www.cbssports.com/?adTargetin...i_demo_cascade

    If you click on UNFOLD it unfolds over the page content and so on.

    Help is very much appreciated.

    I got Flash CS6.

  2. #2
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Is this spam or am I just not seeing that UNFOLD button o.O?
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

  3. #3
    Junior Member
    Join Date
    Jan 2015
    Posts
    3
    Top banner 970x230 unfold in the right bottom corner..

  4. #4
    Prid - Outing Nig 13's Avatar
    Join Date
    Jul 2006
    Location
    Norway
    Posts
    1,864
    Hi,

    Turns out my AdBlock extension was actually blocking that banner, that's why I couldn't see it, haha

    Anyways, to make something like that would not only require Flash, but also HTML and JavaScript. I made a mock-up example for you, you can DOWNLOAD THE FILES HERE.

    SEE THE FILES ONLINE HERE (LIVE EXAMPLE)

    You should be aware that this only works on a server or when testing online -- testing it locally from your desktop (like opening the HTML file from a folder in your computer), because then the JavaScript won't work and render the whole banner expansion useless :/

    If you're familiar with HTML and CSS, the key to achieving this effect is to use the overflow attribute, which is able to hide parts of a div element. Setting overflow: hidden will only show the parts of the div element as defined by the Height and Width attributes -- anything beyond will not be shown. This way, we can initially give the height a value which only shows the top-part of the banner, and when the user clicks on the UNFOLD button, we increase the height to show the rest of the banner as well. This will ensure that the text below the flash banner is interactable (e.g. you can click and select it) when the banner is not unfolded.

    If you understood the above, we then make 2 functions in JavaScript to switch the height from the first value to the second increased value, and we call these functions from within Flash using: getURL("jJavascript:myFunction()"); where myFunction is a function to be called, already defined in the HTML file.

    Hope this helps though
    I am back, guys ... and finally 18 :P

    BRING BACK THE OLD DESIGN!! OR AT LEAST FIX THE AS TAGS

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center