Expert Flashers needed
April 8, 2005 4:13 AM   Subscribe

I'm trying to replicate a Flash menu effect I saw recently. The menu was displayed as a vertical list. As the user rolled over the links, the highlighted word grew larger, pushing the other links out of the way. As they rolled off onto another word, the original link shrank and the next one grew, producing a kind of 'wave' effect. Sorry, I can't find an example. Does anyone know how I'd make this myself in MX 2004?

I know how to get the words to grow and shrink on rollover but I can't figure out how to get the other buttons to move out of the way. Thanks.
posted by blag to Computers & Internet (8 answers total)
 
You mean like this?
posted by sjvilla79 at 4:16 AM on April 8, 2005


maybe this site offers something you can work with (you'll need to sign up to download)
posted by mailhans at 4:48 AM on April 8, 2005


Response by poster: sjvilla79 - that's exactly the effect I'm trying to create. And probably where I saw it applied, too! Thanks.

mailhans - nice site. This is very close although it has an annoying habit of 'walking' itself off the screen. I wonder if there's a way to force the buttons to return to their original positions. Equal thanks.

I might try emailing the 10x10 developer to see if he can provide any insight but would value any further input from the gang here.
posted by blag at 5:41 AM on April 8, 2005


Although I totally disagree with doing this, Blag, you could decompile the source SWF with various programs. This would let you check out the code, for example. Use it as a learning method only, hey.

Again, this isn't a good thing to do in my opinion.
posted by sjvilla79 at 5:57 AM on April 8, 2005


I hacked up a basic JavaScript version:




div {font-size:xx-small;cursor:pointer}





var listCount = 13;
function bigme(el)
{
var idNum = Number(el.id.substr(1, el.id.length - 1));
var sizes = new Array("xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large");
var relativeID;
for (var i = 1; i < listcount; i++)br> {
document.getElementById("x" + String(i)).style.fontSize = "";
}
for (var i = 0; i < 6; i++)br> {
relativeID = idNum + i - 6;
if (relativeID > 0)
{
document.getElementById("x" + String(relativeID)).style.fontSize = sizes[i];
}
}
for (var i = 5; i >= 0; i--)
{
relativeID = idNum + 6 - i;
if (relativeID < listcount)br> {
document.getElementById("x" + String(relativeID)).style.fontSize = sizes[i];
}
}

}

one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen


posted by SNACKeR at 3:27 PM on April 8, 2005


Best answer: Umm, try again:

<html>
<head>
<style>
div {font-size:xx-small;cursor:pointer}
</style>
</head>
<body>
<script language="javascript">

var listCount = 13;
function bigme(el)
{
var idNum = Number(el.id.substr(1, el.id.length - 1));
var sizes = new Array("xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large");
var relativeID;
for (var i = 1; i <= listCount; i++)
{
document.getElementById("x" + String(i)).style.fontSize = "";
}
for (var i = 0; i <= 6; i++)
{
relativeID = idNum + i - 6;
if (relativeID > 0)
{
document.getElementById("x" + String(relativeID)).style.fontSize = sizes[i];
}
}
for (var i = 5; i >= 0; i--)
{
relativeID = idNum + 6 - i;
if (relativeID <= listCount)
{
document.getElementById("x" + String(relativeID)).style.fontSize = sizes[i];
}
}

}
</script>
<div id=x1 onmouseover="bigme(this)">one</div>
<div id=x2 onmouseover="bigme(this)">two</div>
<div id=x3 onmouseover="bigme(this)">three</div>
<div id=x4 onmouseover="bigme(this)">four</div>
<div id=x5 onmouseover="bigme(this)">five</div>
<div id=x6 onmouseover="bigme(this)">six</div>
<div id=x7 onmouseover="bigme(this)">seven</div>
<div id=x8 onmouseover="bigme(this)">eight</div>
<div id=x9 onmouseover="bigme(this)">nine</div>
<div id=x10 onmouseover="bigme(this)">ten</div>
<div id=x11 onmouseover="bigme(this)">eleven</div>
<div id=x12 onmouseover="bigme(this)">twelve</div>
<div id=x13 onmouseover="bigme(this)">thirteen</div>
</body>
</html>
posted by SNACKeR at 3:30 PM on April 8, 2005


Best answer: The effect is well documented, you just need to know the primary inspiration for it is the Dock utility for Mac OSX to help the Google-fu along.
posted by majick at 7:11 PM on April 8, 2005


Response by poster: Fantastic. A huge help, thanks to everyone.

SNACKeR: I bow down to your JS-fu. Amazing work.
posted by blag at 4:02 AM on April 10, 2005


« Older Prevent me from killing a smoker, please.   |   Is it a bad idea to hire a co-worker to clean your... Newer »
This thread is closed to new comments.


Tags

Share