Taller de informática IIDCMM

Ing. 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

1. inicio

2. Levantarse

3. Desvestirse

4. Prender la ducha

5. Entrar en la ducha

6. Enjabonarse

7. Aplicarse shampu

8. Enjaguarse el cuerpo

9. Retirar el shampu

10. Apagar la ducha

11. Salir de la ducha

12. Secarse

13. Ponerse la ropa

14. Ir a cocina

15. Si hay café entonces ir a 16 sino ir a 17

16. Tomar café

17. Preparar café

18. Tomar café

19. Salir de la casa

20. Ir a la avenida

21. Si es mi bus entonces ir a 22 sino ir a 22

22. Parar el bus

23. Subir al bus

24. 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 = 5var y = 6var z = x+ ytrace(“z: ” + z)

y = 20trace(“z: ” + z)

Asignación(Ejemplos II)

Valores booleanosvar 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 = 54 == 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 >= var1var1 >= 4

<

Menos que (<)Devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.var1 < var2

<=

Menor o igual queDevuelve verdadero si el operando de la izquierda es menor o igual que el operando de la derecha.var1 <= var2var2 <= 5

Operadores III

Logicos II:

&&

And lógico: expr1 && expr2Si 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 || expr2Si el resultado es true, devuelve expr1.Si el resultado es false, devuelve expr2.Funcionamiento: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 tiempoSe 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

clip1var x = 10

var x = 13 clip2

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/