API de dibujo de Flash CS3, ActionScript 3, clase de forma

• Mayo 20, 2024

Una de mis cosas favoritas para hacer en Flash es dibujar en el escenario. Pero no estoy hablando de dibujar con las herramientas de dibujo Flash, como la herramienta Rectángulo u Óvalo. En este tutorial, aprenderemos los conceptos básicos para dibujar con ActionScript 3 y la API de dibujo.

Dudo en hablar demasiado sobre la programación OOP y las clases en mis tutoriales para principiantes porque simplemente complica las cosas. Pero este tutorial es una excepción. Es perfecto para presentar el concepto básico de las clases OOP. Una clase OOP en ActionScript es solo un montón de información preconstruida, llamada propiedades y métodos. Esta información preconstruida ahorra mucho tiempo al programador al codificar ActionScript porque no es necesario reescribir esta información en cada programa que requiera el uso de una clase específica.

En este tutorial, utilizaremos la clase Shape, su propiedad Graphics predefinida y varios de sus métodos para dibujar un círculo simple en el escenario.

Propiedad de gráficos
método lineStyle
método beginFill
método drawCircle
Método endFill ()

Nuestro primer paso es crear una capa de Acciones en la Línea de tiempo, hacer clic en el Marco 1 y abrir el panel Acciones (Ventana - Acciones). Nuestra primera línea de código creará una nueva variable que mantendrá el círculo.

var myCircle: Shape = nueva Shape ();

En el código anterior, estamos creando una nueva variable y la llamamos "myCircle". Estamos configurando el tipo de datos para esta nueva variable en Forma. Por otro lado, estamos usando el nuevo palabra clave para crear una nueva instancia de la clase Shape.

Si ha utilizado las herramientas de dibujo Flash, sabe que una forma tiene un Trazo y un Relleno. Cuando usa la clase Shape para dibujar, también tiene un Trazo y un Relleno. En las siguientes líneas de código, definiremos el Trazo y el Relleno para nuestro myCircle.

myCircle.graphics.lineStyle (2, 0x000000);

En el código anterior, estamos configurando los valores de Trazo con el método lineStyle de la propiedad Graphics. Estableceremos el valor del ancho del Trazo en píxeles y el color del Trazo con un valor hexadecimal. Arriba, hemos establecido el Trazo de nuestro círculo en un ancho de 2 píxeles y un color negro.

A continuación, llenaremos el círculo. Nuevamente usaremos la propiedad Graphics y su método beginFill. Los dos valores que podemos controlar para el Relleno del círculo son el color y el alfa. Es necesario que establezca un valor para el color y, si no lo hace, Flash se molestará mucho. Pero, establecer el valor alfa es opcional. Configuremos el Relleno para nuestro círculo en rojo. Nuevamente usamos el hexadecimal.

myCircle.graphics.beginFill (0xff0000);

Bien, ahora tenemos que decirle a Flash dónde dibujar el círculo en el escenario. Como era de esperar, debe establecer un valor para los ejes X e Y y el radio del círculo. Haremos esto con el método drawCircle que es parte de la propiedad Graphics.

myCircle.graphics.drawCircle (100, 200, 50);

En esta línea de código, le estamos diciendo a Flash que dibuje nuestro círculo a 100 píxeles de la esquina superior izquierda del escenario a lo largo del eje X y 200 píxeles a lo largo del eje Y. Nuestro círculo tendrá un radio de 50. Cuando establezca estos valores, cuide el orden en que los enumera en el código. Su primer valor será para el eje X y el segundo valor es para el eje Y. El tercero es para el radio. Si le da a Flash estos valores fuera de orden, obtendrá algunos resultados inesperados.

Finalmente, necesitamos agregar nuestro círculo como objeto de visualización secundario a la lista de visualización.

addChild (myCircle);

¡Oh, dejé nuestra única línea de código! Aunque nuestro código funcionará tal cual, hemos omitido el método endFill () que "cerrará" el proceso de dibujo. Esto no es realmente necesario porque se llama a endFill () automáticamente. Pero es una buena práctica agregarlo a su código justo antes de addChild ().

myCircle.graphics.endFill ();

Aquí está el código completo.

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: Animacion Con Botones (Mayo 2024).