<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>llops blog &#187; Utilidades</title>
	<atom:link href="http://llops.com/blog/category/utilidades/feed/" rel="self" type="application/rss+xml" />
	<link>http://llops.com/blog</link>
	<description>Blog de programación creativa mantenido por llops. Experimentos y artículos entorno a la plataforma flash y as3.</description>
	<lastBuildDate>Fri, 07 Oct 2011 22:22:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Trabajando con FlashDevelop en Mac</title>
		<link>http://llops.com/blog/2010/02/21/trabajando-con-flashdevelop-en-mac/</link>
		<comments>http://llops.com/blog/2010/02/21/trabajando-con-flashdevelop-en-mac/#comments</comments>
		<pubDate>Sun, 21 Feb 2010 20:04:28 +0000</pubDate>
		<dc:creator>llops</dc:creator>
				<category><![CDATA[Utilidades]]></category>
		<category><![CDATA[AppleScript]]></category>
		<category><![CDATA[flash cs4]]></category>
		<category><![CDATA[Flash Professional]]></category>
		<category><![CDATA[FlashDevelop]]></category>
		<category><![CDATA[fusion]]></category>
		<category><![CDATA[jsfl]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[macbook]]></category>
		<category><![CDATA[macros]]></category>
		<category><![CDATA[parallels]]></category>
		<category><![CDATA[QuickSilver]]></category>
		<category><![CDATA[script]]></category>
		<category><![CDATA[windows]]></category>
		<category><![CDATA[wmware]]></category>

		<guid isPermaLink="false">http://llops.com/blog/?p=218</guid>
		<description><![CDATA[Una vez comentados los motivos por los que de momento no voy a prescindir de FlashDevelop en Mac, toca explicar cómo lo tengo instalado yo y que workflow utilizo para que sea cómodo trabajar con Flash Professional. Virtualización Como no hay magia que valga, lo primero es hacerse con un programa de virtualización para instalar [...]]]></description>
			<content:encoded><![CDATA[<p>Una vez comentados <a href="http://llops.com/blog/2010/02/20/eligiendo-editor-de-actionscript-en-mac/" target="_blank">los motivos</a> por los que de momento no voy a prescindir de FlashDevelop en Mac, toca explicar cómo lo tengo instalado yo y que workflow utilizo para que sea cómodo trabajar con Flash Professional.</p>
<p><span id="more-218"></span></p>
<h4>Virtualización</h4>
<p>Como no hay magia que valga, lo primero es hacerse con un programa de virtualización para instalar Windows. Los dos más conocidos son <a href="http://www.vmware.com/products/fusion/" target="_blank">VMware Fusion</a> y <a href="http://www.parallels.com/es/products/desktop/" target="_blank">Parallels Desktop</a>.</p>
<p>Cuando me pasé a Mac estuve leyendo bastante sobre ambos. Al final me acabó convenciendo más el primero, así que me compré una licencia de Fusion. Sin entrar en comparaciones, Fusion arranca bastante rápido, soporta copy/paste y drag&amp;drop entre sistemas operativos, puedes acceder a las mismas carpetas desde ambos lados y tiene alguna otra característica interesante que ahora veremos.</p>
<p>No explicaré el proceso de instalación porque no es muy complicado y hay mucha información en la red, únicamente detallaré mi configuración por si sirve de ayuda.</p>
<h4>Configuración de Windows y VMware</h4>
<p>Yo tengo instalado un Windows 7 de 32 bits, FlashDevelop y poco más. Obviamente, si se necesitan más programas pues no pasa nada, pero es importante no tener procesos que se inicien en el arranque consumiendo memoria inútilmente, así que mejor instalar sólo lo imprescindible. Desaconsejo totalmente antivirus, ya que me parece muy difícil infectarse sin instalaciones ni navegación. Si se es muy desconfiado en este aspecto, mejor desactivar internet en Windows.</p>
<p>Importante desactivar el tema Aero, que para nuestro caso es absurdo. Yo utilizo el tema Windows 7 Basic y queda más que bonito. Y si no quieres dedicar ni un recurso a la estética, en "Herramientas de rendimiento", "Ajustar efectos visuales", activas "Mejor rendimiento" y te lo deja pelado.</p>
<p>En cuanto a la configuración de VMware, lo más relevante:</p>
<p><a class="outbound-link" href="http://llops.com/blog/content/articulos/feb10/configuracion-vmware.png" target="_blank"><img title="Configuracion VMware" src="http://llops.com/blog/content/articulos/feb10/configuracion-vmware.png" alt="" width="475" height="288" /></a></p>
<ul>
<li>Compartir: útil si vas a trabajar en Windows, ya que podrás acceder a cualquier directorio de Snow Leopard que añadas.</li>
<li>Aplicaciones: aquí podemos añadir un acceso directo de FlashDevelop al Dock.</li>
<li>Procesador: 1 núcleo. Esto quiere decir que el sistema virtual utilizará un nucleo del procesador, pero no de manera exclusiva. Nuestro Mac continuará utilizando los dos.</li>
<li>Memoria: 1024 MB. En este caso la memoria sí que se reserva entera, es decir, que cuando Windows esté corriendo tendrá 1 giga reservado que no podrá utilizar Snow Leopard. Con Aero desactivado, para correr Windows y FD hay más que de sobras, así que no os preocupe darle "un poquito más" de este mínimo.</li>
<li>Pantalla: sino tenéis dependencia de DirectX 9 (para juegos) ni utilizáis Aero, desactivar la opción "Acelerar Gráficos 3D".</li>
<li>Disco duro: yo tengo una partición de 40 gigas, pero realmente bastaría con el espacio de Windows y poco más. Siempre es interesante cubrirse un poco para la memoria virtual, por si tomas muchos snapshots, porque al final siempre se acaban instalando cosas...</li>
</ul>
<p>Una de las ventajas de virtualizar es que si la máquina no está corriendo, se puede cambiar toda la configuración, así que no tengáis miedo de ir probando configuraciones hasta que os sintáis cómodos. Pero si no queréis perder tiempo, con lo ya comentado, en un MacBook Pro Core 2 Duo de 2'66 y 4 gigas de ram, corriendo Windows 7 con FlashDevelop, más Flash, Chrome, Safari, Spotify y unos cuantos programas "menores" más, el ordenador "vuela" :)</p>
<p>Y un último apunte: cuando no se trabaje con la máquina virtual lo más cómodo y rápido es suspenderla, no apagarla, recuperando todos nuestros recursos y pudiendo volver luego en segundos.</p>
<h4>Modo Unity</h4>
<p>Una de las cosas más agradables y útiles de Fusion es su vista "Unity". En este modo, el escritorio de Windows desaparece y las aplicaciones aparecen como una ventana más de Mac. Perfecto, ¿no?</p>
<p><a class="outbound-link" href="http://llops.com/blog/content/articulos/feb10/modo-unity.png" target="_blank"><img title="Modo Unity de Fusion" src="http://llops.com/blog/content/articulos/feb10/modo-unity.png" alt="" width="500" height="350" /></a></p>
<p><a class="outbound-link" href="http://llops.com/blog/content/articulos/feb10/fd-integrado.jpg" target="_blank"><img title="FlashDevelop integrado" src="http://llops.com/blog/content/articulos/feb10/fd-integrado.jpg" alt="" width="500" height="120" /></a></p>
<p>Y como comentaba antes, hacer un drag&amp;drop de archivos, un copy&amp;paste o cualquier típica operación entre programas funciona a la perfección. Un gran paso para sentirnos como si estuviéramos en un único sistema.</p>
<h4>En busca del workflow perfecto</h4>
<p>A pesar de que así está todo bastante integrado, falta una cosa básica: poder ejecutar películas en Flash desde FlashDevelop. Al principio pensé que mucha gente habría buscado una solución a esto y no sería difícil. No estaba equivocado ni nada...</p>
<p>Parece ser que en Parallels se puede instalar una herramienta llamada "Shared Applications" que te permite mapear programas, con lo que se puede configurar en FD la ruta a Flash.app (también vi que está lejos de ser perfecto y que muchísima gente tenía problemas). Desgraciadamente, en Fusion no existe nada similar.</p>
<p>Así que me puse a darle vueltas a la cabeza hasta encontrar un camino.</p>
<h4>QuickSilver</h4>
<p><a title="Página oficial de Quicksilver" href="http://www.blacktree.com/" target="_blank">QuickSilver</a> es un programa que mucha gente del mundo Mac considera imprescindible y que sirve para lanzar aplicaciones rápidamente (esta es la utilidad más básica, realmente puede hacer mil cosas). Por ejemplo, yo para ejecutar Flash CS4 no lo busco en Aplicaciones ni el Dock, simplemente hago cmd+space, tecleo Fl y enter. Al principio puede parecer tonto, pero cuando te acostumbras no hay vuelta atrás.</p>
<p>Me acordé que el programa tiene un apartado llamado "Triggers" e indagé un poco. Un trigger permite asociar una acción (abrir una aplicación, correr un script, etc) a una combinación de teclas. Pensé que si podía correr un script funcionaría también con un jsfl... ¡y bingo!.</p>
<p>Así que abrimos Flash, creamos un nuevo archivo del tipo "Flash Javascript File" y escribimos la siguiente linea:</p>
<div class="igBar"><span id="lactionscript3-7"><a href="#" onclick="javascript:showCodeTxt('actionscript3-7'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-7">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">fl.<span style="color: #555;">getDocumentDOM</span><span style="color: #555;">&#40;</span><span style="color: #555;">&#41;</span>.<span style="color: #555;">testMovie</span><span style="color: #555;">&#40;</span><span style="color: #555;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Lo guardamos en el escritorio como <em>testmovie.jsfl</em></p>
<p>Ahora abrimos QuickSilver, vamos a "Preferences" y activamos la opción "Enable advances features" (no estoy 100% seguro que sea imprescindible, pero por si acaso). Después vamos al menú "Triggers", añadimos uno nuevo (parte inferior, en el +, "HotKey"), y nos sale una nueva ventanita. En "Select an item", sólo hace falta empezar a teclear el nombre de nuestro archivo y QuickSilver lo encontrará y nos pondrá por defecto la "Action" de "Open". Guardamos.</p>
<p><a class="outbound-link" href="http://llops.com/blog/content/articulos/feb10/trigger.png"><img title="Añadiendo un trigger" src="http://llops.com/blog/content/articulos/feb10/trigger.png" alt="" width="218" height="358" /></a></p>
<blockquote><p><strong>Nota</strong>: si al empezar a escribir no nos detecta el script seguramente sea porque no lo tiene indexado todavía. En el menú, junto a Triggers, hay una opción llamada "Catalog". Buscamos nuestra ubicación, en este caso Desktop, la seleccionamos y en la parte inferior, clicamos en el icono de refrescar (Rescan Source). Debería aumentar el número de elementos indexados. Ahora seguro que ya encuentra nuestro archivo.</p></blockquote>
<blockquote><p><strong>Nota:</strong> QuickSilver no indexa todo el disco duro, sino que tiene unos directorios por defecto (el escritorio es uno de ellos). Si prefieres agrupar tus scripts en otro directorio tendrás que incluirlo a mano. Esto se hace también en "Catalog", en "Custom". Ahí añadimos un archivo o carpeta. Atención que si añadimos una carpeta, en el nuevo submenú que aparece, hay que indicar en "Include contents" que los queremos todos, sino coge el directorio pero no su contenido. Lo seleccionamos y volvemos a refrescar para que lo indexe.</p></blockquote>
<p>Ahora que tenemos nuestro trigger, sólo falta asignarle una tecla. Click sobre la palabra "Hot Key" (o en la "i" del menú inferior, "Trigger Info"), "Edit" y ponemos nuestro atajo. En mi caso he elegido "alt+z". Para activar el trigger, desactivar-activar una vez el check de la izquierda.</p>
<p><a class="outbound-link" href="http://llops.com/blog/content/articulos/feb10/custom-trigger.jpg" target="_blank"><img title="Trigger para testmovie.jsfl" src="http://llops.com/blog/content/articulos/feb10/custom-trigger.jpg" alt="" width="500" height="170" /></a></p>
<p>¡Voilá, ahora ya podemos ejecutar en cualquier momento nuestra película desde FlashDevelop! (realmente desde cualquier sitio :p )</p>
<h4>Guardar y compilar</h4>
<p>Aunque ahora el flujo es bastante bueno, todavía falta que con el mismo comando se pueda guardar la clase que se está modificando y luego saltar a Flash para compilar. Sino eres tan purista-pesado-friki como yo, con la opción anterior es suficiente; si lo eres, a seguir leyendo.</p>
<p>La primera idea era buscar un script que pudiera guardar en FlashDevelop e intentar correrlo luego con QuickSilver, de la misma manera que hemos hecho con el jsfl. Lo primero, no encontré la forma de generar dicho script, y lo segundo, en QuickSilver con un único comando no puedes ejecutar dos opciones (realmente si he visto una forma, pero no entendí ni la mitad).</p>
<p>Leyendo leyendo fui a parar a un post de un tío que manipulaba Spotify vía <a title="Wikipedia: AppleScript" href="http://es.wikipedia.org/wiki/AppleScript" target="_blank">AppleScript</a>, así que ahí vi otro camino: crear un applescript que se comunicara con FlashDevelop y ejecutarlo desde QuickSilver también. Como seguía encontrando el escollo de "un comando, dos scripts", primero me puse a buscar la forma de poder hacer un "TestMovie" con AppleScript también, para tenerlo todo en un único archivo. Así que descarté el jsfl inicial y adapté el código del Spotify a Flash CS4.</p>
<p>Mac Os cuenta con "Apple Script Editor", que va de coña para ir probando los scripts. Lo abrimos, creamos un nuevo fichero y copiamos este código:</p>
<div class="igBar"><span id="lactionscript3-8"><a href="#" onclick="javascript:showCodeTxt('actionscript3-8'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-8">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"Adobe Flash CS4"</span> to activate</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"System Events"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell process <span style="color: #555;">"Adobe Flash CS4"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">click menu item <span style="color: #FF0000;color:#000099;">8</span> of menu <span style="color: #FF0000;color:#000099;">1</span> of menu bar item <span style="color: #FF0000;color:#000099;">10</span> of menu bar <span style="color: #FF0000;color:#000099;">1</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">end tell</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">end tell </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Este código pone en primer plano Flash o lo abre si no lo está, y simula un clic en la opción "Test Movie". La traducción del script es esta:</p>
<p><em>menu item "Test Movie" of menu "Control" of menu bar item "Control" of menu bar 1 of application process "Adobe Flash CS4" of application "System Events"</em></p>
<p>Increíble, ¿no?</p>
<blockquote><p><strong>Muy importante</strong>: es probable que el script os arroja un error similar a este "El acceso a los dispositivos de ayuda está desactivado". Esto pasa porque el comando "System Events" no puede operar. Para que funcione, hay que ir a "Preferencias del sistema" (sí, de Mac), "Acceso Universal", y abajo activar "Activar Acceso para dispositivos de ayuda".</p>
<p><strong>Pausa para desahogo:</strong> ¿quién carajo sabe esto? ¿Por qué en todos los tutos que vi sobre AppleScript no lo comentan? Lo encontré tras un buen rato de búsqueda en un foro de frikis de World of Warcraft que lo utilizaban para configurarse nosequé del juego... En fin, para llorar.</p></blockquote>
<blockquote><p><strong>Nota</strong>: Otra cosa que descubrí por la vía dolorosa es que los separadores del menú cuentan como 1, de ahí que "Test Movie" corresponda al número 8 aunque esté en la posición 6. Ojo con esto si intentais manipular cualquier otro comando.</p></blockquote>
<p>Cuando por fin pude ejecutar el script y ver que funcionaba, fue fácil pensar que para FlashDevelop sería lo mismo. Así que me dispuse a probarlo. Una cosa que mola mucho del editor de AppleScript que si pones el nombre de un programa que no reconoce (yo por ejemplo ponía -tell application "FlashDevelop" to activate-), al ejecutar te pregunta dónde está y te ofrece la lista de programas (¡incluso los de Windows!) para resolver el nombre correcto:</p>
<p><a class="outbound-link" href="http://llops.com/blog/content/articulos/feb10/seleccionar-aplicacion.png" target="_blank"><img title="Seleccionar aplicación" src="http://llops.com/blog/content/articulos/feb10/seleccionar-aplicacion.png" alt="" width="500" height="290" /></a></p>
<p>Así que puse la ruta para llegar hasta el menú "File &gt; Save" en FD y corrí el script, pero no funcionaba por un error de base que tarde un poco en detectar:</p>
<p><img title="Menu FD en Mac" src="http://llops.com/blog/content/articulos/feb10/menu-fd.png" alt="" width="326" height="163" /></p>
<p>Efectivamente, el menú de FlashDevelop cuando tiene el foco no es el del programa de Windows, sino el del "wrapper" de Mac, así que otro "fail" para la lista.</p>
<p>Vuelta a leer tutoriales sobre AppleScript y posibilidades y encontré algo superútil: igual que se pueden simular clics de ratón se pueden simular pulsaciones de tecla. Así que tras unas pruebas pude comprobar que ganando el foco del programa y lanzando un "Ctrl+S" (estamos en Windows) guardaba el documento. ¡Por fin!</p>
<div class="igBar"><span id="lactionscript3-9"><a href="#" onclick="javascript:showCodeTxt('actionscript3-9'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-9">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"FlashDevelop 3 — Windows 7"</span> to activate</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"System Events"</span> to key code <span style="color: #FF0000;color:#000099;">1</span> using control down </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<blockquote><p>Nota: el 1 corresponde a la "s" en key code. <a href="http://applescripts.thompson-solutions.com/applescript_reference_keystroke_key_code_keyboard_guide.php" target="_blank">Aquí</a> os podéis bajar un pdf con los "key code" de un teclado Mac. Lo necesitaréis para configuraros vuestros propios atajos.</p></blockquote>
<p>"Pues ya sólo queda ponerlo todo en un script", pensé, pero había una última sorpresa: el script saltaba a FD, acto seguido a Flash y compilaba, pero no guardaba. ¿WTF? Cuando volvía a ejecutar únicamente el código de guardar funcionaba, pero me di cuenta que tardaba unas décimas de segundo, y pensé que seguramente al intervenir la máquina virtual no era lo suficientemente rápido al enviar el comando y ganaba el foco Flash antes de poder guardar. Esta vez me costó apenas unos minutos encontrar una instrucción "delay", y efectivamente, era eso.</p>
<p>Finalmente, nuestro script queda de la siguiente manera:</p>
<div class="igBar"><span id="lactionscript3-10"><a href="#" onclick="javascript:showCodeTxt('actionscript3-10'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-10">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"FlashDevelop 3 — Windows 7"</span> to activate</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">delay <span style="color: #FF0000;color:#000099;">0</span>.<span style="color: #FF0000;color:#000099;">5</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"System Events"</span> to key code <span style="color: #FF0000;color:#000099;">1</span> using control down</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"Adobe Flash CS4"</span> to activate</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"System Events"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell process <span style="color: #555;">"Adobe Flash CS4"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">click menu item <span style="color: #FF0000;color:#000099;">8</span> of menu <span style="color: #FF0000;color:#000099;">1</span> of menu bar item <span style="color: #FF0000;color:#000099;">10</span> of menu bar <span style="color: #FF0000;color:#000099;">1</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">end tell</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">end tell </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Lo dejo para descargar aquí: http://llops.com/descargas/applescripts/save-test-movie.scpt</p>
<p>Dos cosas a tener cuenta:</p>
<ol>
<li>la ruta que hay en el script para FD y Flash quizá no corresponda con la vuestra. Setearla como he comentado antes.</li>
<li>el delay de medio segundo es suficiente para mi máquina, pero quizá en otras deba aumentarse a un segundo o más.</li>
</ol>
<p>Una vez guardado el script, volvemos a QuickSilver, repetimos los pasos para hacer un trigger con nuestro nuevo script, <strong>y ahora sí que sí</strong>, con una tecla podemos guardar nuestro fichero activo y compilar en Flash (ueeeee).</p>
<h4>Guardar todos los archivos y compilar</h4>
<p>Pero... ¿y si se quieren guardar todos los archivos en vez de únicamente el que tiene el foco? Esta es una opción que utilizo mucho, ya que voy saltando de archivo en archivo, picando código y compilando "de golpe". Pues otro problema, porque FlashDevelop tiene un atajo para "Save" y "Save as...", pero no para "Save all".</p>
<p>Esta vez no tuve que perder mucho tiempo, porque en la "investigación" inicial de FlashDevelop descubrí los "macros" (eso a lo que nunca se presta atención). Vamos a "Edit macros..." (Ctrl+F10), creamos uno nuevo, y en "Entries" añadimos el siguiente comando:</p>
<div class="igBar"><span id="lactionscript3-11"><a href="#" onclick="javascript:showCodeTxt('actionscript3-11'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-11">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">SaveAllModified|as </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Asignamos el shortcut que queramos y guardamos. Ahora podemos añadir dicho atajo en nuestro script y cada vez que compilemos guardará todos los archivos abiertos.</p>
<h4>Cerrar la película de Flash y volver a FlashDevelop</h4>
<p>Y ya para acabar (lo juro), un script tonto que mejora un poquito más mi flujo:</p>
<div class="igBar"><span id="lactionscript3-12"><a href="#" onclick="javascript:showCodeTxt('actionscript3-12'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-12">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"Adobe Flash CS4"</span> to activate</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"System Events"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell process <span style="color: #555;">"Adobe Flash CS4"</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">click menu item <span style="color: #FF0000;color:#000099;">5</span> of menu <span style="color: #FF0000;color:#000099;">1</span> of menu bar item <span style="color: #FF0000;color:#000099;">3</span> of menu bar <span style="color: #FF0000;color:#000099;">1</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">end tell</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">end tell</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tell application <span style="color: #555;">"FlashDevelop 3 — Windows 7"</span> to activate </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Simplemente pone el foco en Flash, cierra la película y asigna el foco a FD. En mi caso tengo "cmd+0" para guardar/compilar, compruebo que va bien y pulso "cmd+9" para cerrar el test y volver a FlashDevelop para seguir trabajando.</p>
<blockquote><p><strong>Nota:</strong> a tener en cuenta que si no hay una película en test cerrará el archivo fla. Está con el método del "click" porque con teclas (cmd+w) no acaba de ir bien... no sé porqué...</p></blockquote>
<h4>Conclusión</h4>
<p>Si no quieres renunciar a seguir trabajando con FlashDevelop y Flash Professional en Mac, hay mecanismos suficientes para tener un workflow "perfecto" en el sistema de la manzana. Todo el tema de guardar/compilar quizá sea un poco geek, rebuscado o como se quiera llamar, pero funciona. Y de eso se trata la tecnología, de ponerla a nuestro servicio para facilitarnos las tareas.</p>
<p>Por otro lado siento lo larguísimo del post. Soy consciente de que lo podía haber acortado mucho, pero QuickSilver y AppleScript me han parecido herramientas terriblemente potentes, y creo que ha sido interesante hablar sobre ellas y que cada uno le saque partido no sólo para esto, sino para lo que se le pueda ocurrir que facilite los flujos de trabajo diarios. Me encantará si a alguien se le ocurren nuevos scripts y los comparte.</p>
<p>Por último, espero el comentario que diga "Pero vaya matada! si esto se puede hacer así y así de fácil" :) Aún así, volvería a pasar por este proceso. A veces nos tiramos tanto tiempo rodeados de Flash que nos creemos que únicamente somos programadores Flash, cuando al final ser programador es tener una base para enfrentar problemas y sacar soluciones.</p>
<p>Con mucha ayuda de Google, claro.</p>
<hr />
<p><small>
<a href="http://llops.com/blog/2010/02/21/trabajando-con-flashdevelop-en-mac/#comments">21 comentarios</a>
<br/>
<a href="http://twitter.com/share?url=http://llops.com/blog/2010/02/21/trabajando-con-flashdevelop-en-mac/&text=Leyendo%20%22Trabajando con FlashDevelop en Mac%22&via=llops%20blog">Compartir en Twitter</a> | 
<a href="http://www.facebook.com/sharer.php?u=http://llops.com/blog/2010/02/21/trabajando-con-flashdevelop-en-mac/&t=Trabajando con FlashDevelop en Mac">Compartir en Facebook</a>

<br/><br/>
© <a href="http://llops.com/blog">llops blog</a> 2010 
</small></p>]]></content:encoded>
			<wfw:commentRss>http://llops.com/blog/2010/02/21/trabajando-con-flashdevelop-en-mac/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>TweenMax</title>
		<link>http://llops.com/blog/2008/04/13/tweenmax/</link>
		<comments>http://llops.com/blog/2008/04/13/tweenmax/#comments</comments>
		<pubDate>Sat, 12 Apr 2008 22:55:09 +0000</pubDate>
		<dc:creator>llops</dc:creator>
				<category><![CDATA[Utilidades]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[tween]]></category>
		<category><![CDATA[TweenFilterLite]]></category>
		<category><![CDATA[TweenLite]]></category>
		<category><![CDATA[TweenMax]]></category>
		<category><![CDATA[utils]]></category>

		<guid isPermaLink="false">http://llops.com/blog/2008/04/13/tweenmax/</guid>
		<description><![CDATA[Pocos días después de escribir este artículo donde explicaba lo genial que es TweenLite, Jack pone a nuestra disposición TweenMax, una nueva clase que se construye sobre TweenLite agregándole nuevas funcionalidades "populares, pero no esenciales" (aunque a mi juicio, algunas se acercan más a lo esencial que a lo popular). Entre las nuevas características encontramos: [...]]]></description>
			<content:encoded><![CDATA[<p>Pocos días después de escribir <a title="TweenLite" href="http://llops.com/blog/2008/04/05/tweenlite/" target="_blank">este artículo</a> donde explicaba lo genial que es <strong>TweenLite</strong>, <strong>Jack</strong> pone a nuestra disposición <strong>TweenMax</strong>, una nueva clase que se construye sobre <strong>TweenLite</strong> agregándole nuevas funcionalidades "populares, pero no esenciales" (aunque a mi juicio, algunas se acercan más a lo esencial que a lo popular). </p>
<p>Entre las nuevas características encontramos:</p>
<ul>
<li>Tweens con Bezier (por fin!)</li>
<li>Bezier through, un nuevo sistema en el que se definen los puntos a trazar en vez de los puntos de control de la curva. Es una idea genial, ya que es infinitamente más intuitivo. Me preguntó porqué nadie lo habrá hecho antes...</li>
<li>Se pueden pausar y reanudar las animaciones</li>
<li>Se pueden crear secuencias de animaciones</li>
<li>Se puede saltar a cualquier punto del tween</li>
<li>Se puede animar a nivel hexadecimal </li>
<li>...</li>
</ul>
<p>Si quieres ver de todo lo que es capaz, en el site encontrarás una tabla comparativa de las clases con todas sus funcionalidades.</p>
<p>Y a pesar de las características añadidas, el peso sigue siendo mínimo (8kb), y la velocidad y rendimiento tan increíbles como antes.</p>
<p>En el artículo anterior comentaba que TweenLite tenía alguna debilidad, pero TweenMax las cubre todas. Personalmente, ahora sí puedo decir que <strong>TweenLite</strong>, junto con <strong>TweenFilterLite</strong> y <strong>TweenMax</strong>, es el mejor paquete de animación que podemos encontrar para ActionScript.</p>
<p><a title="TweenMax AS3" href="http://www.greensock.com/tweenmax/" target="_blank">Descargar TweenMax</a></p>
<hr />
<p><small>
<a href="http://llops.com/blog/2008/04/13/tweenmax/#comments">6 comentarios</a>
<br/>
<a href="http://twitter.com/share?url=http://llops.com/blog/2008/04/13/tweenmax/&text=Leyendo%20%22TweenMax%22&via=llops%20blog">Compartir en Twitter</a> | 
<a href="http://www.facebook.com/sharer.php?u=http://llops.com/blog/2008/04/13/tweenmax/&t=TweenMax">Compartir en Facebook</a>

<br/><br/>
© <a href="http://llops.com/blog">llops blog</a> 2008 
</small></p>]]></content:encoded>
			<wfw:commentRss>http://llops.com/blog/2008/04/13/tweenmax/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>TweenLite</title>
		<link>http://llops.com/blog/2008/04/05/tweenlite/</link>
		<comments>http://llops.com/blog/2008/04/05/tweenlite/#comments</comments>
		<pubDate>Fri, 04 Apr 2008 22:24:38 +0000</pubDate>
		<dc:creator>llops</dc:creator>
				<category><![CDATA[Utilidades]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[tween]]></category>
		<category><![CDATA[TweenFilterLite]]></category>
		<category><![CDATA[TweenLite]]></category>
		<category><![CDATA[utils]]></category>

		<guid isPermaLink="false">http://llops.com/blog/2008/04/05/tweenlite/</guid>
		<description><![CDATA[La animación por código siempre ha sido un tema estrechamente relacionado con ActionScript. Extrañamente, Macromedia nunca cuidó demasiado este campo, así que algunos programadores empezaron a trabajar en iniciativas propias para cubrir sus necesidades. Algunas de ellas se convirtieron poco menos que en míticas. ¿Quién no recuerda a Robert Penner por sus revolucionarias librerías de [...]]]></description>
			<content:encoded><![CDATA[<p>La animación por código siempre ha sido un tema estrechamente relacionado con ActionScript. Extrañamente, Macromedia nunca cuidó demasiado este campo, así que algunos programadores empezaron a trabajar en iniciativas propias para cubrir sus necesidades.</p>
<p>Algunas de ellas se convirtieron poco menos que en míticas. ¿Quién no recuerda a <a title="Robert Penner" href="http://www.robertpenner.com/" target="_blank">Robert Penner</a> por sus revolucionarias librerías de <a title="Librerías Easing de Robert Penner" href="http://www.robertpenner.com/easing/" target="_blank">Easing</a>, o a <a title="About Moses" href="http://blog.mosessupposes.com/?page_id=7" target="_blank">Moses Gunesch</a> por su <a title="FuseKit" href="http://www.mosessupposes.com/Fuse/" target="_blank">FuseKit</a>?</p>
<p>Con la llegada de AS2 vimos algún avance pero muy pobre, y con AS3 yo pensé que ya no haría falta recurrir a soluciones de terceros, pero estaba equivocado. Aunque es cierto que con los paquetes <a title="Adobe Reference - fl.transitions" href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/transitions/package-detail.html" target="_blank">fl.transitions</a>, <a title="Adobe Reference - fl.motion" href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/motion/package-detail.html" target="_blank">fl.motion</a>, <a title="Adobe Reference - fl.transitions.easing" href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/transitions/easing/package-detail.html" target="_blank">fl.transitions.easing</a> y <a title="Adobe Reference - fl.motion.easing" href="http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/motion/easing/package-detail.html" target="_blank">fl.motion.easing</a> (en los que ha trabajado Penner, por cierto) se puede crear todo tipo de animaciones, a la hora de la verdad las clases son poco prácticas, ya que la sintaxis es engorrosa, no son suficientemente intuitivas y sobretodo son muy pesadas.</p>
<p>Por suerte, la comunidad AS se movió bastante rápido y en el 2007 ya había disponibles varios kits de animación para AS3. La mayoría de gente optó por <a title="Tweener" href="http://code.google.com/p/tweener/" target="_blank">Tweener</a>, entre ellos yo, pero hace cosa de 4 meses probé <a title="TweenLite AS3" href="http://www.greensock.com/tweenlite/" target="_blank">TweenLite</a> y quedé encantado. Desde entonces, cuando tengo que animar por código, <strong>TweenLite es mi primera opción</strong>.</p>
<p><span id="more-29"></span></p>
<p>Podría resumir TweenLite (que cuenta con versiones tanto para AS2 como para AS3) en tres características: muy fácil de usar, muy muy rápido y muy muy ligero.</p>
<h4>Fácil</h4>
<p>Como en casi todos los kits de animación, la sintaxis es muy fácil e intuitiva. No hay que crear ningún objeto, simplemente llamarlo y pasar 3 argumentos: el objeto a animar, el tiempo y las propiedades que deben ser animadas. Por ejemplo:</p>
<div class="igBar"><span id="lactionscript3-14"><a href="#" onclick="javascript:showCodeTxt('actionscript3-14'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-14">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">TweenLite.<span style="color: #555;">to</span><span style="color: #555;">&#40;</span>clip, <span style="color: #FF0000;color:#000099;">2</span>, <span style="color: #555;">&#123;</span>alpha:<span style="color: #FF0000;color:#000099;">0</span>.<span style="color: #FF0000;color:#000099;">5</span>, x:<span style="color: #FF0000;color:#000099;">120</span><span style="color: #555;">&#125;</span><span style="color: #555;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Dispone de muchas funciones avanzadas, como métodos onComplete, onStart y onUpdate (pudiendo pasar parámetros), <em>delays</em>, posibilidad de animar por frames, tweens simples para alpha, volumen, color...</p>
<p>Lo mejor es ir a la <a title="TweenLite AS3" href="http://www.greensock.com/tweenlite/" target="_blank">web</a> para descubrir todas sus características. Ahí encontrarás también un ejemplo donde se ve lo fácil que es animar cualquier propiedad.</p>
<h4>Rápido</h4>
<p>El código está excelentemente optimizado, por lo que TweenLite es capaz de manejar cientos e incluso miles de tweens a la vez sin muchos problemas.</p>
<p>El propio autor tiene en su web un <a title="Tweening speed test" href="http://www.greensock.com/tweening-speed-test/" target="_blank">test comparativo</a> entre distintos <em>engines</em> donde TweenLite marca diferencias.</p>
<blockquote><p>¡Ojo al seleccionar el Tween de Adobe porque realmente te cuelga el navegador! Poner un número de instancias bajo.</p></blockquote>
<p>Y si te quedan dudas, puedes echar un ojo también a esta <em><a title="Benchmarks by Moses" href="http://www.goasap.org/benchmarks.html" target="_blank">serie de benchmarks</a></em> de Moses en los que TweenLite obtiene unos fantásticos resultados.</p>
<blockquote><p>Veréis que en los test hay un "candidato" llamado <em>Go</em> que destaca también por sus resultados. <em>Go</em> no es en sí un paquete de animación, sino una especie de framework desarrollado por Moses para crear nuestros propios tweens.</p></blockquote>
<p>Y como una imagen (o un swf) vale más que mil palabras, he desarrollado un pequeño ejemplo (click para empezar/parar) donde TweenLite maneja cerca de 4000 shapes por segundo con fluidez. Quite impressive, no?</p>
<p>
<object width="400" height="200">
<param name="movie" value="/blog/content/articulos/abr08/ejemplo_TweenLite.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" width="400" height="200" src="/blog/content/articulos/abr08/ejemplo_TweenLite.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<p class="swf-comment"><a title="Descargar ejemplo" href="http://llops.com/blog/content/articulos/abr08/ejemplo_tweenlite.zip" target="_blank">Descargar ejemplo</a></p>
<p>A modo de comparativa, hice el mismo ejemplo con Tweener y la diferencia es abismal. En el código dejo comentada la función por si alguien quieren hacer las pruebas, pero no añado las clases de Tweener para que no pese demasiado la descarga.</p>
<h4>Ligero</h4>
<p>Lo mejor es que TweenLite (que realmente es una clase con unas 300 lineas de código útil) sólo añade a nuestra película 3kb de peso.</p>
<p>Esto lo hace ideal para todo tipo de campañas online donde el tema del peso es crítico (precisamente yo lo probé cuando tuve que hacer un banner que no podía superar los 20kb). Este factor ha hecho que muchísimos desarrolladores y agencias apostemos por él.</p>
<p>Pero aún hay más...</p>
<h4>TweenFilterLite</h4>
<p>TweenFilterLite es una clase separada que extiende de TweenLite para poder animar todo tipo de filtros y otras propiedades como brillo, contraste, saturación, etc.</p>
<p>El mayor objetivo de Jack Doyle, autor del <em>engine</em>, es mantener siempre bajo mínimos el peso de las clases, de ahí que optara por separar funcionalidades. Utilizar las 2 clases sólo añade 6kb a nuestra película.</p>
<p>TweenLite me encanta, pero TweenFilterLite es una pequeña maravilla. Aunque no haya necesidad de animar, es infinitamente más fácil cambiar cualquier propiedad de una matriz mediante tween que mediante código.</p>
<p>En el mismo sitio donde se puede <a title="TweenFilterLite AS3" href="http://www.greensock.com/tweenfilterliteas3/" target="_blank">descargar</a>, encontrarás un ejemplo donde se muestra todo lo que se puede hacer con esta clase. Visita obligada.</p>
<p>Y otro ejemplo de cosecha propia. Con una simple linea de código se pueden conseguir efectos como estos (click para cambiar la composición):</p>
<p>
<object width="400" height="250">
<param name="movie" value="/blog/content/articulos/abr08/ejemplo_TweenFilterLite.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" width="400" height="250" src="/blog/content/articulos/abr08/ejemplo_TweenFilterLite.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<p class="swf-comment"><a title="Descargar ejemplo" href="http://llops.com/blog/content/articulos/abr08/ejemplo_tweenfilterlite.zip" target="_blank">Descargar ejemplo</a></p>
<h4>Contras</h4>
<p>Como ya he comentado, el gran objetivo de este kit es que sea liviano. Las 2 clases del paquete suman 50kb frente a los más de 100kb de Tweener contenidos en 9 clases. Esto quiere decir que TweenLite no tiene tantas funcionalidades como este último.</p>
<p>De todas maneras, estas funcionalidades podríamos calificarlas de muy avanzadas, y seguro que en la gran mayoría de casos TweenLite nos satisfará completamente.</p>
<p>Con todo, hay algo que sí podemos echar mucho en falta: <strong>no soporta tweens con Bezier</strong>. Si para tus animaciones utilizar curvas es un requisito <em>sine qua non</em>, de momento necesitarás otro <em>engine</em>.</p>
<p>Y digo de momento porque <em>Jack</em> está trabajando en lo que llama TweenMax, clase que extenderá de TweenLite para agregar funcionalidades más potentes como esta. Gran noticia :)</p>
<h4>Resumiendo</h4>
<p>La animación por código es algo que prácticamente todos hacemos, ya no sólo programadores, sino también muchos diseñadores. Debido a esta popularización hoy se pueden encontrar muchos kits de animación (yo conozco hasta 7 para AS3). Entre tantos, puede ser difícil elegir uno.</p>
<p>Durante todo el artículo he estado continuamente haciendo comparaciones con Tweener, y lo he hecho precisamente porque he trabajado mucho con este último y me parece un gran <em>engine,</em> más que recomendable.</p>
<p>Personalmente creo que no se puede decir que uno es mejor que otro: cada uno tiene un enfoque propio y prioriza determinadas cosas.</p>
<p>Aún así, el autor de TweenLite ha sabido crear un paquete que, con un impacto mínimo en el peso de nuestro archivo, permite animar fácilmente un número enorme de objetos sin que nuestra aplicación se resienta. Si todavía no lo has probado, dale una oportunidad y seguro que no te arrepentirás.</p>
<h4>Descargas</h4>
<p><a title="TweenLite Site" href="http://www.greensock.com/tweenlite/" target="_blank">TweenLite</a></p>
<p><a title="TweenFilterLite Site" href="http://www.greensock.com/tweenfilterliteas3/" target="_blank">TweenFilterLite</a></p>
<hr />
<p><small>
<a href="http://llops.com/blog/2008/04/05/tweenlite/#comments">13 comentarios</a>
<br/>
<a href="http://twitter.com/share?url=http://llops.com/blog/2008/04/05/tweenlite/&text=Leyendo%20%22TweenLite%22&via=llops%20blog">Compartir en Twitter</a> | 
<a href="http://www.facebook.com/sharer.php?u=http://llops.com/blog/2008/04/05/tweenlite/&t=TweenLite">Compartir en Facebook</a>

<br/><br/>
© <a href="http://llops.com/blog">llops blog</a> 2008 
</small></p>]]></content:encoded>
			<wfw:commentRss>http://llops.com/blog/2008/04/05/tweenlite/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Clase FrameScript</title>
		<link>http://llops.com/blog/2008/02/16/clase-framescript/</link>
		<comments>http://llops.com/blog/2008/02/16/clase-framescript/#comments</comments>
		<pubDate>Sat, 16 Feb 2008 19:20:45 +0000</pubDate>
		<dc:creator>llops</dc:creator>
				<category><![CDATA[Utilidades]]></category>
		<category><![CDATA[addFrameScript]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[FrameScript]]></category>
		<category><![CDATA[utils]]></category>

		<guid isPermaLink="false">http://llops.com/blog/2008/02/16/clase-framescript/</guid>
		<description><![CDATA[La clase MovieClip de AS3 tiene un método indocumentado llamado addFrameScript. Este método nos permite asociar una función a un número de frame. Esto significa que gracias a él podemos tener código en un punto concreto de nuestro timeline sin necesidad de codificar en Flash. Su firma es: Plain Text public function addFrameScript&#40;frame:int, func:Function&#41;:void; Pero... [...]]]></description>
			<content:encoded><![CDATA[<p>La clase MovieClip de AS3 tiene un método indocumentado llamado <em>addFrameScript</em>. Este método nos permite asociar una función a un número de frame. Esto significa que gracias a él podemos tener código en un punto concreto de nuestro timeline sin necesidad de codificar en Flash.</p>
<p>Su firma es:</p>
<div class="igBar"><span id="lactionscript3-21"><a href="#" onclick="javascript:showCodeTxt('actionscript3-21'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-21">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">public</span> <span style="color: #1518ff;">function</span> addFrameScript<span style="color: #555;">&#40;</span>frame:<span style="color: #000099;">int</span>, func:<span style="color: #1518ff;">Function</span><span style="color: #555;">&#41;</span>:<span style="color: #000099;">void</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p><span id="more-24"></span></p>
<h4>Pero... ¿por qué existe este método?</h4>
<p>Si utilizamos un movieClip que tenga código en alguno de sus frames o más de un frame (sino sería compatible con <em>Sprite</em>) y éste cuenta con una clase asociada, si la clase no extiende de <em>MovieClip</em>, el compilador arroja el siguiente error:</p>
<blockquote><p>1180: Call to a possibly undefined method addFrameScript.</p></blockquote>
<p>En el artículo <a title="Programando en AS3 desde Flash CS3 (I)" href="http://llops.com/blog/2007/12/01/programando-en-as3-desde-flash-cs3-i/" target="_blank">Programando en AS3 desde Flash CS3 (I)</a> vimos que, en AS3, todo lo que hacíamos en el IDE de Flash acababa "transformándose" en clases.</p>
<p>Pues bien, <em>addFrameScript</em> es la forma que tiene el compilador para coger el código que tenemos dispersado en nuestros movieclips y añadirlo a nuestra clase. De ahí que si se dan las condiciones que hemos visto, el compilador nos muestra ese error, ya que intenta buscar un método <em>addFrameScript</em> en una clase que no lo define.</p>
<h4>Sacando partido de addFrameScript</h4>
<p>Utilizando esta función indocumentada y la nueva clase de AS3 <a title="Referencia del LiveDoc de Adobe: FrameLabel" href="http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/flash/display/FrameLabel.html" target="_blank">FrameLabel</a>, escribí hace algún tiempo una sencilla clase que nos permite añadir y eliminar código en un frame que contenga una o más etiquetas. La clase se llama <a title="Clase FrameScript" href="http://llops.com/clases/as3/com/llops/utils/FrameScript.as" target="_blank">FrameScript</a>.</p>
<p>Para instanciar una nueva clase <em>FrameScript</em> debemos pasar un <em>MovieClip</em> en el constructor.</p>
<div class="igBar"><span id="lactionscript3-22"><a href="#" onclick="javascript:showCodeTxt('actionscript3-22'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-22">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">public</span> <span style="color: #1518ff;">function</span> FrameScript<span style="color: #555;">&#40;</span>mc:<span style="color: #000099;">MovieClip</span><span style="color: #555;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Una vez creada, disponemos de dos métodos públicos:</p>
<div class="igBar"><span id="lactionscript3-23"><a href="#" onclick="javascript:showCodeTxt('actionscript3-23'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-23">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Asocia una función en el frame que marca la etiqueta</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">public</span> <span style="color: #1518ff;">function</span> addScript<span style="color: #555;">&#40;</span>value:<span style="color: #000099;">String</span>, func:<span style="color: #1518ff;">Function</span><span style="color: #555;">&#41;</span>:<span style="color: #000099;">void</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Elimina la función asociada a la etiqueta</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">public</span> <span style="color: #1518ff;">function</span> removeScript<span style="color: #555;">&#40;</span>value:<span style="color: #000099;">String</span><span style="color: #555;">&#41;</span>:<span style="color: #000099;">void</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Utilizar etiquetas en vez del número del frame es mucho más intuitivo y permite modificar la longitud del timeline sin que nuestro código falle.</p>
<h4>Algunas formas de utilizar FrameScript</h4>
<p>Como variable de clase en caso que tengamos que acceder más de una vez a nuestra instancia:</p>
<div class="igBar"><span id="lactionscript3-24"><a href="#" onclick="javascript:showCodeTxt('actionscript3-24'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-24">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Variable de clase</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">private</span> <span style="color: #1518ff;">var</span> fs:FrameScript;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Constructor o metodo</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">fs = <span style="color: #1518ff;">new</span> FrameScript<span style="color: #555;">&#40;</span>mc<span style="color: #555;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">fs.<span style="color: #555;">addScript</span><span style="color: #555;">&#40;</span><span style="color: #555;">"labelFin"</span>, finAnimacion<span style="color: #555;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Metodo</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">private</span> <span style="color: #1518ff;">function</span> finAnimacion<span style="color: #555;">&#40;</span><span style="color: #555;">&#41;</span>:<span style="color: #000099;">void</span> <span style="color: #555;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; mc.<span style="color: #555;">alpha</span> = <span style="color: #FF0000;color:#000099;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; fs.<span style="color: #555;">removeScript</span><span style="color: #555;">&#40;</span><span style="color: #555;">"labelFin"</span><span style="color: #555;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #555;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Como variable local en caso que tengamos que acceder una única vez para asociar código:</p>
<div class="igBar"><span id="lactionscript3-25"><a href="#" onclick="javascript:showCodeTxt('actionscript3-25'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-25">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Variable de funcion</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">var</span> fs:FrameScript = <span style="color: #1518ff;">new</span> FrameScript<span style="color: #555;">&#40;</span>mc<span style="color: #555;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">fs.<span style="color: #555;">addScript</span><span style="color: #555;">&#40;</span><span style="color: #555;">"labelFin"</span>, finAnimacion<span style="color: #555;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Función dentro de método</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">function</span> finAnimacion<span style="color: #555;">&#40;</span><span style="color: #555;">&#41;</span>:<span style="color: #000099;">void</span><span style="color: #555;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; mc.<span style="color: #555;">alpha</span> = <span style="color: #FF0000;color:#000099;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #555;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Sin asignar variable (forma breve):</p>
<div class="igBar"><span id="lactionscript3-26"><a href="#" onclick="javascript:showCodeTxt('actionscript3-26'); return false;">Plain Text</a></span></div>
<div class="syntax_hilite">
<div id="actionscript3-26">
<div class="actionscript3">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #F0F; font-style: italic;">// Forma breve</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#666666;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #1518ff;">new</span> FrameScript<span style="color: #555;">&#40;</span>mc<span style="color: #555;">&#41;</span>.<span style="color: #555;">addScript</span><span style="color: #555;">&#40;</span><span style="color: #555;">"labelFin"</span>, <span style="color: #1518ff;">function</span><span style="color: #555;">&#40;</span><span style="color: #555;">&#41;</span>:<span style="color: #000099;">void</span> <span style="color: #555;">&#123;</span> mc.<span style="color: #555;">alpha</span> = <span style="color: #FF0000;color:#000099;">0</span> <span style="color: #555;">&#125;</span><span style="color: #555;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Y un ejemplo muy simple para ilustrar su uso: dos instancias de un mismo movieclip cuyo comportamiento es modificado al marcar el check.</p>
<p>
<object width="300" height="150">
<param name="movie" value="/blog/content/articulos/feb08/ejemplo_framescript.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="window"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" width="300" height="150" src="/blog/content/articulos/feb08/ejemplo_framescript.swf" quality="high" bgcolor="#FFFFFF" wmode="window" menu="false" ></embed>
</object>
</p>
<p class="swf-comment"><a title="Descargar ejemplo" href="http://llops.com/blog/content/articulos/feb08/framescript.zip" target="_blank">Descargar ejemplo</a></p>
<h4>Algunas consideraciones</h4>
<p>Gracias a este método podemos mantener todo el código encapsulado en nuestra clase sin necesidad de programar en la linea de tiempo. Incluso podemos añadir nuevas funcionalidades en tiempo de ejecución, no sólo de compilación.</p>
<p>Aunque en líneas generales es una buena práctica no tener el código "escampado" por el fla, el otro extremo puede ser igual de malo. Es más sencillo tener algunos frames con instrucciones sencillas tipo <em>stop()</em> que intentar sacar todo el código fuera.</p>
<p>Por otro lado, la mayoría de veces que un programador necesita meter código en un movieclip suele ser para sincronizar las animaciones. En estos casos sí que puede ser más conveniente utilizar <em>FrameScript</em> antes que tener un bloque de código similar  a esto:</p>
<blockquote><p>MovieClip(parent).stop();<br />
MovieClip(parent).proyectil.visible = false;<br />
MovieClip(parent.parent).finAnimacion();</p></blockquote>
<p>Por último, addFrameScript es un método indocumentado. Esto significa que Adobe no garantiza que en futuras versiones del Flash Player se soporte, y en ese caso nuestras películas fallarían. De todas formas, es muy improbable que suceda algo así y nunca he visto que se haya dado este problema con otros métodos indocumentados.</p>
<blockquote><p><strong>Update (29/03/09):</strong> <a href="http://www.yporqueno.es/blog/" target="_blank">Iván Gajate</a> me advierte de un error ya que el método <em>addFrameScript</em> trabaja con índice cero y se debe restar un frame para que asigne correctamente. La clase y los ejemplos ya están actualizados.</p></blockquote>
<p><a title="Descargar la clase FrameScript" href="http://llops.com/descargas/clasesAS3/FrameScript.zip" target="_blank">&gt;&gt; Descargar la clase FrameScript</a></p>
<hr />
<p><small>
<a href="http://llops.com/blog/2008/02/16/clase-framescript/#comments">7 comentarios</a>
<br/>
<a href="http://twitter.com/share?url=http://llops.com/blog/2008/02/16/clase-framescript/&text=Leyendo%20%22Clase FrameScript%22&via=llops%20blog">Compartir en Twitter</a> | 
<a href="http://www.facebook.com/sharer.php?u=http://llops.com/blog/2008/02/16/clase-framescript/&t=Clase FrameScript">Compartir en Facebook</a>

<br/><br/>
© <a href="http://llops.com/blog">llops blog</a> 2008 
</small></p>]]></content:encoded>
			<wfw:commentRss>http://llops.com/blog/2008/02/16/clase-framescript/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

