Publicado: Dom Dic 10, 2006 10:11 pm |
Teseo, por favor en los efectos futuros que vayas a postear (y de verdad espero que sean muchos  ), haz que en los swf de ejemplo se accionen con un botón, ya que casi matan mi ordenador cuando se reproducen todos a la vez en las dos primeras páginas de este tema, que por cierto si puedes modificar esos ejemplos, aún mejor.Gracias. |
Zah
4 Tutoriales |
Publicado: Lun Dic 11, 2006 10:27 pm |
Este efecto simula una llama de vela. No necesita ninguna imagen. Simplemente copiar y pegar. Crea un gradiente y se le aplican los filtros y métodos. Como siempre variando los parámetros conseguimos cambios de color, forma, velocidad..etc. Posteriormente añadiremos el efecto de humo y de halos de luz asi como el viento aleatorio para completar una composición. CODIGO 7: LLama Código : createEmptyMovieClip("llama",0);
colores=[0xffffffff,0xfff2f215,0xffff9900,0xff00000f];
alphas=[40,90,85,40]; ratios=[20,90,175,235];
Pt=new flash.geom.Point();Mx= new flash.geom.Matrix();
Mx.createGradientBox(30,90,Math.PI/2,0,10);
with (llama){
beginGradientFill("radial",colores,alphas,ratios,Mx,"pad","RGB",.98);
moveTo(0,0); lineTo(0,100); lineTo(40,100); lineTo(40,0); lineTo(0,0);
endFill();
}
ola = new flash.display.BitmapData(llama._width,llama._height+30);
dM=new flash.filters.DisplacementMapFilter(ola,null,1,1,3,3,"ignore");
onEnterFrame=function(){
Pt.y +=3.3;Pt.x -=.3; a = random(7)*(random(10)<1);
llama._yscale = 120 + a; llama._y = -a;
ola.perlinNoise(24,32,1,0,true,true,1,false,[Pt]);
llama.filters=[dM]
}0,5 Kb |
Teseo
1 Tutorial |
Publicado: Mar Dic 12, 2006 2:13 pm |
Excelente.... La verdad me impresionas Teseo...  Pobrecita la computadora de Zah |
1 Tutorial |
Publicado: Mie Dic 13, 2006 7:25 pm |
Con este código del efecto de humo termino la serie de "efectos de ondas". Este efecto es muy similar al anterior y tampoco necesita ninguna imagen. He escogido para el ejemplo el humo de cigarrillo ya que el humo "grueso" lo podemos fabricar de forma parecida a las nubes pero con movimiento vertical. Ya lo ensancharemos y moveremos mezclando efectos y usando la clase Matriz. CODIGO 8 Humo Código : createEmptyMovieClip("llama",0);
colores=[0xffcccccc,0xffaaaadd,0xff222222];
alphas=[50,45,0];ratios=[20,25,125];
Pt=new flash.geom.Point();Mx= new flash.geom.Matrix();
Mx.createGradientBox(30,190,0,40,-30);
with (llama){
beginGradientFill("radial",colores,alphas,ratios,Mx,"pad","RGB",0);
moveTo(30,-50);lineTo(30,100);lineTo(100,100);lineTo(100,-50);
lineTo(0,0); endFill(); _yscale = 300; _y= -60;
}
ola = new flash.display.BitmapData(llama._width,llama._height+10);
dM=new flash.filters.DisplacementMapFilter(ola,null,1,1,20,40,"ignore");
onEnterFrame=function(){
Pt.y +=2;Pt.x -=.05;
ola.perlinNoise(11,21,1,0,true,true,1,false,[Pt]); llama.filters=[dM];
} |
Teseo
1 Tutorial |
Publicado: Sab Dic 16, 2006 3:54 pm |
Saludos, los efectos estas excelente, pero no me funcionan los de fuego, lago ni rio. |
|
Publicado: Sab Dic 16, 2006 3:57 pm |
hola teseo, como hago para poner la llama o el humo donde yo quiera? |
|
Publicado: Sab Dic 16, 2006 3:58 pm |
perdon fue una pregunta un poco boba, lo he realizado con un clip de pelicula |
|
Publicado: Dom Dic 17, 2006 6:40 pm |
Estos son los FLA de cada ejemplo: |
Teseo
1 Tutorial |
Publicado: Mie Dic 27, 2006 11:43 pm |
gloria y honra al Gran Dios del ActionScript "El Poderoso Teseo" |
|
Publicado: Vie Dic 29, 2006 8:29 pm |
esto es increible las marivillas y beneficios que nos brinda este excelente programa; gracias [/flash] |
|
Publicado: Vie Dic 29, 2006 8:48 pm |
ami me pasa lo mismo que hackaos quisiera que me ayudaran un poco con este còdigo gracias __ PD. quisiera saber como subo mi clab level les agradedcería una Respuesta gracias |
|
Publicado: Vie Dic 29, 2006 11:11 pm |
Yo propongo que, al menos, evites que lo bajen poniendo un avatar tan grande (no es capricho mío, está en las reglas del foro) |
1 Tutorial |
Publicado: Sab Dic 30, 2006 4:22 pm |
HernanRivas escribió: Yo propongo que, al menos, evites que lo bajen poniendo un avatar tan grande (no es capricho mío, está en las reglas del foro) Es una propuesta razonable  hardvin, el tamaño máximo del avatar es de 100x100 pixels. |
Zah
4 Tutoriales |
Publicado: Dom Dic 31, 2006 10:20 pm |
pos gracias pero esperaba una rta mas amplia se los agradeceria |
|
Publicado: Lun Ene 01, 2007 2:00 pm |
A hardvin: Y yo respondería a una pregunta más concreta  |
Teseo
1 Tutorial |
Publicado: Jue Ene 04, 2007 4:33 pm |
Códigos para movimientos de Bitmaps. Efectos líquidos. Este código es un ejemplo de "animación" de una imagen. No usa máscaras sino movimiento directamente sobre el mapa de bits. Evidentemente es muy afinable, pero es un ejemplo, no un trabajo. Funciona creando un ovalo que actua como máscara deslizable ( MC sal). Si lo hacemos más pequeño ( variable ov) o variamos su escala, obtendremos muy diversos efectos. El código es muy adaptable para otra tipo de trabajos. Aunque también lo he montado como clase aquí en este ejemplo no la usa, mueve directamente la "imagen" con ese vínculo desde la biblioteca. Tiene añadido un efecto easing aunque puede ser cualquier otro dinamismo. CODIGO 10: BitMap Liquido. Código : import flash.geom.*
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.filters.BlurFilter;
rdn = Math.PI/180; cl = 0x808080; w =300; h =400; ov = 400 ;
P0 = new Point(); R0 = new Rectangle(0,0,w,h);
bmp1 = new BitmapData(w,h,true,0);
bmp1.draw(BitmapData.loadBitmap("imagen"));
bmp2 = new BitmapData(w,h,false,cl); bmp3 = bmp2.clone();
mc0 = _root.createEmptyMovieClip("mc0",1);
mc0.attachBitmap(bmp1,mc0.getNextHighestDepth());
bF = new BlurFilter(8,8,2);
dMap = new DisplacementMapFilter(bmp3,P0,2,4,100,100,"clamp");
sal = createEmptyMovieClip("sal", 2);
sal.beginGradientFill("radial",[0x00ff00,0xffffff],[100,0],[110,255],
{matrixType:"box", x:-280, y:-280, w:560, h:560, r:0});
sal.moveTo(ov,0);
for (var z = 1; z<=360; z++) {
sal.lineTo(Math.cos(z*rdn)*ov, Math.sin(z*rdn)*ov);
}
sal.endFill(); sal._yscale= 90; sal._visible = false;
gx=32; gy=12 ; flag=true; temp = {x:sal._x,y: sal._y};
sal.onMouseDown = function (){flag = true; sal.startDrag(true);};
sal.onMouseUp = function (){flag = false; stopDrag();}
sal.onEnterFrame = function (){
if (!flag){
gx =(gx+(200-sal._x))*.93; gy =(gy +(160-sal._y))*.88;
sal._x += gx; sal._y += gy;
}
g = 128+Math.min(121, Math.max(-128,-(sal._x-temp.x)*2));
b = 128+Math.min(121, Math.max(-128,-(sal._y-temp.y)*2));
var cT0:ColorTransform = new ColorTransform(0,0,0,1,128,g,b,0);
temp = {x:sal._x,y: sal._y};
bmp2.draw(sal, sal.transform.matrix,cT0,"hardlight");
bmp3.applyFilter(bmp2,R0,P0,bF); mc0.filters = [dMap];
}Pinchar y arrastrar o pinchar y soltar o pinchar y soltar en varios sitios rápidamente.(efectos sumados) 10Kb. |
Teseo
1 Tutorial |
Publicado: Jue Ene 04, 2007 4:37 pm |
Teseo: Me parece que te salteaste el código 9  |
1 Tutorial |
Publicado: Jue Ene 04, 2007 4:51 pm |
Exelentes Ejemplos , muy faciles de entender , y ademas generan una gran expectativa de lo que se puede hacer nada mas jugando con el codigo, te felicito en hora buena amigo te sacaste un 10  |
|
Publicado: Dom Ene 07, 2007 2:50 pm |
Hola teseo, muy bueno eso!!!!! me pase al Flash 8 solo para ver los efectos y quedan barbaros!!! -------- Una preguntita, estoy tratando de aplicar el efecto agua a una imagen y activarlo sin el uso del raton, o sea on load, pero no me sale... , alguna sugerencia? Saludos y muchas gracias por compartir esto, y desde ya que si tienes otros de este tipo, ... jaja, somos insaciables.................. |
|
Publicado: Dom Ene 07, 2007 8:02 pm |
un poco más adelante de donde se encuentre el código, está también el código para hacerlo sin ratón, como si lloviera. Si lo que quieres es "deslizar" sobre el agua, cambia el random del if por una función matemática apropiada. |
Teseo
1 Tutorial |
Publicado: Dom Ene 07, 2007 11:11 pm |
Excelentes algoritmos, Felicidades Teseo , |
1 Tutorial |
Publicado: Jue Ene 11, 2007 11:25 pm |
hola Teseo, me parece una maravilla tu labor y tus conocimientos, pero tengo una duda, en el ejemplo del agua se puede usar con tranparencias, por ejemplo una estrella de cinco puntas y que el fondo sea transparente, no se si me explico... de todas formas eres un fenomeno, gracias |
|
Publicado: Vie Ene 12, 2007 1:54 pm |
**Error** C:\Documents and Settings\Administrador\Configuración local\Datos de programa\Macromedia\Flash 8\es\Configuration\Classes\FP8\TextField\StyleSheet.as: Línea 7: Existe un conflicto entre el nombre de esta clase, 'TextField.StyleSheet', y el nombre de otra clase que se ha cargado, 'TextField.StyleSheet'. { cada uno de los actionscript que pego ya sea agua o el de la bandara aparece este error me pregunto a que se debera. |
|
Publicado: Sab Ene 13, 2007 6:59 pm |
A arri: Si lo que quieres es usarlo con transparencias, mira en este mismo tema algo más atrás donde lo explico y pongo un ejemplo. Si es algo como deslizar un objeto con forma, dímelo y explicaré como. A author_W_one: Evidentemente es seguro que no es por el código de agua. Es por algo más que tienes en el script que manda duplicar o redundar una clase. No te puedo decir la causa sin mas datos, pero tiene que ver con la/las hojas de estilos que importas. |
Teseo
1 Tutorial |
Publicado: Sab Ene 13, 2007 7:10 pm |
Esto pertenece a la serie de códigos de fenómenos atmosféricos. Es un "trazador de rayos" o quebrador. Básicamnete en mucho random a un dibujador de lineas. CODIGO 11 : Rayos Código : cr=0xffffff; al=[0,.5,.6]; rt=[0,125,255]; i=0;cl=[0,0x220066,cr];
gf = new flash.filters.GradientGlowFilter
(0,180,cl,al,rt,30,30,4,2,"outer",false);
createEmptyMovieClip("rayo",0);
onEnterFrame= function(){
if (rd(100)>(6+88*(i==0))){traza(10+rd(12),5+rd(5));}
}
function traza(l,t){
i? Po=Pt[rd(i)].clone(): Po = new flash.geom.Point(50+rd(300),rd(60));
rayo.moveTo(Po.x,Po.y)
for( b=l;b>0;b--){
Po.offset(rd(3*t)-rd(3*t),5+rd(l)); gr = 1300/(Po.y+180);
rayo.lineStyle(gr,cr,100,true,"normal","round","miter",16);
rayo.lineTo(Po.x,Po.y); rayo.filters = [gf];
i++; Pt[i]=Po.clone();
}
rd(100)>50? rayo._xscale>100? rayo._xscale-=1 : rayo._xscale+=1:null;
if (i>90){rayo.clear();Pt=[];i=0;}
}
function rd(n){return Math.round(n*Math.random())}Es facil ver que cambiando parámetros salen más rayos, más verticales, etc. Como lleva mucho random pongo una función específica para ello. Y un ejemplillo de aplicación. Atención: el sonido esta encendido desde el principio (lo siento) |
Teseo
1 Tutorial |
Publicado: Sab Ene 13, 2007 7:46 pm |
Este código es muy efectista, simplemente una imagen para vincular en la biblioteca con nombre "imagen" para vinculación y listo. Utiliza varias transformaciones de la imagen para hacerlo. Como siempre variando los parámetros se cambia el foco, el color, la textura del fondo, etc... CODIGO 12: Relieve Código : import flash.display.*; import flash.geom.*; import flash.filters.*
_quality = "low"; pt = new Point(); Mouse.hide();
img = BitmapData.loadBitmap("imagen"); rc= img.rectangle;
img.width > img.height? h=img.width: h=img.height; h=Math.round(h);
img2 =img.clone();temp = img.clone();
img.colorTransform(rc, new ColorTransform(1,1,1,0,127,127,127,255));
img2.colorTransform(rc, new ColorTransform(1,1,1,1,0,0,0,255));
temp.perlinNoise(20,20,2,0,true,true,15,false,null);
img.merge(temp,rc,pt,80,80,80,255); temp.dispose();
img.applyFilter(img, rc, pt, new BlurFilter(4, 4, 1));
mc1 = this.createEmptyMovieClip("mc1",1); mc1.attachBitmap(img2,2);
marco = this.createEmptyMovieClip("marco",2); marco.blendMode = 14;
mc2 = marco.createEmptyMovieClip("mc2",1);
cl = [0xffffff,0xe7cf07,0]; al = [40,60,100]; rt = [0,37,255];
matrix = new Matrix(); matrix.createGradientBox(h,h,0,h/2,h/2);
mc2.beginGradientFill("radial",cl,al,rt, matrix);
mc2.moveTo(0,0); mc2.lineTo(0,2*h); mc2.lineTo(2*h,2*h);
mc2.lineTo(2*h,0); mc2.lineTo(0,0); mc2.endFill();
sal = temp = img.clone();
mx1 = [0,0,0,-1,0,1,0,0,0]; mx2 = [0,-1,0,0,0,0,0,1,0];
temp.applyFilter(img,rc,pt,new ConvolutionFilter(3,3,mx1,1,127));
sal.copyPixels(temp,rc,pt); temp = img.clone();
temp.applyFilter(img,rc,pt,new ConvolutionFilter(3,3,mx2,1,127));
sal.copyChannel(temp,rc,pt,1,2); temp.dispose();
dMap = new DisplacementMapFilter(sal,pt,1,2,-300,-300);
onMouseMove = function(){
x = h-_xmouse ; y = h-_ymouse; dMap.mapPoint = new Point(x,y);
mc2.filters = [dMap]; mc2._x =-x; mc2._y =-y;
updateAfterEvent();
}
onMouseMove();Explico un poco los parámetros más importantes y los que se pueden tocar: temp.perlinNoise(20,20,2,0,true,true,15,false,null); Cambian la textura de fondo. Valores pequeños, más rugosa. Valores descompensados 10,300 tipo cortina. img.applyFilter(img, rc, pt, new BlurFilter(4, 4, 1)); El blur es el que crea la profundidad, si lo aumentamos mucho el relieve será más inclinado el valor que ahora está a 1 si se incrementa suaviza los contornos. Para texturas tipo plástico a tipo acero. cl = [0xffffff,0xe7cf07,0]; al = [40,60,100]; rt = [0,37,255]; Son el color, fuerza y forma del foco de luz. Los que más hacen variar el efecto. dMap = new DisplacementMapFilter(sal,pt,1,2,-300,-300); Afectan a la profundidad del relieve, valores invertidos (positivos) hacen hueco en lugar de resalte. Otros parámetros evidentemente también afectan , pero esos son los importantes. Si se desea usar un MC instanciado en lugar de una imagen cambiar esta linea: Código : img = BitmapData.loadBitmap("imagen"); rc= img.rectangle;por estas dos lineas: Código : img = new BitmapData(400,400,true,0); rc=img.rectangle; img.draw(logo); logo._visible=false; Considerando que se instancío con el nombre logo Esta es la imagen:  y este el resultado: 1.3Kb |
Teseo
1 Tutorial |
Publicado: Dom Ene 14, 2007 4:05 am |
¡¡OH POR!! 
Teseo escribió: y con 20 lineas de código pero Señor!, ¿usted cuando no esta inspirado?  . Toy inspirao   . |
|
Publicado: Dom Ene 14, 2007 7:51 pm |
Gracias Teseo, eres tan grande de artista como de corazon... no tengo dudas. A lo que me refiero es: a la flor amarilla de tu ejemplo del agua pues imaginate que el agua solo se vea en la flor, recorto la flor en Photoshop y le pongo el fondo transparente entonces la exporto en .png para que flash me respete el fondo trans. pero al aplicarle el codigo el fondo me lo pone en negro. No se si me explico creo que si, un saludo Teseo... |
|
Publicado: Dom Ene 14, 2007 9:06 pm |
arri: El problema no está en el código, pues este respeta las transparencias. Te pongo un ejemplo de un PNG (logo de cristalab ampliado) donde he dejado el texto editable para que lo observes. El oleaje no se limita a la región original si lo necesita para el efecto, pero su fondo se mantiene transparente y solo se inicia(click) si se aplica sobre regiones no totalmente transparentes. La causa puede estar en la forma de guardado del archivo PNG desde el PhotoShop. Comprueba que realmente la forma de guardar el archivo y la tranparencia sea correcta en las opciones de guardado (capa o color a transparente) . Pero el código, te lo aseguro, respeta la transparencia de un PNG. CLICKAR Y MOVER |
Teseo
1 Tutorial |
Publicado: Dom Ene 14, 2007 9:24 pm |
ok Teseo, el finde ha sido duro, un fallo en la exportacion, gracias |
|
Página 3 de 9
