Comunidad de diseño web y desarrollo en internet online

Mover imagen de fondo al pinchar un boton

Citar            
MensajeEscrito el 13 Feb 2008 12:33 pm
Hola amigos, tengo un serio problema con una web.
Le estoy haciendo la web a un amigo musico (bendita la hora) en flash con actionscript.2.0. El tio esta encaprichao con una web que ha visto, en la que ocurre lo siguiente....

El fondo es una imagen que ocupa toda la ventana del navegador tenga la resolucion que tenga....
(esto se hacerlo, pero no para que cumpla tambien lo siguiente...)
Por otro lado, se carga una pequeña interface en el centro de la pantalla y segun pinchas a los diferentes botones de las secciones, el fondo se desplaza unos cuantos pixeles hasta otra posicion.

Es como si el fondo fuera mucho mas grande (2100x1400) que el navegador y al pinchar con una pequeña funcion asignada a los botones, se desplazara, enseñando partes que antes no se veian....

Ejemplo.

http://www.vermeersch.ca/

Se que este tio es un crack, pero lo que yo quiero hacer seria solo la parte de "WORK", es decir una foto de fondo y que al pinchar en cada una de sus secciones, tenga un pequeño recorrido el fondo.

No se me ocurre como poder dejar fondo por fuera de la pantalla sea la resolucion que sea sin que se deforme y luego poderlo mover a mi gusto.

Por favor, ayuda... es un reto personal y me gustaria superarlo.... no encuentro nada en el foro ni en google... todos hablan de ajustar al navegador y no me sirve para nada...

Gracias por adelantado

Por superloyez

13 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Feb 2008 01:06 pm
Bueno, de hecho la imagen es más grande que el escenario. No sé si este señor lo ha hecho así, pero te daría un par de cosas que debes estudiar para que puedas hacerlo:

  • BitmapData para que puedas ajustar el tamaño de la imagen sin que se pixele.
  • Tween para las transiciones de movimiento.

Al menos por allí es por donde empezaría yo.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 13 Feb 2008 01:25 pm
Te agradezco tu rapida respuesta, pero sinceramente, respuestas tan amplias y ambiguas, creo que aportan muy poco tanto al foro como a mi...

Conozco el BItmapData y las Twens, pero no va por ahi para nada... los twen si, claro....

La imagen no se redimensiona.. esta por fuera de la pantalla y eso es lo que no se como hacer para luego poder moverla....

Si alguien conoce la respuesta, le agradeceria su ayuda...

Por superloyez

13 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Feb 2008 01:47 pm

superloyez escribió:

Te agradezco tu rapida respuesta, pero sinceramente, respuestas tan amplias y ambiguas, creo que aportan muy poco tanto al foro como a mi...

Conozco el BItmapData y las Twens, pero no va por ahi para nada... los twen si, claro....

La imagen no se redimensiona.. esta por fuera de la pantalla y eso es lo que no se como hacer para luego poder moverla....

Si alguien conoce la respuesta, le agradeceria su ayuda...


Creo que son los mejores puntos para que superes tu reto... con estos dos conceptos es muy simple hacer ese tipo de cosas, solo que como reto no veo necesario postearte el código pero de todos modos si va por ahí la cosa (bitmapData y tween) a no ser que quieras aplicar onEnterFrame a todo y poner una imagen super gigante que no se deforme (pero que tardaría un buen rato descargando).

Saludos!!
y te recomiendo los concejos de The Fricky!

Por vcomics

217 de clabLevel



 

Medellin - Colombia

firefox
Citar            
MensajeEscrito el 13 Feb 2008 02:24 pm
superloyez, la clase tween, tiene un metodo que recibe como parametros: posicion inicial, posicion final, que tipo de propiedad vas a "interpolar", si va a tener elasticidad o no... etc etc.
Explora la clase, de hecho aqui en CL hay un articulo sobre el uso de la clase tween, con unos swf de ejemplo y todo.
Suerte.

Por gustavogarzon

166 de clabLevel



 

msie7
Citar            
MensajeEscrito el 13 Feb 2008 03:35 pm
Siento si no me he explicado bien...

Mi problema es con el fondo, no con las tweens...mi peculicula de contenidos la ubicare al centro y si es preciso con un escuchador en el Stage, la ire ubicando, pero mi problema es el fondo.

Como mover algo mas grande que la pantalla.???? y a su vez, que la pelicula flash se adapte a las dimensiones del navegador???

No es necesario el codigo... solo algun enlace que hable sobre eso o algo parecido...

Las tweens se como funcionan, una vez ubicado el fondo, sabria moverlo al pinchar en en los botones, pero el problema es como ubico el clip para el fondo y de que tamaño la peli para que me rellene el navegador sin deformarse y su vez sobre por los lados para poder moverlo....

Por Favor Ayudaaaaa

Si alguien me pasa algo de codigo, esta claro que no sera mal venido...

Por superloyez

13 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Feb 2008 04:28 pm
Creo que lo que vos queres es algo asi http://www.juanitalvarez.com, lo que hice fué crear un movieClip con las secciones adentro (vacias y cargadas dinámicamente).. hice un tween que me ubicara el movieClip completo en la posición de la sección restando el valor,es decir, si la posición en _x de catalogo dentro del MC es 500, entonces el MC se mueva en _x hasta -500... no se si me hice entender!

Espero que esto te ilumine un poco el camino!!
Saludos!!!
^^

Por vcomics

217 de clabLevel



 

Medellin - Colombia

firefox
Citar            
MensajeEscrito el 14 Feb 2008 10:10 am
Crea un movieclip en el que cargues la imagen a un tamaño superior al de la ventana y desplazalo a los puntos que tengas predefinidos.

Por Whitefeet

42 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Feb 2008 11:20 am
Enhorabuena por tu site vcomics....

Creo que lo mio es mas sencillo... pero en lineas generales es parecido.....

http://dacreate.com/

El ejemplo que os mando, se ve igual de bien en una resolucion de 1024 que en una gigantesca de un portatil panoramico de 19xx...

Este seria un ejemplo mas parecido de lo que mi amigo quiere que le haga.

Mi pelicula con las diferentes secciones (interface) estara flotando SIEMPRE en el centro y segun pinche en uno u otro boton, se cargaran las secciones y el fondo se desplazara un poco.

Lo que no se como hacer o enfocar el proyecto...

De que dimension es la pelicula principal??? y como hago para que se vea en todo el navegador, sin scroll pero solo una parte, dependiendo de la resolucion y a su vez me queda fondo para moverme....

Adaptar SOLO PARTE de la pelicula no tengo ni idea... igual es super facil y estoy embotao...

A parte tengo un listener que hace que la pelicula con las secciones se centre segun el tamaño del navegador..

Código :


centrarpelicula = function ():Void {

new Tween (pelicula, "_x", Strong.easeOut, pelicula._x, (Stage.width-pelicula._width)/2, 20, false);

new Tween (pelicula, "_y", Strong.easeOut, pelicula._y, (Stage.height-pelicula._height)/2,20, false);

};



Como combino las dos cosas???

Pero bueno, con saber como atacar el fondo, me valdria... gracias...

Estoy un poco rallao con esta historia y me bloquea.... creo que estoy hecho un lio entre las dimensiones del clip y las de la pelicula...

GRACIAS POR ADELANTADO Y GRACIAS A LOS QUE YA HAN INTENTADO APORTAR ALGO....

Por superloyez

13 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Feb 2008 03:56 pm

The Fricky! escribió:

Bueno, de hecho la imagen es más grande que el escenario. No sé si este señor lo ha hecho así, pero te daría un par de cosas que debes estudiar para que puedas hacerlo:

  • BitmapData para que puedas ajustar el tamaño de la imagen sin que se pixele.
  • Tween para las transiciones de movimiento.

Al menos por allí es por donde empezaría yo.


como se hace eso de redimensionar una imagen con bitmapdata sin que pixele???

Por clipdepelicula

237 de clabLevel



 

Valencia (España)

firefox
Citar            
MensajeEscrito el 14 Feb 2008 04:06 pm
Bueno funciona de esta forma... tengo un MC con la imagen de fondo y un menu que se ubica en una posición cualquiera... lo que hace el menu es indicarle al MC_fondo que se mueva con un Tween a una posición determinada y que el eje del menú se mueva a otra. La verdad no usé BitmapData porque en ese sitio el fondo es vector tons no tiene necesidad (además no sabía de bitmap cuando lo hice, jejeje)...

• El fondo NO se autoajusta a los monitores ni tampoco tiene Stage.aling, en realidad es una figura muy grande que se mueve dependiendo de los parametros que se manden en el menu pero nunca se autoajusta. De verdad es relativamente fácil y más aún con las clases que propone The Fricky!.

Saludos!!!
;)

Por vcomics

217 de clabLevel



 

Medellin - Colombia

firefox
Citar            
MensajeEscrito el 14 Feb 2008 04:16 pm
Gracias por vuestro apoyo...

Vcomics, solo decirte que en tu ejemplo es muy facil, porque lo haces en un tamaño predeterminado... siempre el mismo....pero que pasa si la resolucion es diferente...

Tampoco es mala... pero me gustaria saber como ajustar a todas las resoluciones y asu vez, poder moverlo... pero bueno, seguire investigando hasta dar con ello...

Investigare lo del BitmapData.. parece interesante...

Por superloyez

13 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Feb 2008 04:26 pm
Pero en el ejemplo que posteas la imagen no se autoajusta.. y en caso de que se autoajuste tendrías que proponer limites a la imagen que sobrepasen el tamaño del Stage, por decir algo, la imagen es de 1024x768... el Stage 1024x768, entonces decirle a la imagen de fondo que se amplie despues de saber el Stage a 100 width+ y 100 height+ . Creo que puede ser una salida.

NOTA: en ese ejemplo de http://dacreate.com/ en mi monitor de 20' se sale la imagen y se ve un corte, osea que no se autoajusta...

Saludos!!!

Por vcomics

217 de clabLevel



 

Medellin - Colombia

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.