Pantalla completa maximizada en FLASH

Si necesitasmos que una pagina funcione a pantalla completa el comando es muy simple

fscommand ("fullscreen","true");

El poder de Flash!

Gracias a xkcd tenemos esta genial viñeta. La traduccion es mas o menos asi:

Las consolas de juego mas poderosas del mundo no han podido todavia igualar el grado de addicion generado por los pequeños juegos flash.

El muñeco en cuestion dice:

Oh, ya creo haberlo resuelto!, solo una hora mas!!

Instalacion de flash 10 en Ubuntu

Hace unas semanas fue lanzada la segunda Beta de la versión 10 del Flash Player de Adobe, disponible para sistemas Windows, Mac y GNU/Linux. Desde la página oficial se puede acceder a toda la información referente a los requerimientos del sistema, las últimos cambios de cada versión y las instrucciones de instalación/desinstalación por parte de Adobe.

Esta última edición ha mejorado mucho respecto a versiones anteriores, incluyendo correcciones de errores y también muchas novedades como las transformaciones 3D y las nuevas capacidades con los textos, así como notables mejoras del rendimiento en general. Uno de los planes para Ubuntu 8.10 Intrepid Ibex es precisamente conseguir mejorar la integración del plugin de Adobe y conseguir mejorar lo máximo posible el rendimiento en los navegadores.

A continuación vemos cómo podemos instalar en Ubuntu esta última versión de desarrollo.

  1. Eliminar del sistema las anteriores versiones si no fueron instaladas desde los repositorios. En este último caso no hace falta eliminar nada.
  2. Como el Flash Player 10 vendrá con Ubuntu Intrepid Ibex, podemos usar ese paquete DEB para instalarlo también en Hardy Heron sin problemas de dependencias. Solamente hay que descargarlo (enlaces al final de la página) y después hacer doble click sobre el archivo para proceder a la instalación automática. Informará de que en los repositorios hay una versión anterior, se acepta y no dará ningún problem
  3. Reiniciar Firefox (o cualquier otro navegador) para volver a iniciarlo con la nueva versión.
Si no funciona como deberia, pueden regresar a la instalacion de flash anterior con:
sudo apt-get remove --purge flashplugin-nonfree
sudo apt-get install flashplugin-nonfree

Razones para usar Flash de manera prudente

Existen algunas buenas razones por las que tener prudencia al usar Flash en una pagina web. Siempre es bueno darle un toque de animacion, mas no centralizar toda la interaccion basado en ActioScript. He aqui una razones del porque:

Flash tiene problemas con los buscadores, ya que estos indexan por página, y leen el contenido (HTML/XHTML) de las webs, utilizando flash, muy probablemente, pierdas posicionamiento considerablemente.
Necesitas instalar software adicional al navegador para poder visualizar la web. Si tu interés es vender, ¿por qué cerrar puertas a 1 sólo cliente?

Graves Problemas de navegación:
  • No funcionan los botones “atrás” y “adelante”
  • Abrir un enlace en otra pestaña
  • Abrir un enlace en otra ventana
  • Ver las propiedades de una imagen
  • Obtener una imagen
  • Buscar una palabra a través del navegador
  • No puedes hacer el texto más grande o más pequeño
Los elementos no son estándares. Los usuarios están educados con los componentes de las webs, textos, formularios, enlaces, etc… Y pueden reconocer su función y su uso. No se debe hacer pensar al usuario para qué sirve algo de la página, él debe saberlo. Cada diseñador tiene su criterio para crear sus botones, combos, etcétera.

Depende absolutamente de las decisiones que tome la empresa que lo controla. Nunca sabes qué puede pasar con flash, en cualquier momento podría obligar a actualizar versiones, o sacar versiones incompatibles, y tu, no podrías hacer nada contra ello.

Dependencia total de los diseñadores que hacen la web. Hay más gente preparada para hacer cambios en webs HTML/XHTML que en Flash, ya que HTML es un estándar, y más gente está preparada para ello.

Los diseñadores tienden demasiado a crear efectos y controles complicados para el usuario.
Accesibilidad:
  • Personas con problemas en la vista no pueden cambiar los tamaños de las letras
  • Los sintetizadores de voz que leen el código html no pueden leerlo
Suelen ser más lenta. Al cargarlas de efectos y/o imágenes, las webs en flash suelen ser más pesadas (nótese el “suelen”, ya que he visto verdaderas barbaridades en HTML)
Los usuarios buscan algo en la web, no entretenerse (salvo casos aislados que no tienen nada que hacer). Debe haber un acceso rápido al contenido, a lo que el usuario está buscando.
Problemas serios a la hora de imprimir. ¿A quién no le ha pasado?…
Problemas para generar estadísticas. Nos movemos en un mercado en el que prima la estadística, y Flash nos dificulta conseguirlas.

Las webs en Flash tienden a distraer la atención del usuario frente al contenido que está buscando.

Existen, empero, cierta clase de poblacion o usos para los cuales flash resulta ser el mas idoneo:
  • Webs artísticas (diseño, música, fotos, pintura, etcétera)
  • Niños (webs para niños, tanto educativas como de entretenimiento)
  • Visitas virtuales (recorridos, catálogos, etcétera)
  • Banners (aunque odio los banners en general, puede atraer algo más que una simple imagen)
  • Películas y videos (evidente)
  • Juegos (también evidente)


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();
    }

    Detectar posición del Mouse en Flash con ActionScript

    Muchos desarrolladores en Flash están cambiando el modo en que solían programar aplicaciones. Muchas de las nuevas tendencias tienen que ver con el concepto de las RIA (Rich Interface Application) y de la interacción del usuario con la aplicación. Sin duda, el puntero o mouse, a cambiado la forma en que el usuario utiliza su computador. En mi experiencia, cada día me topo con ejemplos cada vez más extraordinarios de las cosas que se pueden hacer con Flash y ActionScript. Aún debemos de recordar que las grandes cosas están hechas de pequeñas. Por ahí me tope con este ejemplo que sin duda es una de ellas. Este fantástico script muestra como detectar la posición del mouse en Flash con ActionScript. Se los explico a continuación:

    Paso 1: Creemos dos cuadros de texto dinámico. En mi caso, crearé uno asociado a la variable mouseX y otro asociado a la variable mouseY.

    Paso 2: Posteriormente, peguemos el siguiente código en la primera posición de nuestra línea de tiempo:

    _root.onEnterFrame = function() {
    mouseX = _root._xmouse;
    mouseY = _root._ymouse;
    }

    Como, pueden darse cuenta, la simple referencia a la propiedad ._xmouse y ._ymouse nos devuleve el valor de la posición del mouse para ese objeto. Ahora bien, esto lo podemos utilizar para muchas animaciones, como por ejemplo un puntero personalizado para una página o para hacer objetos que cambien de tamaño dependiendo de la posición del puntero; como en el siguiente ejemplo:

    Paso 1: Cree dos objetos movie clip. El segundo, debe ser una instancia del primero.

    Paso 2: Pegue el siguiente código, en la instancia del primer objeto, dentro del segundo objeto movie clip.

    onClipEvent (load) {
    baseX = _parent._x;
    baseY = _parent._y;
    }
    onClipEvent (enterFrame) {
    distanceX = _root._xmouse - _parent._x;
    distanceY = _root._ymouse - _parent._y;
    if (distanceX
    distanceX = -distanceX;
    }
    if (distanceY
    distanceY = -distanceY;
    }
    distance = Math.sqrt((distanceX*distanceX)+(distanceY*distanceY));
    if (distance -150) {
    _parent._xscale = distance;
    _parent._yscale = distance;
    }
    }
    onClipEvent (mouseMove) {
    updateAfterEvent();
    }

    En el anterior ejemplo, podemos observar que se utliza el valor de las propiedades _parent._x y _parent._y. Estos valores representan la posición del objeto padre, dentro del Stage. Además podemos ver la utilización de la función Math.sqrt que devuelve el valor de la raíz cuadrada y para cambiar el tamaño del objeto, las propiedades utlizadas son ._xscale y ._yscale.

    Adobe ha abierto las especificaciones del formato SWF 9 y de FLV/F4V

    «Adobe ha abierto las especificaciones del formato SWF 9 y de FLV/F4V, además de los protocolos Flash Cast (para transmitir vídeo y audio en tiempo real hacia móviles) y AMF (para transferir datos binarios entre cliente/servidor).
    Esto bajo el Open Screen Project, cuyo objetivo es poner el formato SWF en cualquier tipo de aparato. Lo más importante es que ya no hay restricciones sobre el formato SWF, por lo que es completamente posible usar las especificaciones reales de Adobe para crear un Flash Player libre, como Gnash. Junto a eso, Adobe liberó el motor de Actionscript 3 hace tiempo, el proyecto Tamarin que administra la Mozilla Fundation.»

    (leido en Barrapunto)

    Cual es el Flash mas reciente

    Fuente: Flash MX 2004 o Flash MX?

    Pregunta: Cual de las dos versiones es la mas reciente, la Flash MX 2004 o la Flash 5.0 ?

    Respuesta: Flash mx 2004 es mas reciente, pero ya hay dos mejores versiones: el flash 8 y el flash cs3 (el mejor y mas nuevo y cuenta con una compatibilidad excelente junto con illustrator y photoshop)

    Fuente: Flash MX 2004 o Flash MX?