Este es mi primer tip así que como podréis imaginaros, no contiene código actionscript muy complejo pero creo que el resultado es muy interesante. Quiero dar las gracias a Sisco por resolverme una duda que tenía para poder hacer estas pruebas.
El resultado que se busca en este tip es similar al de Windows Vista con sus paneles en 3D, (aunque yo nunca los haya usado en realidad), para ello he usado una clase propia llamada Panel, que tiene principalmente dos atributos:
"info" : Contiene el MovieClip que se verá (el panel en si).
"prof" : Que nos indicará el nivel de profundidad del panel y que nos servirá para calcular su "_alpha" y su posición en el escenario.
Las instancias de los objetos (paneles) que se encuentran en el escenario están recogidas en la matriz "obj".
Lo primero de todo es saber que el movimiento de los paneles lo activaremos mediante un botón con la siguiente función:
Código :
boton.onPress = function(){
recolocar();
}
La función recolocar tiene el siguiente aspecto:
Código :
function recolocar()
{
for (var i:Number = 0; i < obj.length; i++) {
var o:Panel = obj[i];
o.prof++;
// Modificamos su profundidad.
var p:Number = o.prof % 4;
// así conseguimos el ciclo {0,1,2,3,0}
//de tal manera que solo hayan 4 niveles diferentes 0, 1, 2 y 3
//aunque el atributo prof crezca indefinidamente
// Calculamos las posiciones destino dependiendo de la profudidad.
var nuevaPosX:Number = posX + p * 20;
var nuevaPosY:Number = posY + p * 10;
// Movemos a esas posiciones
mover(o,nuevaPosX,nuevaPosY,p);
//Actualizamos la profundidad del clip
o.info.swapDepths(p % 4);
}
// for
}
//recolocar
Este código es muy simple puesto que lo único que hace es actualizar la profundidad de los paneles, calcular las posiciones de los paneles según sus profundidades e invoca a la función mover con estos datos como parámetros y al final coloca cada MovieClip según su profundidad con la línea:
Código :
o.info.swapDepths(p%4);
En la función mover he usado la clase Tween de tal forma que si según su profundidad, “o” es el primer panel actualmente, lo agrandará y si no lo es, lo devolverá a su tamaño normal, su código es
Código :
function mover(o:Panel, X:Number, Y:Number, p) {
// En esta función usaremos la clase Tween que nos servirá para crear interpolaciones de
//movimiento y de forma desde actionscript fácilmente.
// modificamos _alpha con la clase Tween para que lo haga poco a poco
var talpha:Tween = new Tween(o.info, "_alpha", none, o.info._alpha, 100*(p+1)/4, 0.5, true);
if (o.prof%4 == 3){
//Si es el primer panel
// Crecimiento ondulatorio
var tTamX:Tween= new Tween(o.info, "_xscale", Elastic.easeOut, 100, 150, 1.5, true);
var tTamY:Tween = new Tween(o.info, "_yscale", Elastic.easeOut, 100, 150, 1.5, true);
// Movimiento en el eje x
var tX:Tween = new Tween(o.info, "_x", easeInOut, o.info._x, X+100, 0.2, true);
//Movimiento en el eje y
var tY:Tween = new Tween(o.info, "_y", easeInOut, o.info._y, Y+100, 0.2, true);
}else{
//Si no es el primer panel
// Decrecimiento ondulatorio
var tTamX:Tween = new Tween(o.info, "_xscale",Elastic.easeOut,o.info._xscale,100,1.5,true);
var tTamY:Tween = new Tween(o.info, "_yscale",Elastic.easeOut,o.info._yscale,100,1.5,true);
//o.info._x = X; Movimiento en el eje x
var tX:Tween = new Tween(o.info, "_x", easeInOut, o.info._x, X, 0.2, true);
//o.info._y = Y; Movimiento en el eje y
var tY:Tween = new Tween(o.info, "_y", easeInOut, o.info._y, Y, 0.2, true);
}
//if
}
//mover
Un ejemplo de este código seria:
NOTA:
Si alguno de vosotros llegara a usar este código o parte de él en una web o algo por el estilo, me gustaría mucho que lo postearais para ver como queda.
Juas! pues no sé para qué puede servir esto, pero está muy bien! Por:Sisco
Excelente Idea !! en cuanto la aplique te vuelvo a postear. Por:Frem@n_blog
excelente lo estare aplicando muy bien! Por:Jonatan_blog
hola..... me gusta mucho el efecto. Me podria alguien decir como agrego 4 ventanas mas..... necesito usarlo de botonera para 8 ventanas Por:matias_blog
Tengo una imagen de background tapada por 30 paneles y quiero que se tome 3 paneles aleatorios y que haga un fade in fade out y asi susecivamente que se este repitiendo Por:hola yo necesito hacre al
Una Pregunta.
Como podría lograr que los paneles hagan esa animacion, pero solo al hacer rollOver con el mouse sobre ellos?
Gracias. Por:Luismaria_blog
Luismaria_blog :
Una Pregunta.
Como podría lograr que los paneles hagan esa animacion, pero solo al hacer rollOver con el mouse sobre ellos?
hare una revista virtual de anime... te habiso por que usare este y otros codigo que aqui comparte.. Por:Dark_blog
le falto que pusieras la clase panel Por:Dark _blog
Podrías poner el FLA porque me aparecen muchos errores Por:Pancho_blog
Esta muy bueno, podria servir para muchas cosas, poniendole imaginacion.... Por:web.master-blog
Alquien sabe porque han dejado de poner el archivo fuente al final de los tutoriales.Es casi tan importante como el mismo tutorial.Solo asi se logra realmente aprender con un ejemplo terminado Por:sick.fla-blog
sick.fla-blog :
Alquien sabe porque han dejado de poner el archivo fuente al final de los tutoriales.Es casi tan importante como el mismo tutorial.Solo asi se logra realmente aprender con un ejemplo terminado
Claro que no.
Con un .FLA, lo que aprendes es a hacer copypaste. En ciertos casos es importante, pero sólo como apoyo. El tutorial está ahí para que aprendas. Por:Freddie
No se a que te refieres con el copypaste si lo que precisamente nos dan es el codigo hecho.Yo me refiero en cuanto a la extructura del archivo fuente del cual no se explica nada Por:sick.fla-blog
