JuniHH+Flash

La clase Color de ActionScript es una de las mas faciles y utiles cuando necesitamos cambiar el color a un link u objeto convertido en MovieClip.

Es tan simple como declararlo y aplicarlo. Veamos esta funcion de solo 3 lineas:

MovieClip.prototype.aplicarColorMC = function(colorMC:Number) {
	var newColMC:Color = new Color(this);
	newColMC.setRGB(colorMC);
};

Simple verdad ???. En ella declaro una variable denominada “newColMC” a la que le aplico la clase Color. Esta a su vez me exije que especifique cual MovieClip debe afectar y le digo “this”. Como esa funcion es un prototype (estos funcionan como subclases), el objeto al que se lo aplico se convierte en “este objeto” (this).

Luego le digo que le aplique el color detallado en el parametro “colorMC” a traves de la subclase “setRGB”.

Finalmente lo pueden aplicar de la siguiente forma en sus trabajos:

objetoMC.onRollOver = function() {
	this.aplicarColorMC(0xFF0000);
};
objetoMC.onRollOut = function() {
	this.aplicarColorMC(0x000000);
};

- Ver ejemplo

aplicar, color, setrgb, movieclip, flash
aplicar, color, setrgb, movieclip, flash

Es usual ver en los foros dedicados a Flash preguntas de este tipo: Como cargo un SWF ???, Como hago una precarga ???, Ayudaaaaaaa, etc.

Pues como una forma de simplicar el asunto, pongo a disposicion de quienes lo necesite este codigo. Su desempeño es perfecto (lo hice yo, es logico que lo sea) y hace dos trabajos en uno. Crea una barra de precarga al que podemos configurar sus colores para adaptarlo al diseño del sitio o animacion, como tambien calcular el procentaje cargado del mismo para entonces iniciar la animacion.

Solo pondre aqui el codigo completo, pero dentro del FLA ejemplo encontraran comentarios detallados de como trabaja cada cosa. Espero les guste y funcione.

CODIGO FUENTE DE LA FUNCION:

MovieClip.prototype.insertBarLoad = function(barColor:Number, barAncho:Number, barAlto:Number, bordeColor:Number, bordeAncho:Number) {

	MovieClip.prototype.crearObj = function(objColor:Number, objAncho:Number, objAlto:Number) {
		with (this) {
			beginFill(objColor);
			moveTo(0, 0);
			lineTo(objAncho, 0);
			lineTo(objAncho, objAlto);
			lineTo(0, objAlto);
			lineTo(0, 0);
			endFill();
		}
	};

	var bordeBlanco:MovieClip = this.createEmptyMovieClip("fondoBar", this.getNextHighestDepth());
	bordeBlanco.crearObj(bordeColor, barAncho + bordeAncho, barAlto + bordeAncho);

	var barLoaded:MovieClip = this.createEmptyMovieClip("barLoaded", this.getNextHighestDepth());
	barLoaded.crearObj(barColor, barAncho, barAlto);
	barLoaded._x = barLoaded._y = bordeAncho / 2;
};

var barraRoot:MovieClip = _root.createEmptyMovieClip("barraRoot", _root.getNextHighestDepth());
with (barraRoot) {
	insertBarLoad(0xffffff, 60, 2, 0x93938F, 3.5);
	_x = (Stage.width / 2) - (_width / 2);
	_y = (Stage.height / 2) - (_height / 2);
	barLoaded._xscale = 0;
}

onEnterFrame = function () {
	var introLoad:Number = Math.floor(getBytesLoaded() / getBytesTotal() * 100);
	barraRoot.barLoaded._xscale = introLoad;
	if (introLoad >= 100) {
		delete this.onEnterFrame;
		barraRoot.removeMovieClip();
		play();
	}
};

Si tienen preguntas adicionales, primero vean el FLA adjunto.

- Descargar FLA
- Ver el ejemplo

precarga, preload, flash, swf, movieclip
precarga, preload, flash, swf, movieclip

Siempre he considerado a Adobe como una de las empresas de desarrollo de software mas avanzada en su tipo (antes que ella esta Apple), esta opinion porque cada vez que hacen actualizaciones a cualquiera de sus softwares, siempre son nuevas herramientas u opciones de vanguardia.

Un ejemplo a lo que digo es lo facil que sera en lo adelante el uso de sus herramientas y la integracion con AS3, tal el caso de que una animacion hecha via timeline podra ser convertida automaticamente a AS3 (ver imagen).

Para conocer sus nuevas funcionalidades les invito a visitar esta pagina, donde encontran informacion general sobre esta nueva version y un video-tour de introduccion. Realmente me encanta !!!.

adobe, flash, cs3, features, caracteristicas
adobe, flash, cs3, features, caracteristicas

Gizmodo publico un articulo interesante donde presenta los nuevos componentes y sus precios del Adobe Creative Collection, que obtuvieron a traves de Amazon y en el que tambien vemos las nuevas imagenes de los empaques de los programas. A mi particularmente me encantan los nuevos empaques, aunque odio los nuevos iconos de la linea.

Los nuevos paquetes ahora se llamaran: Adobe Creative Suite CS3 Web Premium ($1,599.00), Adobe Creative Suite CS3 Master Collection ($2,499.00), Adobe Creative Suite CS3 Production Premium ($1,199.00) y Adobe Creative Suite CS3 Design Premium ($1,599.00).

Vienen en paquetes completos, pero tambien se pueden comprar los programas individuales. Los paquetes estaran disponibles a partir del 20 de abril y si queremos comprar las aplicaciones individuales habra que esperar hasta el 1ero. de julio.

Otra cosa interesante que note y que me preocupa es que aparentemente van a dejar a un lado a Freehand y le daran prioridad a Illustrator, o en su defecto le integraran las opciones que hacian a Freehand el mejor programa de Ilustracion y diseño de los productos en su tipo.

Por ningun lado se ve a Freehand en ese listado y es realmente una pena que sean asi las cosas. Illustrator es un programa muy bueno, de hecho espectacular en lo que que a ilustracion digital respecta, pero en cuanto a diseño para maquetacion lo considero limitado, comenzando por su defecto de no poder agregar multiples paginas en un solo archivo.

Pero ni modo, ellos hacen lo que consideran apropiado.

Fuente: Gizmodo

adobe, creative, collection, photoshop, illustrator, flash, fireworks
adobe, creative, collection, photoshop, illustrator, flash, fireworks

Podemos lograr un efecto de temblor continuo a traves de ActionScript. Para eso necesitamos que el objeto a afectar con el efecto deba ser convertido a MovieClip o clip de pelicula. Veamos:

CODIGO FUENTE DE LA FUNCION:

Copiamos el siguiente codigo y lo pegamos en el primer frame de la pelicula.

MovieClip.prototype.temblarMC = function(distanciaSaltos:Number) {
//
var thisMC:MovieClip = this;
//
//
function randomMinMax(min:Number, max:Number):Number {
return Math.floor(random(max - min + 1)) + min;
}
//
//
var num:Number = distanciaSaltos;
//
var iniX:Number = thisMC._x;
var iniY:Number = thisMC._y;
//
var posX:Number = randomMinMax(iniX - num, iniX + num);
var posY:Number = randomMinMax(iniY - num, iniY + num);
var pausa:Number = randomMinMax(10, 40);
//
thisMC._x = posX;
thisMC._y = posY;
//
//
clearInterval(thisMC.moveIt);
thisMC.moveIt = setInterval(function () {
//
thisMC._x = posX;
thisMC._y = posY;
//
posX = randomMinMax(iniX - num, iniX + num);
posY = randomMinMax(iniY - num, iniY + num);
//
}, pausa);
};

PARAMETROS DE LA FUNCION:

distanciaSaltos:
Un valor numerico que le dice a la funcion la distancia que debe saltar por vez. Valor mas alto, saltos mas largos, asi que sugiero 1 cuando los titulos sean pequeños para garantizar su lectura, pero eso queda a discrecion.

FORMA DE USO:

La aplicacion es muy simple. Lo podemos poner directamente en el objeto con el siguiente codigo:

onClipEvent (load) {
this.temblarMC(4);
}

Como tambien de la forma aplicada en este ejemplo:

objeto.temblarMC(4);

- Descargar FLA
- Ver ejemplo

efecto, temblor, movie, pelicula, clips, movieclips, flash
efecto, temblor, movie, pelicula, clips, movieclips, flash

Actualice nuevamente el TagsGenerator para que permita poner iconos de Blogalaxia y Technorati en lugar de titulos en texto. Lo bueno de esta forma es lo elegante que se ven y no rompen con el contexto de diseño de las plantillas.

Lo pueden usar y descargar desde aqui.

tags, generator, generador, technorati, blogalaxia
tags, generator, generador, technorati, blogalaxia

Imaginemos que queremos que una foto, un texto o toda una pagina (con imagenes y texto) contenida dentro de un MovieClip, necesitemos que pueda ser manejada a traves de botones con un efecto de scroll y que a la vez solo una parte de ese MovieClip sea visible a medida que se produce el scroll.

Para eso necesitaremos cuatro cosas importantes:

1. Un poco de paciencia y ganas de aprender.
2. El o los objetos al que necesitamos aplicar el efecto de scroll que debe ser convertido a un unico MovieClip.
3. Un MovieClip que nos servira como mascara.
4. Uno o dos botones con la propiedad de MovieClip (no como botones).

CODIGO FUENTE DE LA FUNCION:

Copiamos el siguiente codigo y lo pegamos en el primer frame de la pelicula.

MovieClip.prototype.scrollMovieClipFX = function(mcObjetoScroll:MovieClip, mcMascara:MovieClip, mcBotonSubir:MovieClip, mcBotonBajar:MovieClip, velocidadScroll:Number) {
//
var objScroll:MovieClip = mcObjetoScroll;
var mask:MovieClip = mcMascara;
var botSubir:MovieClip = mcBotonSubir;
var botBajar:MovieClip = mcBotonBajar;
//
objScroll.setMask(mask);
//
//
var interScroll:Number = new Number();
var vel:Number = velocidadScroll;
//
var yMask:Number = mask._y;
var yMaxMask:Number = mask._y + mask._height;
//
//
botSubir.onRollOver = botBajar.onRollOver = function () {
this.gotoAndStop(2);
};
botSubir.onRollOut = botBajar.onRollOut = function () {
this.gotoAndStop(1);
};
//
botSubir.onPress = function() {
interScroll = setInterval(function () {
if (objScroll._y >= yMask) {
clearInterval(interScroll);
} else {
objScroll._y += vel;
}
}, 30);
};
//
botBajar.onPress = function() {
interScroll = setInterval(function () {
if ((objScroll._y + objScroll._height) <= yMaxMask) {
clearInterval(interScroll);
} else {
objScroll._y -= vel;
}
}, 30);
};
//
botSubir.onRelease = botBajar.onRelease = function () {
clearInterval(interScroll);
};
};

PARAMETROS DE LA FUNCION

mcObjetoScroll:
El MovieClip o clip de pelicula que sera afectado por el scroll al presionar las flechas.

mcMascara:
La mascara que definira el area visible del objeto scroll. La mascara debe ser un MovieClip o clip de pelicula.

mcBotonSubir:
El boton que al presionar hara subir el objeto scroll.

mcBotonBajar:
El boton que al presionar hara bajar el objeto scroll.

velocidadScroll:
Un numero que le dice a la funcion la velocidad a que debe correr el scroll. Mas alto el valor, mas rapido el scroll.

NOTA: Los botones de subir y bajar DEBEN tener la propiedad (tipo) de MovieClip o clip de pelicula. Los botones basado en la propiedad “boton” son muy limitados y no permiten ser manejados completamente por ActionScript. Por tanto, se deben crear botones parecidos al que expongo en la muestra adjunta. Para mas detalles, descarga la muestra, ve a la libreria y busca el objeto “BotonFlecha” y estudia la forma como lo tengo preparado.

FORMA DE USO:

Si vamos hasta la ultima linea del ejemplo descargable leeras:
this.scrollMovieClipFX(this.texto, this.mascara, this.botonSubir, this.botonBajar, 10);

Los “this” le especifican a la funcion donde se encuentran los objetos. SE DEBE PONER LA DIRECCION EXACTA A CADA OBJETO, si queremos que trabaje el efecto adecuadamente.

- Descargar FLA
- Ver ejemplo

texto, movieclip, movie, pelicula, clip, scroll, flash, efecto
texto, movieclip, movie, pelicula, clip, scroll, flash, efecto