CODIGO.actionscript » Efectos

FlashLoaded: Componentes para Flash

admin — Wed, 21 Nov 2007 20:03:17 +0000

En FlashLoaded.com podemos encontrar una serie de buenos componentes para Flash a un precio bastante razonable.

El uso de componentes de este tipo de componentes permite a la gente con poca o ninguna experiencia con programación tener una web con recursos de nivel profesional.

Dándome una vuelta por este site he visto unos cuantos componentes que me parecen de mucha calidad:

FlashGuestbook
Este componente permite añadir un widget de comentarios altamente modificable, con campos personalizables, comentarios moderados y panel de control. Basado en MySQL. Con buscador de comentarios y todo

3DEnvironment
Este componente nos permite crear espacios de de manera muy fácil. El resultado es realmente muy bueno.

Mouse wheel: Move forward and backwards
Up/down arrow: Move forward and backwards
Left/right arrow: Move left and right
Shift key: Tilt down
Ctrl key: Tilt up
End key: Rotate

HotFlashVideo
Interesante componente que permite añadir zonas seleccionables a un video .FLV, y asi poder poner enlaces externos, textos de rollover o ejecutar cualquie tipo de acción.

Hay bastantes más componentes, animaciones, templates para ver. Recomiendo al menos darles un vistazo

*Sponsored Post

Panel de zoom de imágenes en ActionScript 3

admin — Wed, 03 Oct 2007 16:20:09 +0000

Este ejemplo es del estilo de "Zoom con lupa", aunque en esta ocasión es un zoom sobre una imagen con un panel de visualización al estilo de Photoshop.

El ejemplo es el siguiente:

Arrastra la zona roja del panel para desplazar la imagen

Para realizar este ejemplo necesitaremos la imagen a dos tamaños, una grande que colocaremos dentro de una máscara, y otra pequeña que colocaremos dentro de un MovieClip que utilizaremos como visor.

La imagen grande la colocaremos dentro de un clip al que llamaremos "mapaBig", y su mascara será otro clip al que llamaremos "mascara".

En cuanto al clip de visor lo llamaremos "visor" y la imagen pequeña "mapaSmall". Este clip contendrá tambien un botón que situaremos en la parte superior del panel que nos servirá para agarrar y mover el panel, este botón se llamará "botDrag". Tambien tendremos otro movieclip llamado "zona" formado por un rectángulo de color rojo y un botón invisible con el nombre "botZona".

Unas vez con la estructura de clips montada iremos a por el código. Todo este irá en el primer fotograma.

Empezaremos creandonos unas funciones para realizar el arrastre de la zona de zoom. Haremos que estas funciones nos sirvan tanto para el drag de la zona como para el drag del panel.

PLAIN TEXT

Actionscript:

var visor_fx:Boolean = false;
//-----------------------------------------------
visor.botDrag.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
visor.botDrag.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
visor.botDrag.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
visor.zona.botZona.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
visor.zona.botZona.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
visor.zona.botZona.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
//-----------------------------------------------
function onStartDrag(e:Event):void
{
var clip:MovieClip = e.target.parent;
clip.startDrag();
visor_fx = true;
}
function onStopDrag(e:Event):void
{
e.target.parent.stopDrag();
visor_fx = false;
}

Las funciones recuperan como parametro (target.parent) el clip que han de arrastrar dependiendo del clip que lanzó el evento.

También creamos una variable "visor_fx" que nos indica si estamos arrastrando algo en ese momento. Esto lo hacemos para posteriormente crear una función que se ejecute cada vez que movamos el mouse pero que solo ejecute las funciones internas en el caso de estar arrastrando el clip de "zona".

PLAIN TEXT

Actionscript:

this.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
//-----------------------------------------------
function MouseMove(e:Event):void
{
if (visor_fx == true) {
calculaDist();
mueveVisorZona();
controlaPosiciones();
}
}

Aparte del arrastre haremos que al clicar sobre la imagen pequeña la zona se sitúe directamente en esa posición.

PLAIN TEXT

Actionscript:

visor.mapaSmall.addEventListener(MouseEvent.MOUSE_DOWN, onPosicionaZona);
//-----------------------------------------------
function onPosicionaZona(e:Event):void
{
var clip:MovieClip = e.target.parent;
clip.zona.x = mouseX-clip.x- clip.zona.width/2
clip.zona.y = mouseY-clip.y- clip.zona.height/2
calculaDist();
mueveVisorZona();
controlaPosiciones();
}

Ahora vamos con las funciones que realizaran el desplazamiento de la imagen grande en función de la posición del clip "zona" sobre la imagen pequeña. Empezaremos creando unas variables:

PLAIN TEXT

Actionscript:

var porcentajeX:Number = 100 / (mapaBig.width / visor.mapaSmall.width);
var porcentajeY:Number = 100 / (mapaBig.height / visor.mapaSmall.height);
visor.zona.width = mascara.width * porcentajeX / 100;
visor.zona.height = mascara.height * porcentajeY / 100;
var distX:Number = 0;
var distY:Number = 0;

La variable porcentajeX/Y calcula el porcentaje de escalado entre las dos imágenes. Una vez sabemos este porcentaje escalamos el clip "zona" a la misma escala en relación a la imagen pequeña.

También creamos dos variables distX/Y que contendrán la distancia de corrección de la imagen grande en relación al visor, las dejaremos a 0 ya que haremos una función para calcular esa distancia.

PLAIN TEXT

Actionscript:

function calculaDist():void
{
distX = (visor.zona.x - visor.mapaSmall.x) / porcentajeX * 100;
distY = (visor.zona.y - visor.mapaSmall.y) / porcentajeY * 100;
distX = (distX<0)?0:distX;
distY = (distY<0)?0:distY;
}

En función de estos valores moveremos la imagen grande bajo la máscara.

PLAIN TEXT

Actionscript:

function mueveVisorZona():void
{
mapaBig.x = mascara.x - distX;
mapaBig.y = mascara.y - distY;
}

Solo queda crear una función que controle que al arrastrar no desplacemos el clip de zona fuera del visor, o el visor fuera de la película.

PLAIN TEXT

Actionscript:

function controlaPosiciones():void
{
//visor
if (visor.x<0) {
visor.x=0;
} else if (visor.x>stage.stageWidth-visor.width) {
visor.x=stage.stageWidth-visor.width;
}
if (visor.y<0) {
visor.y=0;
} else if (visor.y>stage.stageHeight-visor.height) {
visor.y=stage.stageHeight-visor.height;
}
//zona
if (visor.zona.xmapaSmall.x) {
visor.zona.x=visor.mapaSmall.x;
} else if (visor.zona.x>visor.mapaSmall.x+visor.mapaSmall.width-visor.zona.width) {
visor.zona.x=visor.mapaSmall.x+visor.mapaSmall.width-visor.zona.width;
}
if (visor.zona.ymapaSmall.y) {
visor.zona.y=visor.mapaSmall.y;
} else if (visor.zona.y>visor.mapaSmall.y+visor.mapaSmall.height-visor.zona.height) {
visor.zona.y=visor.mapaSmall.y+visor.mapaSmall.height-visor.zona.height;
}
//mapaBig
if (mapaBig.x>0) {
mapaBig.x=0;
} else if (mapaBig.xwidth-mapaBig.width) {
mapaBig.x=mascara.width-mapaBig.width;
}
if (mapaBig.y>0) {
mapaBig.y=0;
} else if (mapaBig.yheight-mapaBig.height) {
mapaBig.y=mascara.height-mapaBig.height;
}
}

Y listo, ejemplo acabado ^^

Aqui el archivo .fla

Ejemplo de Zoom con lupa en Flash CS3

admin — Tue, 25 Sep 2007 01:18:24 +0000

Este es un ejemplo de lupa sobre un mapa realizado en Flash CS3 y actionscript 3. Hacer este efecto es muy sencillo, únicamente hemos de tener dos imágenes, una pequeña y otra más grande que ocultaremos dentro de una máscara. Esta máscara la moveremos para crear el efecto de lupa.

Desplaza el mouse sobre la imagen para mover la lupa

Colocaremos la imagen pequeña dentro de un MovieClip que se llame "mapaSmall" y la imagen grande dentro de otro que se llame "mapaBig".

La máscara que ocultará el mapa grande será otro MovieClip con el nombre "mascara", y la lupa la llamaremos "lupa" y será un clip de igual tamaño que el contorno de la máscara.

Una vez montados los clips empecemos con el código:

PLAIN TEXT

Actionscript:

var porcentajeX:uint = 100 / (mapaBig.width / (mapaSmall.width - lupa.width / 2));
var porcentajeY:uint = 100 / (mapaBig.height / (mapaSmall.height - lupa.height / 2));
var distX:uint = 0;
var distY:uint = 0;

Primero de todo crearemos una serie de variables. Las variables porcentajeX/Y definen que tanto por ciento está ampliada la imagen grande en relación a la pequeña.

Las variables distX/Y nos indican la distancia de corrección para que la zona de la imagen grande situada bajo el mouse coincida con la zona de la imagen pequeña. Por defecto colocaremos estos valores a 0.

Ahora crearemos una función que se ejecute cada vez que movamos el mouse.

PLAIN TEXT

Actionscript:

this.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
//-----------------------------------------------
function lupaMouseMove(event:MouseEvent):void
{
calculaDist();
mueveLupa();
//
lupa.x = mouseX - lupa.width / 2;
lupa.y = mouseY - lupa.height / 2;
//
if (lupa.x x) {
lupa.x = mapaSmall.x;
} else if (lupa.x> mapaSmall.x + mapaSmall.width - lupa.width) {
lupa.x = mapaSmall.x + mapaSmall.width - lupa.width;
}
if (lupa.y y) {
lupa.y = mapaSmall.y;
} else if (lupa.y> mapaSmall.y + mapaSmall.height - lupa.height) {
lupa.y = mapaSmall.y + mapaSmall.height - lupa.height;
}
//
mascara.x = lupa.x
mascara.y = lupa.y
}

En esta función moveremos el MovieClip "lupa" en relación a la posición del mouse, controlaremos que el clip no salga de la pantalla, y haremos que la posición de la máscara sea la misma que la lupa.

En esta función también haremos una llamada a dos funciones. Una que actualizaran las variables distX/Y que variaran según la posición de la lupa y del porcentaje de ampliación de las imágenes, y otra que hará que la imagen grande se mueva según estas variables.

PLAIN TEXT

Actionscript:

function calculaDist():void
{
distX = (lupa.x - mapaSmall.x) / porcentajeX * 100;
distY = (lupa.y - mapaSmall.y) / porcentajeY * 100;
}
function mueveLupa():void
{
mapaBig.x = mascara.x - distX;
mapaBig.y = mascara.y - distY;
}

Y liso! ^^

Foto Panoramica 360Âº usando bitmapData

admin — Sun, 18 Feb 2007 18:48:51 +0000

A partir de un código posteado por Teseo en Cristalab, en la que generaba una imagen panorámica utilizando BitmapData escribí esta clase:

PLAIN TEXT

Actionscript:

import flash.display.*;
import flash.geom.*;
import mx.utils.Delegate;
//--------------------------------
class pan360
{
private var ruta:MovieClip;
private var clip:MovieClip;
private var imagen:String;
private var ancho:Number;
private var v:Number;
private var wa:Number;
//--------------------------------
public function pan360(qRuta:MovieClip, qClip:String, qImagen:String, qAncho:Number)
{
ruta = qRuta;
imagen = qImagen;
ancho = qAncho;
clip = ruta.createEmptyMovieClip(qClip, ruta.getNextHighestDepth());
clip.img = BitmapData.loadBitmap(imagen);
clip.tmp = new BitmapData(ancho, clip.img.height, true, 0);
clip.attachBitmap(clip.tmp, 1, "auto", true);
clip.tmp.copyPixels(clip.img, clip.tmp.rectangle, null);
clip.onRollOver = Delegate.create(this, onRollOver);
clip.onRollOut = Delegate.create(this, onRollOut);
}
//--------------------------------
private function onRollOver():Void
{
clip.onEnterFrame = Delegate.create(this, onEnterFrame);
}
private function onRollOut():Void
{
delete clip.onEnterFrame;
}
private function onEnterFrame():Void
{
wa = clip.img.width;
v = (v == undefined) ? 0 : Math.floor((v + (ruta._xmouse - clip.tmp.width / 2) / 15) % wa);
clip.tmp.copyPixels(clip.img, new Rectangle(v, 0, wa, clip.img.height), null);
clip.tmp.copyPixels(clip.img, new Rectangle(v + wa - 2 * wa * (v> 0), 0, wa, clip.img.height), null);
}
//--------------------------------
public function pos(qX:Number, qY:Number):Void
{
clip._x = qX;
clip._y = qY;
}
}

Su uso:

PLAIN TEXT

Actionscript:

import pan360;
var pano:pan360 = new pan360(this, "pano1", "pano", 300);
pano.pos(100, 50);

Pueden ver el post original AQUI.
Pueden ver tambien este otro ejemplo de movimiento panorámico. En este caso utilizando MovieClips y máscaras.

Fondo bitmap que se ajusta al tamaño del navegador en Flash

admin — Wed, 13 Dec 2006 21:24:25 +0000

Cómo colocar una imagen de fondo de nuestra película que se adapte al tamaño de la ventana del navegador, escalandose pero sin distorsionarse.

El sistema es sencillo:

* Tenemos una película flash al 100% dentro del html
* La película tendrá la opción de "noscale" para que no se redimensione el contenido (sólo queremos que se redimensione el fondo)
* Tenemos un bitmap dentro de un clip al que escalamos según el tamaño de la ventana
* Cada vez que redimensionamos la ventana del navegador redimensionaremos también el clip de fondo

PLAIN TEXT

Actionscript:

Stage.scaleMode = "noscale";
//-----------------------
var StageWidth:Number = 550;
var StageHeight:Number = 400;
function escalaFondo()
{
if (Stage.width> Stage.height) {
fondo._width = Stage.width;
fondo._yscale = fondo._xscale;
} else {
fondo._height = Stage.height;
fondo._xscale = fondo._yscale;
}
fondo._x = (StageWidth - fondo._width) / 2;
fondo._y = (StageHeight - fondo._height) / 2;
}
//-----------------------
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();
//-----------------------
stop();

Pueden ver el ejemplo y una breve explicación en el post que hize en cristalab.

Drag and Drop en AS3

admin — Thu, 09 Nov 2006 18:44:18 +0000

Este es un pequeño ejemplo de como hacer un drag & drop de un Movieclip en actionscript 3.

Crearemos en flash9 un Movieclip al que llamaremos "clip".

En el fotograma añadiremos el siguiente código:

PLAIN TEXT

Actionscript:

clip.addEventListener(MouseEvent.MOUSE_DOWN, onMouse_Down);
clip.addEventListener(MouseEvent.MOUSE_UP, onMouse_Up);

Con esto asignaremoslos eventos de pulsar y soltar el mouse sobre el clip a las funciones "onMouse_Down" y "onMouse_Up".

Ahora definiremos estas funciones:

PLAIN TEXT

Actionscript:

function onMouse_Down(e:Event):void{
clip.startDrag()
}
function onMouse_Up(e:Event):void{
clip.stopDrag();
}

Con esto ya tendríamos el MovieClip "clip" arrastrable.

Este mismo código lo podríamos haber puesto dentro de una clase AS3:

PLAIN TEXT

Actionscript:

package{
import flash.display.*
import flash.events.*;
//------------------------------------
public class Drag extends MovieClip{
public var clip:MovieClip = new MovieClip();
//------------------------------------
public function Drag(queClip){
clip = queClip
clip.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
clip.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
//------------------------------------
private function onMouseDown(e:Event):void{
clip.startDrag()
}
//------------------------------------
private function onMouseUp(e:Event):void{
clip.stopDrag();
}
}
}

Al crear el constructor de la clase deberemos pasarle el MovieClip a arrastrar como parámetro:

PLAIN TEXT

Actionscript:

import Drag
var drag:Drag = new Drag(clip);

Clip que se dirija al click del mouse

admin — Fri, 03 Nov 2006 19:33:24 +0000

Este es un sencillo ejemplo de movimiento de clips. Consiste en mover un MovieClip hacia el punto donde hemos clicado con el mouse.

Para realizar este efecto utilizaremos la clase Tween, que nos permite mover un MovieClip de un punto a otro (como si de una interpolación de movimiento se tratara). Indicaremos como punto inicial la posición actualdel clip, y como posición final la posición del mouse una vez realizado el click.

Primero de todo crearemos el objeto detector (listener) que nos detectará los click realizados y calculará la posición actual del clip y la posición del mouse en el momento del click. Este es el código:

PLAIN TEXT

Actionscript:

var raton:Object = new Object();
raton.onMouseDown = function() {
var x1:Number = bola._x;
var y1:Number = bola._y;
var x2:Number = _xmouse;
var y2:Number = _ymouse;
};
Mouse.addListener(raton);

Ahora añadiremos dos instancias de la clase Tween para mover el clip "bola" del punto (x1,y1) al punto (x2,y2)

PLAIN TEXT

Actionscript:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var raton:Object = new Object();
raton.onMouseDown = function() {
var x1:Number = bola._x;
var y1:Number = bola._y;
var x2:Number = _xmouse;
var y2:Number = _ymouse;
new Tween(bola, "_x", Strong.easeInOut, x1, x2, 1, true);
new Tween(bola, "_y", Strong.easeInOut, y1, y2, 1, true);
};
Mouse.addListener(raton);

Los parametros que hemos utilizado para el movimiento son "Strong.easeInOut" con lo que añadimos aceleración al principio y al final del movimiento. Y un tiempo de 1 segundo de duración.

Este sería el efecto:

Orbitar un MovieClip

admin — Fri, 20 Oct 2006 23:29:13 +0000

Con unas nociones básicas de trigonometría podemos conseguir este vistoso efecto:
Un MovieCLip que gira alrededor de otro MovieCLip siguiendo una orbita.

function orbitar(clip1, clip2, distancia, velocidad) {
angulo = (angulo == undefined) ? 0 : angulo += velocidad;
angulo = (angulo>=360) ? 0 : angulo;
anguloradianes = angulo*Math.PI/180;
clip1._x = clip2._x+Math.round(distancia*Math.cos(anguloradianes));
clip1._y = clip2._y+Math.round(distancia*Math.sin(anguloradianes));
}
this.onEnterFrame = function() {
orbitar(bola1, bola2, 50, 5);
};

La única dificultad es calcular la posición X y Y del MovieClip que orbita siguiendo el perimetro de un circulo en el que el MovieClip 2 es el centro:

Para ello utilizaremos las formulas trigonométricas seno y coseno.

b = c * cos(α)
a = c * sen(α)

Las funciones trigonométricas en flash funcionan con grados radianes con lo que tendremos que transformar los grados sexagesimales (360º)

anguloradianes = angulo*Math.PI/180

Efecto de cursor atado a un hilo (2)

admin — Sat, 04 Mar 2006 20:18:21 +0000

Siguiendo con este efecto, ahora hay que hacer que la linea se enganche al cursor.
Para eso hay que hacer que el clip que dibuja el final de la linea se coloque en la posición del mouse, para eso crearemos una funcion:

function sigueMouse() {
marcaFin._x = _xmouse+10;
marcaFin._y = _ymouse+20;
}

Los 10 y 20 pixeles de margen son para que el clip se coloque en el final de la flecha del cursor y no en la punta.

El codigo que creamos para dibujar la linea tambien lo colocaremos dentro de una funcion:

function dibujaLinea() {
this.createEmptyMovieClip("linea", 1);
linea.lineStyle(2, 0x000000, 100);
linea.moveTo(marcaIni._x, marcaIni._y);
linea.curveTo(marcaControl._x, marcaControl._y, marcaFin._x, marcaFin._y);
}

Y ahora crearemos un onEnterFrame para que la posicion del clip y la linea se actualice constantemente:

onEnterFrame = function () {
sigueMouse();
dibujaLinea();
};

El resultado es este:

Ahora quedará actualizar la posición del clip que marca la curva para el efecto más real y dearle un poco de elasticidad a la linea. Eso será en otro post....

Efecto de cursor atado a un hilo (1)

Efecto de cursor atado a un hilo (1)

admin — Fri, 03 Mar 2006 11:44:20 +0000

Voy a estrenar este blog mostrando un efecto que estoy trabajando para un proyecto.
Se trata de simular que el cursor esta atado a un hilo.
Lo primero es generaremos un clip falso que utilizaremos como guía para dibujar la linea. Para hacer las pruebas con un punto negro ya nos sirve

Crearemos tres instancias de este clip en el escenario y los les pondremos los nombres de instancia: marcaInicio, marcaFin y marcaControl

Ahora viene el codigo que generará dinámicamente la línea.

Creamos un clip vacio al que llamamos linea

this.createEmptyMovieClip("linea", 1);

Le aplicamos un estilo

linea.lineStyle(3, 0x000000, 100);

Le indicamos el punto inicial de la linea, en este caso sería la posición del clip marcaInicio

linea.moveTo(marcaInicio._x, marcaInicio._y);

Dibujamos una linea curva de este punto al punto marcaFin utilizando como punto de curva el clip marcaControl

linea.curveTo(marcaControl._x, marcaControl._y, marcaFin._x, marcaFin._y);

Si reproducimos ahora la pelicula es resultado es este:

Sencillísimo, no? Bueno... mañana más.