Foros del Web » Creando para Internet » Flash y Actionscript »

Ayuda con CUADRO DE IMAGENES

Estas en el tema de Ayuda con CUADRO DE IMAGENES en el foro de Flash y Actionscript en Foros del Web. Hola a todos: Novato al habla... je je. Alguien me puede orientar, ayudar o indicarme un tutorial donde pueda hacer lo que se muestra en ...
  #1 (permalink)  
Antiguo 15/12/2010, 08:37
Avatar de marbelgrafic  
Fecha de Ingreso: septiembre-2003
Ubicación: Marte
Mensajes: 31
Antigüedad: 20 años, 6 meses
Puntos: 0
Ayuda con CUADRO DE IMAGENES

Hola a todos:
Novato al habla... je je. Alguien me puede orientar, ayudar o indicarme un tutorial donde pueda hacer lo que se muestra en el siguiente enlace?:

http://www.axelrodarchitects.com/commercial/HTML/commercial_1.php

Lo que me interesa es saber hacer eso de que cuando pasas el mouse por los cuadrados de la izquierda (que estan difuminados) se ven en color verdadero y aparece la imagen en el lado derecho.

Alguien que me pueda ayudar???

Muchas gracias.
  #2 (permalink)  
Antiguo 15/12/2010, 09:27
 
Fecha de Ingreso: julio-2007
Mensajes: 3
Antigüedad: 16 años, 8 meses
Puntos: 0
Respuesta: Ayuda con CUADRO DE IMAGENES

Hola

Lo que hacen en este caso es que el que tiene el color como difuso ess una imagen igual a la que se muestra

yu por medio de javascript estan intercambiando el src entre la imagen difusa y la que no
Este es el coddigo de la pagina
<div id="thumbnail_2">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/0.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/0.jpg" id="0">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/1.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/1.jpg" id="1">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/2.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/2.jpg" id="2">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/3.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/3.jpg" id="3">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/4.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/4.jpg" id="4">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/5.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/5.jpg" id="5">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/6.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/6.jpg" id="6">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/7.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/7.jpg" id="7">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/8.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/8.jpg" id="8">
<img onmouseout="this.src='../commercial_1/images/thumnails_top/light/9.jpg'" onmouseover="return replace_with_dark_image(this.id, '../commercial_1/')" src="http://www.forosdelweb.com/f16/commercial_1/images/thumnails_top/light/9.jpg" id="9">
</div>

Y esta function de javascript cambia la iamgen grande

function replace_with_dark_image(id, dir) {
document.getElementById('main_wide_photo').style.d isplay = 'none'
document.getElementById('main_photo').style.displa y = 'block'
document.getElementById(id).src = dir + '/images/thumnails_top/' + id + '.jpg';
document.getElementById('photo').src = dir + '/images/big_images/' + id + '.jpg'
}

espero que te sirva
  #3 (permalink)  
Antiguo 15/12/2010, 09:31
Avatar de Bandit
Moderador
 
Fecha de Ingreso: julio-2003
Ubicación: Lima - Perú
Mensajes: 16.726
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: Ayuda con CUADRO DE IMAGENES

Hola marbelgrafic:
Bienvenido al Foro:
Ese efecto es muy simple de hacerlos:
Crea un MC y en la capa 1 frame 1 coloca la imagen y en el frame 2 crea un fotograma clave, seleccionas la imagen del frame 1 y lo conviertes en MC y le das como alfa=30.
Crea la capa 2 y en el primer frame coloca un stop();
En el escenario pon el MC que contiene las imágenes y en el Panel de acciones escribe éste código:
Código actionscript:
Ver original
  1. on(rollOver){
  2.  gotoAndStop(2);
  3. }
  4. on(rollOut){
  5.  gotoAndStop(1);
  6. }

Espero haberte sido de ayuda y Feliz Navidad.
__________________
Bandit.
Si no sabes estudia y si sabes enseña.
http://www.banditwebdesign.com/
  #4 (permalink)  
Antiguo 15/12/2010, 11:06
Avatar de lucasiramos  
Fecha de Ingreso: agosto-2004
Ubicación: Santa Rosa, La Pampa, Argentina
Mensajes: 1.484
Antigüedad: 19 años, 7 meses
Puntos: 13
Respuesta: Ayuda con CUADRO DE IMAGENES

Bueno, resumiendo un poquito lo que dicen los compañeros, que te han dado dos opciones valederas pero distintas, te comento que lo que vos estas mirando en esa página no es Flash, sino HTML y Javascript. Para eso podes buscar imagenes de sustitución en Google, que vas a tener varios ejemplos para mirar. Este esta bueno, pero la idea es que sigas leyendo según tus necesidades.

También se puede hacer en Flash, podes buscar Animación en efecto RollOver en Flash, y también vas a tener para leer un rato. Este tutorial de Cristalab esta bueno, seguro que te sirve, pero igualmente podes seguir leyendo a gusto.

Saludos!
  #5 (permalink)  
Antiguo 16/12/2010, 02:36
Avatar de marbelgrafic  
Fecha de Ingreso: septiembre-2003
Ubicación: Marte
Mensajes: 31
Antigüedad: 20 años, 6 meses
Puntos: 0
Respuesta: Ayuda con CUADRO DE IMAGENES

Muchisimas gracias a todos!!!
Intentaré hacer los diferentes ejemplos para ver cual me va mejor.

Thanks again.
  #6 (permalink)  
Antiguo 17/12/2010, 08:18
Avatar de marbelgrafic  
Fecha de Ingreso: septiembre-2003
Ubicación: Marte
Mensajes: 31
Antigüedad: 20 años, 6 meses
Puntos: 0
Respuesta: Ayuda con CUADRO DE IMAGENES

Cita:
Iniciado por Bandit Ver Mensaje
Hola marbelgrafic:
Bienvenido al Foro:
Ese efecto es muy simple de hacerlos:
Crea un MC y en la capa 1 frame 1 coloca la imagen y en el frame 2 crea un fotograma clave, seleccionas la imagen del frame 1 y lo conviertes en MC y le das como alfa=30.
Crea la capa 2 y en el primer frame coloca un stop();
En el escenario pon el MC que contiene las imágenes y en el Panel de acciones escribe éste código:
Código actionscript:
Ver original
  1. on(rollOver){
  2.  gotoAndStop(2);
  3. }
  4. on(rollOut){
  5.  gotoAndStop(1);
  6. }

Espero haberte sido de ayuda y Feliz Navidad.


Antes de nada muchas gracias por responder, pero tengo el siguiente probblema:
Cuando meto estos codigos que me has dado, solo me reconoce el primero de ellos, es decir el rollover, despues no vuelve al frame 1. Si pongo el rollout como primer codigo solo vuelve al frame 1 pewro al pasar por encima no va al 2.

Algo hay que no esta bien, como hacer para que salgan los dos?

Te puedo enviar el flash si quieres chequearlo... me harias un favor Bandit.

Muchas gracias.
  #7 (permalink)  
Antiguo 17/12/2010, 09:05
 
Fecha de Ingreso: noviembre-2010
Mensajes: 94
Antigüedad: 13 años, 4 meses
Puntos: 11
Respuesta: Ayuda con CUADRO DE IMAGENES

Yo hice un código parecido para AS3. Con la diferencia de que cree 2 funciones para cuando el mouse está encima o afuera de la imagen

Este es el código:

Código AS3:
Ver original
  1. silla.addEventListener(MouseEvent.ROLL_OVER, claro);
  2. silla.addEventListener(MouseEvent.ROLL_OUT, oscuro);
  3.  
  4. function claro(event:MouseEvent){
  5.     gotoAndStop("2");
  6.    
  7. }
  8.  
  9.  
  10. function oscuro(event:MouseEvent){
  11.     gotoAndStop("1");
  12.    
  13.    
  14. }

Aqui está el fla si lo quieren descargar

http://ifile.it/a0dmvju/EFECTO%20LUZ%20%20AS3.fla

Última edición por fletcher2009; 18/12/2010 a las 12:07

Etiquetas: cuadro, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:04.