Documentación de Flash CS3

Programación con ActionScript 3.0 > Utilización de la geometría > Ejemplo: aplicación de una transformación de matriz a un objeto de visualización

Ejemplo: aplicación de una transformación de matriz a un objeto de visualización

La aplicación de ejemplo DisplayObjectTransformer muestra varias funciones de la utilización de la clase Matrix para transformar un objeto de visualización, entre las que se incluyen:

• Girar el objeto de visualización
• Ajustar la escala del objeto de visualización
• Trasladar el objeto de visualización (cambiar su posición)
• Sesgar el objeto de visualización

La aplicación proporciona una interfaz para ajustar los parámetros de la transformación de matriz del modo siguiente:

Cuando el usuario hace clic en el botón Transformar, la aplicación aplica la transformación correspondiente.

El objeto de visualización original, y el mismo objeto con una rotación de -45˚ y un ajuste de escala del 50%.

Para obtener los archivos de aplicación de este ejemplo, vaya a www.adobe.com/go/learn_programmingAS3samples_flash_es. Los archivos de la aplicación DisplayObjectTransformer se encuentran en la carpeta Samples/DisplayObjectTransformer. La aplicación consta de los siguientes archivos:

Subtemas

Definición de la clase MatrixTransformer

La clase MatrixTransformer incluye métodos estáticos que aplican transformaciones geométricas de objetos Matrix.

El método transform()

El método transform() incluye parámetros para cada uno de los valores siguientes:

• sourceMatrix: matriz de entrada que es transformada por el método.
• xScale e yScale: factor de escala x e y.
• dx y dy: magnitudes de traslación x e y, representadas en píxeles.
• rotation: magnitud de rotación, expresada en grados.
• skew: factor de sesgo, como porcentaje.
• skewType: dirección del sesgo, ya sea "right" (derecha) o "left" (izquierda).

El valor devuelto es la matriz resultante.

El método transform() llama a los siguientes métodos estáticos de la clase:

• skew()
• scale()
• translate()
• rotate()

Cada uno devuelve la matriz de origen con la transformación aplicada.

El método skew()

El método skew() sesga la matiz ajustando las propiedades b y c de la misma. Un parámetro opcional, unit, determina las unidades que se utilizan para definir el ángulo de sesgo y, si es necesario, el método convierte el valor angle en radianes:

if (unit == "degrees") 
{
    angle = Math.PI * 2 * angle / 360;
}
if (unit == "gradients")
{
    angle = Math.PI * 2 * angle / 100;
}

Se crea y se ajusta un objeto skewMatrix para aplicar la transformación de sesgo. Inicialmente, es la matriz de identidad:

var skewMatrix:Matrix = new Matrix();

El parámetro skewSide determina el lado en el que se aplica el sesgo. Si se establece en "right", el código siguiente establece la propiedad b de la matriz:

skewMatrix.b = Math.tan(angle);

De lo contrario, el lado inferior se sesga ajustando la propiedad c de la matriz, del siguiente modo:

skewMatrix.c = Math.tan(angle);

El sesgo resultante se aplica a la matriz existente mediante la concatenación de las dos matrices, como se muestra en el ejemplo siguiente:

sourceMatrix.concat(skewMatrix);
return sourceMatrix;

El método scale()

Como se muestra en el ejemplo, el método scale() ajusta primero el factor de escala si se proporciona como porcentaje, y luego utiliza el método scale() del objeto de matriz:

if (percent)
{
    xScale = xScale / 100;
    yScale = yScale / 100;
}
sourceMatrix.scale(xScale, yScale);
return sourceMatrix;

El método translate()

El método translate() aplica simplemente los factores de traslación dx y dy llamando al método translate() del objeto de matriz:

sourceMatrix.translate(dx, dy);
return sourceMatrix;

El método rotate()

El método rotate() convierte el factor de rotación de entrada en radianes (si se proporciona en grados o gradientes), y luego llama al método rotate() del objeto de matriz:

if (unit == "degrees")
{
    angle = Math.PI * 2 * angle / 360;
}
if (unit == "gradients")
{
    angle = Math.PI * 2 * angle / 100;
}
sourceMatrix.rotate(angle);
return sourceMatrix;

Llamada al método MatrixTransformer.transform() desde la aplicación

La aplicación contiene una interfaz de usuario para obtener los parámetros de transformación del usuario. A continuación, pasa dichos parámetros, junto con la propiedad matrix de la propiedad transform del objeto de visualización, al método Matrix.transform():

tempMatrix = MatrixTransformer.transform(tempMatrix, 
                                         xScaleSlider.value, 
                                         yScaleSlider.value,
                                         dxSlider.value, 
                                         dySlider.value,
                                         rotationSlider.value,
                                         skewSlider.value, 
                                         skewSide );

La aplicación aplica el valor devuelto a la propiedad matrix de la propiedad transform del objeto de visualización, con lo que se activa la transformación:

img.content.transform.matrix = tempMatrix;

Flash CS3

Enviarme un mensaje de correo electrónico cuando se añadan comentarios a esta página | Informe de comentarios

Página actual: http://livedocs.adobe.com/flash/9.0_es/main/00000189.html

Añadir comentario