El efecto reflejo se ha vuelto muy popular en la Web 2.0, en este tip les mostraré una función en Actionscript 3 para producirlo.
Código :
function mirror(target:MovieClip, maskColor:String):void { /*Este código copia el MovieClip al que queremos aplicar el reflejo y lo posiciona bajo el y lo invierte*/
var targetClass:Class = Object(target).constructor; var targetCopy:MovieClip = new targetClass(); targetCopy.y = target.y + target.height; targetCopy.x = target.x; targetCopy.scaleY = -1; targetCopy.width = target.width; targetCopy.height = target.height; addChild(targetCopy);
/*Este código construye un Gradient que será aplicado a la copia del MovieClip para que simule el reflejo*/
var msk:MovieClip = new MovieClip(); var fillType:String = GradientType.LINEAR; var colors:Array = [maskColor, maskColor]; var alphas:Array = [0, 1]; var ratios:Array = [0, 255]; var matrix:Matrix = new Matrix(); matrix.createGradientBox(target.width / 2, target.height / 2, Math.PI / 2, 0, 0); var spreadMethod:String = SpreadMethod.PAD; msk.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod); msk.graphics.drawRect(0, 0, target.width, target.height); addChild(msk); msk.x = targetCopy.x - targetCopy.width / 2; msk.y = targetCopy.y - targetCopy.height / 2; }
mirror(cl, "0xFFFFFF");
Para utilizar esta función es necesario que el MovieClip a reflejar tenga marcada la casilla de Exportar para Actionscript y se le asigne un nombre de Clase.
Si el Gradient creado por Actionscript no te convence puedes crear uno personalizado, exportarlo para actionscript y llamarlo desde la función.
Lo grandioso de Flash es que puedes hacer esto sin tantos problemas de render con una simple función.
En javascript tendrias que recurrir al objeto canvas y tratar de filtrarlo para IE y muchos problemas más, dios que hermoso es flash para esto. Por:NEO_JP
Y para muchas cosas más como hacer intros de 10 Mb Por:GersonM_blog
Update: Lástima que no se pueda editar. Al probar el código en otro archivo el reflejo no aparecía invertido por lo que he sustituido:
Creo que a partir de cierto CL deberíamos tener la opción de editar nuestros propios tips. No sólo para corregirlos, sino también, para actualizarlos. Por:HenranRivas (logout)_blog
Muy cierto... Ya que asi se facilitarian muchas cosas a futuro... Por:M@U
HenranRivas (logout)_blog :
Creo que a partir de cierto CL deberíamos tener la opción de editar nuestros propios tips. No sólo para corregirlos, sino también, para actualizarlos.
Los tips son revisados antes de pasarlos a portada de clab. ¿que pasaría si alguien envía un tip y cuando esté en portada decide editarlo y colocar spam en él? tendríamos un hermoso mensaje de spam en la home de clab... Así que la posibilidad de editar un post que está en portada no es una opción que vaya a ser tenida en cuenta jamás... Para editar o actualizar los tips mandarme un MP a mi o a Mx.
Así que la posibilidad de editar un post que está en portada no es una opción que vaya a ser tenida en cuenta jamás...
Bueno, arruino la sorpresa, pero les cuento que estoy trabajando en un punto medio.
La idea es que un autor pueda editar sus tips o tutoriales, al hacerlo, el sistema envía un mensaje directo a los editores de Clab para que verifiquen el cambio hecho y lo autoricen para portada. Así nos arreglamos problemas. Por:Freddie
Freddie :
Zguillez :
[...]
Bueno, arruino la sorpresa, pero les cuento que estoy trabajando en un punto medio.
La idea es que un autor pueda editar sus tips o tutoriales, al hacerlo, el sistema envía un mensaje directo a los editores de Clab para que verifiquen el cambio hecho y lo autoricen para portada. Así nos arreglamos problemas.
La verdad esta vacano el efecto pero no entiendo que nombre de clase ponerle o mejor dicho no me funciona
Pero buen aporte... Por:Sebastian Garcia_blog
Amigo Carlos.yanez, se que sonaré de lo más tonto, quizás, pero pues recuerden que soy un mega novato, jeje , me gustaría, si es que puedes y tienes tiempo, que me aclararas un poco más esas dos condiciones que pusiste al último, bueno, de hecho, marcar la opción para importar a action script no me da problema, pero al decir que el movieClip al que se le aplicará el reflejo se le tiene que asignar un nombre de Clase ¿A qué te refieres exactamente? Me interesa ese efecto y saber si se puede utilizar como los diseñadores de iTunes lograron hacer con las imágenes de las portadas de los discos que tienes almacenados, si no sabes a que efecto me refiero, yo te lo aclaro más detalladamente, pero confío en que tengas ese fantástico reproductor y sepas de que te hablo, gracias de antemano. Por:Señor Oz_blog
Sebastian Garcia, puedes colocar el código en el primer fotograma (frame) de tu swf. Señor Oz, en la librería damos click derecho al MovieClip que queremos aplicar el reflejo y seleccionamos la opción "Linkage" (está abajo de "Properties") y ahi marcamos la casilla de "Exportar para Actionsctipt, al hacerlo automaticamente aparecerá un nombre de clase en el cuadro superior, dependiendo del nombre del MC. Ese es el nombre de clase al que me refiero, y tienes que tener Flash CS3 para que aparezca esa opción.
Claro que se puede hacer el efecto de Coverflow, solo necesitas adaptarlo un poco. Por:Carloz.Yanez
me saca este error a que se debe
1120: Access of undefined property cl.
pero en el codigo no veo donde le asignas al mc el efecto...???
Gracias
Por:Sebastian Garcia_blog
Precisamente ahí.
" cl " es el nombre de instancia del MovieClip al que le quieres dar el efecto.
Si tienes problemas entendiendo los códigos te recomiendo leas algunos tutoriales de aquí.
Para utilizar esta función es necesario que el MovieClip a reflejar tenga marcada la casilla de Exportar para Actionscript y se le asigne un nombre de Clase.
Y en realidad no es nada claro. La mayoría de la gente que lee el tip puede que nunca lo haya hecho, así que expande esa parte. Por:Freddie
Freddie tiene razón es un poco confuso para los que no manejamos casi nada de AS3... el publico presente pide mas explicacion!!!...
Gracias Por:Sebastian Garcia_blog
Me parece que es lo que expliqué al Señor_Oz, no es asi?
Carloz.Yanez :
en la librería damos click derecho al MovieClip que queremos aplicar el reflejo y seleccionamos la opción "Linkage" (está abajo de "Properties") y ahi marcamos la casilla de "Exportar para Actionscript, al hacerlo automaticamente aparecerá un nombre de clase en el cuadro superior, dependiendo del nombre del MC. Ese es el nombre de clase al que me refiero, y tienes que tener Flash CS3 para que aparezca esa opción.
Tengo una inquietud. mi imagen no se ve como la de la muestra, la duplica, la pone debajo, le aplica el gradient pero no la invierte... a que se debe Por:Sebastian Garcia_blog
jejeje... ya lo modifique con la correccion que pusiste despues, pero el reflejo queda alreves sigue sin verse como el del ejemplo... Por:Sebastian Garcia_blog
Que tal creo que lo solucione espero que sea el metodo correcto;
esto:
Código :
function mirror(target:MovieClip, maskColor:String):void { /*Este código copia el MovieClip al que queremos aplicar el reflejo y lo posiciona bajo el y lo invierte*/
var targetClass:Class = Object(target).constructor; var targetCopy:MovieClip = new targetClass(); targetCopy.y = target.y target.height; targetCopy.x = target.x;
/*Este código construye un Gradient que será aplicado a la copia del MovieClip para que simule el reflejo*/
var msk:MovieClip = new MovieClip(); var fillType:String = GradientType.LINEAR; var colors:Array = [maskColor, maskColor]; var alphas:Array = [0, 1]; var ratios:Array = [0, 255]; var matrix:Matrix = new Matrix(); matrix.createGradientBox(target.width / 2, target.height / 2, Math.PI / 2, 0, 0); var spreadMethod:String = SpreadMethod.PAD; msk.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod); msk.graphics.drawRect(0, 0, target.width, target.height); addChild(msk); msk.x = targetCopy.x - targetCopy.width / 2; msk.y = targetCopy.y - targetCopy.height / 2; }
mirror(cl, "0xFFFFFF");
por:
Código :
function mirror(target:MovieClip, maskColor:String):void { /*Este código copia el MovieClip al que queremos aplicar el reflejo y lo posiciona bajo el y lo invierte*/
var targetClass:Class = Object(target).constructor; var targetCopy:MovieClip = new targetClass(); targetCopy.y = target.y target.height; targetCopy.x = target.x;
/*Este código construye un Gradient que será aplicado a la copia del MovieClip para que simule el reflejo*/
var msk:MovieClip = new MovieClip(); var fillType:String = GradientType.LINEAR; var colors:Array = [maskColor, maskColor]; var alphas:Array = [0, 1]; var ratios:Array = [0, 255]; var matrix:Matrix = new Matrix(); matrix.createGradientBox(target.width / 2, target.height / 2, Math.PI / 2, 0, 0); var spreadMethod:String = SpreadMethod.PAD; msk.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod); msk.graphics.drawRect(0, 0, target.width, target.height); addChild(msk); msk.x = targetCopy.x - targetCopy.width / 2; msk.y = targetCopy.y - targetCopy.height / 2; }
mirror(cl, "0xFFFFFF");
Por:Sebastian Garcia_blog
Definitivamente, este foro, es de lo mejor para aprender, cada vez me siento más a gusto aqui... Por:Betelgeus_blog
Alguien sabe como personalizar el Gradient
"Si el Gradient creado por Actionscript no te convence puedes crear uno personalizado, exportarlo para actionscript y llamarlo desde la función."
como lo exporto para que me quede el codigo AS3.
Gracias Por:Sebastian Garcia_blog
Buen tip. Para un efecto de espejo en AS2, había puesto un ejemplo como respuesta a una pregunta de Dientuki aquí: http://www.cristalab.com/foros/t22148-150.html El sesgo se puede conseguir modificando la matrix M. El ajuste del gradiente es similar en ambos casos. Por:Teseo
Hola.. En la linea donde pone
Código :
targetCopy.y = target.y target.height;
me imagino que no habria desayunado el personal y se comio un "+", deberia ser
Código :
targetCopy.y = target.y + target.height;
Saludos y gracias por el post. Por:willow001
Ya están mejor aclaradas las cosas, que bieeen, gracias por tomarse el tiempo de responder, es algo que no se olvida jamás. Bueno, ya que estamos en esas, jaja, carlilloz, si pudieras explicar como hacer ese fantástico efecto del que te hablé, terminaría de amarte, jaja, no no te emociones, es broma, pero si terminaría de decir que eres de los mejores, mira, mi intención es hacer un efecto con los botones esos que crecen al acercar el mouse, tipo menu de mac os, algo así, pero que estos botones tengan ese reflejo y pues obvio, el reflejo tiene que crecer al mismo tiempo y del a misma manera que los botones, supongo que solo es asignarles la misma escala del botón que esté siendo ampliado al reflejo, ¿O es algo más complicado que eso? Pregunta: Sé que tu ejemplo es para AS3, los botones que tengo los desarrolle con un ejemplo magnífico también de esta pagina, pero están en AS2, ¿no funcionará tu ejemplo si teniendo yo flash CS3 seleccioné para crear esos botones un documento de AS2? Nuevamente gracias por la respuesta. Por:Señor Oz_blog
Porque no ponen los archibos flash para que los menos inteligentes como yo puedan aprender Por:Zona_blog
Señor_Oz, creo que te refieres a este efecto, ya estoy preparando un tutorial para lograrlo.
[BOFH] SWF RETIRADO POR USO INDISCRIMINADO DE PROCESADOR. El autor será prontamente latigado por ello. [/BOFH] Por:Carloz.Yanez
Carloz.Yanez ¿Qué tipo de malévolo código usaste? Deben haber mil formas de hacer esto sin que gaste procesador de esa manera tan horrenda. Por:Freddie
Por eso aún no lo posteaba .
Usé un efecto Strong.easeOut, dentro de un ENTER_FRAME que ajustaba el tamaño del reflejo.
Ese ejemplo sólo "funciona", pero no es recomendable hacerlo, ya mostraré una versión mejorada. Por:Carloz.Yanez
Carloz.Yanez, por dios ¿Qué tipo de persona usa ENTER_FRAME en estos tiempos?
Usa un Timer. O usando Tween ni siquiera tienes por qué usar un Timer, usa eventos de la clase Tween. Por:Freddie
Freddie :
Carloz.Yanez, por dios ¿Qué tipo de persona usa ENTER_FRAME en estos tiempos?
Usa un Timer. O usando Tween ni siquiera tienes por qué usar un Timer, usa eventos de la clase Tween.
1067: Implicit coercion of a value of type Class to an unrelated type flash.display:MovieClip. Por:nucli_blog
Ya que ha salido el tema, una pregunta, en cuanto a coste: Enter_frame > Timer > Tween, lo he entendido bien? y otra cosa, cómo se puede comparar el uso del procesador? me refiero a si hay algo asi como visor de ancho de banda, pero para uso cpu... si se queda colgado media hora esta claro que no es "recomendable" pero me refiero a medir diferencias mas pequeñas. Gracias. Por:Lord_Kote_blog
ahh no me hagan preguntas muy tecnicas pq yo nose nada de programacion esto me salio por prueba fallo y error variando parametro q "me parecian" q iban hacer q el action me funcione como yo queria. saludos Leotaku Por:leo_blog
Yo he usado la clase Reflect de PixelFumes, funciona muy bien y es muy sencilla de configurar: Clase Reflect de PixelFumes Por:Skatos
ami me salta un error Skatos nose si a vos te paso lo mismo. 1046: Type was not found or was not a compile-time constant: box_mc. Por:leo_blog
La verdad que no Leo, y lo acabo de bajar para ver si la habían actualizado y tenía algún error. La probé con FP8 y FP9 y no dan error. Ese error te da cuando faltan clases o no puede tipar la variable por lo que me extraña mucho. Por:Skatos
locaso man chvre Por:EnRiQuE_blog
Hola: Hay alguna forma de hacer esto con Actionscript 2.0? Por:Marcelo_blog
jaja, no no te emociones, es broma, pero si terminaría de decir que eres de los mejores, mira, mi intención es hacer un efecto con los botones esos que crecen al acercar el mouse, tipo menu de mac os, algo así, pero que estos botones tengan ese reflejo y pues obvio, el reflejo tiene que crecer al mismo tiempo y del a misma manera que los botones, supongo que solo es asignarles la misma escala del botón que esté siendo ampliado al reflejo, ¿O es algo más complicado que eso? 
.
