INTRODUCCIÓN

El API de dibujo de Flash es  un conjunto de funciones que se aplican a los clips de película  que nos permite dibujar trazos y rellenos.

 

1.- ANTES DE DIBUJAR CREAMOS EL CLIP VACÍO

Para dibujar una línea primero creamos un clip de película vacío. Hasta ahora hemos creado clips de película dibujándolos en el escenario.

 

La acción para dibujar un clip de pleícula vacío es:

createEmptyMovieClip("el nobre de la línea",10);

Esta función tiene dos parámetros: el primero es el nombre del clip y el segundo es el nivel de profundidad.  

Lo situaremos también en el escenario en la esquina superior izquierda.

Ejemplo:

createEmptyMovieClip("linea1",10);

linea1._x = 0;
linea1._y = 0;

 


2.- DIBUJAMOS LA LÍNEA

Primero especificaremos el estilo de la linea

linea1.lineStyle(grosor, color hexadecimal, nivel alpha);

Ahora situamos dónde empezará a dibujarse dentro del clip que hemos creado.

linea1.moveTo(0, 0);

Una vez que sabemos dónde empezará, le decimos hasta dónde se dibujará:

linea1.lineTo(200, 100);

 

Nota: la función lineStyle teine más parámetros pero para empezar ya nos valen con estos.

 

Cómo primera práctica seria conveniente experimentar con estas funciones para crear diferentes figuras geométricas. También podéis experimentar aplicando bucles o temporizadores para crear algunos efectos.

 



Visitas: 3054

Respuestas a esta discusión

Sí se puede hacer tal como lo has indicado. Además puedes usar también la función intervañl

Alfredo Rodrigálvarez dijo:

Si creo un clip que se llame cuadrado ¿Le puedo aplicar funciones de clip, como?:

onClipEvent(enterFrame) {
_root.cuadrado._rotation=_root.cuadrado._rotation+45;
}

Si quiero rotarlo, por ejemplo.

Adjunto mi trabajillo.

 

 

Muchas gracias, Roger

 

A ver si tenemos un poco de tiempo y nos ponemos a la faena. Me gusta la ide a de compartir los códigos. De esta manera, podremos avanzar con mayor seguridad.

 

Hasta pronto, Emilia

Os pego mi código.

Ya os digo que lo primero no lo entiendo y creo que hay cosas que no sirven para nada, pero es con el único que me valía para que hiciesen algo los triángulos.

 

stop();

_root.capa=1;
var intervalo = setInterval(segundos, 500);
function segundos () {
    _root.capa++;
    _root.bola.duplicateMovieClip ("bola" +_root.capa, _root.capa);
        _root["bola" + _root.capa]._x = random (500);
        _root["bola" + _root.capa]._y = random (500);
        _root.tamanyo = random (90) + 5;
        _root["bola" +_root.capa]._xscale = _root.tamanyo;
       
        _root["bola" +_root.capa]._yscale = _root.tamanyo;
        _root ["bola" +_root.capa]. gotoAndStop (random (4) + 1);
        if (_root.capa >20000) {_root.capa=1}
        if(_root.capa>100) {clearInterval(intervalo)}
}




createEmptyMovieClip("linea1",10);
//Lo situaremos también en el escenario en la esquina superior izquierda.ponemos dónde está colocado el eje de coordenadas antes de empezar.
linea1._x = 0;
linea1._y = 0;
linea1.lineStyle(7, 111111, 100);
//Ahora situamos dónde empezará a dibujarse dentro del clip que hemos creado.
linea1.moveTo(100,100);
linea1.lineTo(100, 200);
linea1.lineTo(200, 200);
linea1.lineTo(100, 100);
createEmptyMovieClip("linea2",9);
linea2._x = 0;
linea2._y = 0;
linea2.lineStyle(7, 0xDDEA7D, 100);
linea2.moveTo(200,200);
linea2.lineTo(200, 300);
linea2.lineTo(300, 300);
linea2.lineTo(200, 200);
createEmptyMovieClip("linea3",8);
linea3._x = 0;
linea3._y = 0;
linea3.lineStyle(7, 0x444444, 100);
linea3.moveTo(300,300);
linea3.lineTo(300, 400);
linea3.lineTo(400, 400);
linea3.lineTo(300, 300);


createEmptyMovieClip("linea4",7);
//Lo situaremos también en el escenario en la esquina superior izquierda.ponemos dónde está colocado el eje de coordenadas antes de empezar.
linea4._x = 0;
linea4._y = 0;
linea4.lineStyle(7, 0x2a38d7, 100);
//Ahora situamos dónde empezará a dibujarse dentro del clip que hemos creado.
linea4.moveTo(700,100);
linea4.lineTo(700, 200);
linea4.lineTo(600, 200);
linea4.lineTo(700, 100);
createEmptyMovieClip("linea6",6);
linea6._x = 0;
linea6._y = 0;
linea6.lineStyle(7, 0x901414, 100);
linea6.moveTo(600,200);
linea6.lineTo(600, 300);
linea6.lineTo(500, 300);
linea6.lineTo(600, 200);
createEmptyMovieClip("linea5", 4);
linea5._x = 0;
linea5._y = 0;
linea5.lineStyle(7, 0x80BFFF, 100);
linea5.moveTo(500,300);
linea5.lineTo(500, 400);
linea5.lineTo(400, 400);
linea5.lineTo(500, 300);

Hola Nani si no lo entiendes eso quiere decir que no lo has hecho tú y sii hay cosas que no sirven para nada entones el que no entiendo nada soy yo. Intenta hacer la actividad propuesta en el punto 3 del tutorial porque te evitará mucho trabajo.

Roger, lo único que no entiendo es la primera parte del código, que es lo que hace que desaparezcan los triángulos, o sea, esto:

_root.capa=1;
var intervalo = setInterval(segundos, 500);
function segundos () {
    _root.capa++;
    _root.bola.duplicateMovieClip ("bola" +_root.capa, _root.capa);
        _root["bola" + _root.capa]._x = random (500);
        _root["bola" + _root.capa]._y = random (500);
        _root.tamanyo = random (90) + 5;
        _root["bola" +_root.capa]._xscale = _root.tamanyo;
       
        _root["bola" +_root.capa]._yscale = _root.tamanyo;
        _root ["bola" +_root.capa]. gotoAndStop (random (4) + 1);
        if (_root.capa >20000) {_root.capa=1}
        if(_root.capa>100) {clearInterval(intervalo)}
}

 

El resto sí lo he hecho yo, y he variado varias veces el tamaño del escenario y las coordenadas de los triángulos para conseguir ese dibujo.

Bueno, me ha salido esto, pero tuve que obviar el "tamaño".

Archivos adjuntos

Código de la estrella.

function estrella (n, grosor, rotacion, coorx, coory, color) {
   
    createEmptyMovieClip ("estrella"+n, n);
   
    _root["estrella"+n]._x = coorx;
    _root["estrella"+n]._y = coory;
    _root["estrella"+n]._rotation =rotacion;
    _root["estrella"+n].lineStyle (grosor, color, 100);
    _root["estrella"+n].moveTo(350,50);
    _root["estrella"+n].lineTo(400,250);
    _root["estrella"+n].lineTo(600,300);
    _root["estrella"+n].lineTo(400, 345);
    _root["estrella"+n].lineTo(500, 550);
    _root["estrella"+n].lineTo(350,425);
    _root["estrella"+n].lineTo(200,550);
    _root["estrella"+n].lineTo(280, 340);
    _root["estrella"+n].lineTo(100, 300);
    _root["estrella"+n].lineTo(280, 250);
    _root["estrella"+n].lineTo(350, 50);
   
   
}   


estrella (1, 10, 0, 0, 0, 0xff0000);

 

Primero la hice a mano y añadí guías, luego fui tomando las coordenadas de las guías.

Hola tod@s,

 

Os dejo un nuevo ejercicio, de la primera parte del tutorial y los códigos.

 

Letra E

createEmptyMovieClip("linea1",10);

linea1._x = 100;

linea1._y = 100;

linea1.lineStyle(20, 0x33CC00, 100);

linea1.moveTo(0,0);
linea1.lineTo(0, 200);
linea1.lineTo(100, 200);
linea1.lineTo(0, 200);
linea1.lineTo(0, 100);
linea1.lineTo(100, 100);
linea1.lineTo(0, 100);
linea1.lineTo(0, 100);
linea1.lineTo(0, 0);
linea1.lineTo(100,0);

 

Letra M


linea1._x = 100;
linea1._y = 100;

linea1.lineStyle(20, 0x0000FF, 100);

linea1.moveTo(200,0);
linea1.lineTo(200, 200);
linea1.lineTo(200,0);
linea1.lineTo(300,75);
linea1.lineTo(300,75);
linea1.lineTo(400,0);
linea1.lineTo(400,200);

 

Letra I (primera)

 


linea1._x = 100;

linea1._y = 100;

linea1.lineStyle(20, 0xFF0000, 100);

linea1.moveTo(500,0);
linea1.lineTo(500, 200);

Letra L

linea1._x = 100;

linea1._y = 100;

linea1.lineStyle(20, 0xFFFF00, 100);

linea1.moveTo(600,0);
linea1.lineTo(600, 200);
linea1.lineTo(700, 200);

 

 

Letra I (segunda)

 

linea1._x = 100;

linea1._y = 100;

linea1.lineStyle(20, 0x990099, 100);

linea1.moveTo(800,0);
linea1.lineTo(800, 200);

 

Letra A


stop ();

linea1._x = 100;

linea1._y = 100;

linea1.lineStyle(20, 0xFE72FE, 100);

linea1.moveTo(900,200);
linea1.lineTo(1000, 0);
linea1.lineTo(1100, 200);
linea1.lineTo(1050, 100);
linea1.lineTo(950, 100);

 

 

 

 

 

 

Archivos adjuntos

Cómo haces para que salgan poco a poco? Distribuyendo las letras en la línea de tiempo?

Gracias.

Hola Nani,

 

Sí, he creado un fotograma para cada letra, separados en 20.

 

Espero haberte ayudado.

 

Hasta pronto, Emilia

Hola a tod@s,

 

Envio ahora, el ejercicio del apartado 3.

 

Hasta pronto, Emilia.

 

El código esté en dos fotogramas, uno al lado del otro:

 

Fotograma 1

 

function triangle (n, tamanyo, grosor, rotacion, coorx, coory, color) {
  
    createEmptyMovieClip ("triangle"+n, n);
  
    _root["triangle"+n]._x = coorx;
    _root["triangle"+n]._y = coory;
    _root["triangle"+n]._rotation =rotacion;
    _root["triangle"+n].lineStyle (grosor, color, 100);
    _root["triangle"+n].moveTo(0,0);
    _root["triangle"+n].lineTo(0,tamanyo);
    _root["triangle"+n].lineTo(tamanyo,tamanyo);
    _root["triangle"+n].lineTo(0,0);
        
  
}  

triangle(1,  50, 10, 135, 215,  80, "0x006600");
triangle(2, 150, 10, 135, 280,  87, "0x33CC00");
triangle(3, 250, 10, 135, 350,  96, "0x66FF00");

triangle(4, 150, 10, 135, 285, 300, "0x006600");
triangle(5, 250, 10, 135, 360, 326, "0x33CC00");
triangle(6, 350, 10, 135, 431, 353, "0x66FF00");
triangle(7,  50, 10, 135, 215, 279, "0x006633");

 

Fotograma 2

 

stop ();

createEmptyMovieClip("linea1",10);

linea1._x = 100;

linea1._y = 358;

linea1.lineStyle(7, 0x691B01, 100);

linea1.moveTo(0,0);

linea1.lineTo(0, 150);

linea1.lineTo(150, 150)

linea1.lineTo(150, 0);

linea1.lineTo(0, 0);

Archivos adjuntos

Estoy probando tu ejercicio y ponga el tamaño que ponga el escenario, se me desborda, sólo me aparecen 2 letras y luego tengo que agrandarlo para que se vea el texto entero.

¿Es así?

Gracias.

RSS

© 2024   Creado por roger.   Tecnología de

Emblemas  |  Reportar un problema  |  Términos de servicio