Extendable Flash Banner with jQuery Flash
Yesterday I had to figure out a way to make an extendable banner in Flash that when extended covers the content. The main idea with the approach I took is to load the shockwave in a div tag that is positioned above the content and have a movieclip in the shockwave for instance move down when the mouse is positioned over it.
So the Flash is already covering the content but because the background is set to be transparent the user will never know that it is in effect already there. They will only see the opaque movieclip that is just covering the top part (about 150 pixels down).
The Javascript in my test looks like this:
$(document).ready(function(){
$("#flash").flash({
src: 'banner_small.swf',
width: 700,
height: 500,
wmode: 'transparent'
});
$("#flash").css({position: 'absolute', zIndex: 10, height: 500, width: 700, top: -30, left: -50});
});The extra css is needed after loading the Flash because the flash function will purge any kind of inline styles you might have set on the target div. Notice also the wmode: ‘transparent’ line. In any case the div will have a z-index of 10 (can be an arbitrary number, just make sure it’s high enough to cover all the other content). The negative positions were needed to position my shockwave properly in relation to the containing div tag, with the styles already used in my YAML test HTML file the shockwave will follow nicely when the window is resized, great, just what I want!
Here covering the content in rolled down mode in a small window:
And the same window enlarged, noticed how the flash has kept its position within the content:
The actionscript2 could look something like this:
banner_mc.onRollOver = function(){
_root.gotoAndPlay("rollDown");
}The banner_mc movieclip is in this case positioned to be outside the top of the stage and will move down as a part of the animation that starts at the rollDown flag. That’s it, pretty easy when you get the hang of the jQuery css function.
The top of the body section in the HTML looks like this:
<body>
<div id="page_margins">
<div id="page">
<div id="header">
<div id="topnav">
<!-- start: skip link navigation -->
<a class="skip" href="#navigation" title="skip link">Skip to the navigation</a><span class="hideme">.</span>
<a class="skip" href="#content" title="skip link">Skip to the content</a><span class="hideme">.</span>
<!-- end: skip link navigation -->
<span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span> </div>
<div id="flash"></div>
<span>YAML • (X)HTML/CSS Framework</span></div>
<!-- begin: main navigation #nav -->
<div id="nav"> <a id="navigation" name="navigation"></a>
<!-- skiplink anchor: navigation -->
<div id="nav_main">
<ul>
<li id="current"><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
</div>
</div>The only change from the example YAML template is the addition of the div with the “flash” id.
Related Posts
Tags: banner, flash, jquery, jquery flash