Taller de informática II DCMM Ing Taller de informática II DCMM Ing. Luis Carlos Cañaveral Sarmiento Programación Básica

Acerca del profesor Administrador de sistemas de información (Aptech) Ingeniero de Sistemas (EAN) 4 certificaciones de casas de software Maestría en Computación Grafica (Andes) IM : l.canaveral@hotmail.com Celular: 312 433 05 41

Convivencia Los celulares se ponen en silencio durante clase No se sale a contestar Dudas al inicio de la clase Mientras el docente habla, pantallas apagadas

Metodología Actividad Autónoma(semanal-individual) Tutorial en video o flujo de tareas Entregable(aula Virtual) Lectura Lateral(semanal individual). Observación Teórica(Docente) o taller Notas: 0, 1, 2, 4, 5

Agenda Introducción a Flash Separando la lógica de las fuentes Importación de contenido Animación lineal no lineal Manejo de la línea de tiempo con Actionscript Mejores practicas

Introducción a Flash Línea de tiempo Capas Carpeta Normal Guía Mascara Guía de movimiento Mascara Depende de dos capas(mascara y contenido) Carpeta

Introducción a Flash Herramientas Canvas y zona de trabajo Conjunto de acciones que me permiten alimentar el contenido de mi canvas Canvas y zona de trabajo Dimensión() Todo el contenido que este fuera del canvas no será visualizado(por defecto)

Introducción a Flash Propiedades Representa una acceso rapido a las propiedades basicas de los objetos Fotograma Objetos Movie Clip Button Component Group Texto

Introducción a Flash Paneles Acciones Librería Salida Alineación Paleta de colores Explorador de película escenas Componentes

Introducción a Flash Frames Vacios llenos Interpolados labels

Separando la lógica de las fuentes Este problema se origina cuando tenemos proyectos flash muy grandes #include Clases Solución intermedia, programar todo el contenido en el primer frame Esquema esclavo-maestro Creando librerías de objetos comunes

Importación de contenido Imágenes Png, jpg, gif, bmp … Audio Wav, mp3 … Video Embedido Quicktime, AVI y MPG(dependencia codec) Vinculado FLV

Importación de contenido SWF Illustrator AI / EPS Photoshop PSD

Animación Lineal No Lineal Interpolaciones Cuadro a cuadro Movimiento Forma Cuadro a cuadro No Lineal Con ayuda de Actionscript

Manejo de la línea de tiempo con Actionscript stop() gotoAndStop() numero de frame 3 nombre del label “test1” gotoAndPlay()

Mejores practicas No utilizar escenas Utilice esquema esclavo-maestro loadMovie() Intente tener el menor numero de frames posibles en la línea principal Técnica de multiniveles Separe la lógica de la presentación

Agenda Introducción a la programación Actionscript historia Bases Evolución Versiones Usos comunes

Introducción a la programación Durante décadas ha evolucionado la forma como se programa la ejecución de una aplicación 1ra, 2da, 3ra y 4a Generación Es importante entender que queremos hacer antes de empezar a codificar(Diagramas) 1ra assembler 2da assembler mejorado 3ra C++ Java, Fortran 4ta Actionscript, groovy

Introducción a la programación Todo Aplicativo de software ha sido codificado Un PC solo procesa, no infiere Pensamiento secuencial Es como bebe, debemos decirle que hacer paso a paso Muchas tareas pueden llegar al mismo punto(variabilidad).

Diagramas de Flujo Son abstracciones que nos permiten definir el flujo de una tarea Elementos: Inicio Entrada Expresión Decisión imprimir Final

Ejercicio Vamos a descomponer las actividades que usted realiza en su al levantarse y prepararse para ir al trabajo. Intente ser lo mas detallista posible Numere las acciones de 1 a N

Solución del profesor inicio Levantarse Desvestirse Prender la ducha Entrar en la ducha Enjabonarse Aplicarse shampu Enjaguarse el cuerpo Retirar el shampu Apagar la ducha Salir de la ducha Secarse Ponerse la ropa Ir a cocina Si hay café entonces ir a 16 sino ir a 17 Tomar café Preparar café Salir de la casa Ir a la avenida Si es mi bus entonces ir a 22 sino ir a 22 Parar el bus Subir al bus fin

Actionscript(Bases) Asignación Tipos de Datos Funciones Donde podemos escribir Actionscript en Flash Múltiples líneas de tiempo

Asignación Recordando el Algebra del colegio x = 5 y = 6 z = x + y Recuerde que una letra o referencia(conjunto de letras) puede guardar un valor(x = 5) asignándolo (=) En el ejemplo anterior el valor de z = 11 porque z= x +y que es z = (5) + (6) En actionscript estas letras o nombre son llamadas variables y estas pueden almacenar valores(y=6) o expresiones(z=x+y)

Sintaxis para declarar/asignar variables var nombrevar var nombrevar = valor var nombrevar:Number = 27 var nombrevar:String = “valor” var altura = 5; var ancho= 4.35; var apellidos = "Moreno García" ;

AS es CaseSensitive Esto implica que un nombre de una referencia o una variable siempre será diferente si se intercalan Mayúsculas y minusculas: miVariable Mivariable MIVARIABLE Son referencias distintas

Tipos de Datos en Actionscript Number: permite guardar información de un numero entero o decimal String: nos permite guardar información de un conjunto de caracteres(“espacio”, “enter”, “luis carlos”) Boolean: permite guardar la información de un valor booleano(falso o verdadero) Otros… Object, Array, null, undefined

Asignación(Ejemplos) Guardar el nombre y la edad del usuario Calcular un numero var nombre = “Luis Carlos Cañaveral” var edad = 27; trace(“mi nombre es ” + nombre) trace(“mi edad es ” + edad ) var x = 5 var y = 6 var z = x+ y trace(“z: ” + z) y = 20

Asignación(Ejemplos II) Valores booleanos var hoyEsViernes = true; var hayFiesta; If(hoyEsViernes == true){ hayFiesta = true; }else{ hayFiesta = false; }

Operadores Asignación(=) x = y = z = 23; Aritméticos: Descripción Símbolo Suma + Incremento ++ Resta - Negación unaria Decremento -- Multiplicación * División / Módulo %

Operadores II Lógicos: Operador Significado == Igual (==) Devuelve verdadero si los operandos son iguales. var1 = 4; var2 = 5 4 == var1 != No igual (!=) Devuelve verdadero si los operandos no son iguales. var1 != 5 > Mayor que (>) Devuelve verdadero si el operando de la izquierda es más grande que el de la derecha. var2 > var1 >= Mayor o igual que (>=) Devuelve verdadero si el operando de la izquierda es más grande o igual que el operando de la derecha. var2 >= var1 var1 >= 4 < Menos que (<) Devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha. var1 < var2 <= Menor o igual que Devuelve verdadero si el operando de la izquierda es menor o igual que el operando de la derecha. var1 <= var2 var2 <= 5 Lógicos:

Operadores III Logicos II: And lógico: expr1 && expr2 Si el resultado es false, devuelve expr1. Si el resultado es true, devuelve expr2. Funcionamiento: Falso && Verdadero -> False. Falso && Falso -> False. Verdadero && Falso -> False. Verdadero && Verdadero -> True. || OR Lógico: expr1 || expr2 Si el resultado es true, devuelve expr1. Si el resultado es false, devuelve expr2. Falso || Verdadero -> True. Falso || Falso -> False. Verdadero || Verdadero -> True. Verdadero || Falso -> True. ! not lógico !expr Si expr es verdadera, devuelve false. Si expr es falso, devuelve true.

Funciones Son utilizadas para encapsular porciones de código Nos permite optimizar nuestro código para no hacer cosas repetitivas Sintaxis: function nombreFuncion (argumento0,...,argumentoN) { sentencias } nombreFuncion();

Funciones(Ejemplos) Decir Hola Calcular el numero cuadrado function hola(){ trace(“Hola luis !!!!”) } function cuadrado(num){ trace(“el cuadro de”+num +” es ”+num*num) }

Donde podemos escribir Actionscript en Flash Fotogramas En los Objetos MovieClips Botones Componentes

Actionscript(usos comunes) Propósito: Controlar Línea de Tiempo Controlar eventos y cambiar las propiedades de un MovieClip’s y Buttons Arrastrar y soltar MovieClip’s Generación de contenido Cargar elementos externos Imágenes, sonidos, otros swf’s

Eventos de los Botones Presionar (Press): Se produce al hacer clic con el ratón sobre el botón, mientras el puntero se encuentra sobre el botón. Liberar (Release): Se produce al soltar el botón del ratón mientras el puntero se encuentra sobre la instancia de botón. Equivalente a onClick. Es el evento por defecto en Flash. Liberar fuera (Release Outside): Se produce, una vez hemos hecho clic sobre el botón, al soltar el botón del ratón fuera de la instancia del botón. Situar sobre objeto (Roll Over): Se produce al desplazar el puntero del ratón sobre el botón. equivalente a onMouseOver. Situar fuera de objeto (Roll Out): Se produce al desplazar el puntero del ratón fuera del botón. Equivalente a onMouseOut

Eventos de los Botones II Arrastrar sobre (Drag Over): Se produce al presionar el botón del ratón mientras el puntero se encuentra sobre el botón, se desplaza fuera del botón y, a continuación, vuelve a desplazarse sobre el botón. Arrastrar fuera (Drag Out): Se produce cuando el botón del ratón se presiona con el puntero sobre el botón y, a continuación, el puntero se desplaza fuera del botón. Presión de tecla (Key Press): Se produce cuando se presiona la tecla especificada en el campo asociado

Eventos de los MovieClip load: al insertar el movieClip en el stage unload: al remover el MovieClip de la stage enterframe: se ejecuta en cada cuadro, si tenemos 20 Frames/seg se ejecutara 20 cada segundo mouseMove: cuando se mueva el mouse mouseDown: cuando el usuario oprima el click izquierdo keyDown: al oprimir una tecla keyUp: al liberar una tecla data: cada vez que el MovieClip pida datos externos y llegue la respuesta

Múltiples líneas de tiempo Una de las características principales de flash es que podemos tener N líneas de tiempo incrustadas dentro de otra

Múltiples líneas de tiempo Se refiere a... Actionscript Línea de tiempo principal de la película _root Variable en la línea de tiempo principal _root.x Variable x en la instancia clip1 en la línea de t. principal _root.clip1.x Variable x en la instancia clip2 dentro de la instancia clip1 en la línea de t. principal _root.clip1.clip2.x Una línea de tiempo por encima de la actual, en la que está el clip de película _parent Variable x en la linea de t. por encima de la actual _parent.x Variable x en la línea de t. que contiene el clip que contiene el actual clip _parent._parent.x Variable x en la instancia clip1 en la actual línea de t. clip1.x variable x en la instancia clip2 que reside dentro de la instancia clip1 en la actual línea de t. clip1.clip2.x Variable x en la línea de t. principal de una película cargada en el nivel 1 _leve1.x Variable x en la línea de t. principal de una película cargada en el nivel 2 _level2.x Línea principal clip1 var x = 10 clip2 var x = 13 var x = 13

Hoja de Vida Multimedia El objetivo del ejercicio es hacer una hoja de vida en flash. El usuario hará click en cada uno de las sub secciones que usted proponga. (perfil, estudios, historia laboral, entre otros) Cada sección estará divida por 15 cuadros, donde el primero al ultimo será la entrada de la sección

Hoja de Vida Multimedia Utilizaremos el siguiente script para los botones: btn_perfil.onRelease = function(){ gotoAndPlay(15); }

Bibliografía Essential Actionscrip 2.0 – O´Reilly Media URI : http://www.programacion.com/tutorial/actionscript/