COMPLEMENTO

Composición:

La Composición de transformaciones 2D es una serie de combinaciones de operaciones básicas, para generar una operación compleja que involucre cambios de posición, orientación y escala simultáneos sobre un objeto. Esta concatenación se realiza mediante un producto de matrices, cada una de las cuales es la matriz de definición de la correspondiente operación básica. Las aplicaciones utilizan movimientos más complejos que se pueden conseguir combinando las transformaciones básicas, mencionadas.En general, es el conjunto de pasos, transformaciones, movimientos, efectos, aplicaciones y operaciones simples y complejas que se realizan encadenadamente para modificar una imagen, desde el principio hasta los resultados esperados.

Traslación:

Es el movimiento en línea recta de un objeto de una posición a otra. Es deslizar o mover una imagen de un lugar a otro diferente. Es el cambio de ciertas coordenadas a otras, trasladando únicamente los vértices que la componen a otras coordenadas donde se vuelven a unirse los vértices (sobre X y Y).



Rotación:

Es girar o voltear una figura, para lograrlo con respecto a un punto, 1ero se determina un cierto grado de ángulo que debe ser permanente sobre todos los puntos de la figura o se fijan todos relativamente con respecto a este.

Escalación:

Es ampliar o reducir una imagen con respecto a un patrón de medida, alterando el tamaño original y modificando la distancia de los puntos sobre los que se aplica, respecto a un punto de referencia.
Para definir esta operación son necesarios dos factores de escala, Sx y Sy, según las direcciones x e y, y un punto o eje de referencia. Tiene el efecto zoom.

Sesgado:

El efecto de su aplicación, es como estirar una figura por un lado. Con el sesgado se puede lograr la isometría (verlo desde un punto) .

14 DE OCTUBRE

Se dialogó el trabajo final para el parcial 2: el juego de la culebrita (Snacker). Se dieron todas las características y especificaciones del trabajo así como puntos clave del código. Como debe funcionar, que debe hacer, como controlar ciertos puntos, etc.

13 DE OCTUBRE

En la clase de un módulo, el maestro nos señaló la constelación que le tocaba a cada uno de nosotros para crearlo con actionScrip2.0 en Flash. En la clase se empezó el trabajo. (me tocó Centauro)
Consistía en dibujar todo únicamente con código. En primer lugar había que dibujar los circulitos tomando en cuenta los estilos y tamaños diferentes de cada uno. Luego hacer que se trazara una línea de punto a punto únicamente, es decir, que si se le daba clik fuera, no trace ninguna línea.
La fecha de entrega quedó para el viernes de la misma semana.

12 DE OCTUBRE

Creamos instrucciones para dibujar un triángulo como puntero


this.createEmptyMovieClip("cursor", this.getNextHighestDepth());
cursor.beginFill(0x3300FF, 70);
cursor.lineStyle(3, 0x00FF33, 70);
cursor.lineTo(60,0);
cursor.lineTo(0,60);
cursor.lineTo(0,0);
cursor.endFill();

Mouse.hide(); //ESCONDE EL PUNTERO



Luego creamos otra variable para que se mueva en las direcciones de coordenadas de X,Y donde se mueva el puntero. Es decir, para posicionarlo o moverlo en la dirección del mouse con: onMouseMove



var mouseListener:Object=new Object();
mouseListener.onMouseMove=function(){
cursor._x=_xmouse;//asiga x del mouse
cursor._y=_ymouse;
updateAfterEvent();
};
Mouse.addListener(mouseListener);



Realizamos otro ejemplo para utilizar la operación de escalación para aumentar el tamaño en X,Y con: onMouseDown


mouseListener.onMouseDown=function(){
cursor._xscale+=10;
cursor._yscale+=10;
cursor._alpha=20;
updateAfterEvent();
};
Mouse.addListener(mouseListener);

NOTA: ALPHA define la transparencia, degrada la imagen


De igual manera realizamos otro con: onMouseUp que realiza la función cuando se suelta el botón del mouse.


mouseListener.onMouseUp=function(){
cursor._xscale=100;
cursor._yscale=100;
cursor._alpha=100;
updateAfterEvent();
};
Mouse.addListener(mouseListener);


Seguidamente pusimos otra instrucción para que al dar clik en cualquier área dibuje una línea consecutiva al siguiente. Le agregamos lo siguiente:

Primero creamos una nueva película para el trazo así como el estilo:


this.createEmptyMovieClip("trazo", this.getNextHighestDepth());
trazo.beginFill(0x3300FF, 70);
trazo.lineStyle(3, 0x00FF33, 70);
trazo.endFill();


Luego definimos la instrucción que trace la línea con: onMouseDown que se ejecuta cuando se presiona el mouse.


mouseListener.onMouseDown=function(){
cursor.lineStyle(3, 0x0000FF, 100);
trazo.lineTo( _xmouse, _ymouse);
updateAfterEvent();
};
Mouse.addListener(mouseListener);

7 DE OCTUBRE

Primeramente creamos un cuadrado con código en Flash

//CREAMOS UN OBJETO MOVIECLIP
this.createEmptyMovieClip("square_mc", this.getNextHighestDepth());
//THIS: DEFINE EL NIVEL QUE SE ESTA UTILIZANDO
// COMO SE RELLENA EL OBJETO
square_mc.beginFill(0xFF0000); //COLOR
//SQUARE_CM= Nombre de la pelicula
//POSICION (PUNTO DE INICIO) (X,Y)
square_mc.moveTo(50,50);
square_mc.lineTo(100,50);
square_mc.lineTo(100,100);
square_mc.lineTo(50,100);
square_mc.lineTo(50,50);
//FINALIZA EL RELLENO
square_mc.endFill();

el resultado es un cuadrado rojo de 50 x 50

Posteriormente creamos un triángulo

this.createEmptyMovieClip("triangle_mc", 1); <----OJO
// COMO SE RELLENA EL OBJETO
triangle_mc.beginFill(0x0000FF, 30); //30 ES ALFA (TRANSPARENCIA)
triangle_mc.lineStyle(5, OxFF00FF, 100);
triangle_mc.moveTo(200,200);
triangle_mc.lineTo(300,300);
triangle_mc.lineTo(100,300);
triangle_mc.lineTo(200,200);
triangle_mc.endFill();

6 DE OCTUBRE

Complementamos los conceptos de traslación, escalación y rotación con actionScript2.0 en Flash a través de un ejemplo para visualizar la implementación relevante de cada concepto.

PRÁCTICAS 5 DE OCTUBRE

---PRIMERA PRACTICA---

En nuestra primera práctica con Flash dibujamos un círculo de nuestro agrado e implementamos los conceptos de fotograma, fotograma clave así como la traslación y rotación.
Primeramente creamos aproximadamente 10 fotogramas clave con una posición diferente, una por una para crear una traslación…, realmente fue laborioso.
Para comparar utilizamos la interpolación para cierto tiempo y con ello nos ahorramos trabajo de traslación.

Posteriormente dibujamos una casita y lo transformamos a símbolo, especificando el punto pivote deseado. Dándole click a la herramienta de transformación libre (Q)(un cuadrito con puntitos alrededor), seleccionamos el dibujo y le damos clik a “convertir en símbolo”, le escribimos un nombre y seleccionamos el punto de pivote. De igual manera le agregamos una interpolación de cierto tiempo de traslación y un efecto (girar).
Se hizo dos ejemplos de pivote, primero teniendo como punto pivote el centro de la casita y el segundo el punto derecho de la base de la casita.

Por último a la misma casita se le aplicó el sesgado, dándole otra vez a la herramienta de transformación libre, le damos clik y arrastramos con el mouse (como estirándolo) a la figurita que se parece a dos flechitas.

29 DE SEPTIEMBRE

El maestro complementó los temas ya expuestos y se despejaron dudas al respecto. De la misma forma se ejemplificaron.

28 DE SEPTIEMBRE

Se expusieron los temas que se repartieron. Cada equipo pasó a exponer el tema que le correspondía sus diapositivas correspondientes. De igual manera el maesro complementó los temas.

1.- Composición de Transformaciones Bidimensionales.
2.- Estalación, rotación, traslación y sesgado
3.- Punto pivote
4.- Punto Fijo

CLASES: 23 DE SEPTIEMBRE

Se formaron equipos y se les asignó un tema específico para que se investigara y se preparara como tema de exposición.
A mi equipop le tocó el número 1 y el tema de "Composición de Transformaciones Bidimensionales"