Que tal gente de Cristalab. Después de beneficiarme de este foro durante muuucho tiempo, he decidido aportar alguna cosilla, así que he hecho este efecto en Flash, a ver si os gusta.
El tip siguiente se trata de crear un efecto de sombras dinámicas originadas por un foco de luz que sale del puntero del ratón. Lo bueno es que los objetos con sombras pueden ser cualquier tipo de elemento, hasta un campo de introducción de texto, como he puesto en el ejemplo siguiente:
Para esto, es necesario tener un MovieClip en el escenario con nombre "Foco", y este código en el primer frame:
Código :
function Orientacion(ObjetoRelativo:MovieClip):Number { // La posición del ratón relativa al objeto. RatonX = ObjetoRelativo._xmouse - (ObjetoRelativo._width / 2); RatonY = ObjetoRelativo._ymouse - (ObjetoRelativo._height / 2);
// Por trigonometría calculamos el ángulo Hipotenusa = Math.round(Math.sqrt(Math.pow(RatonX,2) + Math.pow(RatonY,2))); Angulo = Math.round(Math.asin(RatonY/Hipotenusa) * Math.round(180/Math.PI));
// De esta forma se consigue que cubra los 360º if (RatonX < 0) {Angulo = 180 - Angulo} return Angulo; }
// Igual que la función orientación pero solo devuelve la hipotenusa // que es la distancia en cualquier dirección hasta el ratón. Hipotenusa = Math.round(Math.sqrt(Math.pow(RatonX,2) + Math.pow(RatonY,2))); return Hipotenusa; }
function AplicaEfecto(ObjetoDestino:MovieClip) { // Los parámetros para la sombra. // Para que el efecto sea natural deben ser los mismos para todas las sombras.
var FiltroTemporal = new flash.filters.DropShadowFilter((Distancia(ObjetoDestino)/DistanciaSombra), 180 + Orientacion(ObjetoDestino), ColorSombra, TransparenciaSombra, DesenfoqueX, DesenfoqueY); var Filtros:Array = ObjetoDestino.filters; Filtros.pop(); Filtros.push(FiltroTemporal); ObjetoDestino.filters = Filtros; }
this.onEnterFrame = function() { // Por cada frame se aplica el efecto a todos los objetos que queramos. AplicaEfecto(texto1); AplicaEfecto(Perraco); }
// Un efecto de foco MUUUYYY simple startDrag(Foco,true);
El valor de la distancia se amplia o reduce variando el 1.08 (entre 1 y 1.2 son adecuados) Por:Teseo
muy bueno el tip Yekill, como el de Teseo tambien!!! cambiando de tema, Yekill tu avatar es el perro de Keko!!! no por dios (que me tienen cansado con sus publicidades pedorras) Por:CarlosRuminott
jejeje, es que Teseo es como el Dr. House pero en versión ActionScript.
Llevo un rato mirando el código, y no se como, pero hace lo mismo solo que con 50 lineas menos Misterios de la vida.
cambiando de tema, Yekill tu avatar es el perro de Keko!!! no por dios Shock (que me tienen cansado con sus publicidades pedorras)
pues no tenia ni idea, la verdad es que lo busqué para hacer el flash y luego me lo puse de avatar Por:Yekill
que rallao tio, quin nivel lo que encara nose per que emprar-ho. chau Por:torrao_blog
bien yekill y como siempre bien teseo es una buena aplicacion y buen tip
la unica duda es el filtro bevel...... eso con que se come? Por:jpcw
Muchas gracias por el tip, pequeñas contribciones hacen grande esta comunidad Por:Eleuterio Castellanos_blo
torrao:
que rallao tio, quin nivel lo que encara nose per que emprar-ho.
Si te soy sincero solo he entendido "que rallao tio", y el resto me ha dejado bastante rallao, si
jpcw:
la unica duda es el filtro bevel...... eso con que se come?
Es el filtro de biselado que hace que parezca brillante por los bordes.
Lo que Teseo quiere decir (espero no equivocarme) es que de esta forma no sólo se puede aplicar el efecto sombra, sino que se puede aplicar cualquier efecto, como sombra, bisel, desenfoque, etc...
Comento un poquillo el código de Teseo (con su permiso ):
Código :
// Librería para utilizar la clase Point import flash.geom.*;
// Definicion del efecto SOMBRA SF = new flash.filters.DropShadowFilter();
// Definición del efecto BISELADO BF = new flash.filters.BevelFilter();
function sombra(clip){ // Posición actual del ratón Pm = new Point(_xmouse,_ymouse); // Posición actual del centro del MoviCLip sobre el que vamos a aplicar el efecto. Pc = new Point(clip._x+clip._width/2 ,clip._y + clip._height/2);
// Definición del ángulo para el efecto SOMBRA y para el efecto BISEL // (Son exáctamente el mismo) SF.angle = Math.atan2((Pc.x-Pm.x),(Pm.y-Pc.y))*180/Math.PI-90; BF.angle = SF.angle;
// Definición de la distancia para el efecto SOMBRA SF.distance = Point.distance(Pc, Point.interpolate(Pc,Pm,1.08));
// Definición de la distancia para el efecto BISEL BF.distance = SF.distance/6;
// Se aplican los dos filtros al MoviClip. // Si, por ejemplo, aquí se pusiera clip.filters = [SF] sólo se aplicaría el efecto SOMBRA // y lo mismo con BF, que sería para BISEL. clip.filters = [BF,SF]; }
Por:Yekill
que buena idea, super limpio tu codigo tese.. Por:carlosudea_blog
Es bueno ese efecto, yo lo havia usado antes en este sitio http://www.grupoellitte.com aun que casi no se nota, esta en los botones y se supones es la sobra que deja la lamparita.... yo no agregue el bevel pero igual no me gusta mucho como se ve en las letras, en el perro se ve cool, pero en las letras como que no, la verdadera razon por la que no hagrague el bevel es por que al momento de escribir el codigo no se me ocurrio Por:Buzu_blog
impecable Por:penholder_blog
muy bueno... felicitaciones Por:Mr Konfleis_blog
Excelente Por:Sergio_blog
excelente efecto... me recuerda a uno de relieve de Teseo... Por:glsmaster_blog
Demasiado bueno !! de 10 !... Por:Thor_blog
Excelente, muy bueno, gracias, por este tip. Por:imortelle_blog
exelente este tutorial, crees que podré usarlo en action script 3.0 porque he instalado adobe flash, agredezco tu ayuda Por:erodc2_blog
Muy Interesante Por:Megazon_blog
Veo que este pagina resulta interesante espero pongan nuevos temas de adobe cs3 Por:MEGA_blog
gran tutorial Por:Karina_blog
¡muy buen tip! Yekill, solamente que Teseo supo manipular mejor los objetos de Flash en este caso los Filter y Point, pero igual la idea es buena. Si se domina bien la POO se puede como ya lo han dicho escribir mejor el código para que sea mas fácil de entender y mantener, sea mas usable, flexible y escalable. Pero eso no significa que un código estructurado no se pueda hacer, pero en fin los resultados saltan a la vista.! Por:vanvanero_blog
EYYYYYYY ...! esto esta realmente Fuerte ah! BUENA SUERTE ...! Por:falher_blog
mm esta muy bueno este tutorial me sirvio demasiadooo sigan conservandolo y buensa suerte para las cabesillas de este tutorio adios Por:Romina_blog
(que me tienen cansado con sus publicidades pedorras)
