AS3 101: Funciones - Basix

Spanish (Español) translation by Ghea Deny Saputra (you can also view the original English article)

Esta es la parte 2 de la introducción a la serie ActionScript 3.0. Estaremos hablando de funciones. Al igual que la última vez, cuando nos enfocamos en las variables, nos centraremos principalmente en el programador neófito, que tiene poca o ninguna experiencia con las funciones. Sin embargo, incluso si se siente relativamente cómodo con las funciones, es posible que desee hojear este tutorial si ciertos aspectos de ellas, como los tipos de datos y los valores predeterminados, no son suficientes para usted.

Pasaremos la primera mitad del tutorial cubriendo las cosas a un nivel más teórico, luego pondremos algunas de esas ideas para usar en la segunda mitad. Construiremos una pieza muy simple con una serie de botones que intercambian el contenido en otra parte de la página. Habrá algunas funciones en uso para lograr esto, principalmente una que maneja la configuración del contenido. Póngase cómodo, vaya y eche un vistazo a la demostración, luego quede atrapado en el tut ..

Paso 1: ¿Qué es una función?

Si lees el tutorial AS3 101 variables, a saber que variables de programación tienen su raíz en matemáticas. Funciones realmente comparten el mismo linaje, que es apropiado, como variables y funciones son los dos pilares más fundamentales en cualquier lenguaje de programación.

En matemáticas, una función toma un valor único y produce un solo valor relacionado. Es decir, la función de x es el valor y alimentación x en la función produce un nuevo valor y. El mismo valor de x debe producir siempre el mismo valor de y.

En programación, una función puede realizar exactamente igual la tarea como en matemáticas, pero es mucho menos dependiente de los valores de entrada y salidos. La idea, es la misma: una tarea más compleja es encapsulada en una especie de envoltura, que luego podemos ejecutar simplemente llamar a la función.

Es decir, decir que tenemos un poco de código para dibujar una estrella y tenemos un montón de estrellas en nuestro programa. Tal vez tiene 10 líneas de código realmente dibujar la estrella. En lugar de escribir las 10 líneas (o variantes de ellos) una y otra vez, podemos ponerlos en una función. Si lo hacemos, cada vez que tenemos que dibujar una estrella simplemente llamar a la función por su nombre, en lugar de copiar y pegar en las 10 líneas cada vez.

Dicho de otro modo, de la misma manera que las variables pueden dar un nombre a un valor, funciones de dan nombres a las tareas. Una vez definida, la tarea puede repetirse fácilmente llamándolo por su nombre.

Para aquellos que han llegado en el ActionScript de otros entornos de programación, o aquellos de ustedes que puede ser a partir aquí pero se meten en otros idiomas, te interese saber lo siguiente. Lo que ActionScript llama a una "función" es un concepto muy fundamental en toda la programación, pero puede ir por otros nombres en otros idiomas. Por ejemplo, en programación orientada a objetos (OOP) a escuchar el término "método" más que función, incluso a través de ellos son esencialmente el mismo. Además, los términos "subrutina", "subprograma" y "procedimiento" son todos sinónimos sólo para la misma idea.

Para más información (o una actualización) en funciones matemáticas, por favor visite el artículo de Wikipedia sobre el tema. Para jugar con funciones matemáticas un poco más, Wolfram tiene una excelente colección de funciones y visualizaciones. Para obtener información más básica sobre la función programática, otra vez, consulte Wikipedia.

Paso 2: Hacer una función ya!

OK, vamos a ver lo que necesita para escribir una función en ActionScript 3.0.

Abra un nuevo documento de Flash (ActionScript 3, naturalmente), haga clic en el primer fotograma de la primera capa (debe ser el único marco disponible) y presione F9 (Windows) o Opt-F9 (Macintosh) para abrir el panel acciones. Seguir adelante y prender el script para no perder nuestro lugar si es necesario, haga clic en alrededor de otras partes del documento.

Vamos a escribir lo mínimo que podemos posiblemente con y siguen llamando una función válida:

1	function doSomething() {
2	trace("Doing something.");
3	}

Ahora desglosemos que. En primer lugar, es una función clave. Esta es una palabra reservada en el lenguaje ActionScript y es como la palabra clave var. Cuando lo utiliza, usted está diciendo que la próxima cosa a seguir será el nombre de la función (muy parecido a lo siguiente después de var es el nombre de la variable).

En este caso, "HacerAlgo" es el nombre de la función. Las reglas para dar nombre a una función son los mismos que las reglas para nombrar variables: caracteres alfanuméricos y el guión bajo el signo de dólar son los únicos caracteres permitidos y el nombre no puede comenzar con un número. Si usted recuerda la discusión sobre la asignación de nombres de variables, aplica el mismo tipo de convenios y recomendaciones: pecar de nombres descriptivos, en lugar de nombres cortos, camello caso de uso (y empezar con una letra minúscula), etcetera.

Después de que el nombre viene de un conjunto de paréntesis vacíos. Veremos más adelante hablar más acerca de estos, pero por ahora, sólo ten en cuenta que ellos son una parte necesaria de la declaración de la función (y a menudo se consideran parte del nombre, pero realmente no son).

Entonces tenemos una llave de apertura rizado. Al final de nuestro fragmento tenemos una llave de cierre rizado. Estos apoyos apartar el cuerpo de la función. Cualquier cosa dentro del cuerpo es código que puede ejecutar. Este código se ejecuta cuando la función es ejecutada (o llama). En nuestro caso, la función simplemente traza un cierto mensaje. En nuestro escenario de dibujo de estrella, tenemos varias líneas de código entre las llaves de dibujo.

Para resumir, la siguiente imagen muestra la anatomía de una función (mínima):

Paso 3: Entender cuando se ejecuta el cuerpo

Tenga en cuenta que mientras el código en la función se ejecuta cuando se le llama, el código NO se ejecuta cuando la función se define. Adelante, inténtelo probando la película ahora mismo. Por el momento, la secuencia de comandos sólo define la función, pero no llamar. Al probar la película, se debe ver... ¡nada! Eso significa que todo está funcionando y es de esperarse. Una función es de ninguna utilidad si no lo llamamos, así que vamos a hacer siguiente.

Paso 4: Llamar a la función

Para llamar a nuestra función simplemente escribimos lo siguiente en la secuencia de comandos:

1	doSomething();

Si usted prueba la película, agregando esta línea resulta en una traza que se envía al panel Salida:

Algunas cosas para entender acerca de la sintaxis: en primer lugar, para hacer referencia a la función, utilizamos simplemente su nombre. Recuerde que una función puede considerarse como una tarea de nombrado. Si cambiamos el nombre de la función, dicen, "doSomethingElse", lo llamamos escribiendo "doSomethingElse()". Esto es muy similar a cómo las variables son nombradas y usadas.

En segundo lugar, son necesarios los paréntesis al final. Es conocidos como el operador de ejecución. Sin ellos, simplemente hemos referido a la función sí mismo, sin pedir que sea ejecutado. Esto es realmente una técnica muy útil, razón por la cual tienes que ir al paso extra para realmente llamar a la función. Sin embargo, esta técnica llamada no está fuera del alcance de este tutorial y que tendremos que encontrar otra oportunidad de debatirlo. Si quieres probarlo, sólo quitar los paréntesis, dejando el nombre de función por sí mismo y ejecute la película. Verás que desaparece su rastro, ya que realmente ya no quiere llamar (ejecutar) la función.

A menudo, el punto de una función es encapsular una determinada tarea, por lo que puede ser llamado no una vez sino cualquier número de veces, con los mismos resultados cada vez. Probemos esto: seguir adelante y copiar y pegar el doSomething(); línea tantas veces como quieras y ejecute la película. Debería ver el número equivalente de rastros en el panel salida.

También, tenga en cuenta que no importa el orden de la definición de la función y la llamada de función. El script completo podría tener este aspecto:

1	function doSomething() {
2	trace("Doing something.");
3	}
4	doSomething();

O este

1	doSomething();
2	function log() {
3	trace("Doing something.");
4	}

Comparar con variables. Si has intentado usar una variable antes de declarada, que causaría probablemente a problemas y errores que serían bajar todo el programa. ActionScript en realidad analiza a través de su escritura y se asegura de que las funciones son definidas y están disponibles antes de realmente ejecutar el resto de la secuencia de comandos. No existe un consenso real en la que uno de los scripts anteriores es "correcto". Confía en tus sentimientos en este caso.

Paso 5: Comprender el orden de ejecución

Vamos a ver un poco más en cómo y cuándo se ejecuta una función. El cuerpo de la función se ejecuta cuando se se llama; Sabemos que ya. Sin embargo, es importante entender que la escritura trata básicamente una llamada a la función como si el cuerpo de la función fueron copiado y pegado a la línea donde ocurre la llamada. Para ilustrar esto, vamos a escribir un pequeño script que utiliza nuestra función HacerAlgo.

function doSomething() {
	trace("Doing something.");
}

trace("This happens first.");
doSomething();
trace("This happens last.");

Al ejecutar esto, verá lo siguiente en el panel Salida:

Observe que a pesar de que la primera cosa en la secuencia de comandos es la definición de función, lo primero que suceda realmente en el programa la sentencia trace que ocurre después de la definición de función. Entonces, ya que llamar a la función después de que rastro, vemos el rastro de la función en segundo lugar y finalmente el segundo rastro que sigue eso. De nuevo: una función no se ejecuta cuando se define; debe ser llamado para ejecutar el código.

Paso 6: Entendiendo los parámetros

A veces, las funciones pueden existir en su propio mundo aislado, ejecutar algunas líneas de código y nunca hacer nada diferente. Por ejemplo, puede tener algunas funciones para iniciar y detener la reproducción de un video, cuya lógica nunca cambia realmente de un uso a otro.

Sin embargo, la mayoría de las veces desea que una función realice una tarea y la varíe ligeramente de una llamada a otra. Por ejemplo, cargar un video puede implicar los mismos pasos cada vez, con la excepción de qué archivo de video cargar. Con la ayuda de los parámetros, podemos hacer que una función sea más flexible al permitirnos establecer ciertos valores de manera diferente para cada llamada de función.

Para usar una función incorporada como ejemplo, considere cualquiera de las funciones matemáticas, como Math.max (). max toma dos números, los compara y devuelve el que tiene el valor más alto. Para utilizar max, debe suministrarlo con dos números en forma de parámetros. De lo contrario, no sería una función muy útil.

Es importante tener en cuenta que los parámetros son realmente solo variables. Son especiales porque duran solo la duración de la función y la próxima vez que se llame a la función, se recrearán con (potencialmente) nuevos valores. Una vez que la función sale (finaliza), los parámetros se eliminan. Mientras que dentro de la función se usan exactamente de la misma manera que usas las variables. Si usted necesita un repaso en los entresijos de las variables, podría sugiero que revisas mi anterior tutorial AS3 101 sobre las variables.

Para tener una tangente en esoterica, usted oirá a menudo el término "argumento" sinónimo con el término "parámetro". Sin embargo, hay una diferencia sutil entre los dos términos. Técnicamente, un parámetro es la variable que define la función y un argumento es el valor pasado al parámetro cuando se llama a la función. En otras palabras, el parámetro es el nombre de la variable y el argumento es el valor a esa variable. Sin embargo, esta distinción es ignorada y la mayoría cualquier programador sabrá lo que estás hablando sin tener en cuenta el término que utilizamos.

Una vez más, para mayor información, te recomiendo Wikipedia o incluso Google.

Paso 7: Agregar un parámetro

Lo que si nuestra función HacerAlgo no simplemente traza hacia fuera "hacer algo", pero en cambio nos dejan personalizar el mensaje que se trazó? Vamos a hacer tan (y mientras estamos en él, vamos a girar a nombre de la función en algo un poco más pragmático):

1	function log(message) {
2	trace("Log: " + message);
3	}

¿Ver lo que acaba de suceder? Escapó un parámetro entre paréntesis. Que es donde van los parámetros (por lo menos en ActionScript). Simplemente escriba el nombre que quieras el parámetro (variable) que y entonces usar ese nombre donde quiera que desee ese valor. Es decir, es como una variable, pero sin la palabra clave "var".

Para llamar a esta función y pasar a lo largo de un argumento (recuerda, los argumentos son los valores que se envían a los parámetros... pero que está partiendo los pelos), tire un truco similar y poner el valor que desea pasar entre paréntesis (el operador de llamada) cuando llamamos a la función:

1	log("This isn't just a trace, it's a log.");

Cuándo llaman a la función anterior y la función son ejecutar, obtenemos lo siguiente en el panel Salida:

Además, podemos la llamada otra vez, pero pase en un valor distinto para el parámetro de mensaje y obtener resultados similares pero diferentes. El siguiente script completo:

function log(message) {
	trace("Log: " + message);
}
log("This isn't just a trace, it's a log.");
log("Here we go again.");

Resultados en dos rastros en el panel salida, tanto delante con "registro:", pero después de eso él un mensaje personalizado. Tenemos los principios de una herramienta de registro personalizado que posiblemente podría proporcionar rastros más ricos y más flexibles.

Paso 8: Añadir otro parámetro

Si queremos incluir más de un parámetro, simplemente podríamos poner comas entre ellos, asegurándose de que todos van entre paréntesis. Por ejemplo, vamos a añadir un parámetro de nivel:

function log(message, level) {
	if (level >= 1) {
		trace("Log: " + message);
	}
}

Ahora tenemos dos parámetros. La primera es exactamente igual que antes y hemos añadido un parámetro de nivel. Se trata de un número que, si es mayor que 1, permite que el rastro al pasar. En teoría, podríamos mantener los mensajes de registro activos pero suprimir estableciendo su nivel a 0.

Para llamar a la función, de nuevo se utilice una coma para separar la lista de argumentos:

1	log("This isn't just a trace, it's a log.", 2);
2	log("Here we go again.", 0);

Si ejecuta la película con estos cambios, sólo verá el primer mensaje. Usted entonces puede jugar con la idea de niveles de registro cambiando los números involucrados, al llamar a la función y en la misma función. Es decir, cambiando la línea

1	if (level >= 1)

Para

1	if (level >= 3)

Terminas con ningún rastro. Cambiarlo a

1	if (level >= 0)

le da dos rastros. Imagina si tuvieras varios docena mensajes salpicados a través de su aplicación; podría convertirse hacia arriba o hacia abajo el nivel de detalle de la salida cambiando un solo número en la función. Esto es sólo otro ejemplo de por qué funciones son útiles en su capacidad para encapsular código y reutilizarla. Un cambio en un solo lugar puede cambiar el comportamiento de varias otras cosas.

Paso 9: Parámetros de Datatyping

Como usted aprendió en el tutorial de las variables, una variable puede (y debe) tener un tipo de datos. Si necesita un pincel arriba en tipos de datos, te refiero nuevamente al tutorial de las variables, pero el Resumen de 10 centavos es esto: una variable sin un tipo de datos es simplemente un nombre de referencia a algún valor. Mediante la adición de un tipo de datos, podemos garantizar que el valor de la variable es de un tipo determinado, como cadena, número, clip de película o XML. En ActionScript, se ve así:

1	var totalPigeons:Number;

Los dos puntos señala que la variable de la izquierda tendrá el tipo que se declara a la derecha.

En funciones, es una buena idea para el tipo de datos de sus parámetros, por exactamente las mismas razones que es una buena idea escribir las variables. Y parece terriblemente similar. Sabemos que nuestro parámetro de mensaje debe ser de tipo String. También sabemos que el nivel parámetro es numérico, pero no solo eso, lo ideal sería un entero no negativo, lo que significa que un uint es un buen candidato para un tipo de datos. Modificaremos la función de este aspecto:

function log(message:String, level:uint) {
	if (level >= 1) {
		trace("Log: " + message);
	}
}

Datatyping de parámetros tiene prácticamente el mismo efecto que las variables normales de datatyping. El más notable es que evita el uso indebido de la función. Digamos que nos consiguió la orden de los parámetros de mezcla y trató de llamar así:

1	log(2, "This isn't just a trace, it's a log.");

Porque hemos tratado de pasar un valor numérico a un parámetro de tipo de una cadena y una cadena a un parámetro de tipo uint, obtenemos los siguientes errores de compilador cuando vamos a probar la película:

1	1067: Implicit coercion of a value of type int to an unrelated type String.
2	1067: Implicit coercion of a value of type String to an unrelated type uint.

"Coerción" es un término algo nefasto para el acto de intentar cambiar el tipo de un valor. "Coerción implícita" es cuando intentamos hacer sin bastidor explícitamente el valor. Esto es posible en tipos relacionados, tales como número, int y uint, pero en relación con tipos, como cuerdas y uints, esto falla y nos da el error. El compilador no es lo suficientemente inteligente como para sugerir que tal vez tienes los argumentos en el orden equivocado, pero usted consigue una notificación de que algo está mal y está obligado a corregir el error.

Paso 10: Parámetros opcionales

A veces necesita un parámetro y a veces no. En tal caso, usted puede hacer el parámetro opcional. Para ayudar a hacer las cosas más simples, ActionScript 3.0 ofrece un método para proporcionar valores por defecto a los parámetros que no pasan de un valor. De hecho, es este mecanismo de valor predeterminado que es lo que hace un parámetro opcional.

Vamos a hacer el parámetro de nivel opcional, así que si no se pasa en, la función todavía puede funcionar, pero asumir que queríamos un nivel de 0. Necesitamos simplemente cambiar la firma de la función así:

1	function log(message:String, level:uint=0) {

Nota la = 0 después de la declaración y el tipo de dato del segundo parámetro. Escriba un signo igual y luego algún valor, declaramos que el parámetro es opcional y proporciona el valor predeterminado si el argumento se deja hacia fuera.

Si tuviéramos que registrar entonces unos mensajes:

1	log("This is an important message", 1);
2	log("This is another important message");
3	log("This is a so-so message", 0);

Vamos a ver que realmente registra sólo el primer mensaje. El segundo se deja fuera el nivel agrument y por lo tanto la función asume que queríamos un valor de 0, dando por resultado ningún rastro.

Esto trae la pregunta: ¿Qué pasa cuando dejamos el mensaje? El parámetro mensaje es implícitamente declarado como sea necesario, porque no está declarado como opcional. Si intenta ejecutar la película con el Registro siguiente en él:

log();

Obtendrá este error:

1	1136: Incorrect number of arguments. Expected 1.

Que es bastante autoexplicativo. Hay un total de un parámetro requerido, pero enviamos a lo largo sin argumentos. Por lo tanto, el número de argumentos no es justo. Esto trae una elemento más digno de mencionar y que si habíamos pasado a lo largo de tres parámetros, obtenemos esencialmente el mismo error:

1	1137: Incorrect number of arguments. Expected no more than 2.

Sólo tener en cuenta que los parámetros establecidos para una función están escritos en piedra y se supone que para que una función para que funcione correctamente, deben pasarse a lo largo de todos los parámetros requeridos.

Por supuesto, hay algunas reglas cuando se trata de parámetros opcionales. El más fácil de olvidar es que parámetros opcionales deben venir después de parámetros requeridos. Por ejemplo, esto no es buena:

1	function log(level:uint=0, message:String):void {

Por último, los valores por defecto deben ser constantes de tiempo de compilación, que es una frase elegante que usted puede pensar simplemente en el sentido de nada demasiado complejo. El valor numérico 0 está bien. La expresión matemática 1 + 3 también está bien. Pero Math.sin(0) tiene que ser calculado en tiempo de ejecución (porque Math.sin es una función), es demasiado complejo y devolverá un error. Yo no establecen las reglas para lo que funciona y qué no. Acabo de probar y si no le gusta Flash oirá sobre ello a través del panel de errores del compilador.

Paso 11: Valores de retorno

La función de nuestro registro es una especie de botón o interruptor. Como una puerta que se abre una puerta, tiene una función que se traduce en una acción que se realiza. Esto es fine, normal y esperado. Algunas funciones serán simplemente hacer cosas. Sin embargo, es bueno saber que una función puede no sólo hacer algo, pero puede también darle algo nuevo. Esto se llama devuelve un valor. Si alguna vez necesitamos algunas matemáticas realizada, por ejemplo, llamar a una función que devuelve un valor es una buena manera de ir sobre esto.

ActionScript nos proporciona funciones trigonométricas, como Math.sin y Math.cos, que son buenos ejemplos de funciones que devuelven un valor (como son todas las funciones matemáticas). Una cosa acerca de las funciones trigonométricas que tiende a deshacerse de la gente es que el parámetro de ángulo es un número que se supone que es en radianes. Mayoría de las personas piensa en términos de grados, por lo que una conversión es generalmente necesaria. Podemos escribir una función que nos permite pasar un valor en grados y recuperar el valor del seno como un retorno.

1	function degSin(degrees:Number):Number {
2	var radians:Number = degrees * Math.PI / 180;
3	return Math.sin(radians);
4	}

Algunas cosas sucedieron aquí. Observe en primer lugar, tenemos un ": número" al final de la firma de la función, después de los paréntesis. Forma de ActionScript de decir que esta función devuelve un valor y que sea de tipo Number (o lo que especifique). Si se especifica un tipo de retorno, no sólo estamos diciendo que esta función devuelve un valor, estamos garantizando que realmente devuelven un valor. No devolver un valor provocará un error, como devolver un error de tipo incorrecto.

La segunda cosa que pasó fue en la última línea, hemos introducido la palabra clave return. Esto hace lo que usted podría ya estar pensando en que lo hace. Vuelve la cosa a su derecha. En este caso, nosotros averiguar el seno del ángulo después de que se han convertido los grados a radianes y luego volvemos a ese valor. Realmente tenemos algunas capas pasando; cuando llamamos a degSin, llama Math.sin, que devuelve un valor a degSin, que luego devuelve un valor a la original llamada spot.

Utilizar valores devueltos es sencillo; simplemente llame a la función donde desea que el valor a ser evaluado. Por ejemplo:

1	trace("The sine of 45 degrees is " + degSin(45));

¿Y si no regresa un valor, como en la función de nuestro registro? Bueno, mejor práctica sugiere que todavía declaramos esas intenciones. Podemos hacerlo por datatyping nuestra función al igual que hicimos con el último, sólo usamos un tipo especial conocido como "vacío", como esta;

1	function log(message:String, level:uint=0):void {

Esto indica que la función dada no devolverá ningún valor y tratar de hacer voluntad así causan un error. Puede parecer algo trivial, pero garantizar que correctamente todas sus funciones se escriben, incluso el no regresa, puede realmente acelerar desarrollo alerta a problemas que surgen cuando las reglas no son seguidas.

Por último, una tercera cosa en este paso, que ordenaré de contrabando en el código, pero vale la pena mencionar. ¿Sabes lo que es? Por supuesto que hacer, tienes un ojo agudo. Es cierto, que he creado una variable local en la función del degSin. Esto no tiene mucho que ver con devolver valores directamente, pero es un concepto importante y ahora es un buen momento para mencionarlo. Cuando una variable se crea dentro del cuerpo de una función, se llama una variable local. Eso significa que es "local" para la misma función y nada más tiene acceso a ella. En otras palabras, son variables desechable. Esta es una distinción importante a hacer porque a veces quieres una variable exclusivamente para los fines de la función (como en este caso: sólo necesitamos una conversión temporal de grados a radianes). Por otra parte, a veces desea que la variable a persistir, en cuyo caso te preguntarás por qué el valor que se esté fijando en una función no está disponible fuera de la función.

Se reduce a una regla básica: una variable definida fuera de una función está disponible en la función; una variable definida dentro de una función no está disponible fuera de la función. Para aclarar; una variable definida dentro de una función no está disponible dentro de una función diferente. Esto empieza a entrar en el tema de alcance, que puede ser difícil de captar, por lo que dejará de hablar sobre esto aquí.

Para mayor información, punto I de nuevo te Wikipedia. Dos veces, de hecho. Además de una mención de bono para variables locales.

Paso 12: La firma de la función ampliada

Recapitulemos la anatomía de una función, como se expande un poco de donde comenzamos.

Paso 13: Saber cuándo escribir una función

En teoría, podría crear una aplicación completa en la que todo sea una función (de hecho, las aplicaciones OOP modernas tienden mucho hacia ese extremo). Del mismo modo, en teoría es posible crear una aplicación completa que no utilice una función (aunque en realidad es muy difícil en ActionScript, para una aplicación de cualquier tamaño útil).

Si recién está comenzando con las funciones, debe tener en cuenta que absolutamente necesitará escribir una función para manejar eventos, como clics del mouse o cargas de datos (más sobre esto más adelante). Más allá de eso, debes recordar mi regla de oro para saber cuándo escribir funciones:

No escriba nunca lo mismo dos veces.

Es decir, si te encuentras escribiendo exactamente lo mismo, o incluso algo muy similar, más de una vez, puede probablemente poner eso en una función y llamar a la función dos veces.

La razón principal de esto es que si necesita realizar una actualización a ese trozo de código, puedes hacer el cambio en una sola ubicación. Además, si usted necesita hacer lo mismo en un tercer lugar, mucho más fácil simplemente puede llamar a la función un tercer tiempo, en lugar de copiar y pegar el código en un tercer lugar (que, una vez más, complica aún más el mantenimiento de ese fragmento de código). Recuerde que nuestro ejemplo de dibujo de estrella. Sin embargo, se aplica a situaciones mucho menos obvias.

Para hacer una analogía, reutilizando el comportamiento de una función es similar a la idea de reutilización de la ilustración de un símbolo en una instancia de clip de película independiente. Así como dos instancias del mismo símbolo tanto actualizará cuando se modifique el símbolo, dos ejecuciones de la misma función tienen comportamiento diferente si se cambia la tarea definida por la función.

Por cierto, este concepto es conocido más formalmente como el principio DRY: no repetir a sí mismo.

El único momento para no escribir una función es para aplicaciones de rendimiento crítico, como juegos o procesadores de audio. Las funciones tienen una sobrecarga inherente que se incurre por simplemente llamar a la función. Por lo tanto, usted puede sacrificar capacidad de mantenimiento para el funcionamiento en algunas situaciones. Estas situaciones tienden a ser mucho menos común.

Paso 14: Construir una función de control de contenido

Pondremos en práctica nuestro conocimiento de las funciones mediante la creación de un sitio simple que muestre un puñado de páginas, cada una de ellas siguiendo una plantilla similar. Este será un sitio extremadamente simple y en el mundo real pondría mucho más cuidado y detalle en sus funciones, pero esto servirá como una demostración práctica de (uno de los muchos) usos de las funciones.

Mientras desarrollamos esta pieza, tenga en cuenta la regla indicada en el último paso. Imagine cuánto más tedioso e insostenible sería sin las funciones que escribimos en los siguientes pasos.

Si quieres, he proporcionado un proyecto de arranque, con el archivo FLA inicial y las imágenes que va cargando. Siéntase libre de utilizarlo, o sienta libre de entrar en su propia dirección con el arte y las imágenes.

He provisto de un proyecto de arranque, el archivo FLA inicial y las imágenes que va cargando. No voy a entrar en gran detalle sobre cómo el arte de crear y configurar cosas no código. Puede no dude en utilizar este archivo FLA como es, o usarlo como punto de referencia para su propia obra de arte e imágenes. El punto no es alcanzar un determinado estilo, sino para familiarizarse con las funciones en un entorno práctico.

Descarga aquí los archivos de origen y utilizar el archivo llamado start.fla

Paso 15: Hacer un recorrido de la FLA

Hay una serie de botones de clip de película creada, la mayoría de los que está en el escenario en una columna de la izquierda. Éstos están configurados para utilizar la misma ilustración de fondo, sólo con una etiqueta de texto diferente dentro. Cada botón lleva algo unimagitively: button1_mc a través de button5_mc.

A la derecha es el área de contenido. Sobre el fondo blanco hay campos de texto dos, uno con una fuente grande en negrita para el titular y otra con una fuente normal del cuerpo para la descripción. Los campos son ambos a ser texto dinámico, por lo que podemos trabajar con ellos a través de ActionScript. También reciben los nombres de instancia: title_tf y body_tf. Hay otro botón de clip de película hacia la parte inferior, que se activará un enlace al artículo completo. Esto tiene un nombre de instancia de link_mc. ¿Dónde está la imagen, pregunte? Ya que estamos cargando imágenes con ActionScript, a seguir adelante y crear un cargador con ActionScript, así. No existe en el FLA donde se puede ver. Lo haremos en el código.

Mirando más allá de la FLA, verás que hay un directorio llamado imágenes en la misma carpeta. Dentro de esto son algunas de las imágenes que van cargando. Si usted está utilizando el archivo de arranque de la descarga o crear su cuenta, asegúrese de que la FLA es en la misma carpeta como su carpeta de imágenes. Para mantener las cosas simples simplemente a publicar el archivo SWF en la misma carpeta y esperar cargar las imágenes desde la carpeta de imágenes.

(Una nota rápida, antes de que pasemos al código: encontrará que cuanto más utilice ActionScript para impulsar sus proyectos, menos usar el archivo FLA y la etapa de la manera en que usted es probablemente usada para. Esto puede ser desconcertante, pero como usted consigue mejor en la creación de sus activos a través de código, tendrás más flexibilidad y más fácil llega a facilitar cambios en el camino).

Paso 16: Configurar los botones

Necesitamos establecer el contenido de la pieza principal cuando se hace clic en los botones, así que empezaremos estableciendo un detector de eventos para el evento CLICK de cada botón de codificación. Hay una buena oportunidad vamos a hacer un tutorial AS3 101 de eventos abajo de la línea, por lo que ahorraré en debate de profundidad sobre esto para más adelante. Sin embargo, cabe señalar que para añadir un detector de eventos, tenemos una función. La misma función se conoce como el oyente o el controlador. Se llama automáticamente por lo que causa el evento (en nuestro caso, un clip de película que se hizo clic en).

Observe que mientras que definimos nuestras funciones normalmente, sin embargo, utilizamos el nombre solamente cuando se usa addEventListener. Es decir, dejamos fuera el operador de llamada (el paréntesis). Esto nos permite decir lo que los eventos que función a llamar, sin llamarlo durante sistema para arriba.

button1_mc.addEventListener(MouseEvent.CLICK, onButton1Click);
button2_mc.addEventListener(MouseEvent.CLICK, onButton2Click);
button3_mc.addEventListener(MouseEvent.CLICK, onButton3Click);
button4_mc.addEventListener(MouseEvent.CLICK, onButton4Click);
button5_mc.addEventListener(MouseEvent.CLICK, onButton5Click);

function onButton1Click(event:MouseEvent):void {
	trace("button 1");
}

function onButton2Click(event:MouseEvent):void {
	trace("button 2");
}

function onButton3Click(event:MouseEvent):void {
	trace("button 3");
}

function onButton4Click(event:MouseEvent):void {
	trace("button 4");
}

function onButton5Click(event:MouseEvent):void {
	trace("button 5");
}

También cabe destacar, en lo que respecta al sistema de eventos de ActionScript 3, es que todos los oyentes de eventos (las funciones) se pasan exactamente un parámetro, un objeto de evento. Este objeto lleva información sobre el evento que acaba de ocurrir, pero va ser en gran medida ignorando aquí. Sin embargo, es necesario y así que tenemos que declarar en la definición de función o toparás con errores similares a los errores de desajuste de cuenta que vimos anteriormente.

Volveremos a esta sección y haremos que los botones hagan algo mucho más significativo que rastrear la identificación de la estación, pero por ahora, pruebe su película y asegúrese de que funcione. Debería poder hacer clic en los cinco botones principales y ver la salida correcta.

Paso 17: Escribir una función contenida

Volvamos nuestra atención a la pieza de contenido. Antes de que escribimos la función, vamos a examinar lo que debe ocurrir cuando que pueblan la plantilla.

El texto del encabezado debe ir a title_tf
El texto del cuerpo debe ir al cuerpo tf
Una imagen debe cargarse en un objeto Loader (que también debe crearse)
El botón "Leer más" debe ir a una URL diferente cuando se hace clic

Ahora, seamos claros sobre lo que debe suceder cuando se hace clic en uno de nuestros botones y lo que debe suceder solo una vez, durante la inicialización.

El título y el texto del cuerpo deben completarse con cada clic. Eso es fácil, pero la imagen será un poco más complicada. Necesitamos un objeto Loader, pero no necesitamos un nuevo objeto Loader cada vez. Podemos reutilizar el mismo cargador y solo usar una nueva URL cada vez. Para el botón "Leer más", el controlador CLICK no necesita ser recreado cada vez; solo necesitamos una forma de usar una nueva URL con cada conjunto de contenido.

Podemos convertir esto experimento del pensamiento en algo práctico. Si determinamos los bits de datos que va a cambiar con cada clic de botón y lo que sigue siendo el mismo, tenemos una idea de qué piezas deben pasarse en parámetros y qué piezas pueden ser hard-wired en el cuerpo de la función. Si es necesario, volver a leer el párrafo anterior y tratar de llegar a una lista de referencia que personalizará cada llamada de función a través de parámetros.

Aquí está mi lista:

Texto de titular
Cuerpo del texto
URL de imagen
URL de enlace

Vamos a comenzar pequeño y justo escribir una función que se llevará a las piezas que necesitamos y simplemente les trazar.

function setContent(title:String, body:String, imageUrl:String, link:String):void {
	trace("title: " + title);
	trace("body:  " + body);
	trace("image: " + imageUrl);
	trace("link:  " + link);
}

Suerte quiso que, todos nuestros datos es de tipo String. Eso es pura casualidad y esta técnica funcionará con cualquier tipo de datos. Podríamos han requerido un objeto URLRequest para los parámetros de la URL, pero que habría sido ideado y que habría tenido conocimiento.

Paso 18: Llamar a la función contenida

Detrás en las funciones onButtonNClick, llamemos a la función setContent para que podamos ver en acción. Recuerde que estamos pasando en cuatro argumentos: el texto del título, el cuerpo del texto, la URL de la imagen y la URL del enlace, en ese orden. Ahora, porque el cuerpo del texto puede ser un poco largo, el código resultante es un poco torpe. Si tuviera que simplificar la TI y utilizar datos ficticios, una llamada de función podría ser algo como esto:

1	function onButton1Click(event:MouseEvent):void {
2	setContent("1", "One", "one.jpg", "http://www.one.com");
3	}

Solo sustituye el rastro de la versión anterior de onButton1Click con una llamada a setContent, pasando en cuatro argumentos.

Sin embargo, si tuviéramos que pasar en datos reales, que llaman tendría este aspecto:

function onButton1Click(event:MouseEvent):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

Es desordenado, pero realmente es lo mismo. Las únicas diferencias son que las cadenas que estamos pasando son significativamente más largas y que he añadido algunas vueltas entre los argumentos para ayudar con el hecho de que las cadenas son tan largas. ActionScript generalmente no se preocupa demasiado por espacios en blanco. Como hay una coma entre dos argumentos, usted puede deslizar en mucho o poco espacio en blanco como te gusta.

OK, ahora ya sabemos qué esperar. No es tan malo; sabes no a flipar cuando vea la siguiente lista, que sustituye a nuestro anterior bloque de funciones de onButtonNClick:

function onButton1Click(event:MouseEvent):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

function onButton2Click(event:MouseEvent):void {
	setContent("Build a Dynamic Flash Gallery with Slider Control",
			"In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.",
			"slider.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-gallery-with-actionscript-30-and-php/#more-509"
	);
}

function onButton3Click(event:MouseEvent):void {
	setContent("Build a Dynamic Guest Book with XML and ActionScript 3.0",
			"Guest books are a great thing to enhance the online experience your viewers receive. The ability for the viewer to talk to you and others, respond to questions you’ve raised, comment on your work or just to socialize means a guest book is a must have for most web sites. Let’s see how we can build our own guest book with ActionsScript 3.0, XML and PHP.",
			"guestbook.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-guest-book-with-xml-and-actionscript-30/#more-539"
	);
}

function onButton4Click(event:MouseEvent):void {
	setContent("Create Your Own Pseudo 3D Pong Game",
			"In this tut I’ll describe how to create a basic 3D scene using the new 3D options of Flash Player 10. Then I’ll explain how to add interactivity to the elements and set up a basic pong game. Let’s go..",
			"pong.jpg",
			"http://flash.tutsplus.com/tutorials/games/create-a-pseudo-3d-pong-game/#more-620"
	);
}

function onButton5Click(event:MouseEvent):void {
	setContent("Build a Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D",
			"Today we’re going to build a wiimote controlled lightsaber using WiiFlash and Papervision3D. The goal of this tutorial will be to learn how to use a wiimote within flash and how to combine it with papervision3D. Afterwards, of course, you can use this app to train for your Jedi mastership.",
			"wiimote.png",
			"http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/#more-634"
	);
}

Normalmente sugiero que cuando estás aprendiendo un lenguaje de programación, usted es mejor apagado todo en escribir en lugar de copiar y pegar. En este caso, gran parte de ella es datos simplemente arbitrarios que le animo a seguir adelante y copiar y pegar este bloque de código, a menos que realmente desee escríbala hacia fuera. Si usted quiere, siempre puede escribir en sus cuenta, datos menos intensos para conseguir práctica en los conceptos, luego copiar y pegar cuando sientes que tienes.

Sin embargo obtener este código en el script, vamos a nosotros probar la función setContent pasando a lo largo de diferentes valores para cada botón, haga clic. Prueba la película y haga clic en los botones. Verá información relevante aparece en el panel salida. La función setContent es solamente principio justo.

Paso 19: Llene en el texto

Saltemos a la función setContent. Estamos listos para hacer algo más importante. En lugar de seguimiento el título, vamos a llenar la pantalla TextField. En setContent, reemplace la línea que traza el título con esto:

1	title_tf.text = title;

Asimismo, podemos rellenar el campo texto del cuerpo, también, sustituir ese rastro de cuerpo con:

1	body_tf.text = body;

Campos de texto dinámicos tienen una propiedad de texto que le permite establecer u obtener el contenido de texto del campo. Solo estamos pasando el texto de título y el cuerpo de los parámetros a los campos de texto respectivos.

Si ejecuta la película otra vez, debería ver al menos un titular y el cuerpo se muestran en el área de contenido. ¡Ahora estamos consiguiendo en alguna parte!

Nota que en este punto, estamos llamando a contenido de la configuración de un total de cinco lugares, pero estamos haciendo cambios en una sola ubicación en nuestro script y afecta a cómo se están comportando los cinco de esas medidas de ajuste del contenido. Esto es porque hemos encapsulado la tarea de creación de contenido en una función de nombre y llamarla por su nombre, en lugar de copiar y pegar el código fuente.

Paso 20: Carga la imagen

Antes de que podamos cargar una imagen, necesitamos algo para cargarla. Fuera de nuestra función, tal vez hacia la parte superior de la secuencia de comandos, cree una variable que contenga un cargador. Mientras estamos en ello, agréguelo como un elemento secundario a content_mc y colóquelo.

1	var image:Loader = new Loader();
2	addChild(image);
3	image.x = 170;
4	image.y = 34;

Recuerde, vamos a reutilizar el cargador y simplemente cargaremos una nueva imagen cuando cambiemos el contenido. Para hacerlo, vuelve a la función setContent y agrega lo siguiente:

1	var url:URLRequest = new URLRequest("images/" + imageUrl);
2	image.load(url);

Tenga en cuenta que estamos utilizando dos variables, "url" e "imagen", en dos ámbitos diferentes. La variable url se declara en la función y, por lo tanto, es una variable local para la función y deja de existir una vez que la función termina. La variable de imagen, por otro lado, se declara en el cuerpo principal del script, por lo que persiste de la llamada de función a la llamada de función. Además, no lo declaramos en la función, simplemente lo usamos. Por lo tanto, cuando lo utilizamos, estamos referenciar el objeto Loader que creamos inicialmente y reutilizar cada vez que queremos cargar una imagen.

Anímate y prueba. Ahora debe tener imágenes con su contenido. ¡Excelente trabajo!

Notar otra ventaja de usar una función aquí. En última instancia, simplemente estamos pasando el nombre de la imagen y dejar que la función de dictar dónde buscar la imagen. Estamos poniendo "imágenes /" delante del nombre de la imagen, que significa que todas las imágenes (al menos para este pedazo contenido) debe estar en el directorio de imágenes. Si alguna vez teníamos que cambiar el nombre o ubicación del directorio de imagen, entonces sólo necesitamos actualizar esa información en un solo lugar – la función.

Paso 21: Configurar el enlace

La URL de enlace es una bestia distinta. Es similar a la cargadora que necesitamos crear el botón fuera de la función que persiste. Establecerla implica otra función; éste a haga clic en del botón la manija.

Otra vez, en la parte principal de la escritura, añadir un detector de eventos para el botón:

1	link_mc.addEventListener(MouseEvent.CLICK, onReadMoreClick);

Además, mientras estamos allí, definir la función:

1	function onReadMoreClick(me:MouseEvent):void {
2
3	}

Por ahora, a llenar con algunas funciones codificadas, para ilustrar lo que vamos a hacer. Todo lo que realmente necesitamos hacer es abrir un enlace en una nueva ventana del navegador. Esto es bastante simple de hacer, pero obtendrá un poco más complicado cuando hacemos dinámicas, así que vamos a tomar en fases.

Tenemos que crear otro URLRequest señalando nuestra URL deseada (sólo vamos a utilizar la página de inicio de FlashTuts + fo ahora) y luego que alimentan la función navigateToURL, junto con una directiva para abrir una nueva ventana del navegador:

1	function onReadMoreClick(me:MouseEvent):void {
2	var url:URLRequest = new URLRequest("http://flash.tutsplus.com");
3	navigateToURL(url, "_blank");
4	}

Si usted prueba la película, verás que haciendo clic en el botón abrir un navegador y llevarlo al sitio de FlashTuts +.

En previsión de ser más dinámico con esto, vamos a crear otra variable que se vive en el ámbito de aplicación principal (es decir, donde puede conservar, junto con el cargador, etcetera).

1	var linkUrl:String;

Luego usar esa variable en lugar de la cadena literal que utilizamos en la función:

1	function onReadMoreClick(me:MouseEvent):void {
2	var url:URLRequest = new URLRequest(linkUrl);
3	navigateToURL(url, "_blank");
4	}

Finalmente, necesitamos establecer linkUrl variable en la función setContent. Esto es tan simple como el valor para el valor en el parámetro link:

1	linkUrl = link;

La función setContent final debería ser algo como esto:

function setContent(title:String, body:String, imageUrl:String, link:String):void {
	title_tf.text = title;
	body_tf.text = body;
	var url:URLRequest = new URLRequest("images/" + imageUrl);
	image.load(url);
	linkUrl = link;
}

Ahora puede probar la película y debe tener un pedazo de "artículo destacado" completamente funcional. Esto no es pequeña tarea y usted debe estar orgulloso de ti mismo!

Paso 22: Añadir un botón de sexto

Hiciste un gran trabajo consiguiendo esto ahora, pero vamos a ir un paso más allá. Para un sitio tan simple, no es totalmente irracional pensar que podríamos llegar lejos sin este negocio de toda función. Sin embargo, para ilustrar la utilidad general para encapsular la funcionalidad en una función parametrizada, vamos a agregar un sexto botón que añadirá un sexto poco de contenido.

Antes de finalizar, imaginemos lo que tendríamos que hacer si no tenemos una función setContent.

Añadir un botón implicaría:

Agregar otra instancia del clip de película botón, con una nueva etiqueta
Configuración de su controlador de clic
Configuración del texto del título
Ajuste el cuerpo del texto
Cargar una nueva imagen
Actualización de la leer más (enlace)

Sin embargo, podemos cortar esa carga de trabajo por la mitad utilizando nuestra función setContent. Con eso en su lugar, se convierten en nuestras tareas:

Agregar otra instancia del clip de película botón, con una nueva etiqueta
Configuración de su controlador de clic
Llamar a setContent con la información adecuada

En este momento en nuestro desarrollo, actualizando el código se simplifica. Usted puede encontrar una imagen para el botón de 6 en los archivos de arranque (ya en la carpeta de imágenes) y ya hay un símbolo Button6 en la biblioteca del motor de arranque Florida Arrastre al escenario y asígnele el nombre button6_mc. todo lo demás se puede manejar con código. Aquí está la sección de botón de la escritura, con adiciones en negrita:

button1_mc.addEventListener(MouseEvent.CLICK, onButton1Click);
button2_mc.addEventListener(MouseEvent.CLICK, onButton2Click);
button3_mc.addEventListener(MouseEvent.CLICK, onButton3Click);
button4_mc.addEventListener(MouseEvent.CLICK, onButton4Click);
button5_mc.addEventListener(MouseEvent.CLICK, onButton5Click);
<strong>button6_mc.addEventListener(MouseEvent.CLICK, onButton6Click);</strong>

function onButton1Click(event:MouseEvent):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

function onButton2Click(event:MouseEvent):void {
	setContent("Build a Dynamic Flash Gallery with Slider Control",
			"In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.",
			"slider.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-gallery-with-actionscript-30-and-php/#more-509"
	);
}

function onButton3Click(event:MouseEvent):void {
	setContent("Build a Dynamic Guest Book with XML and ActionScript 3.0",
			"Guest books are a great thing to enhance the online experience your viewers receive. The ability for the viewer to talk to you and others, respond to questions you’ve raised, comment on your work or just to socialize means a guest book is a must have for most web sites. Let’s see how we can build our own guest book with ActionsScript 3.0, XML and PHP.",
			"guestbook.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-guest-book-with-xml-and-actionscript-30/#more-539"
	);
}

function onButton4Click(event:MouseEvent):void {
	setContent("Create Your Own Pseudo 3D Pong Game",
			"In this tut I’ll describe how to create a basic 3D scene using the new 3D options of Flash Player 10. Then I’ll explain how to add interactivity to the elements and set up a basic pong game. Let’s go..",
			"pong.jpg",
			"http://flash.tutsplus.com/tutorials/games/create-a-pseudo-3d-pong-game/#more-620"
	);
}

function onButton5Click(event:MouseEvent):void {
	setContent("Build a Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D",
			"Today we’re going to build a wiimote controlled lightsaber using WiiFlash and Papervision3D. The goal of this tutorial will be to learn how to use a wiimote within flash and how to combine it with papervision3D. Afterwards, of course, you can use this app to train for your Jedi mastership.",
			"wiimote.png",
			"http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/#more-634"
	);
}

function onButton6Click(event:MouseEvent):void {
	setContent("Intro to Flash Camo: Part 1",
			"Welcome to an introduction of the Flash Camouflage Framework. Flash Camo (for short) is a graphics framework that is broken down into 3 core areas: \"Decals\", the \"CSS Parser\" and the \"CamoDisplay\". These systems can be used individually or combined to fit your needs. When used together they form a powerful set of tools to help skin and style any Flash application. With Camo’s modular approach, you can use as little or as much of the framework as you want.\n\nIn this two part tutorial we’re going to build a simple website to show how easy it is to incorporate Flash Camo into your next project.",
			"flashcamo.jpg",
			"http://flash.tutsplus.com/tutorials/workflow/intro-to-flash-camo-part-1/#more-776"
	);
}

Desde aquí, no es un salto lejano a externalizar nuestros datos en un documento XML (o incluso una base de datos) y crear nuestros botones sobre la marcha. Una configuración que hace mucho más fácil mantener su contenido actual, pero está empezando a llegar a ser más allá de los límites de este tutorial. Atentos, sin embargo, ya hay un tutorial AS3 101 XML planeado.

Paso 23: El toque final

Bueno, todo se ve bastante bien, excepto un poco de problemita: el área de contenido es bastante vacío cuando empieza el cine. Probablemente estás pensando que podíamos resolver esto lanzando una llamada adicional a setContent con, digamos, del primer botón valor contenido. Por ejemplo, si pones esto al final de la secuencia de comandos, debe ver su funcionamiento.

setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
		"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
		"maginfy.jpg",
		"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
);

¿Pero recuerdas el principio que mencioné cuando hablé sobre cuándo deberías escribir una función? El que se llama DRY - no te repitas? Nos estamos repitiendo a lo grande agregando el código anterior. ¿Qué pasaría si tuviéramos que cambiar el contenido que se muestra con el primer botón? Tendríamos que recordar actualizarlo en dos lugares. Eso no es bueno Sería genial si pudiéramos usar la función de reutilización ya escrita para configurar el contenido del primer botón.

Bueno, podemos! Esa llamada de función se encuentra en otra función, el controlador de eventos para el evento de clic del primer botón. Podemos simplemente llamar a esa función. El único problema es que está esperando un objeto de evento como parámetro y la llamada a la función causará errores si no le pasamos un argumento. Aquí hay un último truco para usted: ni siquiera estamos usando el parámetro del evento, solo se nos exige que tengamos el parámetro porque el evento clic pasará a un evento. Sin embargo, si no siempre necesitamos un parámetro, podemos hacerlo opcional. Si reescribimos la firma de la función para que se vea así:

1	function onButton1Click(event:MouseEvent=null):void {

Entonces podemos simplemente llamar:

1	onButton1Click();

Al final de nuestro script para activar el equivalente a un clic en el botón 1, asegúrese de que la primera página de contenido aparezca cuando comencemos la película. Aquí está todo el script para referencia:

var image:Loader = new Loader();
addChild(image);
image.x = 170;
image.y = 34;

link_mc.addEventListener(MouseEvent.CLICK, onReadMoreClick);
var linkUrl:String;
function onReadMoreClick(me:MouseEvent):void {
	var url:URLRequest = new URLRequest(linkUrl);
	navigateToURL(url, "_blank");
}

button1_mc.addEventListener(MouseEvent.CLICK, onButton1Click);
button2_mc.addEventListener(MouseEvent.CLICK, onButton2Click);
button3_mc.addEventListener(MouseEvent.CLICK, onButton3Click);
button4_mc.addEventListener(MouseEvent.CLICK, onButton4Click);
button5_mc.addEventListener(MouseEvent.CLICK, onButton5Click);
button6_mc.addEventListener(MouseEvent.CLICK, onButton6Click);

function onButton1Click(event:MouseEvent=null):void {
	setContent("Create an Impressive Magnifying Effect with ActionScript 3.0",
			"In this tutorial we’ll create a magnifying glass effect, demonstrating use of the displacementMapFilter. The effect can be achieved in a relatively short space of time and with very little code.",
			"maginfy.jpg",
			"http://flash.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/#more-354"
	);
}

function onButton2Click(event:MouseEvent):void {
	setContent("Build a Dynamic Flash Gallery with Slider Control",
			"In this tutorial, we’ll create a gallery which displays all image files in a given directory. A slider is used to browse easily through the images.",
			"slider.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-gallery-with-actionscript-30-and-php/#more-509"
	);
}

function onButton3Click(event:MouseEvent):void {
	setContent("Build a Dynamic Guest Book with XML and ActionScript 3.0",
			"Guest books are a great thing to enhance the online experience your viewers receive. The ability for the viewer to talk to you and others, respond to questions you’ve raised, comment on your work or just to socialize means a guest book is a must have for most web sites. Let’s see how we can build our own guest book with ActionsScript 3.0, XML and PHP.",
			"guestbook.jpg",
			"http://flash.tutsplus.com/tutorials/xml/build-a-dynamic-guest-book-with-xml-and-actionscript-30/#more-539"
	);
}

function onButton4Click(event:MouseEvent):void {
	setContent("Create Your Own Pseudo 3D Pong Game",
			"In this tut I’ll describe how to create a basic 3D scene using the new 3D options of Flash Player 10. Then I’ll explain how to add interactivity to the elements and set up a basic pong game. Let’s go..",
			"pong.jpg",
			"http://flash.tutsplus.com/tutorials/games/create-a-pseudo-3d-pong-game/#more-620"
	);
}

function onButton5Click(event:MouseEvent):void {
	setContent("Build a Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D",
			"Today we’re going to build a wiimote controlled lightsaber using WiiFlash and Papervision3D. The goal of this tutorial will be to learn how to use a wiimote within flash and how to combine it with papervision3D. Afterwards, of course, you can use this app to train for your Jedi mastership.",
			"wiimote.png",
			"http://flash.tutsplus.com/tutorials/games/build-a-wiimote-controlled-lightsaber-using-wiiflash-and-papervision3d/#more-634"
	);
}

function onButton6Click(event:MouseEvent):void {
	setContent("Intro to Flash Camo: Part 1",
			"Welcome to an introduction of the Flash Camouflage Framework. Flash Camo (for short) is a graphics framework that is broken down into 3 core areas: \"Decals\", the \"CSS Parser\" and the \"CamoDisplay\". These systems can be used individually or combined to fit your needs. When used together they form a powerful set of tools to help skin and style any Flash application. With Camo’s modular approach, you can use as little or as much of the framework as you want.\n\nIn this two part tutorial we’re going to build a simple website to show how easy it is to incorporate Flash Camo into your next project.",
			"flashcamo.jpg",
			"http://flash.tutsplus.com/tutorials/workflow/intro-to-flash-camo-part-1/#more-776"
	);
}

function setContent(title:String, body:String, imageUrl:String, link:String):void {
	title_tf.text = title;
	body_tf.text = body;
	var url:URLRequest = new URLRequest("images/" + imageUrl);
	image.load(url);
	linkUrl = link;
}

onButton1Click();

Paso 24: Crédito Extra

Es posible que desee tomar el concepto que se trató en el tutorial de Variables (trabajar con un grupo de botones y hacer que solo se pueda seleccionar uno a la vez) y aplicarlo a este proyecto. Ahí es cuando las cosas empiezan a ponerse interesantes: tomas un poco de conocimiento aquí, un poco allí, los mezclas y creas algo increíble.

Conclusión

Esperemos que en este punto, usted, el aspirante a ActionScripter, se sienta cómodo con el concepto de funciones y las locuras que se pueden hacer con ellas. Este tutorial ni siquiera ha hablado sobre el parámetro de descanso, los métodos call () y apply (), el cierre de funciones, la pila de llamadas, la recursión y la idea de una función como un objeto de primera clase. Eso vendrá después. Sin embargo, debe tener suficiente conocimiento sobre el uso fundamental de las funciones para comenzar a compartimentar sus programas en trozos de código reutilizables.

Solo recuerda, si alguna vez te encuentras escribiendo lo mismo (o algo muy similar) dos veces, ¡debes pensar en usar funciones!