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

Taller de informática IIDCMMIng. Luis Carlos Cañaveral SarmientoProgramació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 • Normal • Guía • Guía de movimiento • Mascara • Depende de dos capas(mascara y contenido) • Carpeta

Introducción a Flash • Herramientas • 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 • Interpolaciones • 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() numero de frame 3 nombre del label “test1”

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 • historia • Bases • Actionscript • Evolución • Versiones • Bases • 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)

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é Tomar 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”

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

Asignación(Ejemplos II) • Valores booleanos

Operadores • Asignación(=) x = y = z = 23; • Aritméticos:

Operadores II • Lógicos:

Operadores III • Logicos II:

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

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 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/

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