Menu flash a javascript

hhaawwaa · #1 (**permalink**) 19/04/2010, 16:58

Saludos a todos!
Ante todo presentarme. Soy aficionadillo a esto de los ordenadores desde que mi abuelita me regalo un 386. Aficionadillo y nada más. Estoy haciéndome una página web y una compañera me hizo un flash con un menú de unos botones muy chulos que parecen gelatina.
En fin, me gustaría traducir este flash a Javascript. De momento he logrado esto, pero nada de nada… no da el efecto que quisiera.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="JavaScript">
var an,al,elasticidad,velocidad,_anscale,anp
function redimensiona(cual){
elasticidad = 0.8;
velocidad = 0.6;
an = cual.width
al = cual.height

cual.width = an*elasticidad+an*velocidad

        //cual.width =-this._anscale+escala
        //an = anp*elasticidad+an*velocidad;
        //_anscale += anp

cual.height = al*2

cual.onmouseout = function(){cual.width = an; cual.height = al}
}
</script>
</head>

<body>
<a href="asas"><img src="pepe.gif" width="29" height="21" onmouseover="redimensiona(this)" ></a>
</body>
</html>

Y el código que inserté en el flash es el siguiente:

Código HTML:

onClipEvent (load) {
	elasticidad = 0.8;
	velocidad = 0.6;
	escala = 99;
}
onClipEvent (enterFrame) {
        y =-this._yscale+escala;
        yp = yp*elasticidad+y*velocidad;
        _yscale += yp;
        
		x =-this._xscale+escala;
		xp = xp*elasticidad+x*velocidad;
		_xscale += xp;
}
on (rollOver) {
	escala = 115;
}
on (rollOut) {
	 escala = 99;
}

on(press) {
	getURL("index.html", "_self");
}

Si me ayudáis me haréis un gran favor! Gracias!

Panino5001 · #2 (**permalink**) 19/04/2010, 21:18

Podés empezar con algo así y luego seguir trabajándolo:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<script type="text/javascript">
var elasticidad = 0.8,velocidad = 0.6,escala = 99,xp=.01,yp=.01;
function e(){
    var y=-(parseInt(this.style.height)*escala/100)+escala;
        yp = yp*elasticidad+y*velocidad;
        this.style.height=parseInt(this.style.height)/100*yp+'px';
        var x=-(parseInt(this.style.width)*escala/100)+escala;
        xp = xp*elasticidad+x*velocidad;
        this.style.width=parseInt(this.style.width)*xp/100+'px';;
}
onload=function(){
        setInterval(function(){e.call(document.getElementById('pp'));},30);
}
</script>
</head>

<body>
<a id="pp" onmouseover="escala=115" onmouseout="escala=99" style="display:block; background-color:#333; width:90px; height:50px" href="asas"></a>
</body>
</html>

hhaawwaa · #3 (**permalink**) 20/04/2010, 01:02

Que cracck!!!!

Muchisssiimaasss gracias Panino5001!!!!!!!!!! Me has dado una buena base para seguir, la verdad es que estava estancado. Ya ire montandolo con todos los botones y os cuento que tal!

Gracias de nuevo!!!