Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

Coger y Arrastrar. Drag and Drop

Autor: Carlos Carmona

Para ver el ejemplo, descarga este archivo.

Pues vamos a ello; en este tutorial vamos a ver como crear un sistema drag and drop, o coger y arrastrar, y como hacer que al clickear en la pantalla un objeto se desplace hasta el punto del click.

Abrimos un nuevo proyecto de Flash y de entrada vamos a crear 2 capas, una de ellas la llamaremos "acciones", en la otra capa irá el objeto en cuestión, para nuestro caso una esfera, así que a esta capa la llamaremos "esfera".

En la capa "esfera" creamos un circulo (o el objeto que deseemos) y lo convertimos en un botón, para ello, lo seleccionamos y apretamos F8, le damos un nombre en el cuadro de texto que se abre y seleccionamos la opción "botón".

En la capa "acciones", nos ponemos encima del primer fotograma, click derecho del ratón y seleccionamos la opción acciones, y metemos la orden:

stop();

Bien, a este nivel ya hemos terminado, ahora tenemos que editar el botón, para ello hacemos doble click sobre la esfera. Una vez dentro, vamos a necesitar 3 capas, una de ellas la llamaremos "esfera 2", otra será "acciones 2" y la última "funciones".

La capa "esfera 2" ya estará creada cuando entremos a la edición del botón, ya que es la capa donde está dibujado el botón en si, así que solo tendremos que crear 2 capas. La capa "acciones 2", al igual que la anterior capa de "acciones" llevará el codigo:

stop();

Y por último, la capa "funciones", que es donde estará el kit de la cuestión, así que en esa capa pondremos el siguiente código:

function glideToMouse() {
        _x += (_parent._xmouse-_x)*.2;
        _y += (_parent._ymouse-_y)*.2;
};

this.onMouseDown = function() {
        this.onEnterFrame = this.glideToMouse;
};

this.onMouseUp = function() {
        this.onEnterFrame = null;
};

this.onRollOver = function() {
        this._rotation += 30;
};

this.onPress = function() {
        this._xscale = this._yscale=120;
};

this.onRelease = function() {
        this._xscale = this._yscale=100;
};

this.onReleaseOutside = this.onRelease;

Y con esto hemos terminado. Ahora podremos agarrar y arrastrar nuestra esfera, así como clickear en la pantalla y que la esfera se dirija hacia el click.

Para ver el ejemplo, descarga este archivo.

Un saludo.