Comunidad de diseño web y desarrollo en internet online

Desplazamiento de una imagen con el cursor

Citar            
MensajeEscrito el 16 Feb 2007 02:05 am
Hola a todos:

Estoy queriendo hacer este efecto.. pues que una imagen mucho mas grande que el lienzo, se mueva en direccion que el mouse, de este modo quisiera recrear una especie de escritorio, con una PC, y varios objetos para que el usuario pueda tener mucha interaccion con la web...

Encontre un tutorial de movimiento en profundidad, pero creo que no me ayuda, pues tendria que tijeretear el codigo y no quiero fregar algo (estoy iniciandome en el Action Scrip)

salu2

Por Thor

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 16 Feb 2007 03:04 am
Sin código no se puede, pero supongo que eso es un poco obvio. Te recomiendo hacerlo con AS básico, viendo la posición del cursor (con _xmouse y _ymouse) y seteando la posición del escritorio de acuerdo a ésta. No es difícil, pero si pretendés lograrlo sin código es imposible.

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 16 Feb 2007 03:33 am
si... sin Codigo es imposible, esta muy claro eso...

Perdoname pero como dije, recien me voy a iniciar en ActionScript y no se nada :oops:, si me pudieses dar una explicacion de como usar los comandos _xmouse y _ymouse te lo agradeceria mucho...

Tengo la idea en mente de como funciona, (posicion X y posicion Y), pero no se aplicarlo ¬¬!

salu2

Por Thor

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 16 Feb 2007 07:19 pm
A ver. Supongamos que tenés un área de 300px de ancho por 200 de alto. La mitad del ancho es 150px, por lo tanto:

Código :

var centro:Number = 150;
Ahora, tomamos la posición del mouse respecto al centro, es decir, la distancia (en píxeles) entre el centro y la posición en x del mouse:

Código :

var distX:Number = Math.abs (_xmouse - centro);
Bien, la propiedad abs de la clase Math quiere decir valor absoluto (absolute), y la usamos ya que la distancia no puede ser negativa.

Ahora, seteamos la posición de un objeto para que la distancia entre este y el centro sea igual a la distancia entre el mouse y el centro (como siempre, sólo pensamos en el eje x):

Código :

objeto._x = (_xmouse > centro)? centro - distX : centro + distx;
Bien, ese código podrá parecer complicado, pero no lo es. Entre paréntesis se halla una pregunta, ¿es _xmouse mayor a centro? si la respuesta es si, realiza la primer acción, si es no, la segunda. Tené en cuenta que las 2 acciones están separadas por los 2 puntos.

Pero cómo aplicamos esto? Acá te doy un código de ejemplo, no te olvides de ubicar un MC instanciado como objeto:

Código :

var centro:Number = 150;
var distX:Number;
onEnterFrame = function () {
distX = Math.abs (_xmouse - centro);
objeto._x = (_xmouse > centro)? centro - distX : centro + distx;
objeto._y = _ymouse;
};

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 16 Feb 2007 11:01 pm

HernanRivas escribió:

objeto._x = (_xmouse > centro)? centro - distX : centro + distx;
Vaya, no sabia que esto se podia poner así. No me lo creía y lo he probado :P . Y vaya! pues me quedado frito cuando dice "El script no contiene errores" :cry:
Yo siempre he utilizado los elses y los IF's :roll:

Código :

if (_xmouse>centro) {
   objeto._x = centro-distX;
} else {
   objeto._x = centro+distx;
}
Vamos, cinco lineas en una :o
Muy bueno...

Salu2

Por Bleend

Claber

3385 de clabLevel

10 tutoriales
4 articulos

Genero:Masculino   Héroes

Barcelona

msie7
Citar            
MensajeEscrito el 17 Feb 2007 03:15 am
Bueno, es una de las cosas que se aprenden luego de revisar (casi) toda la documentaciónd de AS en la ayuda de Flash.

También, podés reemplazar ésto:

Código :

if (a > b) {
verificacion = true;
} else { 
verificacion = false;
}
Por:

Código :

verificacion = (a > b)? true : false;
Y, aún más resumido:

Código :

verificacion = a > b;

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 17 Feb 2007 01:59 pm

HernanRivas escribió:

Código :

verificacion = a > b;
Juas!, vacilada... :o

Una pregunta, es muy importante en flash declarar el tipo de variables antes de usalas?

Lo digo, porque yo antes trbaje con un lenguaje de programacion que podias crear tantas variables como valor tuviera otra variable sin preocuparte por el tipo ni nada. Ej:

Código :

valor1 = [var[i]];
esto definia:
para i=1 : [var 1]
para i=2 : [var 2] 
(que eran otras variable) U_U
...
Luego me pase al C++, que no podias hacer nada sin declarar antes las variables y su tipo (importantísimo!)

Re: ¿Es muy importante en flash declarar el tipo de variables antes de usalas?

Tnks

Por Bleend

Claber

3385 de clabLevel

10 tutoriales
4 articulos

Genero:Masculino   Héroes

Barcelona

msie7
Citar            
MensajeEscrito el 18 Feb 2007 03:14 am
Ni, es decir, si y no.

Primero que nada, a favor tenemos que podemos prevenir ciertos errores, por ejemplo, este código:

Código :

var miString:String = "Esto es un String";
miString = 32;
Nos advierte que intentamos ingresar un número en un campo especial para cadenas. Otro caso similar es definir el output de una función para que Flash nos advierta en caso de error (bueno, cierto tipo de error).

Por otro lado, tiene otras ventajas. Una cosa bastante útil es definir las variables al principio o en una capa en particular y tenerlas todas juntas. Eso hace que nuestro código sea más legible, ya que sabemos todo el tiempo con qué variables contamos. Imaginate un código donde las variables se definen (o se usan por primera vez) en cualquier parte; obviamente, es difícil leerlo y entenderlo para alguien que lo ve por primera vez. En trabajos en grupo, esto es muy malo.

Pero, como bien sabés no es necesario, sólo recomendable. Al final, termina dependiendo del estilo de cada uno, incluso, si venís de C++ es posible que tengas la costumbre de declarar variables bastante arraigada.

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 19 Feb 2007 01:00 am
Estudie el Codigo que me diste, lo probe de una y mil formas y no logre nada ... sera que soy muy burro en esto, o sera que el codigo tiene algun error.

he buscado en todas partes y en internet nadie habla nada al respecto.
:|

Aqui tengo un : EJEMPLO de lo que desearia lograr

http://www.grancaminata.com.pe/inicio.htm

Cuando comenze a usar flash, use el Flash 5 y hasta ahora no he usado para nada el ActionScript :oops:

Por Thor

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 19 Feb 2007 01:07 pm
Instanciaste un MC como "objeto"? SI no lo hacés no sirve. Además, éste código va en el fotograma.

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 20 Feb 2007 03:46 am
Instancie el MovieClip como "objeto" por otro lado :twisted: ahora si funciona aunque, voy a tener que patalear un poco para que quede bien...

gracias de todos modos

Aunque, si hay un error en tu codigo... la imagen no sigue al cursor en el eje X... lo solucione cambiando un caracter en tu Codigo:

Código :

objeto._x = (_xmouse > centro)? centro - distX : centro + distx;


Y lo puse asi:

Código :

objeto._x = (_xmouse < centro)? centro - distX : centro + distx;


Eh aqui lo que hize...

http://www.helixdataperu.com/alianze/desplazamiento.fla

Ahora que ya aprendi como hacer que la imagen siga al cursor (muchas gracias por eso) me gustaria saber como hacer para que al alcanzar el FINAL DE LA IMAGEN no se salga del cuadro, como pasa con mi caso, que se ve el fondo blanco.

Por Thor

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 20 Feb 2007 07:08 pm
Bueno, primero, creí que querías que se moviera en dirección contraria a la dirección del Mouse, pero no importa.

Si querés que la imagen siga al cursor, podés hacer ésto:

Código :

objeto._x = _xmouse;
Que es bastante más simple.


Pero, ahora, tu nueva pregunta, eso se hace con un if. Es decir, verificás la posición de la imagen y le permitis moverse sólo si esa posición se halla entre ciertos valores que vos definís.

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie

 

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