Inicio > Actionscript > CoolButton AS3

CoolButton AS3

Jueves, 10 de julio de 2008 Nessy Dejar un comentario Ir a comentarios

Botón atractivo en código AS3

Todo componente armado en modo diseño y con el IDE de Flash se vuelve tedioso en mantener y entender, incluso si lo hizo uno mismo;

Por ejemplo, tomen un trabajo en Flash de un diseñador gráfico que intenta programar en AS y busquen un código en la libreria del IDE armado con carpeta según como lo hizo el autor en el MovieClip, "Symbol_198...", y todo eso sin provocar modificaciones no deseables. No gracias, pero bueno si hay que hacerlo...

El programador ActionScript 2/3 debe volcar su código en archivos .AS y utilizar en el caso de AS2 la programación orientado a objeto; El IDE recomendable para este caso es el FlashDevelop (http://www.flashdevelop.org/);
En todo caso al programador Flash ActionScript 3 le recomiendo abandonar el IDE y utilizar el Flex Builder 3 la opción de ActionScript Project;

Pequeña anectodata sobre IDE de Flash:
Recuerdo que una vez fui a una entrevista para el puesto de programador ActionScript en la cual me propusieron de entrada de rendir un examen de Flash;
El examen constaba de pregunta sobre como utilizar las herramientas del IDE del Flash;
Una pregunta era como encontrar el código "gotoAndPlay(fruta)" en un Flash proporcionado, efectivamente su libreria contenia 20 carpetas, 500 simbolos/graficos y movieclip todo uno dentro del otro;
No se que tipo de programador iban a encontrar pero seguro que iban a encontrar con tal pregunta a un buen operador de PC, porque la respuesta que ellos tenian registrado era de usar al "Movie Explorer (ALT+F3)" para encontrar ese código;
Por suerte esa empresa desaparecio, y espero que no realizen mas examenes de sistema porque pienso que esos tipos de directores/project leader provocan una frenada al crecimiento de la technologia con sus desconocimientos;

Al fin el proposito de esta nota es la de demostrar que con el código se puede realizar efectos asombrosos que un diseñador gráfico realizaria usando el Photoshop y Flash;

El botón siguiente fue armado en AS3 (en principio lo habia hecho en AS2); A este objeto se le puede aplicar facilmente un redimensionamiento sin redibujarlo (usando la propiedad scale9Grid) y manteniendo calidad gráfica usando los filtros introducidos en el Flash 8;

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

El botón se lo puede instanciar con las dimensiones seteada en el constructor y seteand la función onClick:

	var button:CoolButton = new CoolButton(200, 40);
	button.text = "Cool Button !";
	button.onClick = function():void
	{
		trace("CoolButton Click!");
	}
	button.dispatchClickOnly = false;
	addChild(boton);

Tambien se lo puede instanciar sin las dimensiones y asignarsela luego:

	var button:CoolButton = new CoolButton();
	button.text = "Cool Button !";
	button.addEventListener(CoolButton.EVENT_CLICKED, handlerClickButton);
	addChild(button);
	button.setDimension(200, 40);

En este ultimo caso se utilizo un receptor de evento Listener para capturar el evento del click en vez de la función onClick;
El registro de evento para el caso de este botón se encuentra como variable estatica en el objeto Coolbutton (CoolButton.EVENT_CLICKED), por eso se la puede invocar sin instanciarla;

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Código fuente de "Coolbutton":
CoolButton.as

Para implementarlo, simplemente pegar el contenido en un archivo Coolbutton.as que este ubicado en la carpeta com.nessy.util;
La estructura de carpeta tanto en Flash CS3 como en Flex - ActionScript Project tiene que quedar de la siguiente forma:


[]com
    []nessy
        []util
            Coolbutton.as
test.as

El código fuente en ActionScript Project (Flex) con los "sliders" se encuentra ubicado en la siguiente dirección: http://code.google.com/p/coolbutton;
De esta forma se pueden bajar con un cliente SVN (ej: TortoiseSVN) y usar el projecto AS3 entero (usando Import... en Flex Builder) de la siguiente URL:
http://coolbutton.googlecode.com/svn/trunk/AS3/;

Share and Enjoy:
  • email
  • Google Bookmarks
  • Live
  • Facebook
  • Technorati
  • TwitThis
  • Pownce
Categories: Actionscript Tags:
  1. Sam
    Martes, 5 de agosto de 2008 a las 14:15 | #1

    Excelente articulo, ya lo estoy examinando y te comento!!! Saludos

  1. Sin trackbacks aún.