Actualizado: Corregido el error en barra de volumen y deslizador.
Mi primer player con stream. Tiene un pequeño error con la barra de posición mientras hace el stream, solamente se nota cuando la conexión es muy lenta, de todas maneras funciona bien. Carga un Xml con la data de las rutas y los nombres y luego muestra el ID3 del mp3 en una marquesina.
Vamos a crear un componente, y de paso crearemos uno que nos será muy útil. Utilizaremos el método createTextField() y TextFormat(). Los datos serán dinámicos y todas las propiedades serán customizables 100 %. Bueno, casi 100 % !!!.
La idea, y es bueno siempre tener una antes de empezar, es crear un componente que nos genere dinamicamente un TextField de determinadas proporciones, en determinado lugar, al que le asignaremos color de fondo, borde, texto, si éste es html o no, si funcional a rueda del mouse, que texto usa, etc...
Datos
Al principio iba a hacer una pequeña descripción de como utilizar el método createTextField(), pero la verdad es que la ayuda del propio Flash es más que suficiente. Así que si no sabés como utilizarla (aunque no será impresindible) mejor apreta F1 y escribí createTextField en el buscador del panel de ayuda de Flash.
Igualmente antes de empezar les diré que para crear un componente vamos a tener que crear un montón de variables que luego serán usadas para ingresar los datos en el Inspector de Componentes.
pasos a seguir
1.
Creamos un movieClip vacio que lo llamaremos "textfield_componente" con su punto de registro en el borde izquierdo-superior. A mi me gusta mucho hacer primero un cuadradito cualquiera, en qualquier lado, y luego convertirlo en símbolo (F8). Después simplemente borramos este objeto y nos queda un movieClip vacio. (lo del cuadradito es sólo para ver lo que estamos haciendo)
2.
Ahora si empezamos a crear el componente, primero vamos a empezar con las varibles. En el primer, y único frame que vamos a usar, del movieClip, escribimos en el panel de acciones:
La variable texto luego será el texto que quieramos aparezca dentro del campo.
Ancho y Alto serán, como resulta obvio, el ancho y el alto del campo.
Lo mismo con las posiciones x e y, sólo que aquí hago un pequeño truco, para que cuando, en vez de un valor numérico, ingrese la palabra "stage", el movieClip que contiene el textField quede centrado automáticamente al stage, horizontal y verticalemente. Como se ve, no sólo lo centro en el stage, sino que le resto el ancho y el alto del campo dividido 2, que en este caso es tambien el del movieClip contenedor, para que realmente quede centrado. Si no fuera asi, si solo pusiera Stage.width o height dividido 2, quedaria el centro del movieClip (punto superior-izquierdo) en el centro del stage. Asimismo las posiciones no son respecto al campo de texto, sino a "this", o sea al movieClip "textfield_componente".
Luego vienen las variables que serán los colores para el texto, el fondo y el borde del campo. Seguimos:
3.
Necesitamos propiedades para el campo de texto que sólo se las podemos asignar creando un TextFormat(), asi que:
Como se ve, le estoy asignando variables no definidas a cada propiedad. Esto no importa porque luego serán definidas en los parámetros del componente. Más o menos he tratado de nombrar las variables de modo que sean faciles de reconcer, como font_name....
4.
Ahora si, creo el campo de texto:
El nombre del campo, como se ve, será "miText", y realmente no impota como se llame, ya que sólo va a existir dentro del movieClip "textfield_componente". Los valores x e y son 0, ya que éstos son relativos al movieClip "textfield_componente" y la verdadera posición que me interesa es lo que definí antes en un primer momento con "this._x" y "this._y".
Yo usé this.getNextHighestDepth() que según la ayuda de Flash sólo funcionará con versiones 7 o superiores, pero en este caso no habrá más objetos en el movieClip, asi que supongo que no dará problemas. De todos modos se puede usar un número cualquiera por lo mismo que dije anteriormente. Además he probado exportarlo desde player 6, AS1 y AS2 y funciona sin problemas.
El "type" es dinámico, en realidad no hace falta definirlo ya que por defecto es asi, pero en fin... Lo que si, debe ser dinámico ya que el texto lo vamos a cargar de una variable externa.
No me voy a detener a analizar cada una de las propiedades del TextField() ya que éstas estan más que bien explicadas en la ayuda de Flash.
En la última línea, asigno el TextFormat() al TextField.
Acá hay valores de todo tipo, Strings, Numbers, Boolean... ¿y porque algunos los seteo directamente y otros los hago a travez de variables definidas anteriormente? Sencillamente no lo se, pero si en vez de, por ej., borderColor = color_3 (que es a su vez la variable color_borde) hubiera puesto borderColor = color_borde, éste no funcionaria. Y lo mismo pasa con todo lo que es colores, y con el String que es htmlText. Por algún motivo, este tipo de datos necesitan ser definidos a travez de otras variables.... en realidad se comprende mejor en el siguiente paso.
Asi que, siguiente paso:
4.
Ahora ya estría todo lo que es script, terminado. Si compilamos (ctrl+enter) no vamos a ver nada, y seguramente nos de algún tipo de error, y esto porque hay un montón de variables y propiedades que necesitan ser definidas.
Por ahora lo que tenemos es el movieClip "textfield_componente" en el stage y por supuesto en la biblioteca, no? Bien, lo que nos interesa es el item en la biblioteca. Primero necesitamos crear una carpeta, a la que podemos llamar simplemente "textField" y moveremos el clip dentro de ella. También necesitamos crear (aunqe esto no es totalmente indispensable) otra carpeta dentro de ésta con el nombre "FCustomIcons" (si o si, debe ser este nombre) Ahi dentro luego dejaremos un .gif de 23x20 que será la imágen que use el componente para prefisualizarce en el panel de componentes.
Si hacemos click derecho sobre el "textfield_componente" nos saldrá el menú emergente con varias opciones. La que nos interesa es "definición de componente" (component definition). Si, no hay misterio, está ahi, siempre estuvo ahi.... jajaja.... pero paciencia.
La ventana que se nos va a abrir en un principio puede parecer un poco complicada, pero no lo es para nada. Tenemos "parámetros" que es lo que más nos importa, asi que empezemos por ahi.
[+] para agregar [-] para borrar y las flechitas para ordenar los parámetros (estos son los que luego vamos a ver en el panel de Inspector de Componentes o mismo en Parámetros en la barra de propiedades. Y empezamos a llenarla, click en [+] y asignamos un Nombre, que va a ser lo que nos mostrara el panel, luego Variable, que es el nombre de las variables que hemos usado, luego Valor, para que dejemos un valor por defecto que va a usar el componente cuando lo arrastremos al stage y por último Tipo que como verán hay varios... y vamos a usar casi todos. Ahora explico...
Sin importar mucho el órden en que hayamos usado en el script, vamos a ir ingresando los parámetros, más pensando en como queremos que éstos aprarezcan. Yo por lo menos lo hice asi:
Muy bien, ahi están todas las variables que ya habíamos escrito en el panel de acciones... lo que realmente importa es que en la columna variable esten exactamente los mismos nombres de dichas variables, sino, algo no va a funcionar. Como dije antes, el órden no importa, yo lo hice asi porque lo consideré de esa manera y nada más.
Todos los valores en Valores quedarán por defecto como dije antes, pero hay algunas cosas que no se ven en la imágen. El primer valor, para txt es Tipo Default, eso siginifica que puede ser cualquier cosa, y es justamente lo que queremos. Los valores Number sólo podrán ser numeros, los Boolean sólo serán True o Flase, los Color, serán colores que se elijan de una paleta, los Font Name, serán la lista de fuentes que tenemos instaladas en el sistema y la List es un tipo que nos permite crear una lista de opciones. Como se puede ver List aparece como Tipo para Alineación, asi que cuando definamos el tipo de ésta, nos aparecera en el cuadro Valor, una lupa la que clickearemos y a su vez se nos abrira un cuadro donde ingresaremos los siguientes datos (sin comillas): "left", "right", "center", "justify"... éstos serán las diferentes alineaciones que podremos utilizar en el campo, y por eso era necesario que el tipo fuera List. El valor de la lista por defecto será el que dejemos seleccionado.
Nota: los valores Boolean que yo definí de esa manera por defecto, perfectamente pueden ser otros, lo mismo que los colores, los tamaños, posiciones y el texto.
Lo siguiente es activar las casillas de "Los parámetros están bloquedos en instancias" y "Mostrar en el panel de componentes". La segunda es más que obvia, pero la primera significa que en el panel Inspector de Popiedades, no podremos agregar más parámetros y sólo estarán a dispocición los que hemos seteado. En "Texto de Información sobre herramientas" podemos poner un nombre como: TextFieldComponent. Y listo, aceptamos.
Ahora podemos crear en, digamos PhotoShop, la imágen .gif de 23x20 que les conté antes (también la podemos crear después o antes de todo esto) La importamos directo a la biblioteca, la colocamos dentro de la carpeta FCustomIcons y la nombramos (sin extension) igual que el componente. (Yo particularmente hice ésta que no es más que una burda copia de la que trae Flash para su TextArea... pero bueno, no tenía ya más ganas de nada. Eso si, le cambié el color, eh!!!)
Entonces la biblioteca se verá asi:
5.
En realidad el componente en sí ya está terminado, si borramos el movieClip "TextFieldComponent" del stage y arrastramos el componente al stage veremos sólo un punto vacio, pero al compilar, el "TextFieldComponent" se generará con sus valores por defecto, los cuales podemos setear a nuestro gusto.
Pero la idea es hacer el archivo .MXP listo para instalar, asi que, acá vamos con el último paso:
Por un lado necesitamos tener instalado el Extension Manager de Macromedia, que podemos descargar gratis de su página web. Y además necesitamos tener la aplicación MXI File Creator también gratuita y que nos da la posibilidad de crear nuestro propio archivo .MXI, que en realidad no es más que un xml con determinadas características. Justamente voy a utilizar el componente para hacer un pequeño tutorial de esta parte:
Y listo!!! Ya tenemos nuestro propio componente pronto para usar y para compartir con otros para que se lo instalen. En éstas páginas hay otros componentes más hechos de la misma manera que también vienen con sus respectivos .fla, lo que permite a su vez poder expandirlos aún más.
De paso en este ejemplo se muestra como usando el siguiente método se puede intruducir texto desde la línea de tiempo principal dándole un nombre de instancia al movieClip del componente dispuesto en el stage. Supongamos que el movieClip se llama "caja", entonces:
"txt" se llama por defecto, y siempre será asi, el nombre de la variable que usa el TextField para levantar el texto. Podemos tener infinidad de clips con nombres distintos como se puede suponer.
Espero pueda ser de utilidad este tutorial, asi como los componentes creados.
¿Te gustó el tutorial? ¿Te gustó el componente? Hacémelo saber!!!
Componente de preloader casi completamente customizable. Tamaño, posición, colores, etc... Simplemete tirar en el primer frame de la película, el componente ya coloca un stop() en dicho frame y no avanza hasta que el 100 % de la película haya cargado. Todos los valores conserinientes a posición se toman desde el punto superior izquierdo del componente.
Para instalar hay que tener el Extension Manager (descarga gratis de la página de Macromedia), o bien copiar el moviclip del .fla que dejo para bajar.
Funciona desde player 6.
Gracias a Nheko (usuario de Afer-Hours) que me dió una mano para que pudiera hacerlo funcionar para versiones 7 para arriba.
Parámetros
ancho y alto: ancho y alto del preloader (independientemente de como se vea en el Stage antes de compilar)
Los valores "ancho" y "alto" en "-1" obtienen el ancho y alto de la película automaticamente. Esto sirve para hacer un preload, por ej., que ocupe todo el ancho y/o el alto.
pos_x y pos_y: posiciones tomadas desde la esquina superior izquierda.
angulo: interesante opcion, si queremos le ponemos cualquier ángulo. 90º sería para un preloader vertical.
movimiento: derecha o izquierda, se refiere a si la barra va hacia un lado u otro.
color barra: es el color de la barra inferior.
alpha barra: transparencia de barra inferior.
color preloader: es el color de la barra que se va formando al cargar.
alpha preloader: transparencia de lo anterior.
[descargar archivos]
Siguiendo un poco con el label_ajustable_xml, esta vez hice una etiqueta que se arrastra sobre el boton, y además está creada totalmente desde el script.
He usado un poco de todo y creo que es más interesante por ese lado que por el resultado en si.
Métodos y clases usadas
createEmptyMovieClip();
getNextHighestDepth();
lineStyle();
beginFill();
createTextField();
TextFormat();
startDrag();
stopDrag();
[descargar archivos]
Cuando recién habia arrancado con flash, y para ser sincero, mucho tiempo después, me pasaba que muchas veces necesitaba poner infinidad de frames en una animación para que simplemente pasara x cantidad de tiempo. Esto no sólo agrega peso en el archivo, sino que a la hora de editar la línea de tiempo era bastante molesto tener que estar llendo de un lugar a otro.
Un día me iluminé y creé un sencillo script que calcula el tiempo y hace un stop hasta que este tiempo pasa. Otro día me iluminé aún más y creé un componente de éste script, gracias a el MXI File Creator. Es decir, crear un componente no es para nada complicado, pero crear la extensión (MXI) lista para instalar es otra cosa.
Explicación del Componente Pausa:
Para usarlo sólo hay que instalar el archivo "pausa.mxp", recordar tener instalado el Extension Manager que se baja gratis del sitio de Macromedia. Una vez instalado nos quedará en el panel de componentes, y una vez ahí sólo tenemos que arrastrarlo en el frame que queramos haga la pusa y luego introducimos el valor (parámetros del componente) que quieramos. El valor puede tener decimales, por ej. un segundo y medio seria: 1.5, y medio seria 0.5.
Basicamente uso la función getTimer() que nos da el tiempo transcurrido desde que se inicia la película en milisegundos, por eso la divido entre 1000 para que me de el tiempo en segundos. (esta todo bien explicado en la ayuda de flash)
En el ejemplo además he creado, usando la misma función, un cuadro de texto que nos muestra el tiempo transcurrido, esto sólo a modo de ejemplo para que se vea algo. Este cuadro de texto le he asignado el valor usando el método Math.floor(), para que no me muestre los decimales.
En el ejemplo verán que cuando el tiempo llegue a x segs., éste se frenará y aparecerá el botón para reiniciar. Cuando lo hagamos, dependiendo del tiempo que tardemos en hacerlo, el valor no empezará de cero, porque que la función sigue calculando el tiempo, ya que éste es el tiempo transcurrido desde que se inicia la película. Así podremos darnos cuenta de que el componente en sí no cuenta de 0 a 5, sino que suma 5 segundos desde donde empieza a contar. (En realidad el valor por defecto es 5, y si la película del ejemplo la ejecutamos desde nuestra máquina, contaría hasta 5, pero al estar online, el script empieza a contar desde el frame 0 y pueden pasar unos segundos hasta que se ejecuta el componente)
Funciona desde flashplayer 6 con AS1 y AS2.
[descargar archivos]
mProyector es un pequeño programa que nos permite crear aplicaciónes (win y mac) usando como base nuestros archivos .swf. Pero no se trata sólo de crear un ejecutable, es mucho más que eso. Y para no ser demasiado extenso en el tema, mejor visiten la página y descubranlo ustedes mismos. [http://www.screentime.com/]
Desk es mi primer aplicación, por ahora sólo para Windows y creo que sólo para Xp, creada con mProyector. Desk se esconde en el borde derecho de nuestra pantalla y dentro de él incluímos links a webs o carpetas. Lo interesante es que es completamente customizable desde un xml adjunto en el cual seteamos el ícono que queremos usar, el link, el nombre y opciones de colores. También, como no es una aplicación compleja ni nada por el estilo, nos permite hacer cuantas copias quieramos y así tener varios Desk corriendo al mismo tiempo. (copiar la carpeta entera, ya que cada .exe usa su propio xml)
Por ahora sólo lo he creado para almacenar 6 links y para colocar del lado derecho del escritorio.
Adjunto al .exe están: el xml, y una carpeta icons con íconos para usar (Por supuesto podemos usar otros).
Como no hay ejemplo posible, dejo sólo una captura de mi propio escritorio y para descargar todos los archivos, incluído el .fla que he usado para crearlo (versión 8).
[descargar archivos]
El menú xml + gradiente color lo que hace es crear un menu con links cuyos datos obtiene de un xml (como dice el nombre), pero lo interesante es justamente la parte del color. Los colores de los items van de un color inicial a uno final y todos sus intermedios entre ellos dependiendo de la cantidad de items.
Aquí he usado un script que calcula los intermedios entre dos colores y los transforma en hexadecimales. Éste script no lo he creado yo, y estoy seguro de haberlo encontrado en un post de Afer-Hours (aunque si lo modifiqué para adaptarlo a lo que necesitaba). También he usado las clases de movimiento de [mctween] para darle cierto "toque" a las transiciones. Deben ser incluídos para que, al compilar, funcione.
En el xml además de configurar los titulos y los links, podemos elegir los colores de inicio y final que van a ser usados. Se pueden agregar todos los links que se desee, siempre y cuando luego se ajuste la película al tamaño que ocuparán.
Swf compilado para player 7 en AS2 (no lo he probado en otras versiones)
Etiquetas totalmente customizables desde el xml.
Texto, link, colores de fondo y borde, cantidad, posiciones y separaciones entre items. Por ahora es sólo horizontal.
Usé una combinación con scripts de movimiento sacados de [Mcween]
Explicación del xml:
Los datos entre <etiquetas> son bastante obvios, texto, link y colores.
Los datos entre <datos>:
›› inidice es un número para saber el coeficiente de separación entre caracteres, acá depende la tipografía que usemos.
›› pos_x, pos_y son las coordenadas de la primer etiqueta.
›› sep es la separación entre etiquetas
›› alpha_cuadrado, ancho y alto son las propiedades del botón que activa las etiquetas. Lo hice así para que puedan ser usadas como están o para usar sobre cualquier otro objeto, poniendo por ej alpha = 0, no se veran pero si estarán activas según el tamaño que les demos.
[descargar archivos]
[descargar .fla v8] [descargar .fla v8] [descargar .fla v8]
