<?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>Web Blog D_sign &#187; Sin Categoria</title>
	<atom:link href="http://blog.yadahcl.com/category/sin-categoria/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.yadahcl.com</link>
	<description>Diseño web y bla bla bla</description>
	<lastBuildDate>Sat, 19 Jun 2010 05:02:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Como hacer un menu en Flash con Efectos de Rollover</title>
		<link>http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/</link>
		<comments>http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/#comments</comments>
		<pubDate>Thu, 05 Nov 2009 01:40:06 +0000</pubDate>
		<dc:creator>jluisfg</dc:creator>
				<category><![CDATA[Sin Categoria]]></category>

		<guid isPermaLink="false">http://blog.yadahcl.com/?p=150</guid>
		<description><![CDATA[Vamos a ver como realizar un menu en Flash, el cual mas tarde podriamos insertar en un documento HTML como encabezado de una página. Primero deberemos crear un rollover, y despues asignar los vinculos a cada botón. Mi escenario inicial cuenta con un fondo, y una serie de movieclips, los cuales seran mis botones. Es [...]]]></description>
			<content:encoded><![CDATA[<p>Vamos a ver como realizar un menu en Flash, el cual mas tarde podriamos insertar en un documento HTML como encabezado de una página.</p>
<p>Primero deberemos crear un rollover, y despues asignar los vinculos a cada botón.</p>
<p>Mi escenario inicial cuenta con un fondo, y una serie de movieclips, los cuales seran mis botones. Es importante que cada movieClip que asignado un nombre de instancia.</p>
<p style="text-align: center;"><a rel="attachment wp-att-151" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-04-49-05-p-m/"><img class="size-full wp-image-151 aligncenter" title="Escenario Inicial" src="http://blog.yadahcl.com/wp-content/uploads/2009/11/04-11-2009-04-49-05-p.m..png" alt="Como crear un menu con rollover" width="400" height="63" /></a></p>
<p style="text-align: left;"><span id="more-150"></span></p>
<p style="text-align: left;">Para hacer un rollover con uno de nuestros botones vamos a utilizar 2 Eventos: El evento<strong> ROLL_OVER</strong> y el Evento <strong>ROLL_OUT</strong>. El nombre de instancia del boton que usare sera miBoton_mc.</p>
<p style="text-align: left;">Si analizamos un rollover y en base a los eventos que mencionamos arriba, entonces necesitamos realizar 2 secuencia de animación para el botón, una cuando el mouse se encuentre encima y otra cuando el mouse salga del boton.</p>
<p style="text-align: left;">Dentro del boton haremos una animación sencilla en la cual una forma se sobreponga y tambien el texto debera tomar otro color.</p>
<p style="text-align: left;"><a rel="attachment wp-att-156" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/rollover/"><img class="alignnone size-full wp-image-156" title="rollOver" src="http://blog.yadahcl.com/wp-content/uploads/2009/11/rollOver.png" alt="rollOver" width="400" height="243" /></a></p>
<p style="text-align: left;">Debemos hacer la animación para llegar a este punto, y la animación para regresar al estado original. De tal manera que nuestra línea de tiempo debe quedar asi:</p>
<p style="text-align: left;"><a rel="attachment wp-att-157" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-05-58-07-p-m/"><img src="../wp-content/uploads/2009/11/04-11-2009-05-58-07-p.m..png" alt="" width="466" height="53" /></a></p>
<p style="text-align: left;">Ahora debemos colocar un par de fotogramas con la función stop() y usaremos etiquetas para poder detonar ciertas partes de la línea de tiempo despues. La línea de tiempo quedara de la siguiente manera:</p>
<p style="text-align: left;"><a rel="attachment wp-att-158" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-06-01-14-p-m/"><img class="alignnone size-full wp-image-158" title="04-11-2009 06-01-14 p.m." src="http://blog.yadahcl.com/wp-content/uploads/2009/11/04-11-2009-06-01-14-p.m..png" alt="04-11-2009 06-01-14 p.m." width="458" height="74" /></a></p>
<p style="text-align: left;">Ahora si, tenemos preparada la línea de tiempo de nuestro botón. Vamos a nuestra línea de tiempo principal, y en el primer fotograma necesitamos agregar 2 listeners, uno para el evento ROLL_OVER y otro para el evento ROLL_OUT. De la siguiente manera:</p>
<p style="text-align: left;"><a rel="attachment wp-att-159" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-06-09-07-p-m/"><img class="alignnone size-full wp-image-159" title="04-11-2009 06-09-07 p.m." src="http://blog.yadahcl.com/wp-content/uploads/2009/11/04-11-2009-06-09-07-p.m..png" alt="04-11-2009 06-09-07 p.m." width="496" height="178" /></a></p>
<p style="text-align: left;">Lo único que queda por hacer es, dentro de la función debemos utilizar un simple gotoAndPlay(&#8220;x1&#8243;) para la función detonada por el ROLL_OVER y el mismo gotoAndPlay(&#8220;x2) para la función detonada por el ROLL_OUT; recordemos que x1 es la etiqueta que le dimos a el primero de los fotgramas de la línea de tiempo del movieclip y la etiqueta x2 es la que esta justo a la mitad de la animación. De la siguiente forma:</p>
<p style="text-align: left;"><a rel="attachment wp-att-160" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-06-12-18-p-m/"><img title="04-11-2009 06-12-18 p.m." src="../wp-content/uploads/2009/11/04-11-2009-06-12-18-p.m..png" alt="04-11-2009 06-12-18 p.m." width="400" height="173" /></a></p>
<p style="text-align: left;">Ahora tenemos que cuando ponemos el mouse encima del boton detona la primera parte de la animación (que viene siendo el over) y cuando el botón sale detona la segunda parte de la animación ( que es el out).</p>
<p style="text-align: left;">Apliquemos la misma acción a todos los botones, y el resultado sera el siguiente.</p>
<p style="text-align: left;">
<object width="650" height="70">
<param name="movie" value="/imgs/menu_conRollover.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<embed type="application/x-shockwave-flash" width="650" height="70" src="/imgs/menu_conRollover.swf" quality="high" bgcolor="#FFFFFF" wmode="opaque" menu="false" ></embed>
</object>
</p>
<p style="text-align: left;">Para poder ver la mano que nos indica acerca de un botón debemos establecer una propiedad denominada buttonMode como verdadera, de la siguiente manera:</p>
<p style="text-align: left;"><a rel="attachment wp-att-163" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-07-22-15-p-m/"><img class="alignnone size-full wp-image-163" title="04-11-2009 07-22-15 p.m." src="http://blog.yadahcl.com/wp-content/uploads/2009/11/04-11-2009-07-22-15-p.m..png" alt="04-11-2009 07-22-15 p.m." width="356" height="26" /></a></p>
<p style="text-align: left;">Ahora, debemos establecer los vinculos para cada botón, esto lo podemos hacer por medio de la función navigateToURL(), que espera una variable de tipo URLRequest entre parentesís. Entonces la función debe ser detonada por el evento CLICK, entonces quedaría como:</p>
<p style="text-align: left;">miBoton_mc.<span style="color: #0000ff;">addEventListener</span>(<span style="color: #0000ff;">MouseEvent.CLICK</span>, miFuncion);</p>
<p style="text-align: left;">y en la función que establecimos como miFunción debemos poner la función navigateToURL, de la siguiente manera:</p>
<p style="text-align: left;"><span style="color: #0000ff;">navigateToURL</span>(<span style="color: #0000ff;">new URLRequest</span>(<span style="color: #99cc00;">&#8220;http://google.com&#8221;</span>));</p>
<p style="text-align: left;">El código con la función debera quedar asi:</p>
<p style="text-align: left;"><a rel="attachment wp-att-164" href="http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/04-11-2009-07-28-52-p-m/"><img class="alignnone size-full wp-image-164" title="04-11-2009 07-28-52 p.m." src="http://blog.yadahcl.com/wp-content/uploads/2009/11/04-11-2009-07-28-52-p.m..png" alt="04-11-2009 07-28-52 p.m." width="400" height="60" /></a></p>
<p style="text-align: left;">Y estableciendole una función a cada botón deberá quedar de la siguiente manera:</p>
<p style="text-align: left;">
<object width="650" height="70">
<param name="movie" value="/imgs/menu_conRolloverFinal.swf"></param>
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="menu" value="false"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<embed type="application/x-shockwave-flash" width="650" height="70" src="/imgs/menu_conRolloverFinal.swf" quality="high" bgcolor="#FFFFFF" wmode="opaque" menu="false" ></embed>
</object>
</p>
<p style="text-align: left;">y el <a href="/imgs/menu_conRolloverFinal.fla">archivo raíz</a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.yadahcl.com/2009/11/como-hacer-un-menu-en-flash-con-efectos-de-rollover/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
