Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contrasea

Registro de Usuario

Anunciar en SoloPhotoshop

Lápiz Flash con Colores y Borrador | Solo Photoshop

Tutorial Macromedia Flash

 

Tutorial por Jmx

Jmx nos trae este tutorial flash donde dibuja y programa una pantalla donde se puede dibujar y borrar con un lápiz y diversos colores.

Hola a todos los estudiosos del fenómeno llamado Flash. En esta ocasión tengo para ustedes un divertido efecto que consiste en dibujar y programar un lápiz, el cual simule la herramienta de Paint. El tutorial también cuenta con su respetivo borrador lo cual lo hace más completo, ya fue mucho rollo mejor ¿comenzamos?.

1.Crear un documento de dimensiones 388*370 píxeles de ancho y alto respectivamente.

2.Insertar un nuevo símbolo (ctrl. + F8) nombrarlo boton_low y dar como comportamiento Botón

3.Una vez instalados en el símbolo dibujar un rectángulo sin relleno y de color de borde #003366, las dimensiones son 14.7 * 11.3 píxeles colocar este en coordenadas X=0.0 y Y=0.0

4.Seleccionar en la línea de tiempo el frame de la Zona activa para aquí insertar un fotograma clave vacío (F7), después dibujar un rectángulo de dimensiones 14.7 * 11.3 píxeles pero este sin borde y de color de relleno #999999. Colocar el dibujo en coordenadas X=0.0 y Y=0.0

5.Crear un segundo símbolo (ctrl. + F8) llamarlo fondo_boton y dar como comportamiento Clip de película

6.En símbolo dibujar un rectángulo pero este debe de llevar tanto borde como relleno, (color del borde #003366, color de relleno #999999) las dimensiones son 14.7 * 11.3 píxeles colocarlo en coordenadas X=0.0 y Y=0.0

7.Crear un tercer símbolo (ctrl. + F8)nombrarlo color y de comportamiento Clip de película

8.En el símbolo dibujar un círculo sin borde y de color de relleno #FF0000, el círculo debe de contar con las siguientes dimensiones 7.0 * 7.0 píxeles y colocarlo en coordenadas X=0.0 y Y=0.0

9.Crear un nuevo símbolo llamarlo agrupar_elementos y de comportamiento Clip de película.

10.En este paso como dice el símbolo se trata de agrupar los símbolos ante creados.

    1. Arrastrar desde la biblioteca cinco veces el símbolo fondo_boton.
    2. La separación entre cada uno de los rectángulos deberá de ser 8 píxeles.
    3. Por lo tanto el rectángulo uno va en coordenadas X=0.0 y Y=0.0, el rectángulo dos va en coordenadas X=19.7 y Y=0.0, el rectángulo tres va en coordenadas X= 39.4 y Y=0.0, el rectángulo cuatro va en coordenadas X= 59.1 y Y=0.0 y el rectángulo cinco va en coordenadas X= 78.8 y Y=0.0.
    4. Al final el total de los rectángulos deberá de quedar en coordenadas X=0.0 y Y=0.0

11.Seleccionar todos los rectángulos y luego en la opción Color seleccionar Tinta y después escribir el siguiente número de color #ECE9D8. que tal el truco.

12.Insertar una segunda capa.

    1. Y en esta arrastrar nuevamente el símbolo fondo_boton.
    2. Escribir como Nombre Instancia puntero0.
    3. Colocarlo en coordenadas X=0.0 y Y=0.0.
    4. En la barra Acciones – Clip de película escribir el siguiente código. onClipEvent (load) {

this._visible = false;
}

1

13.Arrastrar nuevamente el símbolo fondo_boton.

    1. Escribir como Nombre Instancia puntero1.
    2. Colocarlo en coordenadas X=19.7 y Y=0.0.
    3. En la barra Acciones – Clip de película escribir el siguiente código. onClipEvent (load) {

this._visible = false;
}

    1. Arrastrar otras dos veces más el símbolo fondo_boton.
    2. Escribir como Nombre Instancia puntero2., y puntero3.
    3. A cada uno de ello escribir el código correspondiente y colocarlos en las coordenadas X= 39.4 y Y=0.0 y X= 59.1 y Y=0.0.

14.Finalmente arrastrar el último símbolo fondo_boton.

    1. Escribir como Nombre Instancia puntero5.
    2. Este clip de película no posee ningún código, ya que servirá como borrador.

15.Crear un símbolo más (ctrl. + F8), nombrarlo borrador y dar como comportamiento Gráfico. 

16.Dibujar en el símbolo algo parecido a un borrador y colocarlo en coordenadas X=0.0 y Y=0.0.

17.Regresar otra vez al símbolo agrupar­_elementos.

    1. Insertar una capa más.
    2. Arrastrar desde la biblioteca el símbolo color, colocarlo en coordenadas X=3.9 y Y=2.2.
    3. Luego seleccionar Color Tinta y cambiar el color a #000000.

18.Arrastrar nuevamente el símbolo color, colocarlo en Colocarlo en coordenadas X=23.6 y Y=2.2.

    1. Seleccionar Color Tinta y cambiar el color a #0000FF.
    2. Arrastrar dos veces más el símbolo color y colocarlo al centro de cada uno de los rectángulos.
    3. Repitiendo el procedimiento de seleccionar Color Tinta cambiar el color a #FFFF00 y #FF0000 respectivamente.

19.En el último rectángulo arrastrar desde la biblioteca el símbolo borrador, y colocarlo en coordenadas X=76.3 y Y=-1.8.

20.No se desespere querido fanático solo faltan unos 15 pasos más y terminamos con el tutorial jajajajajaja.

    1. Por lo pronto insertar otra capa y ocultar las Capas 2 y 3.
    2. Arrastrar desde la biblioteca el símbolo boton_lown.
    3. Colocarlo en coordenadas X=0.0 y Y=0.0.
    4. Y en el panel Acciones – Botón escribir el siguiente código.

on (release) {
_root.dibujo.lineStyle(3, 0x000000, 100);
for (var pun = 0; pun<5; pun++) {
this["puntero"+pun]._visible = false;
}
puntero0._visible = true;
}

21.Arrastrar desde la biblioteca el símbolo boton_low.

    1. Colocarlo en coordenadas X=19.7 y Y=0.0
    2. Y en el panel Acciones – Botón escribir el siguiente código.

on (release) {
_root.dibujo.lineStyle(3, 0x0000FF, 100);
for (var pun = 0; pun<5; pun++) {
this["puntero"+pun]._visible = false;
}
puntero1._visible = true;
}

    1. Arrastrar dos veces más el símbolo boton_low.
    2. El símbolo que va en la posición tres lleva como código.

on (release) {
_root.dibujo.lineStyle(3, 0xFFFF00, 100);
for (var pun = 0; pun<5; pun++) {
this["puntero"+pun]._visible = false;
}
puntero2._visible = true;
}

    1. El símbolo que va en la posición cuatro lleva como código.

on (release) {
_root.dibujo.lineStyle(3, 0xFF0000, 100);
for (var pun = 0; pun<5; pun++) {
this["puntero"+pun]._visible = false;
}
puntero3._visible = true;
}

22.Insertar por última vez el símbolo boton_low y colocarlo en coordenadas X=78.8 y Y=0.0.

    1. Reducir el Color Alfa a 0%
    2. En el panel Acciones – Botón escribir el siguiente código.

on (release) {
_root.dibujo.lineStyle(8, 0x235BD9, 100);
for (var pun = 0; pun<5; pun++) {
this["puntero"+pun]._visible = false;
}
puntero4._visible = true;
}

    1. El color 0x235BD9 es el que servirá como borrador.

23.Crear un nuevo símbolo (ctrl. + F8) nombrarlo lapiz y de comportamiento Clip de película.

24.Aquí dibujar algo parecido a un lápiz y colocar la punta de este lo más cercano de la marca (coordenadas X=0.0 y Y=0.0).

25.Crear un símbolo (ctrl. + F8) nombrarlo compu y dar como comportamiento Gráfico.

26.En este símbolo dibujar algo que sirva como espacio para dibujar una vez publicado el documento. La pantalla del monitor servirá para el propósito que se busca.

    1. El color de la pantalla tendrá que ser #235BD9

27.Crear otro símbolo (ctrl. + F8) llamarlo pantalla y de comportamiento Botón.

28.Seccionar el estado de Zona activa en la línea de tiempo y en este insertar un fotograma clave vacío (F7).

    1. Dibujar exactamente el espacio que cubre la pantalla del monitor.
    2. Colocarlo en coordenadas X=0.0 y Y=0.0.

29.Regresar a la Escena

    1. A la primera capa nombrarla monitor
    2. Arrastrar desde la biblioteca el símbolo compu.
    3. Colocarlo en coordenadas X=0.0 y Y=0.0.

30.Insertar una segunda capa y nombrarla bot_pantalla.

    1. Arrastrar de la biblioteca el símbolo pantalla.
    2. Escribir como Nombre Instancia bot_lapiz.
    3. Colocar el símbolo en coordenadas X=54.0 y Y=39.0

31.Insertar una tercera capa nombrarla colores

    1. Arrastrar el símbolo agrupar_elementos.
    2. Colocarlo en coordenadas X=197.0 y Y=322.5.

32.Por último insertar una cuarta capa llamarla acciones.

    1. Seleccionar el fotograma de esta capa.
    2. Abrir el panel de Acciones – Fotograma.
    3. Escribir el siguiente código.

this.createEmptyMovieClip("dibujo", 1);
attachMovie("lapiz", "lapiz", 2);
bot_lapiz.onRollOver = function() {
lapiz.onMouseMove = function() {
this._x = _root._xmouse;
this._y = _root._ymouse;
};
Mouse.hide();
};
bot_lapiz.onPress = function() {
dibujo.moveTo(_root._xmouse, _root._ymouse);
_root.onMouseMove = function() {
dibujo.lineTo(_root._xmouse, _root._ymouse);
};
};
bot_lapiz.onRelease = function() {
delete _root.onMouseMove;
};
bot_lapiz.onReleaseOutside = function() {
delete _root.onMouseMove;
};
Con esto queda concluido el tutorial, el trabajo es un poco largo y laborioso pero vale la pene intentarlo. Sigue visitando este espacio es tuyo, si deseas publicar algún tutorial solamente hazlo saber.

P.D. Presionar ctrl. + enter para ver el final de la prelícuala, se pueden añadir tantos colores como se desee solamente con agregar unas cuantas líneas de código. Disfruta el efecto y hasta pronto. Felices fiestas de Diciembre 2006

Descarga el archivo fla de este tutorial.

Comentarios de Lápiz Flash con Colores y Borrador | Solo Photoshop

↑ Tutorial

  • snooproy

    snooproy

    2006-12-13 17:41

    Wow increible l,,lM
  • CsarGt

    CsarGt

    2006-12-13 19:15

    Muy bueno, ¡¡¡ felicidades. !!!!M
  • dierivas

    dierivas

    2006-12-14 02:09

    sos un genioM
  • evuxipeluxi

    evuxipeluxi

    2006-12-14 05:58

    hay un prblema si t pones a borrar y te sales de tu dibujo puedes borar todo el recuadro no se si me entendeis vamos k borras todo¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡M
  • TRUMAN_1982

    TRUMAN_1982

    2006-12-14 09:48

    muy bueno ...me gusta, pero la imagen del paso 19 no sale:PM
  • novatoxp

    novatoxp

    2006-12-15 11:02

    kedaria mejor el lapiz hacia la derechaM
  • mehp02

    mehp02

    2006-12-18 01:25

    mm tengo problemas con las acciones =S es la primera ves ke hago un flash y tal ves puse algo malM
  • mehp02

    mehp02

    2006-12-18 01:25

    mm tengo problemas con las acciones =S es la primera ves ke hago un flash y tal ves puse algo malM
  • elyon

    elyon

    2006-12-18 14:31

    espemuy bueno el tuto Felicitaciones Genio!!!!!!:)M
  • nimbo

    nimbo

    2006-12-19 08:53

    que bien! M
  • gus_19

    gus_19

    2006-12-25 16:33

    Muy Bueno!!! Es Impresionante Lo q estoy aprendiendo de este Sitio!! Gracias!! por sus Tutos!! Felices Fiestas!!!!M
  • marjorie davila

    marjorie davila

    2007-01-17 11:36

    Esta bien, te felicito, pero un detalle que te fallo, es que si borras es solo el contenido de adentro y borra hasta el monitor, eso no debe de suceder. Pero esta excelente, te felicito, porque no sabia como hacer eso, solo es el unico detalle que tienes, felicidadesM
  • AAR

    AAR

    2007-01-29 20:46

    Pude borrar el monitor... U_U Buen tuto felicidades ;)M
  • pendeehaw

    pendeehaw

    2007-02-03 19:37

    si te felicito ta re wueno me ghustoM
  • Marco Javier

    Marco Javier

    2007-02-07 14:40

    muy bueno y muy bien esplicado, felicidades y sigan adelanteM
  • 6741545

    6741545

    2007-03-10 13:59

    Ah, si genial eh....M
  • CorpseOfSteel

    CorpseOfSteel

    2007-03-12 06:53

    Muy Bueno, me e registrado solo para poder leer esto xD. Lo unico malo es que tambien puedes pintar y borrar fuera de la pantalla, pero weno da igual. Saludos!M
  • mapassja

    mapassja

    2007-03-19 12:57

    yo hice sola la pantalla y todos los demas elementos y no queria servir hasta que copie el movieclip de lapiz del archivo original al archivo q yo hice..alguien sabria porque? mapassja@hotmail.comM
  • naiwell

    naiwell

    2007-04-15 22:50

    que no me sale y no se xq, me sale no se que error de sintaxis y lo he revisado tropecientas veces... que sucede? x cierto ya que estamos mi pantalla está más xula xDM
  • Frdry

    Frdry

    2007-08-06 06:08

    muy bueno, pero hay q limitar la zona de accion, pq sino puedes pintar por todo el archivo.M
  • Alaá

    Alaá

    2007-11-20 08:30

    hay un tuto para poner un un obstaculo en un juego flash por ejemplo las paredes del comecocos????M
  • Ivan Romero

    Ivan Romero

    2007-12-15 14:18

    ÈS MAGNIFICO MUCHAS GRACIAS. IVANM
  • Phantomex58

    Phantomex58

    2008-01-22 18:13

    jeje estoy de acuerdo con frdryM
  • kaross

    kaross

    2008-07-25 11:32

    me encanto esta ultra waw felicidadesM
  • sunna

    sunna

    2008-08-09 01:46

    me gusto solo que me gustarian mas colores y una opcion para que lo dibujado pueda ser impreso, pero aun asi super tutorial =)M
  • Animax_Trojan2007

    Animax_Trojan2007

    2008-09-23 23:10

    Es un excelente tutorial, te esmeraste muchisimo bro. Gracias por tu aportacion.M
  • diego0990

    diego0990

    2009-01-15 10:58

    Asu muy costoso pero xvrM

↑ Tutorial