Flash: Página Web Dinámica

Objetivo: El participante evaluará la transformación de un diseño en capas hecho en Photoshop a una página web dinámica en Flash, considerando así, paso a paso, su optimización y programación con ActionScript.

1. Importar al escenario el archivo de photoshop: design.psd, aparecerá una ventana, en ella hay que activar todas las casillas y asignar como movie clips las secciones de la página con su respectivo nombre: home_mc, about_mc, portfolio_mc, contact_mc y topbar_mc
   
   
   
   
2. Activar la última casilla para que el proyecto de Flash tenga las dimensiones del diseño. (Si aparece una ventana sobre elementos repetidos seleccionar la opción de reemplazo)
   
   
3. Crear una nueva capa arriba de todas y llamarla actions/labels hay que extender la duración de todos los keyframes hasta el frame 40
   
   
   
   
4. Agregar un keyframe cada 10 frames correspondiente a las secciones de la página, con su respectiva etiqueta (la opción aparece en la ventana de propiedades al dar clic al frame)
   
   
   
   
5. Arrastrar los keyframes con los contenidos de cada sección a las etiquetas correspondientes (no los botones y no olvidar remover los frames sobrantes de secciones bajo otras)
   
   
   
   
6. Seleccionar el primer frame de la capa actions/labels y presionar F9 para insertar el código de ActionScript:
   
   

   stop();

   
   Hacer lo mismo para cada keyframe con etiqueta.
   
   
   
   
7. Convertir en símbolos de tipo boton cada texto del menú con sus tres estados y sonido over, nombrarlos home, about, portfolio y contact. Tambien nombrarlos así en su nombre de Instancia para ActionScript.
   
   
   
   
8. Agregar el siguiente código al primer frame de la capa actions / labels (después de stop();):
   
   

   about.addEventListener(MouseEvent.CLICK,go_about); function go_about (me:MouseEvent) { gotoAndStop("about"); }

   
   Así al dar clic a cada botón nos desplazaremos a la ubicación de cada etiqueta.
   
   
9. Sustituir el código anterior por el siguiente:
   
   

   home.addEventListener(MouseEvent.CLICK,clickSection); about.addEventListener(MouseEvent.CLICK,clickSection); portfolio.addEventListener(MouseEvent.CLICK,clickSection); contact.addEventListener(MouseEvent.CLICK,clickSection); function clickSection (me:MouseEvent) { gotoAndStop(me.target.name); }

   
   De esta forma la función clickSection extráe automáticamente el nombre de cada botón que con el mouse que se selecciona y se dirige hacia la etiqueta correspondiente.
   
   
10. Agregar el siguiente código a frame 1 como a continuación se muestra, así se le agregará una transición automática:
    
    

    import fl.transitions.Tween; import fl.transitions.easing.*; var homeTween:Tween = new Tween(home_mc, "x", Elastic.easeOut, 1000, 0, 3, true);

    
    Las siguientes variaciones son para cada keyframe de la sección correspondiente:
    
    

    var aboutTween:Tween = new Tween(about_mc, "y", Elastic.easeOut, 1000, 112, 3, true);

    
    

    var portfolioTween:Tween = new Tween(portfolio_mc, "alpha", Regular.easeOut, 0, 1, 3, true);

    
    

    var contactTween:Tween = new Tween(contact_mc, "scaleX",Elastic.easeOut,0,1,3,true);

    
    Más opciones de código para estas transiciones se pueden en esta página
    
    

siguiente