Printable View
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.
Is this spam or am I just not seeing that UNFOLD button o.O?
Top banner 970x230 unfold in the right bottom corner..
Hi,
Turns out my AdBlock extension was actually blocking that banner, that's why I couldn't see it, haha :p
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 :)