Log in

View Full Version : embeding flash menu


walshy
09-15-2006, 04:06 AM
g'day
i have a menu that i have created in flash and i would like to make it float on my website. so it will follow the user when they scroll up and down.

also wondering if it is possible in css would it be compatible with all browsers

regards Walshy
BLiZZaRD
09-15-2006, 02:00 PM
Meh. I told him to post here about this. He has the menu in a separate file and needs to make this file float. I know you can float items using CSS, just not sure how.

I know Twey helped me with a similar problem a while back, I just don't know CSS well enough to even start with this one. :D
sandman
09-17-2006, 03:13 PM
While I've never done this, I would assume you set a #div to the dimensions of your flash movie. embed your flash as you would notmally, but set it in the flow of the document.

simplified html & css:

<html>
<head><title>My Page</title></head>
<body>
<div id="wrapper">My Header
<div id="flashmenu"><object src="flashmenu.swf"></div>
My Content
</div>
</body>
</html>

#wrapper {
width: 800px;
margin: 0 auto;
background-color: gray;
}

#flashmenu {
width: 400px;
height: 200px;
}

I am not sure if CSS will clip if drop menu exceeds height set, or if content reflows. My gut tells me it wont, but I haven't ever done this. Hope this helps anyway.
Rich
walshy
09-18-2006, 12:00 PM
nah mate didn't have any luck with that

regards walshy
BLiZZaRD
09-19-2006, 08:31 PM
I mentioned I am not good at this stuff... but I did some research and came up with at least a starting point for you...

You will need to utilize JS and CSS to get this to work in all (most) browsers.

In the <head> section put this:



<script type="text/javascript"><!--
function floatMenu(){
if(!document.getElementById) return;
var menu = document.getElementById('menu');
menu.style.top = ((!document.all)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop: document.body.scrollTop)+"px";
}
window.onscroll = floatMenu;
//--></script>
<style type="text/css"><!--
#menu {
position:fixed;
top: 0px;
left:0px;
}
--></style>


In the <body> section put this:



<div id="menu">
//Here you will need to embed your menu swf file...
<OBJECT classid="clsid:Q768KL98E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="600" HEIGHT="600" id="SWFname" ALIGN="">
<PARAM NAME=movie VALUE="SWFname.swf"> <PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000> <EMBED src="SWFname.swf" loop=false quality=high bgcolor=#000000 WIDTH="600" HEIGHT="600" NAME="SWFname" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>
</div>


Not sure how this will work, if at all... but it should be a starting point at least.

NOTE: When you publish your menu swf the HTML page will have the <OBJECT>.......</OBJECT> crap you see above. Copy yours and paste it over this one of mine...
Also note, all files MUST be uploaded into the same directory, a little security feature of Flash...
walshy
09-19-2006, 11:29 PM
thanks for the help, but i managed to find a way to do it css. you tell the object to have an absolute position and a overflow of 100% and the object will scroll nicely down the page no jerky action like with javascript.
ill give you the code cause i don't know what i'm talking about


html {background:rgb(123,187,221);}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:rgb(123,187,221);}
body {font-family: georgia, serif; font-size:16px;}

and


#menu {display:block; top:10px; left:170px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}
* html #menu {position:absolute;}
#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#000;}
#menu a:hover {background:#aaa; color:#fff;}

just bung those two sucks in your css sheet. you can custimize it i think all you need is the

height:100%; overflow-y:auto
in the body and then

* html #menu {position:absolute;}
for what ever you want to stay still

anyway you go to my site and have a gander at www.hubla.memebot.com
just a warning it is no where near finished yet but ill get there
so thanks goes out to everyone that helped

regards Walshy
blm126
09-20-2006, 01:17 AM
* html #menu {position:absolute;}
The above will NOT work in IE7, nor will the position fixed. Conditional comments (http://www.quirksmode.org/css/condcom.html) are the only safe route here.


<!--[if IE]>
<style type="text/css">
#menu {position:absolute;}
</style>
<![endif]-->
walshy
09-20-2006, 01:57 AM
where does that peice of code go

regard Walshy
jscheuer1
09-20-2006, 04:08 AM
where does that peice of code go

regard Walshy

In the head of the page.
BLiZZaRD
09-20-2006, 07:14 AM
Nice job! Site looks good too, going to bookmark it to look again when it is complete!