Comunidad de diseño web y desarrollo en internet online

¿Como puedo lograr hacer un efecto de agua?

Ir a página Anterior  1, 2, 3, ... 9, 10, 11  Siguiente

Foros de discusión > Flash

Citar            
MensajeEscrito el 28 Nov 2006 11:13 pm
Esto merece ir en portada U_U
Teseo, ¿puedes poner todos los efectos bonitos y postearlo en el foro de webTips?

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox
Citar            
MensajeEscrito el 29 Nov 2006 07:58 pm
El efecto de nubes en movimiento para flash 8 trabaja solo, no necesita importar ninguna imagen. Sigue siendo un ejemplo simple y refinandolo y/o variando sus parámetros se pueden hacer todo tipo de cielos: claros, amaneceres coloreados, ocasos, humos, tempestades, etc.........
Ahora no necesitamos el desplazamiento del bitmap, solo con el perlinNoise en octavas mas altas y el merge con el clonado es suficiente para el efecto base.
He usado en el ejemplo unos parámetros de "naturalidad"; nubes y claros de baja evolucion diurna con brisa muy ligera del oeste a baja velocidad ..(parezco el hombre del tiempo :P ).
El código que genera las nubes usa solo 0.4K, yo le he añadido una casita por delante para mostrarlo un poco mas efectista.
Repito que, como en todos los anteriores, este es el efecto base mínimo, se puede complicar y mejorar hasta el refinamiento extremo...
CODIGO 5: Nubes

Código :

import flash.geom.*;
img = new flash.display.BitmapData(400,200);
createEmptyMovieClip("efecto",0); img2=img.clone();
efecto.attachBitmap(img,0);
efecto._xscale=300; efecto._yscale=200;
offset = new Point();
onEnterFrame=function(){
   offset.y -= .1; offset.x -= 1;
   img.perlinNoise(56,50,5,0,true,true,1,true,[offset]);
   img.merge(img2,new Rectangle(0,0,400,200), new Point(),32,72,256,128);
}



Aquí pongo un par de ejemplos de nubes:
ejemplo1
ejemplo2

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



Ultima edición por Teseo el 02 Ene 2007 08:18 pm, editado 1 vez

msie
Citar            
MensajeEscrito el 30 Nov 2006 10:10 pm
Bueno, esto se convierte en PostIt, por el momento.
Pero Teseo, insisto en que estos efectos deben estar en portada o en los tutos.

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox
Citar            
MensajeEscrito el 01 Dic 2006 01:50 am
¿Qué tal titantes?
Tengo una duda con respecto a este efecto.

¿Qué debería modificar, eliminar o agregar para que el efecto se diera en una sola capa? Por ejemplo:
Estoy haciendome una web, soy windsurfista, y quería poner una imagen de fondo fija, y que al pasar el ratón sobre esa
imagen se diera este efecto pero no puedo, pues me veo el problema de que el efecto se ve sobre todas las capas...

Gracias por adelantado.

Por Shaben

21 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 01 Dic 2006 09:07 am
Shaben, creo que te refieres al efecto de olas con el ratón.
Para que funcione sobre un MC cualquiera ( en este caso creamos el surfMC y sobre la misma raiz(root)) haz lo siguiente:
Despues de la linea de carga de la imagen:
fondo = BitmapData.loadBitmap("imagen");
añade:

Código :

createEmptyMovieClip("surfMC", 1);
surfMC.attachBitmap(fondo, 2, "auto", true);

despues de crear el sal2 (salida del efecto)
sal1 = sal2=new BitmapData(anc, alt, false, 0);
añade esta:

Código :

surfMC.attachBitmap(sal2, 3);
( atención: carga el niveles libres o con this.getNextHighestDepth() )
y cambia la toma de coordenadas del mouse:
XM = _xmouse/2 ;
YM = _ymouse/2;
por estas:

Código :

XM = (_xmouse-surfMC._x)/2 ;
YM = (_ymouse-surfMC._y)/2;

Ahora ya puedes manejar el MC surfMC como cualquier otro con su efecto adherido o adjunto(attach)
Ten en cuenta que si modificas la escala del MC las olas saldrán elipticas y el punto del ratón tambien habrá que retocarlo con el ancho y alto o cambiando globalToLocal

En este ejemplo solo le añado al código y después de crear el surfMC ,un blendMode
surfMC.blendMode=6;
además de otros dibujillos para ilustrar como puede interactuar con la capas, el fondo y/o otros MC´s.
clic y mover

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



Ultima edición por Teseo el 02 Ene 2007 08:25 pm, editado 1 vez

msie
Citar            
MensajeEscrito el 03 Dic 2006 11:28 am
En el ejemplo de banderas ( es un ejemplo mínimo de código) la imágen es un gif con transparencia en los bordes y que contiene la imagen centrada. Para trabajar con cualquier tipo de imagen usad este script:

Código :

/* BANDERAS  by TESEO Flash 8  2006
 Importar cualquier imagen (jpg,png,bmp,gif) y vincular en la bilbioteca
 con nombre: imagen. Ajustar los parámetros de brillo, velocidad y
 nº de ondas según gusto. El MC resultante es: bandera.  LISTO */
import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.DisplacementMapFilter;
br=180;// brillo de 0 a 256 
velo=10;//velocidad viento 
ond= 10;//nº de ondas que se crean   
img = BitmapData.loadBitmap("imagen");
w = img.width; h = 4*img.height/3;
marco = new BitmapData(w,h,true,0);ola = marco.clone()
marco.draw(img,new Matrix(1,0,0,1,0,h/7)); marco2 = marco.clone();
createEmptyMovieClip("bandera",this.getNextHighestDepth());
bandera.attachBitmap(marco,0);
offset = new Point(); ond= ond*.16; velo = velo*.26
desMap = new DisplacementMapFilter(ola,new Point(),8,8,24,20,"clamp");
onEnterFrame = function (){
  offset.x -= velo*w/50; offset.y -=velo*w/100;
  ola.perlinNoise(w,2*h,1,0,true,true,8,true,[offset]);
  marco.perlinNoise(w/ond,h/(ond*2),1,0,true,true,1|2|4,true,[offset]);
  marco.merge(marco2,new Rectangle(0,0,w,h),new Point(),br,br,br,256);
  bandera.filters = [desMap];
};

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



Ultima edición por Teseo el 15 Dic 2006 11:03 am, editado 1 vez

msie
Citar            
MensajeEscrito el 03 Dic 2006 11:43 am
No suelo postear para agradecer...pero este mensaje es de admiracion JODER QUE NIVELAZO EN ESTE FORO... En la mayoria de los foros suele haber dos que saben y mil que preguntan...En este hay 20 que saben y 1000 que preguntan.
Unos hacen mágia con cartas, otros con chisteras...vosotros con Flash ;)

Por Shaben

21 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Dic 2006 02:39 am
Teseo: Con respecto al ejercicio del lago (código1), estoy iniciando en ésto, yo lo probé en flash 8 pero no me funcionó (importé una imangen llamada imagen y copié tu código por Acciones). Me puedes orientar más? qué pude haber hecho mal?
Gracias.

Por iniciandowebmaster

0 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 04 Dic 2006 04:07 am
teseo, no te conosco pero por lo poco que he visto tengo que decirte: onolable :meditar: sensei...... :alabado:

Por aprendiz_82

66 de clabLevel



Genero:Masculino  

El Salvador

msie
Citar            
MensajeEscrito el 04 Dic 2006 08:43 am
A iniciandowebmaster:
Lo más probable es que realmente no vinculases la imagen.
Colocar u MC, gráfico o botón en el Escenario y darle nombre de instancia es "instanciar", no es "vincular para attach".
Si es eso, sigue estas instrucciones:
1) En la biblioteca pones una imagen llamada digamos "paisaje".
2) Pinchas con ratón derecho sobre su icono en la biblioteca.
3) Pinchas en vinculación en el menú que aparece.
4) En la ventana que sigue: Propiedades de vinculación marcas Exportar para ActionScript , marcará también Exportar en primer fotograma, déjalo marcado. En identificador pon imagen (ese es el nombre que buscará el script para cargarlo en attach). Deja la entrada de Clase AS2 en blanco. pulsa Aceptar. Si todo ha ido bien, en las columnas de la biblioteca verás: nombre, tipo, nº de usos, y en vinculación la palabra imagen.

Ahora debería de funcionar, tendrás que ajustar los parámetros del ejemplo. Si no es eso veremos que puede ser.
De todos modos posteo después un código para ajuste de esos parámetos como el anterior para las banderas.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 04 Dic 2006 10:18 am
bueno antes ke nada yo soy principiante y la verdad esos efectos me van a ser muy utiles en el futuro,
mi pregunta ; donde es ke tengo ke pegar el codigo?
tengo ke imporat una imagen y conventirla en simbolo y pegar el codigo?
perdon pero eske no se mucho
saludos

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 04 Dic 2006 11:40 am
A kobeson
En el escenario principal. Flash documento nuevo. (también se puede añadir a otro trabajo)
Pestaña acciones-fotograma y pegar el código.( Quedará en el frame1 del principal)
Importar a biblioteca la imagen que vayas a utilizar. Archivo-Importar-importar a biblioteca..
Seguir los pasos citados un par de post más arriba sobre vinculación.

No hay que convertir la imagen en simbolo, eso lo hará el código, lo que tomamos es el mapa de bits del objeto que vinculamos desde la biblioteca.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 04 Dic 2006 07:56 pm
muchas gracias ya pude hacerlo XD.
como le hago para ke esta imagen salga de fondo en todos los fotogramas?

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 04 Dic 2006 08:54 pm
Coloca todos los demás en una capa superior en la linea de tiempos o
Cargar lo siguientes en niveles superiores....etc..
Hay muchas maneras, pero para empezar esas son las más sencillas.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 04 Dic 2006 09:39 pm
eso fue lo ke hice, cree otra capa y en esa pegue el codigo y jale la capa hasta abajo pero al momento de probar la pelicula lo unico que miro es la imagen y no miro el texto que ahy en la capa superiro.
alguna idea?
graciass

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 05 Dic 2006 05:41 am
bueno sigo con el mismo problema.
intente hacerlo con capas, tambien intente guardar la imagen como plantilla,
pero la imgagen siempre sale ensima de todo.

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 05 Dic 2006 08:59 am
Veamos Kobeson:
Voy a explicarte un truquillo.
Crea un nuevo simbolo vacio: Si tener nada seleccionado Control+F8. Ponle en nombre que quieras o el que sale por defecto, es irrelevante. Y Aceptar.
Ahora está en la biblioteca. Digamos que lo hemos llamado dummy.
Arrastralo al escenario y suéltalo donde quieras( también es irrelevante), quedará un circulito blanco. Pestaña Propiedades y dale nombre de instancia: vacio.
Ahora tenemos que saber como hemos llamado al efecto de fondo ( yo he puesto normalmente efecto, en el código de banderas es bandera.... en general es el nombre con que creamos el createEmptyMovieClip("efecto",0) del código.
Añadimos al código esta linea: (Puede ser en cualquiera despues de crear dicho moviclip vacio con createEmptyMovieClip. Lo mejor es inmediatamente después, en la siguiente linea.)

Código :

vacio.swapDepths(efecto);

Ya está, trabaja con capas, MC´s , y el efecto estará siempre en el fondo. ^^

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 05 Dic 2006 10:43 am
Por el gran :fsm: ! Impresionante!

Teseo, eres el mejor! :alabado: De mayor quero hacer codigos de AS así de chulos! ^^

Por Bleend

Claber

3385 de clabLevel

10 tutoriales
4 articulos

Genero:Masculino   Héroes

Barcelona

msie
Citar            
MensajeEscrito el 05 Dic 2006 07:18 pm
nucgas gracias por el truco.
no me kedo muy claro algo, el movieclip lo agrego en el mismo documento donde importe la imagen a esenario?
a que te refieres con effecto fondo?, el codogo (vacio.swapDepths(efecto) lo voy a pegar debajo del codigo que puse para ke la imagen tuviera efecto de ondas?

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 05 Dic 2006 10:26 pm
A kobeson:
Efecto de fondo: Es el que dices que quieres usar para el fondo. (no se cual es de los que he expuesto....si bandera, si lago..si fuego...)
El código que cito lo pegas (intercalándolo) dentro de las acciones del efecto y después de la linea: createEmptyMovieClip("efecto",0) ( o parecida)

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 05 Dic 2006 10:47 pm
Añado otro efecto más.
El cristal es un efecto de Belvel basicamente. El truco esta en ajustar el threshold de la imagen que convertimos en "cristal".
Se necesitan solamente 2 imagenes, el fondo y y el movil. Y como siempre, jugar con los parámetros para afinar el efecto al gusto.
CODIGO 6 Cristal

Código :

import flash.geom.*;
import flash.filters.*;
import flash.display.*;
img1 = BitmapData.loadBitmap("imagen1");
img2 = BitmapData.loadBitmap("imagen2");
createEmptyMovieClip("efecto",0);
sal = img2.clone(); efecto.attachBitmap(sal,0);
w = img1.width; h = img1.height; c=0x8080;
lim = img1.rectangle; P0 = new Point(); Nm = new Matrix();
img1.threshold(img1,lim,P0,">",0xfae0e0,0,0xffffff);
BF = new BitmapData(w,h,false,c); xy = img1.clone();
xx = new BitmapData(w,h,true,c);yy = new BitmapData(w,h,true,c);
xy.colorTransform(lim,new ColorTransform(0,0,0,1,0,64,64,0));
xx.applyFilter(xy,lim,P0,new BevelFilter(4,45,0,0,0,1,4,4,1,4));
yy.applyFilter(xy,lim,P0,new BevelFilter(4,225,0,0,0,1,4,4,1,4));
BF.draw(xx); BF.draw(yy,Nm,null,"add");
xx.dispose(); yy.dispose(); xy.dispose(); Mouse.hide();
dMap = new DisplacementMapFilter(BF,P0,2,2,-50,-50,"clamp");
CT = new ColorTransform(1,1,1,.4,0,0,0,0);
onMouseMove = function(){
   Pt = new Point(_xmouse -w/2,_ymouse - h/2);
    dMap.mapPoint = Pt; Nm.tx = Pt.x; Nm.ty = Pt.y; 
   sal.copyPixels(img2,img2.rectangle,P0);
   sal.applyFilter(sal,img2.rectangle,P0,dMap);
   sal.draw(img1,Nm,CT,"multiply");
}

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



Ultima edición por Teseo el 11 Dic 2006 11:41 am, editado 1 vez

msie
Citar            
MensajeEscrito el 06 Dic 2006 01:05 am
a ke burro soy XD. bueno ya con esa explicacion aprueba de tontos pude lograrlo , muchisimas gracias.
solo ke en el primero ejemplo que pusiste(uno de una flor) ese no trae la linea "createEmptyMovieClip("efecto",0)", por eso no se donde poner la otra linea de "vacio.swapDepths(efecto);" ¿podrias decirme donde ?

bueno te agradesco por tu tiempo y tu pasiensa.
saludos

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 06 Dic 2006 07:56 am
a Kobeson:
Para manejar ese efecto de ondas ( "el de la flor") mira la respuesta que doy a Shaben unos post mas arriba de este. Esa es la manera( una de muchas) de poner ese efecto en una sola capa.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 06 Dic 2006 09:09 am
aki voy otra vez XP
segui los pasos ke citas(o almenos creo ke lo hice), aunke a esta parte no le entendi bien
"( atención: carga el niveles libres o con this.getNextHighestDepth() )
y cambia la toma de coordenadas del mouse:

Código :

XM = _xmouse/2 ; 
YM = _ymouse/2; 

"

solo voy a susteir eso por el codigo ke dices y ya?
bueno aki esta el codigo tal y como lo deje y tambien el resultado ke obtuve:

Código :

import flash.display.BitmapData; import flash.geom.*; import flash.filters.ConvolutionFilter;import flash.filters.DisplacementMapFilter;fondo = BitmapData.loadBitmap("imagen");
createEmptyMovieClip("surfMC", 1);
surfMC.attachBitmap(fondo, 2, "auto", true);

anc= fondo.width; alt =fondo.height; sal = new BitmapData(anc/2,alt/2, false, 128);
sal1 = sal2 = new BitmapData(anc,alt, false,0);
surfMC.attachBitmap(sal2, 3);

ori = acum = new BitmapData(anc/2,alt/2, false,128);Mx = new Matrix(); Mx.scale(2,2);
ola = new ConvolutionFilter(3,3,[1,1,1,1,1,1,1,1,1],9,0);
ade = new ColorTransform(0,0,0.996,1,0,0,2,0);
agua = new DisplacementMapFilter(sal2,new Point(),4,4,48,48,"ignore");
attachBitmap(sal2,0); 
onMouseDown  = onMouseUp  = function (){pul = !pul};
onEnterFrame = function (){   if (pul){       
 XM = (_xmouse-surfMC._x)/2 ; 
YM = (_ymouse-surfMC._y)/2;        
ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);      
 ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);    }    
sal.applyFilter(ori,new Rectangle(0, 0, anc/2,alt/2),new Point(),ola);
 sal.draw(sal,new Matrix(),null,"add");  
sal.draw(acum,new Matrix(),null,"difference"); 
sal.draw(sal, new Matrix(),ade);   
sal1.draw(sal,Mx,null,null,null,true);    
sal2.applyFilter(fondo,new Rectangle(0,0,anc,alt), new Point(),agua);   
acum = ori; ori = sal.clone();}


http://i121.photobucket.com/albums/o211/kobedyck/cheka.swf

ke estoy haciendo mal, primero agregue una imagen a la biblioteca, y la vincule,despues pegue el codigo, luego agregue otra capa y la puse ensima de la pagina donde puse el codigo del efecto y en la capa superior puse uncirculo.

en fin saludos a todos


[zah] Utiliza las etiquetas code para postear código [/zah]

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 08 Dic 2006 08:15 am
lol creo ke acave con la pasiencia de teseo.
bump

Por kobeson

6 de clabLevel



 

msie7
Citar            
MensajeEscrito el 09 Dic 2006 01:11 am
Muy bueno el aporte, si señor. Gracias por tu generosidad TESEO.

Por byweb

118 de clabLevel



Genero:Masculino  

Lucena (Córdoba)

firefox
Citar            
MensajeEscrito el 09 Dic 2006 01:14 pm
disculpen la pregunta, pero como vinculo la imagen para que el codigo funcione con la foto....., gracias

Por hackaos

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 09 Dic 2006 06:56 pm
pregunto una cosa....
hize un copy paste del codigo del lago y la palmera..., lo puse en un fotograma de capa 2, puse una imagen en biblioteca llamada imagen, pero no funciona.,
que deberia poner yo para eso

Por hackaos

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 10 Dic 2006 02:01 pm
que pena la ignorancia, pero hice un copy paste del codigo de la imagen que sale una palmera como en ua plya para probarlo., puse en biblioteca una imagen llamada ''imagen'' para que la mostrara..., pero no pasa nadaa., la pse en escritorio y tampoco..., en que parte o de que manera debo poner el codigo., soy muy novato en flash.., gracias...

Por hackaos

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 10 Dic 2006 07:13 pm
Por favor, Hackaos, lee la respuesta que hay en este mismo post por ahí arriba sobre como hacer una vinculación desde la biblioteca.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Ir a página Anterior  1, 2, 3, ... 9, 10, 11  Siguiente
Foros de discusión > Flash

   Página 2 de 11

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.