Crear Reproductor Flash

En este tutorial te mostraré cómo crear flash reproductor de vídeo para su sitio web utilizando componentes flash.

Abrir Adobe Flash Professional CS3 y en la pantalla de bienvenida, seleccione Archivo Flash (ActionScript 2.0) (Fig. 01).


Abra el panel Componentes (Fig. 02). Si no encuentra el panel Componentes ir a la ventana y seleccionar componentes o simplemente pulse Ctrl + F7 en el teclado.

Desde el panel Componentes arrastrar y soltar el MediaController a subirse al escenario (Fig. 03).


Con el MediaController aún seleccionado, ir al panel de Propiedades y definir el nombre para él - me pidió el mío vcontr (Fig. 04).


También, asegúrese de que la anchura es la misma que la anchura del vídeo que más tarde se carga al jugador.
Ahora, desde el panel Componentes arrastrar y soltar el componente MediaDisplay a subirse al escenario (Fig. 05).


Con el componente MediaDisplay aún seleccionado, vaya al panel de Propiedades y darle un nombre - me pidió el mío vdisp (Fig. 06).

También, asegúrese de que las dimensiones de los componentes MediaDisplay coincidan con sus dimensiones de vídeo, que en mi caso son 300px y 240px.
Abra el panel Comportamientos - si no puedes verlo, vaya a la ventana y seleccionar Comportamientos o pulse Mayús + F4 de su teclado.
Con el componente MediaDisplay aún seleccionado, haga clic en el signo más en los comportamientos y elegir el panel Medios de comunicación> Contralor Asociado (Fig. 07).

En el Contralor Asociado ventana de diálogo seleccionar nuestro controlador (vcontr) y haga clic en el botón OK para asociarlo con nuestro componente MediaDisplay (Fig. 08).

Abra el panel Inspector de componentes - si usted no lo encuentra ir a la ventana y seleccione Componente Inspector o pulse Mayús + F7 en el teclado.
Con su componente MediaDisplay aún seleccionado, definir el camino a su archivo de vídeo (en formato. FLV) con el nombre del archivo (Fig. 09).


Si usted no desea que su vídeo para iniciar la reproducción automática, basta con desmarcar la casilla de verificación Play automáticamente. Además, si su señal de vídeo utiliza puntos se puede definir en la sección inferior del Inspector de componentes, proporcionando nombre y cargo de cada punto clave en el vídeo.
Si usted quiere que su MediaController que se mostrará permanentemente en lugar de ocultar y mostrar cuando se le señalan con el cursor del ratón, seleccione el MediaController y en el Inspector de componentes para elegir en la controllerPolicy .


Una vez que hayas hecho todo esto puede guardar su archivo y publicar tu reproductor de vídeo presionando Ctrl + F12 en su teclado.

Actionscript: mejorando la presentacion del codigo: 2da parte

Convenciones en el uso de funciones

Las funciones perminten la reutilización de código,

  • Si un segmento de código es usado en mas de un lugar debe ser codificado en una función.
  • La proceso que lleva a cabo la función debe ser lo más específico posible.
  • Se debe evitar la siguiente sintaxis:
myCircle = function(radius:Number):Number {
//...
}

Detener repetición de código

Cuando usamos el evento “onEnterFrame” para repetir un segmento de código, debemos tener en cuenta el momento en que hay que detenerlo para evitar problemas de rendimiento. Para esto debemos borrar el evento usado “delete” por ejemplo:

circleClip.onEnterFrame = function() {
circleClip._alpha -= 5;
if (circleClip._alpha<=0) {
circleClip.unloadMovie();
delete this.onEnterFrame;
trace("onEnterFrame borrado");
}
};

Optimizando el código

  • Evitemos llamar consecutivamente una funcion dentro de un “loop” es mejor introducir el código de la función dentro del loop.
  • Use en lo posible funciones nativas.
  • No abuse del tipo “Object” sea lo mas posible preciso en el uso de los tipos.
  • Asigne la longitud de una arreglo “Array.length” antes de usarlo dentro de un loop
  • Enfoque la optimización en los loop, este es la operación que Flash player necesita mayores recursos.
  • Incluya la palabra var para declarar variables.
  • No use variables globales cuando son suficiente locales.
  • Formateo del código

    • Añada un salto de línea luego de cada segmento (funciones, modulos, etc.) de codificación
    • Agrupe los segmentos de código lógicamente.
    • Use una identación consistente.
    • Use espacios antes te un paréntecis, por ejemplo:
    var i:Number;
    for (i=0; i<10; i++) {
    //codigo
    }
    • Exceptuando la guia anterior, no coloque espacio entre el nombre de la función y el paréntesis
    function obtenerUsuario(){
    //codigo;
    }
    getUrl("http://www.undermedia.com.ec");
    • Coloque espacios despues de una serie de argumentos
    funcion (nombre:String, apellido:String) {
    //codigo
    }
    • Coloque espacios el operador y los operandos. (Excepto en el operadores . ++ –)
    var edad:Number = 20 + 1;
    • Procure colocar cada elemento en líneas separadas.
    • No codifique asignaciones múltiples. Separe cada asignación en diferentes líneas.
    var undermedia:Number = (a = b + c) + d;

    Guas para sentencias condicionles

    • Separe la sentencias if, else..if, y if..else en diferentes líneas.
    • Use siempre llaves {} para las sentencias if
    //Incorrecto
    if (numUsers == 0)
    trace("no users found.");
    • Si tiene operaciones complejas agrúpelas con parentesis

    if (genero== 'masculino') && (edad >= 22)) {}
    //codigo

    Actionscript: mejorando la presentacion del codigo: 1ra parte

    Una correcta legibilidad facilita las tareas de codificar y mantener nuestras aplicaciones.

    Una manera de mejorar la legibilidad de nuestro código es al usar convenciones de nombres.

    Variables:

    • El nombre de la variable debe permitir identificar rápidamente su tipo (Entero, arreglo, etc) y su alcance (Local, global )
    • No usar el mismo nombre de variable en diferentes casos, esto puede causar confusión.
    • Usar abreviaciones claras y reconocidas, evitar por ejemplo usar la abreviatura sec, que puede significar sección o secundario.
    • Si es necesario usar un nombre que contenga varias palabras, cada palabra se debe distinguir usando una letra mayúscula o un separador como “_”.
    • Debe ser lo más descriptivo posible. Por ejemplo una variable que recoge datos de usuario sería mejor llamarla userData en lugar de únicamente data.
    • Usar nombres lo mas cortos posibles, claro mientras sean descriptivos.
    • Usar “Strict data typing” es decir definir el tipo de dato de la variable. Por ejemplo:
    var datosUsuario:String = new LoadVars();
    • En contadores usar variables de una sola letra (i,n,j).
    • Iniciar las variables con una letra minúscula.

    Constantes:

    • La constante debe ser escrita usando solo letras mayúsculas.
    • Separar las palabras con guión bajo “_”.

    Variables booleanas:

    • Le debe anteceder la palabra “es” o “is” en ingles. Ya que solo puede ser verdadero o falso.
    var isMujer:Boolean;

    Nombres de funciones y métodos

    • Usar nombres descriptivos.
    • Cada palabra que compone el nombre de la función debe ser distinguida usando una letra Mayúscula o un separador como “_”.
    • Describe el valor que retorna y la operación que realiza. Por ejemplo obtenerNombre().

    Clases y objetos

    • El nombre de la clase debe empezar con una letra mayúscula.
    • Cada palabra se debe distinguir usando una letra Mayúscula
    • Usar sustantivos para nombrarlas instancias, por ejemplo NuevoUsuario.
    • Usar nombres en singular, por ejemplo Usuario.
    • No usar el nombre de la clase en los atributos, pues genera redundancia. Por ejemplo usuario.usuarioEdad seria mejor edad únicamente.
    • Cuando incluyamos verbos debemos hacerlo en infinitivo. Por ejemplo Correr en lugar de corriendo.

    Paquetes:

    • Usar el dominio reverso para nombrar los paquetes. Por ejemplo com.undermedia.
    • Agrupar las clases del paquete por funcionalidad.
    • Cada palabra de se debe distinguir usando una letra Mayúscula

    Interfaces

    • El nombre de la clase debe empezar con una letra mayúscula.
    • Usar adjetivos, por ejemplo Imprimible.

    Convenciones para comentar nuestro código

    Los comentarios en nuestro código deben ayudar a entender al como y porque de algún segmento complejo.

    • No comentes lo obvio.
    • Para comentar varias lineas usa /**/ y para una sola //
    • Usa un comentario de cabecera para decribir aspectos como: Nombre, version, fecha, autor descripción.

    Convenciones de la codificación

    Uno de los aspectos más importantes de la codificación es la concistencia.

    • Manten el código en un solo lugar. Generalmente el primer Frame de la línea del tiempo.
    • Colóca el código en la primera capa y nombralo “ActionScript”.
    • No incluyas código dentro de los objetos como botones, instancias de movieClips. Por ejemplo evita:
    on (release) {
    // Do something.
    }

    En lugar usa:

    myBtn.onRelease = function() {
    // Do something.
    };
    • Evita el uso de rutas absolutas, es decir evita el uso de “_root”. Usa this, this._parent, o _parent en lugar de _root.
    • Usa “_lockroot” para solucionar problemas asociados con un incorrecto uso de “_root”. Por ejemplo si cargas una movieClip y se para inesperadamente, usa:
    this._lockroot = true;
    • Usa la palabra “this” aunque tu código funcione sin este. Esto facilita que el código sea mas entendible y legible.
    • Consideraciones de la palabra “this” en clases.
      • Para referirte a la clase dentro de una función o método anidado, crea una referencia local a la clase. Por ejemplo.
    class Undermedia{
    var propiedad:String;
    function Undermedia(){
    //Refernecia a la clase
    var thisObj:Undermedia = this;
    function funcionAnidada(){
    thisObj.propiedad
    }
    }
    }

    Estructurando una clase

    • Usa un comentario de cabecera para decribir aspectos como: Nombre de la clase, version, fecha, autor, descripción.
    • Incluye archivos externos si son necesarios.
    • Coloca todas tus variables estáticas.
    • Coloca tus atributos, primero los públicos y luego los privados.
    • Declara el contructor de la clase.
    • Agrupa tus métodos por funcionalidad
    • Coloca los métodos get/set.

    Guias para crear una clase

    • Colocaca cada declaracion en diferentes lineas, es decir evita:
    var nombre:String, apellido:String;
    playBtn.onRelease = playBtn.onRollOut = playsound;
    • Inicializa las variables locales cuando son declaradas, mientras que los atributos de clase deben ser inicializados con valores por “default” o con null esto optimiza el rendimiento el evitar mantener variables no utilizadas en memoria.
    • Declara las varibles antes de usarlas, esto incluye los “loops”.
    • Evita nombrar variables locales con el mismo nombre que las de clase
    • Define tus métodos o atributos públicos cuando lo requieran sino definelos como privados.
    • No abuses de los getters / setters, si algo va a ser leido únicamente solo crea el getter mas no el setter.
    • Usa un prefijo para el this aunque no sea necesario esto facilita identificar si el atributo a método pertenecen a la clase. Por ejemplo

    class Undermedia{
    var propiedad:String;
    function Undermedia(){
    //Refernecia a atributo de clase
    Undermedia.propiedad;
    }
    }
    • Usa la palabra “Super” para referirse a un metodo o propiedad de una clase heredada, por ejemplo:
    class Mamifero{
    private var numPatas:Number;
    function getNumPatas():Number{
    return this.numPatas;
    }
    function setNumPatas(paramPatas):Void{
    this.numPatas = paramPatas;
    }
    }

    class Humano extends Clotes{
    function getPatas(){
    return super.getPatas();
    }

    }
    • No abuses con el uso de with, esto puede dificultar la legibilidad de tu código, al desconocer el alcance. Por ejemplo (Ejemplo extraido de la fuente).
    this.attachMovie("circleClip", "circle1Clip", 1);
    with (circle1Clip) {
    _x = 20;
    _y = Math.round(Math.random()*20);
    _alpha = 15;
    createTextField("labelTxt", 100, 0, 20, 100, 22);
    labelTxt.text = "Circle 1";
    someVariable = true;
    }

    Se lee mejor:

    this.attachMovie("circleClip", "circle1Clip", 1);
    circle1Clip._x = 20;
    circle1Clip._y = Math.round(Math.random()*20);
    circle1Clip._alpha = 15;
    circle1Clip.createTextField("labelTxt", 100, 0, 20, 100, 22);
    circle1Clip.labelTxt.text = "Circle 1";
    circle1Clip.someVariable = true;

    Una excepcion a la regla es cuando usas al API de dibujo pues se llama continuamente a los mismos métodos, por ejemplo:

    this.createEmptyMovieClip("rectangleClip", 1);
    with (rectangleClip) {
    lineStyle(2, 0x000000, 100);
    beginFill(0xFF0000, 100);
    moveTo(0, 0);
    lineTo(300, 0);
    lineTo(300, 200);
    lineTo(0, 200);
    lineTo(0, 0);
    endFill();
    }