Rollover con FLIP VERTICAL!? Urgente!

Hola! Ante todo un saludo desde Venezuela. Estoy haciendo un proyecto web, y tengo en mente unos rollovers que cuando pase el mouse se volteen (hagan un flip) verticalmente. Por ejemplo, el estado normal es un cuadro blanco, o parte de un fotografía, y cuando se voltee quede negro con el texto que indique la página a la que se dirige. Pero también quiero que el efecto (animación) se vea tridimensional... ALGUIEN SABE COMO HACERLO, ¿qué programa? ¿Quién me puede ayudar? Pleaaaaaseeeeee!
Respuesta
1
Es muy simple,:
Primero creas un botón, el mismo tiene 4 estados, reposo (nada sucede), activo, (el mouse pasa por encima), presionado (cuando ahcemos click), y zona activa.
Procedemos así:
En el estado de reposo, ponemos un gráfico, por ejemplo, un recuadro blanco. En el estado de activo ponemos un movieclip, en el cual el primer frame sea el recuadro blanco, y los siguientes, la animación que queremos. Extendemos este clip también en el frame de presioando, para que cuando hacemos click, nos e corte la animación. En la zona activa, repetimos lo que pusimos en el estado reposo.
Cualquier duda, comunicate conmigo
Hola, gracias por tu respuesta!, el problema es precisamente es que no hacer el efecto de flip, se hacer los botones... si puedes aclararme te agradecería mucho... Atentamente. Caraotica
El efecto de flip, ¿en qué sentido es?
¿Tienes un ejemplo armado?
Es en sentido vertical, de arriba hacia abajo, y no tengo un ejemplo armado, solo un ejemplo (un poco simplón) que me mandaron =( es en esta dirección:
http://cursos.inea.gob.mx:8081/flip/rollover.htm
La forma más rápida de hacerlo es con swish, lo que te recomiendo es bajarte un tryout, y hacerlo desde ahí, el soft es más fácil de usar que el block de notas de win!
Si te hace falta, enviame por mail a [email protected], la gráfica de tus botones, y te puedo armar un ejemplo que puedas luego customizar.

11 respuestas más de otros expertos

Respuesta
1
Lo que quieres hacer es muy sencillo siempre y cuando sepas usar Photoshop e ImageReady (generalmente vienen juntos).
Lo que necesitas son 2 imágenes, una estática y una animada.
¿La primera imagen la llamaremos botón.gif y la segunda acción.gif ok?
Botón.gif sera la imagen que el usuario vera en el estado normal, y sera una imagen estática sin animación.
Acción.gif sera un GIF animado donde tendremos la transformación o la animación.
Crea el botón.gif en Photoshop, después crea la animación en ImageReady para el acción.gif de manera que el primer cuadro de acción.gif sea igual o parecido a botón.gif y de ahí en adelante hagas la animación.
En ImageReady le pones que la animación sea ONCE (o sea una sola vez) para que no se repita. Y en el código para el rollover utiliza este código
<a href="link" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','accion.gif',1)"><img name="Image1" border="0" src="boton.gif"></a>
Es la manera más sencilla de hacer lo que deseas a menos que lo quieras hacer en flash.
AH! Y otra cosa, pon este código en el HTML después del tag de <BODY> para que funcione lo que te comente hace rato
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Gracias! Soy buena con los dos programas, aunque de verdad si esperaba hacerlo en flash, pero cualquier cosa me sirve... Además, muy buena explicación, hasta para mi que no soy experta en este campo!...
Respuesta
1
He estado leyendo algunas de las respuestas que t han dado los expertos y he visto que estas interesada en lograr el efecto con flash, pues bien t lo voy a explicar un poquillo aunque no estoy seguro de que sea lo que buscas exactamente, bueno por lo menos algo se parec, je je.
Lo primero m imagino que tendrás el macromedia flash pero si no es así al final t dejo una dirección desde la cual t puedes bajar un trial de 30 días del macromedia flas Mx que es el que utilizo yo, aunque t tendrás que dar vidilla para hacerlo en los 30 días.
Bueno vamos al grano, t lo voy explicando paso a paso
ROLLOVER CON MACROMEDIA ->
1) Pon en marcha tu macromedia y create un cuadrado cualquiera en la primera capa a la que vamos a llamar cuadrado y create una segunda capa a la que vas a llamar imagen
2) Selecciona "file"->"import to library" y selecciona la imagen que quieres de fondo. Vet ahora a "window"->"library" y coloca la imagen en la capa imagen
3) Ahora ajusta la imagen al cuadrado que has creado pero siempre dejando los lados del cuadrado un poco visibles para luego podré hacer la transformación, ¿ok? Para ajustar utiliza laherramienta que se encuentra en "tool" y se llama "free transform tool"
NOTA: Para q t sea mas facil deselecciona "view"->"snap to objects" en el caso d q est seleccionada
4)Vamos ahora a crear el botón. Haz clic en el botón derecho sobre la figura y selecciona "convert to symbol" y a continuación haz doble clic sobre la imagen para editarlo. Edítalo como quieras introduciendo en "hit" un cuadrado igual que el de la capa cuadrado.
// Bueno espro q todavia no t hayas perdido.
Bueno venga sigamos. A CURRAR!
5) Selecciona la capa cuadrado y dale a "actions-frame"->"acciones"->"control de película"->"stop" y haz lo mismo con imagen
6)Selecciona la imagen y luego haz clic en "actions-button". En la zona de código inserta lo siguiente
----------------------------------------
On (rollOver)
{gotoAndPlay(10);
}
----------------------------------------
7) Inserta keyframes en el fotograma 10 ( o en el que le hayas puesto en gotoandplay), tanto en cuadrado como en imagen
8)Pont en la capa cuadrado y haz clic en el botón derecho y selecciona "create motion twin" e inserta un keyframe en el fotograma 20
9)¿T acuerdas de la herramienta "free transform tool"? Pues seleccionala y vete al fotograma 20 de cuadrado pulsa sobre este y pincha en su lado izquierdo arrastrándolo justo hasta el lado derecho
//Bueno si has llegado hasta aquí por lo menos podrás ver como se mueve el cuadrado, DIOOOS Ahora viene lo chungo, je je
10)vete a capa imagen y haz un "create motion twin"e inserta un keyframe en el fotograma 15 x ej. Selecciona de nuevo la herramienta de antes y transforma la imagen de manera que se ajuste al cuadrdo ( tendrás que utilizar las lineas paralelas esas que salen )
11) haz un keyframe en el fotograma siguiente y en este elimina la image he inserta un texto que tendrás que ajustar al cuadrado ( aquí también tendrás que utilizar un circulito que t sale al pulsar con la herramienta de transformación).
12) Finalment inserta un keyframe en imagen en el fotograma 20 e inserta el texto recto y ajustado
//ufffff si has superado esto a esta chupado. Venga vamos a x lo ultimo
13) selecciona el fotograma 20 y haz clic en "actions-frame" y selecciona "stop" en las dos capas como hicimos en el paso 5
14)En el fotograma 20 estando en capa imagen selecciona el texto y creat un botón con este con el diseño que quieras y una vez creado selecciona "actions-button" e inserta este código
----------------------------------------
On (rollOut)
{gotoAndPlay(1);
}
----------------------------------------
Y lo conseguiste!
Je je
Bueno espero que t salga y ya sabes cua
T dejo el resto del mensag que con tanto mogollón no cabe
RESTO MENSAG ->
Bueno espero que t salga y ya sabes cualquier duda m la comentas.
Naturalment se podria hacer con mas programas aunq desgraciadament no tngo los conocimientos. M parec q exist un tal Studio3sd o algo asi q t serviria. Tambien este efecto q t he explicado s podria hacer con movieclips pero se lia la cosa x lo menos para mi.
Bueno un saludo y suerte, ah! Y t dejo la dirección que t comento al principio que con todo este chorizo ya es m olvidaba, ¿ok? Ademas t vienen otros muchos programas interesantes... ¿y es que que más es puede pedir?
Bye
MACROMEDIA FLASH MX ->
http://dragners-dsc.webcindario.com/dg.htm
******************CHEM******************
Ah se m olvidaba lo más important el direccionamiento
15)vete a la capa imagen en el fotograma 20 selecciona el texto "actions-button e inserta al final esto
------------------------------
On (release)
{getURL(Aqui la URL real);
}
------------------------------
O si quieres en nueva ventana
------------------------------
on (release) {getURL(Aqui la URL real, "_blank");
}
------------------------------
Ahora si que si, je je
Respuesta
1
Eso lo tendrías que hacer con Java. Podes buscar un programa para hacer todo eso, que inclusive te pone el cdigo directamente en la página, así no tienes que escribir el código.
El programa se llama Anfy Java y podes bajarlo de
www.download.com
www.superarchivos.com
www.tucows.com
En alguno seguro que esta.
Respuesta
1
Busca el GifConstructor Set, y te explico paso a paso como hacerlo. Si no sabes donde encontrarlo, mandame un correo a [email protected] y te lo envío
Hola!, no se en realidad donde bajarlo, pero buscaré, te agregué a mi msn también, mi correo es [email protected], cualquier cosa buscare en el web sobre el programa... estamos en contacto... GRACIAS
Ok, t espero en el messenger
Respuesta
1
Uf, uf... sin saber exactamente lo que quieres, te recomiendo dos programas. Uno es el emagen ready, que viene junto a photoshop. Con este programa podrás hacer gif sin ningún problemas y lo mejor es que peudes abrir psd que ahs creado en photoshop, para después animarlos con las diferentes capas.
Otro es el fireworks, también muy similar.
Esepro que te sirva de ayuda
Respuesta
1
Hay bastantes formas de hacer lo que pides. Dependerá de tus conocimientos y las licencias y programas de los que dispongas.
1ª vía: usando HTML dinámico. Para eso visita la web www.dansteinman.com, donde encontrarás un sinfín de ejemplos de cosas parecidas a lo que tu pides. El problema es que con algunas versiones de Netscape no te funcionará correctamente. No obstante, en la misma web ya se especifica para qué versiones funciona, etc.
2ª vía: el GIF animado. Creas el botón en un GIF fijo (quieto) y después al pasar el mouse haces un simple rollover que cambie ese GIF estático por la animación que has preparado. Quizás es la forma más sencilla. Para hacer esa animación 3D puedes usar un programa como el ImageReady del Adobe Photoshop que te permite simularlo fácilmente (mira en el Help del mismo programa). Para hacer los rollovers en el html, un programa como Dreamweaver te lo hará automáticamente. Haciéndolo de esta forma te aseguras compatibilidad con todos los navegadores, aunque cada vez que hagas un rollover tendrá que cargar el GIF animado, por lo que estos gifs no los hagas muy "pesados" (menos de 1KB).
3ª vía: usar Flash. Yo es la vía que seguiría, pues cada botón te ocupará mucho menos que si usaras GIFs y te será mucho más sencillo que programarlo con Dynamic HTML. Lo único negativo es que debes conocer el uso del Flash, pero este tiene un Tutorial y un Help super útiles incorporados al programa.
Hay más formas de hacerlo, como el uso de Shockwave (mediante Director), Swift3D (un simulador de 3D para Flash), etc. Hay programas que te hacen efectos de este estilo casi solos, pero no están tan extendidos.
Respuesta
1
Ok, eso es sencillo
Podrías usar flash pero es más complicado o podrías usar java, que ya el código lo puedes encontrar en cualquier lado...
A lo que tengo esntendido lo que piensas hacer es como un menu que cuando pase el mouse encima pues se resalte o cambie de estado...
Mira el código de eso es fácil de encontrar y lo puede buscar aquí
http://www.dynamicdrive.com/
http://www.javascriptcity.com
http://www.flashkit.com
En esas páginas encontraras mucho para escoger
Respuesta
1
La cuestions ería usar Photoshop o algún programa de edición gráfica y darle la vuelta a la imagen original ( ya esto depende de tus talentos artísticos). Dependiendo del efecto que quieras vas atener n figuras o al menos dos. Una vez que tengas las dos figuras puedes anirmalas usando Javascript.
Puedes chequear las páginas
http://www.desarrolloweb.com/articulos/2.php
http://www.webmasterslibrary.com/tutorials/content.jsp?rollover
Un saludo igual desde Caracas y ni un paso atrás..!
Respuesta
Desde México.
Pues primeramente tienes que tener 3 elementos.
Primero, Flash.
1.- Hacemos 3 tipos de objetos en la ventana de librerías. Un Graphic que será tu botón en forma de rectángulo, un movie clip que hará el efecto del flip tridimensional y un Button que será el que contenga las acciones del roll over y el link al cuál se conectará cuando le hagas click.
2.- Obviamente previo a esto deberás haber hecho la selección de tus elementos gráficos y tener bien definida la idea de lo que deseas hacer...
Lo siguiente que debes de conseguir es un buen programa de 3D que te permita exportar a flash. Te recomiendo el Swift3D v3.0 es el mejor que hasta ahora ha salido al mercado.
Ahora, pues manos a la obra, puedes hacer la animación del flip inclusive en el Swift3d y solamente importarla al flash dentro del movie clip.
Es MUY FÁCIL!
Suerte y califica la respuesta.
Respuesta
Podrías hacer algo así con macromedia director, no conozco mucho ese programa pero se que se puede hacer algo así. Puedes bajan un demo en macromedia.com y prueba a ver.
Respuesta
-1
Si sabes manejar flash es fácil es crear un movie que haga un flip vertical en el segundo estado del botón y ya

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas