tag:blogger.com,1999:blog-81750192694640469042024-03-12T18:30:41.808-07:00Tutoriales UliUn Blog de Tutoriales Simples y Faciles en HTML, Flash y PhpRuben Dariohttp://www.blogger.com/profile/07988527649895921277noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-8175019269464046904.post-77912457680809993592010-07-15T12:54:00.000-07:002010-07-15T18:50:38.330-07:00Tú barra de navegación sobria<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYatxP5tBd9phTCdgZev7U4fNZhf0B-acy2n-qb52MvGqT-DXZhceJgh9nYmnHusw6390vY8B2CJ3_6jfMmMHlNaaJiGGfaFEGWenIfczc1XEANkodKSrQqthptEoTkXgyVORiQQkZtjj/s1600/banner.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 503px; height: 95px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYatxP5tBd9phTCdgZev7U4fNZhf0B-acy2n-qb52MvGqT-DXZhceJgh9nYmnHusw6390vY8B2CJ3_6jfMmMHlNaaJiGGfaFEGWenIfczc1XEANkodKSrQqthptEoTkXgyVORiQQkZtjj/s400/banner.jpg" alt="" id="BLOGGER_PHOTO_ID_5494239755951395474" border="0" /></a><span style="font-family:arial;">Las paginas web deben tener funcionalidad, sus contenidos deben ser rápidos de cargar y siempre disponibles; pero la web es grafica y un sitio con mal diseño no será atractivo o cómodo en navegar, algo que ayuda mucho es una barra de navegación o menú de navegación que siempre se repite en toda el sitio y elimina la opción “atrás” de los navegadores.</span> <span style="font-family:arial;"><br /><br />En sus inicios de revolución grafica la web usaba botones llamativos, que se movían, saltaban, y hasta con sonidos, obviamente toda esa cantidad de efectos y luces asían a las paginas muy pesadas y difícil de cargar; se ha cambiado esa tendencia a menús mas sobrios y calmados… <span style="font-style: italic;">MAS FACILES DE USAR</span>.</span><br /><br /><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >Índice:</span> <span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);"><br />1)</span><span style="color: rgb(153, 153, 0);"> </span> Que necesitamos</span><br /><span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);">2)</span><span style="color: rgb(153, 153, 0);"> </span>Cambiar los colores de los Iconos<br /></span><span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);">3)</span> Hagamos el Botón</span><br /><span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);">4)</span><span style="color: rgb(153, 153, 0);"> </span>El efecto de Gris a Verde</span> <span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);"><br />5)</span> Guardamos y Publicamos</span> <span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);"><br />6)</span> Vinculo del Botón</span><span style="font-family:arial;"><span style="font-weight: bold; color: rgb(153, 153, 0);"><br />7)</span> Barra de navegación terminada<br /><br /><a name='more'></a><br /></span><div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);"> </span><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" ><br />1) Que necesitamos:<br /></span><span style="font-family:arial;">Esta vez necesitaremos 2 herramientas de Adobe:</span> <span style="font-family:arial;">Para animar, edición y publicación de los botones usaremos<span style="color: rgb(255, 0, 0);"> Adobe Flash CS3 profesional</span></span><br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQds8Q1MKEaSTC4MMHxKPDehxlLDL0hnOWs62ckbP9O1CN77CTcWQRJiSlQ8-MqpclC_bAymXfQ27VOpi_6kMgxetQmRRj2NmDOhixEK2sA6NY4IVb17xHjCJbyJtJW04oX24lzDme7Fbp/s1600/adb_flash_cs3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 311px; height: 311px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQds8Q1MKEaSTC4MMHxKPDehxlLDL0hnOWs62ckbP9O1CN77CTcWQRJiSlQ8-MqpclC_bAymXfQ27VOpi_6kMgxetQmRRj2NmDOhixEK2sA6NY4IVb17xHjCJbyJtJW04oX24lzDme7Fbp/s400/adb_flash_cs3.jpg" alt="" id="BLOGGER_PHOTO_ID_5494224973744729442" border="0" /></a><span style="font-weight: bold;font-family:arial;font-size:85%;" ><a href="http://adobe-flash.softonic.com/">Descarga 1</a> – <a href="http://es.kioskea.net/download/descargar-273-adobe-flash-cs3-professional">Descara 2 </a>– <a href="http://www.taringa.net/posts/downloads/1629425/%5BDescarga%5D-Adobe-Flash-CS3-Espa%C3%B1ol.html">Descarga 3</a></span><br /></div><span style="font-family:arial;"><br />Para modificar las imágenes que tendrán los botones utilizaremos <span style="color: rgb(255, 204, 51);">Adobe fireworks CS3</span>:</span><br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDMzRgMkrEv_Cjt_ywhPWmElgX2qGtiJLxWcQ52rLMtGtgBAsc4xaP0vJ60Kf0gSeg2W6253Z2Xq0BuMpk7kAls77dFZBKNaDzVwnsrA9ADK9MimIF-9tyM4LnxIZN5Ht4HJjAKlC_5cJQ/s1600/Adobe+fireworks+CS3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 230px; height: 319px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDMzRgMkrEv_Cjt_ywhPWmElgX2qGtiJLxWcQ52rLMtGtgBAsc4xaP0vJ60Kf0gSeg2W6253Z2Xq0BuMpk7kAls77dFZBKNaDzVwnsrA9ADK9MimIF-9tyM4LnxIZN5Ht4HJjAKlC_5cJQ/s400/Adobe+fireworks+CS3.jpg" alt="" id="BLOGGER_PHOTO_ID_5494225579843634066" border="0" /></a><span style="font-family:arial;"><span style="font-size:85%;"><span style="font-weight: bold;"><a href="https://www.adobe.com/cfusion/tdrc/index.cfm?product=fireworks&loc=es_es">Descarga 1</a> – <a href="http://adobe-fireworks.softonic.com/">Descara 2</a> – <a href="http://www.taringa.net/posts/downloads/1882957/Adobe-Fireworks-CS3-en-Espa%C3%B1ol--+-Keygen-Full.html">Descarga 3</a></span></span></span><br /></div><span style="font-family:arial;"><br />Necesitamos un pack de iconos para web, yo escogí unos que hace cierto tiempo tenia en mi PC descargados de internet (no me atribuyo nada por ellos) la web de la autoría no la encontré:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqiKtnA8afogf7OgiOLCEQeNvieIs0gtL34HL6mBe38BUXHztqlcFZk_NGZISZq82o3tf-kIJwJ4hvGJMwhWQ6BSWPyPiDGSPU4mPA0YMVxCdiEEilcYXVMYT9XdysbBe2uvgJ95T8Cbh/s1600/m1.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 345px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqiKtnA8afogf7OgiOLCEQeNvieIs0gtL34HL6mBe38BUXHztqlcFZk_NGZISZq82o3tf-kIJwJ4hvGJMwhWQ6BSWPyPiDGSPU4mPA0YMVxCdiEEilcYXVMYT9XdysbBe2uvgJ95T8Cbh/s400/m1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494226283808071602" border="0" /></a><a href="http://www.megaupload.com/?d=45VCSF9D"><span style="font-weight: bold;font-family:arial;font-size:85%;" >Descargar</span></a><br /></div><br /><div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);"> </span><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" ><br />2) Cambiar los colores de los Iconos:</span><br /><span style="font-family:arial;">Empecemos por Fireworks. Tenemos unas imágenes en Grises, vamos a pasarla a otro color para más adelante en Flash integrarlas con los efectos de la línea de tiempo de los botones, abrimos Fireworks, y abrimos una de las imágenes del pack de iconos que acabas de descargar. En este caso abriré article.png:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyiaU2vvnPYJSOkrJPtjByPKTj0VVjFe9RgnP3qVaq6dzFV1OMTg3uMLDrsWz7LmQbRljOQ6wrd1rv5ZAyu848kVglGv9siF07TVHEvQl2bSDXWUkmffYxq2AzTqvmKUqItZSpg9Ma84S/s1600/m11.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 323px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyiaU2vvnPYJSOkrJPtjByPKTj0VVjFe9RgnP3qVaq6dzFV1OMTg3uMLDrsWz7LmQbRljOQ6wrd1rv5ZAyu848kVglGv9siF07TVHEvQl2bSDXWUkmffYxq2AzTqvmKUqItZSpg9Ma84S/s400/m11.jpg" alt="" id="BLOGGER_PHOTO_ID_5494226701838193922" border="0" /></a><br /><span style="font-family:arial;"><br />Ya con nuestra Imagen en el Lienzo, aplicamos Zoom de 800%:<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6R34Fyakeguusrtz1I7xXMJo34SSwxb9T8CIRD-d9x4snpHKlTN1Jcv7P6ypxNggbYSNd2dcP_gq3BVGne2lH9HkI8o8GT3FHmziGbEbtw06F628YhPJgxi0qK8fUx_dE4XZr9rHc8yL/s1600/m12.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 330px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv6R34Fyakeguusrtz1I7xXMJo34SSwxb9T8CIRD-d9x4snpHKlTN1Jcv7P6ypxNggbYSNd2dcP_gq3BVGne2lH9HkI8o8GT3FHmziGbEbtw06F628YhPJgxi0qK8fUx_dE4XZr9rHc8yL/s400/m12.jpg" alt="" id="BLOGGER_PHOTO_ID_5494226937214811058" border="0" /></a><span style="font-family:arial;"><br />Con nuestra imagen ya ampliada con el Zoom procedemos a cambiarle el color:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyfs2masmmivriGIebvsTYzNS4Yzu6wzBQJpEeZPn3AdMk5h9FivZklJW2CvWr8K7HQSteeNveKvIpzYsFTE1gKmVBqQuQLJ-yYJ30HavSgO4ReaSaI63riib55449IyDc20CP0fhHLQn/s1600/m13.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 308px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyfs2masmmivriGIebvsTYzNS4Yzu6wzBQJpEeZPn3AdMk5h9FivZklJW2CvWr8K7HQSteeNveKvIpzYsFTE1gKmVBqQuQLJ-yYJ30HavSgO4ReaSaI63riib55449IyDc20CP0fhHLQn/s400/m13.jpg" alt="" id="BLOGGER_PHOTO_ID_5494227139245126626" border="0" /></a><span style="font-family:arial;">Utilizamos la herramienta de cubo de pintura:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDH1NidxlZia1TX2omj9fCkCblfGhw8moGoH5vFo9C6-FvobYl4lyM2VRVP7q8k9ntCi9JZRGChSObtaPXowZ-uhTGW9Daoq0rnDH5fArF2iQxR1Gl3K9uu8KkUR6uGGgcYuP3qJr76GWZ/s1600/m14.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 41px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDH1NidxlZia1TX2omj9fCkCblfGhw8moGoH5vFo9C6-FvobYl4lyM2VRVP7q8k9ntCi9JZRGChSObtaPXowZ-uhTGW9Daoq0rnDH5fArF2iQxR1Gl3K9uu8KkUR6uGGgcYuP3qJr76GWZ/s400/m14.jpg" alt="" id="BLOGGER_PHOTO_ID_5494227385081258978" border="0" /></a><br /><span style="font-family:arial;">Utilizare un color verde degrado su código es <span style="font-family:courier new;">#4E7C41</span>, cuando selecciones la herramienta de cubo de pintura ve abajo a propiedades y en el selector de color pega el código en el campo de texto:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRi5EzR2v4MEFZEUFR-_cO9OqMYCbiZlWPDv8esL8G4WRN-jmgeoBdyHW0k6RCkX10S0xoSYQOYSQmsrDIaWQmAa6QNYrArqRkdpyTAyI7wbcMAHuzrtzX4cn74MuQ80pMgF2u-xT73Zma/s1600/m16.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 365px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRi5EzR2v4MEFZEUFR-_cO9OqMYCbiZlWPDv8esL8G4WRN-jmgeoBdyHW0k6RCkX10S0xoSYQOYSQmsrDIaWQmAa6QNYrArqRkdpyTAyI7wbcMAHuzrtzX4cn74MuQ80pMgF2u-xT73Zma/s400/m16.jpg" alt="" id="BLOGGER_PHOTO_ID_5494227682206709970" border="0" /></a><span style="font-family:arial;">Con mucho cuidado utilizamos el barril de pintura (recuerden cuando dibujaban con paint) y daremos clic en cada parte Gris del dibujo hasta que nos quede así:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFM-Gq2vBaBQt3hFPmM4pUoub3mZiT9G1RlcGJmuXL3FiXqjYAySdKu8MlZLyUrHde6rFrPxtD2X5E0GuJamQBZUZRon4Azj5YPu4jlgQ8sqa-x-I4RYCe3WeNz2TJ-vE5BeAN7e_f9Q_/s1600/m15.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 289px; height: 302px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFM-Gq2vBaBQt3hFPmM4pUoub3mZiT9G1RlcGJmuXL3FiXqjYAySdKu8MlZLyUrHde6rFrPxtD2X5E0GuJamQBZUZRon4Azj5YPu4jlgQ8sqa-x-I4RYCe3WeNz2TJ-vE5BeAN7e_f9Q_/s400/m15.jpg" alt="" id="BLOGGER_PHOTO_ID_5494227902006131282" border="0" /></a><span style="font-family:arial;"><br />Exportamos la imagen ya modificada:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sa-ZrK61xkC5c1uJ69yIDcViNP4te4W-b57cPuZ3y2JUNgkQUMaaiicXi1pHsooDoKT2Lv5cqe-7AKvPnNG2tZnU60cpumb6MD3Kel7gVVMuYpFAzPTRk4o8SWrdItB9UVMQXtLOMnhH/s1600/m17.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 321px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sa-ZrK61xkC5c1uJ69yIDcViNP4te4W-b57cPuZ3y2JUNgkQUMaaiicXi1pHsooDoKT2Lv5cqe-7AKvPnNG2tZnU60cpumb6MD3Kel7gVVMuYpFAzPTRk4o8SWrdItB9UVMQXtLOMnhH/s400/m17.jpg" alt="" id="BLOGGER_PHOTO_ID_5494228170862839122" border="0" /></a><span style="font-family:arial;">Dejas el nombre que tiene la imagen y le agregas <span style="font-weight: bold;">– verde</span>, ósea nuestra imagen modificada se llamara <span style="font-style: italic;">article32 – verde</span>:</span><br /><br /><span style="font-family:arial;"> </span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk3d054aLxsL64sopiKZpSMarZ18XPmSXLAHkbCFWmy5EEQujLEYmIlF86mIRp8p5L9_CHUeOneYkAetMk_OOAsHmBKA6XS29GaNsDOcQ2x_Kt6ANYNPwP-EfA7Z2fIUQkwjvtqZMvtJZ/s1600/m18.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk3d054aLxsL64sopiKZpSMarZ18XPmSXLAHkbCFWmy5EEQujLEYmIlF86mIRp8p5L9_CHUeOneYkAetMk_OOAsHmBKA6XS29GaNsDOcQ2x_Kt6ANYNPwP-EfA7Z2fIUQkwjvtqZMvtJZ/s400/m18.jpg" alt="" id="BLOGGER_PHOTO_ID_5494228394936867138" border="0" /></a><span style="font-family:arial;">Realizamos esta misma acción para las demás imágenes que quieras agregar a tu barra de navegación, Guárdalas en una misma carpeta.</span> <span style="font-family:arial;"><span style="font-weight: bold;">Se te complica cambiar los colores de las Imagenes</span>, <span style="color: rgb(255, 0, 0);"><a href="http://www.megaupload.com/?d=HB2R3D1W">Descárgalos desde Aquí ya terminados</a><br /><br /></span></span> <div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" ><br />3) Hagamos el Botón:</span> <span style="font-family:arial;"><br />Si ya tienes todos los requerimientos procedemos a realizar la interfaz grafica del botón, para ello abrimos Flash:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnuKnwx9eJtX5dbo12WlEmTVxDsqZr0Z-4uAf4FqlQxV4Ucmsptdel3GoBwGVOLEngySDAFwux2tHflbh9ZKH2awOJRAntoMGKEDGRQF3vc-XyFhNi2RloXRUYcYGMfzGl0HyYYIw4lP4/s1600/f3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnuKnwx9eJtX5dbo12WlEmTVxDsqZr0Z-4uAf4FqlQxV4Ucmsptdel3GoBwGVOLEngySDAFwux2tHflbh9ZKH2awOJRAntoMGKEDGRQF3vc-XyFhNi2RloXRUYcYGMfzGl0HyYYIw4lP4/s400/f3.jpg" alt="" id="BLOGGER_PHOTO_ID_5494228927833381394" border="0" /></a><span style="font-family:arial;">Preparamos nuestra área de trabajo, seleccionamos archivo de Flash action script 2.0:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypCuDgrIE4nTd4ERT3zmbZUcx9IdRd8-hnVqsjt4Ol93PG4lKxo4S42NqArHi0b3f1nayZrqE8ipzmO8jgt8K0EvhDEd1vVXS9k_pXVlyOhjlWUvx9lAFmnJcjRVKA-6QgVrdLsOfN9Te/s1600/f5.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypCuDgrIE4nTd4ERT3zmbZUcx9IdRd8-hnVqsjt4Ol93PG4lKxo4S42NqArHi0b3f1nayZrqE8ipzmO8jgt8K0EvhDEd1vVXS9k_pXVlyOhjlWUvx9lAFmnJcjRVKA-6QgVrdLsOfN9Te/s400/f5.jpg" alt="" id="BLOGGER_PHOTO_ID_5494229095773300722" border="0" /></a><span style="font-family:arial;">Configuramos el tamaño de nuestro espacio de trabajo, 150 X 50 pixeles:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5eFyJhz-WBoE6FFhpO3up8d5X3zKdMI6qLTJxuin3AOBo_2PnL2lhsehAVWyOQafX_LZqDo0Uq2e8t7orNMby0QAAcLHvqhVKhCSG3ZA2tp-e8cIXQeu3HLR8srERC-dwca0wBanxy6fs/s1600/m2.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 308px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5eFyJhz-WBoE6FFhpO3up8d5X3zKdMI6qLTJxuin3AOBo_2PnL2lhsehAVWyOQafX_LZqDo0Uq2e8t7orNMby0QAAcLHvqhVKhCSG3ZA2tp-e8cIXQeu3HLR8srERC-dwca0wBanxy6fs/s400/m2.jpg" alt="" id="BLOGGER_PHOTO_ID_5494229498224944210" border="0" /></a><span style="font-family:arial;">Importamos las imágenes del pack de iconos que previamente has descargado, en este caso importare a la biblioteca algunas con las cuales hare el menú de navegación sobrio:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3nPUXO6mhZq2PkPI-2d14SuE0Zjcu4vwB7nIm06PAwrph9WHXT86ab9PxGcUnkW6vM1h759UI5j3Le3N2xzMvEnZ7w8UqmUPcFpO8ucWIGHx-cloV-sc6pYtO0JJpz4NOpPjCIUDlEk9/s1600/m3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 397px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3nPUXO6mhZq2PkPI-2d14SuE0Zjcu4vwB7nIm06PAwrph9WHXT86ab9PxGcUnkW6vM1h759UI5j3Le3N2xzMvEnZ7w8UqmUPcFpO8ucWIGHx-cloV-sc6pYtO0JJpz4NOpPjCIUDlEk9/s400/m3.jpg" alt="" id="BLOGGER_PHOTO_ID_5494229653932161586" border="0" /></a><span style="font-family:arial;">Seleccionamos las imágenes y damos clic en Abrir </span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXzwi8RyW0NxSNYkMzc8nQC5HzhNTdd_Ya1_SiTPMKW4Fy9bnpB6-jJBg5KoozCOQHzXsBgGZkdl5UvkMZb2T34RCDVg7ExEL4OBDz1vXNH5NU7_0YrgAoZXOvmaqZZCm3dmEIe1c7t5N/s1600/m4.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 299px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXzwi8RyW0NxSNYkMzc8nQC5HzhNTdd_Ya1_SiTPMKW4Fy9bnpB6-jJBg5KoozCOQHzXsBgGZkdl5UvkMZb2T34RCDVg7ExEL4OBDz1vXNH5NU7_0YrgAoZXOvmaqZZCm3dmEIe1c7t5N/s400/m4.jpg" alt="" id="BLOGGER_PHOTO_ID_5494229814919072834" border="0" /></a><span style="font-family:arial;">Como se realizo en el <a href="http://tutoleoncito.blogspot.com/2010/07/este-es-mi-primer-tutorial-con-el-auge.html#more"><span style="font-weight: bold; color: rgb(255, 153, 0);">tutorial crea tu propia barra de social</span></a>, seleccionaremos solamente las imágenes que son de tipo Grafico, pues tiene mejor calidad:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmg3cj4O2uzaQAw2z9t1e1kLBqIyFFEstnUjMwTkYMZVFSyglNXE1vqdT1WJItM6weZ-WsbuBDlQPHgJYga9Xjxrb1Oy6VCmSI9ge3FBwT8o4buRESY-MfB9naVQQWiIULOyDnYcjnDJZA/s1600/m5.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 184px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmg3cj4O2uzaQAw2z9t1e1kLBqIyFFEstnUjMwTkYMZVFSyglNXE1vqdT1WJItM6weZ-WsbuBDlQPHgJYga9Xjxrb1Oy6VCmSI9ge3FBwT8o4buRESY-MfB9naVQQWiIULOyDnYcjnDJZA/s400/m5.jpg" alt="" id="BLOGGER_PHOTO_ID_5494230055429227874" border="0" /></a><span style="font-family:arial;">Lo arrastramos al área de trabajo (el rectángulo cuadrado blanco) y la posición que tendrá en el eje X será 1.4 y en Eje Y será 8.3:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPO3nqR5389CxL9nkcR4PqcObkIF627Zqb_VaNtBtRpWtMvhVLs7hBA_YNl8vE74mqJ9K4UZs-GTufEYAVszkQLyQoc0bCC6AsR6wKyGpx8Xwpp88BiGESvuhn7je7shVjfJ0NCHAB7NWj/s1600/m22.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 175px; height: 143px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPO3nqR5389CxL9nkcR4PqcObkIF627Zqb_VaNtBtRpWtMvhVLs7hBA_YNl8vE74mqJ9K4UZs-GTufEYAVszkQLyQoc0bCC6AsR6wKyGpx8Xwpp88BiGESvuhn7je7shVjfJ0NCHAB7NWj/s400/m22.jpg" alt="" id="BLOGGER_PHOTO_ID_5494230305725757938" border="0" /></a><span style="font-family:arial;">Nos quedara algo como esto:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Sves2JdbuvJ_t4NQFrpf0qCt67CUdYu2iSoiNO7JX5hJVyIBDoN1FfzfgkesumwYPX5XgsorOB3TOTvGvnQmW5hC6XAhKSLUU21cxXVk_2nBbOoQvJkjQ8ed6L7bJwfLlqqH4Hy4341c/s1600/m6.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 306px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Sves2JdbuvJ_t4NQFrpf0qCt67CUdYu2iSoiNO7JX5hJVyIBDoN1FfzfgkesumwYPX5XgsorOB3TOTvGvnQmW5hC6XAhKSLUU21cxXVk_2nBbOoQvJkjQ8ed6L7bJwfLlqqH4Hy4341c/s400/m6.jpg" alt="" id="BLOGGER_PHOTO_ID_5494230474737729506" border="0" /></a><span style="font-family:arial;"><br />Utilizamos la herramienta de Texto, para nombrar el Botón:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutJi2k3uMkmHXRpMs3TKV2Vxf8h7F1zNA61eLk9mTUUqSrB0kF6sNVzCMKaGBBwOx60LjhOF1Bt9T1rIFqKiddxZShRxBtvL-wrEWKzqT8seKa2yvphbh36c_M16Wr_eOizXzB9m8AR0Y/s1600/m7.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 58px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutJi2k3uMkmHXRpMs3TKV2Vxf8h7F1zNA61eLk9mTUUqSrB0kF6sNVzCMKaGBBwOx60LjhOF1Bt9T1rIFqKiddxZShRxBtvL-wrEWKzqT8seKa2yvphbh36c_M16Wr_eOizXzB9m8AR0Y/s400/m7.jpg" alt="" id="BLOGGER_PHOTO_ID_5494230691365166034" border="0" /></a><span style="font-family:arial;">En este caso la imagen (article32.png) corresponde a una hoja con datos, asi que podres llamar a este botón <span style="font-weight: bold;">Información</span>:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cl4Ma88Mg5RHaYrDHRNCGCLG9w-gVutmaAYP36m68YGLpjaQpNPWo3gUAnbATEdNEmuBuVYRgaaXxqLdrPs5IF93AaKTrd8bFN6pAqBEGLrZuaJE_SRBbrCB6A8k-PDO-FylB-SsBUQH/s1600/m8.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 168px; height: 50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cl4Ma88Mg5RHaYrDHRNCGCLG9w-gVutmaAYP36m68YGLpjaQpNPWo3gUAnbATEdNEmuBuVYRgaaXxqLdrPs5IF93AaKTrd8bFN6pAqBEGLrZuaJE_SRBbrCB6A8k-PDO-FylB-SsBUQH/s400/m8.jpg" alt="" id="BLOGGER_PHOTO_ID_5494231205318453154" border="0" /></a><span style="font-family:arial;">La fuente del texto la he puesto con Verdana de tipo de letra, tamaño 13, con Negrilla y el color es el mismo que tiene el contorno de la imagen ósea en código es #474747.<br /><br />Recuerda que la Fuente se modifica seleccionado el Texto y yendo a la barra de propiedades que esta abajo.</span><br /><br /><span style="font-family:arial;">Debemos seleccionar el texto después de haberle aplicado la fuente e ir a propiedades para convertirlo a un texto estático:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMJQ6uJ8xdc_MSZ8_XI4yaVIx4_hoy4nYIgDbPtrIHUWY1zgSyUAbv9uMxvK8tmQu2ZWmDY0aSIJxwia2y1bYP1kp0FAD1Eij7axshlj1VsXvV0Z4q40Qu_r0z5KSMbBhRNuFRlQDQcYj/s1600/m9.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMJQ6uJ8xdc_MSZ8_XI4yaVIx4_hoy4nYIgDbPtrIHUWY1zgSyUAbv9uMxvK8tmQu2ZWmDY0aSIJxwia2y1bYP1kp0FAD1Eij7axshlj1VsXvV0Z4q40Qu_r0z5KSMbBhRNuFRlQDQcYj/s400/m9.jpg" alt="" id="BLOGGER_PHOTO_ID_5494231438995626722" border="0" /></a><span style="font-family:arial;">Ya tenemos la interfaz grafica de nuestro botón, ahora lo convertiremos en Botón para poderlo animar, seleccionamos el texto y la imagen así:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKl9DMLnnyuR3crIWLgJtCSTuO2KSddRwgqqJ1jl1hhbzW6VqPahCtXv2zU85zqjFGqbvXUXO-4KGgA1EVmg4telJ-jm_q5CNkWxa1T48FK_E6PHs2ExhfTJvJ6LBjS7qHxct2u9vv3xv/s1600/m10.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 174px; height: 67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKl9DMLnnyuR3crIWLgJtCSTuO2KSddRwgqqJ1jl1hhbzW6VqPahCtXv2zU85zqjFGqbvXUXO-4KGgA1EVmg4telJ-jm_q5CNkWxa1T48FK_E6PHs2ExhfTJvJ6LBjS7qHxct2u9vv3xv/s400/m10.jpg" alt="" id="BLOGGER_PHOTO_ID_5494231624012171970" border="0" /></a><br /><br /><span style="font-family:arial;">Y nos vamos al menú Modificar-> Convertir en Símbolo (comando rápido F8) y seleccionamos Botón y damos clic en Aceptar:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQYl2RcYGPDMc68lr8cn7GYZS1-Q99lYeEXsTMprBGYXR9cewm3yLYg37Hi8uBxoDPHr1FEOc0iwR5Cfb8Z6-1nHQueQQDaylVSOUvZJzuRPC84MfL-00TZc_JE-b4ZnpjtJhmyth66dO/s1600/f12.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 133px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQYl2RcYGPDMc68lr8cn7GYZS1-Q99lYeEXsTMprBGYXR9cewm3yLYg37Hi8uBxoDPHr1FEOc0iwR5Cfb8Z6-1nHQueQQDaylVSOUvZJzuRPC84MfL-00TZc_JE-b4ZnpjtJhmyth66dO/s400/f12.jpg" alt="" id="BLOGGER_PHOTO_ID_5494231894768524066" border="0" /></a><br /><br /><div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /><span style="font-weight: bold; color: rgb(153, 153, 0);">4) El efecto de Gris a Verde:</span><br /></span><span style="font-family:arial;">Ahora vamos a importar las imágenes de los botones pero verdes, que previamente descargaste o modificaste manualmente, realizamos el mismo proceso de importar a la biblioteca</span><br /><br /><span style="font-family:arial;">Ya convertido en botón pasamos a crear un efecto que de la impresión de que cambia de color cuando el mouse pasa sobre el, para esto damos doble clic sobre el botón:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bZ311QXWHmnLwy5cL4ZuxG-D-geHRiWJQUTcGYj5R22nOre3Kk9hEyspGpZ4f8gbwsK5ENKimf4EMKsIbm8TEZmbry-xKF4HMmNOUfCbWxGFtdbHUYx9ozvsP93G8mcHXdq0EOg5LsHj/s1600/m19.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 397px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bZ311QXWHmnLwy5cL4ZuxG-D-geHRiWJQUTcGYj5R22nOre3Kk9hEyspGpZ4f8gbwsK5ENKimf4EMKsIbm8TEZmbry-xKF4HMmNOUfCbWxGFtdbHUYx9ozvsP93G8mcHXdq0EOg5LsHj/s400/m19.jpg" alt="" id="BLOGGER_PHOTO_ID_5494232396078012914" border="0" /></a><br /><span style="font-family:arial;"><br />En la línea de tiempo del botón nos ponemos sobre la acción sobre y damos clic derecho e insertamos un fotograma clave:</span> <span style="font-family:arial;"> </span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ53rwCJz7fhA-3KboOSrZBZOW14jCoQTwQGMoHK-ijsnmPpt1T-dYWA7hTW4eAFEsdxAsXisZmQtLf7DCOyR2vDVBVx3IJlaVzOmUvLo_exl9nwF_u5i6DSsUuQ2tNmZguPYQQjzs8-6/s1600/m20.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 355px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ53rwCJz7fhA-3KboOSrZBZOW14jCoQTwQGMoHK-ijsnmPpt1T-dYWA7hTW4eAFEsdxAsXisZmQtLf7DCOyR2vDVBVx3IJlaVzOmUvLo_exl9nwF_u5i6DSsUuQ2tNmZguPYQQjzs8-6/s400/m20.png" alt="" id="BLOGGER_PHOTO_ID_5494232595110568466" border="0" /></a><span style="font-family:arial;">Con el fotograma clave creado lo seleccionamos y procedemos a cambiar la imagen del botón, para esto damos doble clic sobre la imagen así podremos modificarla:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOO-SDw_m3PyZdIfOqpj_AS-q2D0hm3mNFPh9LwT1WYW-HcwMd52erTqfCclu0KUA-gEnSaD-zddddRCgj9jJ6lElhIb7_oc78To87PNmVcRQMrtyouL_b31CdLgrwsjQAvlSrqkiuo4Ev/s1600/m21.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 173px; height: 66px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOO-SDw_m3PyZdIfOqpj_AS-q2D0hm3mNFPh9LwT1WYW-HcwMd52erTqfCclu0KUA-gEnSaD-zddddRCgj9jJ6lElhIb7_oc78To87PNmVcRQMrtyouL_b31CdLgrwsjQAvlSrqkiuo4Ev/s400/m21.png" alt="" id="BLOGGER_PHOTO_ID_5494232978423803650" border="0" /></a><span style="font-family:arial;">La parte de texto se desenfoca del área de trabajo, esto sucede por que solo vamos a modificar la imagen .seleccionamos la imagen y la borramos; tomamos la versión de la imagen que esta en verde y la ponemos en el lugar de la que hemos borrado, la posición exacta será 0 en el eje X y 0 en el eje Y ya que ese es el inicio del botón:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4W3csvNpfYfnzHwdXAUk-iICmaza14Iux_dV6TL3gt3Inuw2s20x1Y5hrsr7_X8cOIpms8ZUhHcHPpFJ0kISwHKV5VnRh5agXet9HNtg2NzN72kARVX7GgLhyphenhyphen1NSahy85tRLeFVkI46le/s1600/m23.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 172px; height: 60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4W3csvNpfYfnzHwdXAUk-iICmaza14Iux_dV6TL3gt3Inuw2s20x1Y5hrsr7_X8cOIpms8ZUhHcHPpFJ0kISwHKV5VnRh5agXet9HNtg2NzN72kARVX7GgLhyphenhyphen1NSahy85tRLeFVkI46le/s400/m23.jpg" alt="" id="BLOGGER_PHOTO_ID_5494233194515934562" border="0" /></a><br /><span style="font-family:arial;"><br />Ahora cambiaremos el color de las letras, damos doble clic sobre el texto lo seleccionamos y le ponemos el mismo color verde (código de color: <span style="font-family:courier new;">#4E7C41</span>). Todo esto lo tuvimos que haber realizado en la acción sobre de la línea del tiempo del botón.</span> <span style="font-family:arial;"><br /><br />Ahora damos doble clic fuera del lienzo de trabajo (la zona Gris) y tendremos ya nuestro primer botón, puedes probarlo yendo al menú control-> probar película.<br /><br /></span><div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);"> </span><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span> </div><span style="font-family:arial;"> <span style="font-weight: bold; color: rgb(153, 153, 0);">5) Guardamos y Publicamos:</span><br /></span><span style="font-family:arial;">Guardamos el documento de flash, para después modificarlo y usarlo como plantilla para los demás botones:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIOkNL1hr7LnihB6gMLludatV2EbRiP4JM1ahxkGGQWahsyGV6pWO4leFS3s25F-k5QMSPsIMBwNBbKaTC1gWuGpHJWUUc8eqj716JFSBOFQhfhAoKA9F8i78iIyiO_aefvsgL-PUwFQz/s1600/m24.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 217px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIOkNL1hr7LnihB6gMLludatV2EbRiP4JM1ahxkGGQWahsyGV6pWO4leFS3s25F-k5QMSPsIMBwNBbKaTC1gWuGpHJWUUc8eqj716JFSBOFQhfhAoKA9F8i78iIyiO_aefvsgL-PUwFQz/s400/m24.jpg" alt="" id="BLOGGER_PHOTO_ID_5494233550258869714" border="0" /></a><br /><br /><span style="font-family:arial;">Exportamos el archivo ejecutable SWF para la web:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVspxn0DbnIyfEJsiNAdWtu1W7clXYhac6ZhzFJn-t5CqKvXJxbiZe8WFvNh6RM_LblWwXGc5a917Dd3-XE44bhXxCXm35K2TmPAoJ2_wDLHPTpUh05VYinusg7ze4uB_OkaRpBSkORsp/s1600/m25.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 388px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVspxn0DbnIyfEJsiNAdWtu1W7clXYhac6ZhzFJn-t5CqKvXJxbiZe8WFvNh6RM_LblWwXGc5a917Dd3-XE44bhXxCXm35K2TmPAoJ2_wDLHPTpUh05VYinusg7ze4uB_OkaRpBSkORsp/s400/m25.jpg" alt="" id="BLOGGER_PHOTO_ID_5494233697177054482" border="0" /></a><br /><br /><div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" ><br />6) Vinculo del Botón:</span><br /><span style="font-family:arial;">Para agregarle el vínculo al botón debemos seleccionarlo e ir al menú ventana y abrir acciones, y pegar en el asisten este código:</span> <span style="font-family:arial;"><br /><br /><span style="font-family:courier new;">on(release){</span></span><span style="font-family:courier new;"> </span><span style="font-family:arial;">getURL("Aquí va el enlace de la pagina");</span><span style="font-family:courier new;"> </span><span style="font-family:arial;">}</span> <span style="font-family:arial;"><br /><br />Y estará vinculado.<br /><br /></span><div style="text-align: center;"><span style="font-weight: bold; color: rgb(153, 153, 0);"> </span><span style="font-weight: bold; color: rgb(153, 153, 0);font-family:arial;" >--------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /><span style="font-weight: bold; color: rgb(153, 153, 0);">7) Barra de navegación terminada:</span><br /></span><span style="font-family:arial;">Repetimos este mismo proceso o usamos el boton que creamos como plantilla para hacer rápidamente los demás . Ya terminados los colocamos en nuestra web y le damos un aspecto mas organizado y moderno.</span> <span style="font-family:arial;"><br /><br /></span><div style="text-align: center; color: rgb(0, 153, 0);"><a href="http://barrasocial89.webcindario.com/Navegacion.html"><span style="font-family:arial;"><span style="font-weight: bold;">Mira acá la barra de navegación sobria terminada</span></span></a></div>Ruben Dariohttp://www.blogger.com/profile/07988527649895921277noreply@blogger.com1tag:blogger.com,1999:blog-8175019269464046904.post-32140373755650876782010-07-13T10:51:00.000-07:002010-07-14T11:46:07.814-07:00La famosa Pelota que rebota [Sin Codigos]<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuswvBs95qGeXTXOxlRpt-cGoTEbZBVHj_K9CRVEEcPyUrHNokiGWQquI8FGYPVrFi9TiAVqznXiks3aeavo4LQ9Fd_k-VWc2ozJX6oIS73SDurC6RHQIVTmjJtDnMpMpTQlA3Pa9OdleR/s1600/banner_pelota.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 448px; height: 243px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuswvBs95qGeXTXOxlRpt-cGoTEbZBVHj_K9CRVEEcPyUrHNokiGWQquI8FGYPVrFi9TiAVqznXiks3aeavo4LQ9Fd_k-VWc2ozJX6oIS73SDurC6RHQIVTmjJtDnMpMpTQlA3Pa9OdleR/s400/banner_pelota.jpg" alt="" id="BLOGGER_PHOTO_ID_5493834791006704178" border="0" /></a><span style="font-family:arial;">Este tutorial consiste en realizar la trayectoria de una pelota para dar la impresión </span> de que esta rebotando y que nunca se detendrá.<br /><div style="text-align: justify;"><span style="font-family:arial;"><br /><span style="font-weight: bold; color: rgb(0, 153, 0);">Índice:</span><br /><span style="font-weight: bold; color: rgb(0, 153, 0);">1)</span> Que necesitamos<br /><span style="color: rgb(0, 153, 0);"><span style="font-weight: bold;">2)</span> </span>Preparamos nuestra área de trabajo<br /><span style="font-weight: bold; color: rgb(0, 153, 0);">3)</span> Creamos las capas<br /><span style="font-weight: bold;"><span style="color: rgb(0, 153, 0);">4)</span> </span>Creamos los elementos para la animación<br /><span style="font-weight: bold; color: rgb(0, 153, 0);">5)</span> La guía de movimiento<br /><span style="font-weight: bold; color: rgb(0, 153, 0);">6)</span> Agregamos las animaciones<br /><span style="font-weight: bold; color: rgb(0, 153, 0);">7)</span> Retoques<br /><span style="font-weight: bold; color: rgb(0, 153, 0);">8)</span> Guardar y publicar<br /></span><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" ><br /><a name='more'></a><br />---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-weight: bold; color: rgb(0, 153, 0);font-family:arial;" >1) que necesitamos : </span><br /><span style="font-family:arial;"><br />Es muy sencillo utilizaremos Adobe Flash:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrrLjfio54dyH8uay_wNabHuv3h1diYQTmScz_S8U_Yl2zmh7OxO5ZXqjnWwbGDiZ08sABOwGCjIdxjvKquwAn1m_RWBHZ3N81w3QYjniPqsTskIZtqm9uqYQt4YH_WpuBFRNwfeCLrr_/s1600/adb_flash_cs3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 294px; height: 294px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZrrLjfio54dyH8uay_wNabHuv3h1diYQTmScz_S8U_Yl2zmh7OxO5ZXqjnWwbGDiZ08sABOwGCjIdxjvKquwAn1m_RWBHZ3N81w3QYjniPqsTskIZtqm9uqYQt4YH_WpuBFRNwfeCLrr_/s400/adb_flash_cs3.jpg" alt="" id="BLOGGER_PHOTO_ID_5493450736871953890" border="0" /></a><br /><div style="text-align: center; font-weight: bold;"> <span style=";font-family:arial;font-size:85%;" ><a href="http://adobe-flash.softonic.com/">Descargar 1</a> – <a href="http://es.kioskea.net/download/descargar-273-adobe-flash-cs3-professional">Descarga 2</a> – <a href="http://www.taringa.net/posts/downloads/1629425/%5BDescarga%5D-Adobe-Flash-CS3-Espa%C3%B1ol.html">Descarga 3</a></span> <span style="font-size:78%;"><br /><br /></span></div><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><br /><span style="color: rgb(0, 153, 0); font-weight: bold;font-family:arial;" >2) Preparamos nuestra área de trabajo</span><span style="font-weight: bold; color: rgb(0, 153, 0);">:</span><br /><br /><span style="font-family:arial;">Lo abrimos desde el icono en el escritorio o en todos los programas en el menú</span> <span style="font-family:arial;"> de inicio y seleccionamos Archivo de Flash Action Script 2 y tendremos ya nuestro </span> <span style="font-family:arial;">espacio de trabajo:<br /><br /></span> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMgnJZ3OXAYDNrFXyVTk9B_7Xwn0zGitMUEwsUUIY38lrFSRmhOCQG1NqL9TGmB-aW-KMByY5uAtRq4GykGu5DTHfARf-Ap7auEVPObP6SZ-VltftF0Mr4oZuYWFJhVUqBInam21ccH_43/s1600/imagen+1.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMgnJZ3OXAYDNrFXyVTk9B_7Xwn0zGitMUEwsUUIY38lrFSRmhOCQG1NqL9TGmB-aW-KMByY5uAtRq4GykGu5DTHfARf-Ap7auEVPObP6SZ-VltftF0Mr4oZuYWFJhVUqBInam21ccH_43/s400/imagen+1.jpg" alt="" id="BLOGGER_PHOTO_ID_5493458984294613170" border="0" /></a><br /><br /><span style="font-family:arial;">Dejamos el tamaño del área de trabajo por defecto (500 X 400 Pixeles):</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiulsb_pLSlja8xGazBnMfFM_fcpCPkD0NRlGacIOXQY0kGmfYCo3F4w1nfPqhvRZeiTT5pFas7J_T2cr12HqrTMin1k0tPcoISwDFHC0uB2uAcRm5ZzOmXu2FJFMdhDcqxnPezNtkhv62Z/s1600/Imagen+2.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiulsb_pLSlja8xGazBnMfFM_fcpCPkD0NRlGacIOXQY0kGmfYCo3F4w1nfPqhvRZeiTT5pFas7J_T2cr12HqrTMin1k0tPcoISwDFHC0uB2uAcRm5ZzOmXu2FJFMdhDcqxnPezNtkhv62Z/s400/Imagen+2.jpg" alt="" id="BLOGGER_PHOTO_ID_5493459326802766578" border="0" /></a><span style="font-family:arial;"><br /></span><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /></span><span style="font-family:arial;"><span style="color: rgb(0, 153, 0); font-weight: bold;">3) Creamos las capas:</span><br /><br /></span><span style="font-family:arial;">Creamos una nueva capa que llamaremos escenario:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqwBHucuKRiagFE_Mdm9Tk7FWRlSLgmofSXSXqxyRd1WLzU-CdlTbvAxwqULp6VXjTlIZ89KniJXWagEN3bJlloX3zjnad_Nwmc8giftKL6KksJh-Au53HUTsN50_-nwECORsUsEmSp4l/s1600/Imagen+3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 79px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqwBHucuKRiagFE_Mdm9Tk7FWRlSLgmofSXSXqxyRd1WLzU-CdlTbvAxwqULp6VXjTlIZ89KniJXWagEN3bJlloX3zjnad_Nwmc8giftKL6KksJh-Au53HUTsN50_-nwECORsUsEmSp4l/s400/Imagen+3.jpg" alt="" id="BLOGGER_PHOTO_ID_5493459943462605442" border="0" /></a><br /><br /><span style="font-family:arial;">Y a capa 1 la llamaremos Pelota, para cambiar los nombres de las capas debemos dar </span> <span style="font-family:arial;">doble clic sobre el nombre y así podremos cambiar sus nombres; ponemos estos dos nombres </span> <span style="font-family:arial;">para diferenciar las capas y saber en cual debemos aplicar las formas que crearemos a continuación<br /><br /></span><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /></span><span style="font-family:arial;"><span style="color: rgb(0, 153, 0); font-weight: bold;">4) Creamos los elementos para la animación:</span><br /><br /></span><span style="font-family:arial;">Seleccionamos la capa pelota y Utilizamos la herramienta Ovalo que se encuentra en el </span> <span style="font-family:arial;">menú derecho de la pantalla:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8sYdrTuHtezrxNS97q1Ea7da3yQAjKm7sNdMr_rkgzsEdWiP2BgMeZi-1nxrF0bijL-dG1D5pjmZudTHrugnxpiPRxLeg3W8P6WJoxEWvch1v1plVOPFkt2i6qnp2Nrugdngm-9SurB2/s1600/Imagen+4.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 238px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8sYdrTuHtezrxNS97q1Ea7da3yQAjKm7sNdMr_rkgzsEdWiP2BgMeZi-1nxrF0bijL-dG1D5pjmZudTHrugnxpiPRxLeg3W8P6WJoxEWvch1v1plVOPFkt2i6qnp2Nrugdngm-9SurB2/s400/Imagen+4.jpg" alt="" id="BLOGGER_PHOTO_ID_5493460410643686690" border="0" /></a><br /><span style="font-family:arial;"><br /></span><span style="font-family:arial;">Con esta herramienta crearemos la pelota, nos ponemos en le área de trabajo</span> <span style="font-family:arial;"> y con el clic seleccionado arrastremos hasta formar una pelota pequeña o a tu gusto:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToWgiks47QrhDGFRHdsYOCOw_o7EleAKpUNe_ooBsGXJAYVkU9S_WVxuyxk2hDCDakXUIJvin0HVjNV9Mr9YjnBE5i4ugsLuwQ8pcg0DdVptJqPdVO7cokr28CoB9UWUq9SmLRMF_JUwV/s1600/Imagen+5.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 283px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToWgiks47QrhDGFRHdsYOCOw_o7EleAKpUNe_ooBsGXJAYVkU9S_WVxuyxk2hDCDakXUIJvin0HVjNV9Mr9YjnBE5i4ugsLuwQ8pcg0DdVptJqPdVO7cokr28CoB9UWUq9SmLRMF_JUwV/s400/Imagen+5.jpg" alt="" id="BLOGGER_PHOTO_ID_5493460847237352930" border="0" /></a><br /><br /><span style="font-family:arial;">Y nos quedara algo como esto:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglvM2m3E5gILCPRVwUKVOgspU1zwXPbO1BdgMoo-wVaztCoZ1mcvnQ-aq_9GH7A_8h1ihPLZf9GfguYi99w_omvTYnphbYfaihjttcHCZvFsFgeS_gcVklTW0zneXWBbnPp-2y8JuXWVs/s1600/Imagen+6.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 279px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglvM2m3E5gILCPRVwUKVOgspU1zwXPbO1BdgMoo-wVaztCoZ1mcvnQ-aq_9GH7A_8h1ihPLZf9GfguYi99w_omvTYnphbYfaihjttcHCZvFsFgeS_gcVklTW0zneXWBbnPp-2y8JuXWVs/s400/Imagen+6.jpg" alt="" id="BLOGGER_PHOTO_ID_5493460966898681186" border="0" /></a><br /><br /><span style="font-family:arial;">Recuerda que para cambiar el color debes seleccionar el objeto y en la barra de propiedades que vemos abajo puedes escoger el relleno y el borde de tu preferencia, si no te aparece esta barra vea a el menú: Ventana -> Propiedades ->propiedades o también puedes usar el comando rápido Ctrl+F3</span> <span style="font-family:arial;"><br /><br />Convertiremos la pelota a un clip de película, damos doble clic sobre la pelota y</span> <span style="font-family:arial;"> nos vamos al menú Modificar-> convertir en símbolo y seleccionamos clip de película y le damos </span> <span style="font-family:arial;">aceptar:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzhCgESrNJcQOPSy_HGh_3fh8oYnHwm-pcgsfu30iLQ2F4g-PRVwTo_MWOKwSReBnFGNG4zFkbwXNIRo0hDki_HbHcouorj2kCPf4l4gKYEp4ws5-mp7nFismHXLM0Zj6FnIS3HzlxbEH/s1600/Imagen+7.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 133px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzhCgESrNJcQOPSy_HGh_3fh8oYnHwm-pcgsfu30iLQ2F4g-PRVwTo_MWOKwSReBnFGNG4zFkbwXNIRo0hDki_HbHcouorj2kCPf4l4gKYEp4ws5-mp7nFismHXLM0Zj6FnIS3HzlxbEH/s400/Imagen+7.jpg" alt="" id="BLOGGER_PHOTO_ID_5493461236132638290" border="0" /></a><span style="font-family:arial;"><br /><br />Seguimos con la capa escenario, pondremos el piso donde la pelota rebotara para esto </span> <span style="font-family:arial;">usaremos la herramienta de rectángulo:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGwp4mQslLfV-lw9_VMeiUfAjm2WNFdeY6ABxrBjoUn_dINQNnuTC1vPu0uxaiGXQLYh8AFAxadiFyGbKNDpjdZu1A_epYS-ZUiyh522neTgDfqJvr_-_pkPTqvZipiM1NtVrFwLwUKrZD/s1600/Imagen+8.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 237px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGwp4mQslLfV-lw9_VMeiUfAjm2WNFdeY6ABxrBjoUn_dINQNnuTC1vPu0uxaiGXQLYh8AFAxadiFyGbKNDpjdZu1A_epYS-ZUiyh522neTgDfqJvr_-_pkPTqvZipiM1NtVrFwLwUKrZD/s400/Imagen+8.jpg" alt="" id="BLOGGER_PHOTO_ID_5493461568489166722" border="0" /></a><br /><br /><span style="font-family:arial;">Y de la misma forma que hicimos la pelota, arrastremos con clic hundido sobre el escenario</span> <span style="font-family:arial;"> formando un cuadro que cubra todo el ancho de nuestro lienzo y que ocupe un 20% de altura, así:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifwUPtdjU-3bx8rasMOdMT7YPF3Wx9YSByGtE4yYpCYm21i-iHbwlwqjBrqy9cvsMBnT2FcIG8zbglYi1_UY58ajC8GDBIXHt7cyqy6qEljnXYX8pHZXnr35q3UgEFUv0QffsHbo3rm_Ai/s1600/Imagen+9.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 305px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifwUPtdjU-3bx8rasMOdMT7YPF3Wx9YSByGtE4yYpCYm21i-iHbwlwqjBrqy9cvsMBnT2FcIG8zbglYi1_UY58ajC8GDBIXHt7cyqy6qEljnXYX8pHZXnr35q3UgEFUv0QffsHbo3rm_Ai/s400/Imagen+9.jpg" alt="" id="BLOGGER_PHOTO_ID_5493461687126529554" border="0" /></a><br /><span style="font-family:arial;"><br /></span><span style="font-family:arial;">También podemos modificar su color y borde en la barra de propiedades, ya que con el piso y la pelota terminadas pasaremos a la animación, usaremos la técnica de guía de movimiento.</span> <span style="font-family:arial;"><br /><br /></span><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /></span><span style="font-family:arial;"><span style="font-weight: bold; color: rgb(0, 153, 0);">5) La guía de movimiento:</span><br /><br /></span><span style="font-family:arial;">Damos clic en añadir guía de movimiento, es un icono que esta al lado de añadir nueva capa, aquí:<br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7RXZAjhFGzkX7rFoj_u8LHP9bBBfwkfkV0A2q_F0cMxdSiaq2QYNfOtm6BmDzTvuKALRCfsnQw2z52TAS-CaLTBXsrnt3mpPu0S1R33p8hvNSlrBOUYgEHIiELSibH8y3iwvZr7vzEOM/s1600/Imagen+10.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 182px; height: 148px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7RXZAjhFGzkX7rFoj_u8LHP9bBBfwkfkV0A2q_F0cMxdSiaq2QYNfOtm6BmDzTvuKALRCfsnQw2z52TAS-CaLTBXsrnt3mpPu0S1R33p8hvNSlrBOUYgEHIiELSibH8y3iwvZr7vzEOM/s400/Imagen+10.jpg" alt="" id="BLOGGER_PHOTO_ID_5493462526894303170" border="0" /></a><br /><br /><span style="font-family:arial;">Teniendo ese “capa” de guía de movimiento utilizamos la herramienta línea:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYrVVjGqxXO5UyKGrA9G141ILAcTLbzFuc5sx8Ih1dcREBr_gYTvd8nI_BziPFlmD9XkpLeLtrZOJEEd8DQJmPJJyp9mOsjObMiFVwoXuLQ1455VmV8SYVaIdd1HA_cN5JYAtnad4LhI9/s1600/Imagen+11.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 61px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYrVVjGqxXO5UyKGrA9G141ILAcTLbzFuc5sx8Ih1dcREBr_gYTvd8nI_BziPFlmD9XkpLeLtrZOJEEd8DQJmPJJyp9mOsjObMiFVwoXuLQ1455VmV8SYVaIdd1HA_cN5JYAtnad4LhI9/s400/Imagen+11.jpg" alt="" id="BLOGGER_PHOTO_ID_5493462878326437042" border="0" /></a><span style="font-family:arial;"><br /><br />Construiremos la ruta que queramos que la pelota haga, siempre y cuando las líneas queden unidas, para darle un efecto de que esta rebotando las líneas que are tocaran el piso, tu puedes hacer tus propias rutas de movimiento:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl-8YsZHxUoTk129aLk63GdeqjFJz93mvXaYZevb3zmnB3ogh438u9WQSAWISno-XseAScGm7_Q22Axh6ZDzCc4l4rnxntMimwkXz_-Wdd6X4-8qs9GOMZ10_34L714qBQ4C5wZk9WWcvt/s1600/Imagen+12.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl-8YsZHxUoTk129aLk63GdeqjFJz93mvXaYZevb3zmnB3ogh438u9WQSAWISno-XseAScGm7_Q22Axh6ZDzCc4l4rnxntMimwkXz_-Wdd6X4-8qs9GOMZ10_34L714qBQ4C5wZk9WWcvt/s400/Imagen+12.jpg" alt="" id="BLOGGER_PHOTO_ID_5493463497833116370" border="0" /></a><span style="font-family:arial;"><br /><br />Puedes observa la guía de movimiento, son los trazos en </span> <span style="font-family:arial;">rojo que se deben hacer con la capa de la Guía seleccionada.<br /><br /></span><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /></span><span style="font-family:arial;"><span style="font-weight: bold; color: rgb(0, 153, 0);">6) Agregamos las animaciones:</span><br /><br /></span><span style="font-family:arial;">ya teniendo esto pasamos </span> <span style="font-family:arial;">a la línea del tiempo y en las capas insertamos un fotograma clave así:</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhwtBPpyl9yqRV0wQB4yUJUjcGeMnvzTmckngrnG3ehx5KMRsxKwSQap1_VIhDzxVfqOUur2-gnL6Fg9Xm_UyHM_Vq1pfox2zKc1UXwwPGN9WR-nDCMkpOsZm9WLV3oYrBpuUrEYQn56M/s1600/Imagen+13.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 219px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhwtBPpyl9yqRV0wQB4yUJUjcGeMnvzTmckngrnG3ehx5KMRsxKwSQap1_VIhDzxVfqOUur2-gnL6Fg9Xm_UyHM_Vq1pfox2zKc1UXwwPGN9WR-nDCMkpOsZm9WLV3oYrBpuUrEYQn56M/s400/Imagen+13.jpg" alt="" id="BLOGGER_PHOTO_ID_5493463816527605778" border="0" /></a><span style="font-family:arial;"><br /><br />Clic derecho sobre el fotograma deseado y seleccionamos Insertar fotograma clave, ahora en cada capa tendrá fotogramas claves en distintos fotogramas</span> <span style="font-family:arial;">En la capa pelota insertamos el fotograma clave en el fotograma 50:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQFhPZV6IrWzIuilAmNwdwafwujhqixGavmwdmT0QjbshYNEDKawcwPtCxhOj9nXXs6vEDx4rg4bRXKZvGShmwDEcR4oZoZZ8EY9AB7o9X42aWGTe8oJoWmydA0snKllab-dNNiukOUu4/s1600/Imagen+14.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQFhPZV6IrWzIuilAmNwdwafwujhqixGavmwdmT0QjbshYNEDKawcwPtCxhOj9nXXs6vEDx4rg4bRXKZvGShmwDEcR4oZoZZ8EY9AB7o9X42aWGTe8oJoWmydA0snKllab-dNNiukOUu4/s400/Imagen+14.jpg" alt="" id="BLOGGER_PHOTO_ID_5493464728683447666" border="0" /></a><br /><br /><span style="font-family:arial;">En la capa escenario insertamos el fotograma clave en el fotograma 100:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9sEdnQNYqk12zLn1MW433CE9mfh2PHtpZCNz4XktBUE4pkwIeDV351Yu_HmMkgcy_wRMU_Ilb0WrEvivwlf1bmAGtDdGbqizh2dIjyHHbbdo2Wo0LWVkdFsO3MqX4MwlxOkpEUOWK8GY/s1600/Imagen+15.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 35px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9sEdnQNYqk12zLn1MW433CE9mfh2PHtpZCNz4XktBUE4pkwIeDV351Yu_HmMkgcy_wRMU_Ilb0WrEvivwlf1bmAGtDdGbqizh2dIjyHHbbdo2Wo0LWVkdFsO3MqX4MwlxOkpEUOWK8GY/s400/Imagen+15.jpg" alt="" id="BLOGGER_PHOTO_ID_5493465239664716914" border="0" /></a><br /><br /><span style="font-family:arial;">En la capa de Guía de movimiento insertamos el fotograma clave en el fotograma 100:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_C8LVB5REUqkM2U28oICmEC3eYYEOnRGDP7E5yoHln1ZHvScdh4gXKQ_z5LF2mEk_I6ngjO94hmltTy8gPPq_v9tO_1FluK2QIuJnDqOdk9ffg1mrTLKJ3NNSizzKc9dXXRXJwWo69bJY/s1600/Imagen+16.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 43px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_C8LVB5REUqkM2U28oICmEC3eYYEOnRGDP7E5yoHln1ZHvScdh4gXKQ_z5LF2mEk_I6ngjO94hmltTy8gPPq_v9tO_1FluK2QIuJnDqOdk9ffg1mrTLKJ3NNSizzKc9dXXRXJwWo69bJY/s400/Imagen+16.jpg" alt="" id="BLOGGER_PHOTO_ID_5493465815479174818" border="0" /></a><span style="font-family:arial;"><br /><br />Ahora animaremos la pelota para que recorra la guía de movimiento y se devuelva para dar un mejor efecto; nos podremos al inicio de los fotogramas de la capa pelota, daremos clic derecho y seleccionaremos crear interpolación de movimiento:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixKTyAaFye203dc3oYh0cxgVBSofze956EYkeyzlEu3cmNysbgBwq-ae7q3LwXVXQfQ0jlyxq9HkXKYSwRXJzoggHnMxlRUrysyR5EdXnT52ujY_yxLTCMGv7R5hyphenhypheniHUdElcejlew5TLj_/s1600/Imagen+17.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 358px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixKTyAaFye203dc3oYh0cxgVBSofze956EYkeyzlEu3cmNysbgBwq-ae7q3LwXVXQfQ0jlyxq9HkXKYSwRXJzoggHnMxlRUrysyR5EdXnT52ujY_yxLTCMGv7R5hyphenhypheniHUdElcejlew5TLj_/s400/Imagen+17.jpg" alt="" id="BLOGGER_PHOTO_ID_5493466052384699538" border="0" /></a><br /><br /><span style="font-family:arial;">Automáticamente nos ubicara la pelota al inicio de la guía de movimiento,</span> <span style="font-family:arial;"> lo que tenemos que hacer es ir hasta el fotograma 50 y seleccionarlo y tomar la pelota </span> <span style="font-family:arial;">y colocarla al final de la guía de movimiento:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDYt_NcZ6GWePKy7OJk48dItwXQMhCQ3RsnZbp1UbVk-9utAbhGlG8bTKcPZr8NztA9V2nRWTEZgzpU4DjYFgdmSO4ssbccZQnD5VyiLE5URFGpNbgFPU2Yn6nMe9UeHNzW2zF-demMrS/s1600/Imagen+18.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 317px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDYt_NcZ6GWePKy7OJk48dItwXQMhCQ3RsnZbp1UbVk-9utAbhGlG8bTKcPZr8NztA9V2nRWTEZgzpU4DjYFgdmSO4ssbccZQnD5VyiLE5URFGpNbgFPU2Yn6nMe9UeHNzW2zF-demMrS/s400/Imagen+18.jpg" alt="" id="BLOGGER_PHOTO_ID_5493466389281702946" border="0" /></a><br /><br /><span style="font-family:arial;">Si lo hicimos correctamente la animación correrá en una forma muy básica en un solo sentido y muy lentamente, vamos a hacerla algo más compuesta para que ella se devuelva y tenga mas velocidad</span><br /><br /><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><br /><span style="font-family:arial;"><span style="color: rgb(0, 153, 0); font-weight: bold;">7) Retoques :</span><br /><br /></span><span style="font-family:arial;">Para que se devuelva solo tenemos que insertar un fotograma clave en el fotograma 100 de la capa pelota:</span> <span style="font-family:arial;"><br /><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqL71gFmIk6UK6ebiEFpxuWfrgv1fTmOhwJj-P8PQTiAk0s30zIzp9ogUZxLPgMvptQ9IURQ-G4Nv8ZUXwZ98uT6uQisc81-GLU0ba_99s0yDRS4XPimNlEE7UFLTn61hyphenhyphenDzeLSHm15tV/s1600/Imagen+19.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 190px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqL71gFmIk6UK6ebiEFpxuWfrgv1fTmOhwJj-P8PQTiAk0s30zIzp9ogUZxLPgMvptQ9IURQ-G4Nv8ZUXwZ98uT6uQisc81-GLU0ba_99s0yDRS4XPimNlEE7UFLTn61hyphenhyphenDzeLSHm15tV/s400/Imagen+19.jpg" alt="" id="BLOGGER_PHOTO_ID_5493466589892089938" border="0" /></a><br /><br /><span style="font-family:arial;">Ahora pasaremos al fotograma 50 de la capa pelota o en el punto que significa fotograma clave </span> <span style="font-family:arial;">y creamos otra interpolación de movimiento:</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8nvkjiqY-bbI1Cjl9BIiI57tEM9_yWfLFGYNxMR3EQs6RSKc57gXvjKuMnT8PyLE9R4JvHdA9kKks2qHpnAja_Y5u0rfJ11KTHLRZRHNaFWP4gWBG8YqQi3_p1dKv4fEuqUFci9PMJw2v/s1600/Imagen+20.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8nvkjiqY-bbI1Cjl9BIiI57tEM9_yWfLFGYNxMR3EQs6RSKc57gXvjKuMnT8PyLE9R4JvHdA9kKks2qHpnAja_Y5u0rfJ11KTHLRZRHNaFWP4gWBG8YqQi3_p1dKv4fEuqUFci9PMJw2v/s400/Imagen+20.jpg" alt="" id="BLOGGER_PHOTO_ID_5493466745039991426" border="0" /></a><br /><br /><span style="font-family:arial;">Y nos ponemos en el fotograma 100 de la capa pelota, tomamos nuestra pelota y la</span> <span style="font-family:arial;"> devolvemos al principio de la guía de movimiento:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7VImC93M1dU88cbScJjzUNHoZuTgZRD9VLJS8hMjgk9j-sOskR1roN0ygg222vRW6FsQEyMel2-oUqjSOHCrOQNgInKDmhOAszAHrJ7jiWo8hZnIAztE5yiA9REcgWe0HnbLJImdyquk/s1600/Imagen+21.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 332px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7VImC93M1dU88cbScJjzUNHoZuTgZRD9VLJS8hMjgk9j-sOskR1roN0ygg222vRW6FsQEyMel2-oUqjSOHCrOQNgInKDmhOAszAHrJ7jiWo8hZnIAztE5yiA9REcgWe0HnbLJImdyquk/s400/Imagen+21.jpg" alt="" id="BLOGGER_PHOTO_ID_5493466938586332434" border="0" /></a><br /><br /><span style="font-family:arial;">Para la velocidad, da clic afuera del área de trabajo (en la zona gris) y abajo en la barra</span> <span style="font-family:arial;"> de propiedades debe aparecerte algo como esto:</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Nx4HhsBS9z0tiYJTTZngY5E9fhKICsRkHSc1DlXE_2rckrOZflANzXYo7K3vVbvJGCerDPHtI99_qOU-mPB94hgkqymOJoRFQV2Lh7skFe3hjlW6ShfVKb0TQ2htS2ywA1oTkwcaqx8L/s1600/Imagen+22.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 64px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Nx4HhsBS9z0tiYJTTZngY5E9fhKICsRkHSc1DlXE_2rckrOZflANzXYo7K3vVbvJGCerDPHtI99_qOU-mPB94hgkqymOJoRFQV2Lh7skFe3hjlW6ShfVKb0TQ2htS2ywA1oTkwcaqx8L/s400/Imagen+22.jpg" alt="" id="BLOGGER_PHOTO_ID_5493467062856224338" border="0" /></a><br /><br /><span style="font-family:arial;">En velocidad de fotograma pones 30 o mas si quieres que corra demasiado rápido y ya tienes tu pelota que rebota!</span><br /><br /><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><br /><span style="font-family:arial;"><span style="color: rgb(0, 153, 0); font-weight: bold;">8) Guardar y publicar:</span><br /><br /></span><span style="font-family:arial;">Guardas el archivo como documento de flash (.fla):</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiIZpV4seC5WaqSDHhoiW8b35jBMK7ZlVZZ-qscLUENMUkEDLh-8HttiDXMTkuC0WAGsqj6eqWNLX3rshdSn2o5MwBY8FGMzLKwBV3hGtCDqqKVydOgH42FWSjZWHZQNl8nwv9VVytZ9Br/s1600/guardar.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 392px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiIZpV4seC5WaqSDHhoiW8b35jBMK7ZlVZZ-qscLUENMUkEDLh-8HttiDXMTkuC0WAGsqj6eqWNLX3rshdSn2o5MwBY8FGMzLKwBV3hGtCDqqKVydOgH42FWSjZWHZQNl8nwv9VVytZ9Br/s400/guardar.jpg" alt="" id="BLOGGER_PHOTO_ID_5493467269331793906" border="0" /></a><span style="font-family:arial;"><br /><br />Y si lo quieres para tu web, exportas la película (.swf):</span> <span style="font-family:arial;"><br /><br /></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZjPgH4aAFG-UKjR6-E-hoyRImmOo2usHl0yZVc4rl-y27IM6gCH5Xpl4P3swiefGVafjroWfrkNtfiCgwyZgvf93PWyXQpSluZqj_oVhFZtsfbPMemEn7sxzqvdg1xsPjvobP5aBPxVN/s1600/exportar.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 396px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZjPgH4aAFG-UKjR6-E-hoyRImmOo2usHl0yZVc4rl-y27IM6gCH5Xpl4P3swiefGVafjroWfrkNtfiCgwyZgvf93PWyXQpSluZqj_oVhFZtsfbPMemEn7sxzqvdg1xsPjvobP5aBPxVN/s400/exportar.jpg" alt="" id="BLOGGER_PHOTO_ID_5493467521222495250" border="0" /></a><br /><div style="text-align: center;"><span style="color: rgb(0, 102, 0);font-family:arial;" >---------------------------------------------------------------------------------------------------------------------------------</span><br /></div><span style="font-family:arial;"><br /></span><div style="text-align: center; font-weight: bold;"><a href="http://barrasocial89.webcindario.com/animacion.html"><span style="font-family:arial;">Da clic para ver como te debe quedar</span></a></div> </div>Ruben Dariohttp://www.blogger.com/profile/07988527649895921277noreply@blogger.com2tag:blogger.com,1999:blog-8175019269464046904.post-89317536777965562182010-07-06T13:33:00.000-07:002010-07-14T11:29:53.231-07:00Crea tu propia Barra Social<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz3vXA6fEmNfkvCvegRaa7z4Ks1UeI1-qQuQDNTx7cDKUvEE-vkKTLpSSBHpvgu7TSfLzcOxxhBrgQ9dHKP_zYcVvNwgspLFngJ-i-s6G6LoirGGOJCJhbHtVH2Il_NSngH09g03nI24Y/s1600/banner+Blog.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 285px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz3vXA6fEmNfkvCvegRaa7z4Ks1UeI1-qQuQDNTx7cDKUvEE-vkKTLpSSBHpvgu7TSfLzcOxxhBrgQ9dHKP_zYcVvNwgspLFngJ-i-s6G6LoirGGOJCJhbHtVH2Il_NSngH09g03nI24Y/s400/banner+Blog.jpg" alt="" id="BLOGGER_PHOTO_ID_5490894240196208914" border="0" /></a><br /><div style="text-align: justify;"><span style="font-family:arial;">Este es mi primer tutorial, con el auge de las redes sociales cree mi propia barra social, en este sencillo tutorial la aprenderemos a hacer con Adobe Flash CS3 Profesional.</span><br /></div><br /><span style="font-weight: bold;font-family:arial;" >Índice:</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">1)</span> Que necesitamos</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">2) </span>Abrimos Flash y creamos el documento</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">3)</span> Importamos las imágenes de los iconos</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">4)</span> Pasarlas de imágenes a Botones</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">5)</span> Animamos los botones</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">6)</span> Los enlaces de los botones</span><br /><span style="font-family:arial;"><span style="font-weight: bold;">7)</span> Publicamos los botones</span><br /><blockquote></blockquote><div style="text-align: center;"><span style="font-family:arial;"><br /><a name='more'></a><br /></span>-------------------------------------------------------------------------------------------------<br /></div><br /><div style="text-align: justify;"><span style="color: rgb(51, 102, 255); font-weight: bold;font-family:arial;" >1) Que necesitamos:</span><br /><span style="font-family:arial;">Si no tienes Flash en nuestra PC, bájatelo de estos blogs, post y páginas:</span><br /></div><br /><div style="text-align: center;"><a style="font-weight: bold;" href="http://adobe-flash.softonic.com/">Enlace 1</a><span style="font-weight: bold;"> - </span><a style="font-weight: bold;" href="http://es.kioskea.net/download/descargar-273-adobe-flash-cs3-professional">Enlace 2</a><span style="font-weight: bold;"> - </span><a style="font-weight: bold;" href="http://www.taringa.net/posts/downloads/1629425/%5BDescarga%5D-Adobe-Flash-CS3-Espa%C3%B1ol.html">Enlace 3</a><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9QeF4LZXZMQ4-ireKVdSTvGIdI1k35Hsb9nQQ6csPcOW67qn_sKpN0JzyYtzcQeIWT6L7_bCsbxf0unpX4yl7b8pBnOQOgkTSBs3qYmY5agqA5OCwEH7KJlzFiUz2kbRS_V5Aqa1rx29/s1600/adb_flash_cs3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9QeF4LZXZMQ4-ireKVdSTvGIdI1k35Hsb9nQQ6csPcOW67qn_sKpN0JzyYtzcQeIWT6L7_bCsbxf0unpX4yl7b8pBnOQOgkTSBs3qYmY5agqA5OCwEH7KJlzFiUz2kbRS_V5Aqa1rx29/s400/adb_flash_cs3.jpg" alt="" id="BLOGGER_PHOTO_ID_5490894360561568226" border="0" /></a><br /><div style="text-align: justify;"><span style="font-family:arial;">También las imágenes de los iconos sociales, estas las baje hace algún tiempo de varios post y Blogs, perdí el rastro de los enlaces y la autoría de estas imágenes de todas formas respeto y no me atribuyo nada por ellos:</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVXP083aOafIKPeJyjRcAS2ZEgsF8yUHrp6okJkIyfLTGybB9E5eXTJpY6znGXKq1b6bBWr5hHqzOdXe9QrO00iDYlnSCBnfTZFP1RU4B2TMTTjBxvuWCjlwI-jTq1wbSnJbLF8HDT529/s1600/yahoo-buzz.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVXP083aOafIKPeJyjRcAS2ZEgsF8yUHrp6okJkIyfLTGybB9E5eXTJpY6znGXKq1b6bBWr5hHqzOdXe9QrO00iDYlnSCBnfTZFP1RU4B2TMTTjBxvuWCjlwI-jTq1wbSnJbLF8HDT529/s200/yahoo-buzz.png" alt="" id="BLOGGER_PHOTO_ID_5490895491120902114" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLNU2k_x6sJxGr3BJ6dJnscH3qxES_meL0TNdPH4dh97hlFiSfXUfh3g8GIyauwHNstbzD7jQ1asdkYmrnFKRVy-aJtjWsLnzQU6mL0eq4uuQ5q2EHeHUIpWA6tD4sHpHwFyLyxNelrgx/s1600/twitter.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYLNU2k_x6sJxGr3BJ6dJnscH3qxES_meL0TNdPH4dh97hlFiSfXUfh3g8GIyauwHNstbzD7jQ1asdkYmrnFKRVy-aJtjWsLnzQU6mL0eq4uuQ5q2EHeHUIpWA6tD4sHpHwFyLyxNelrgx/s200/twitter.png" alt="" id="BLOGGER_PHOTO_ID_5490895433771574450" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqUP7dc7hv_4u4t9-mTe_1ovSzutK6mJV2I-EaEdRNpiZ-dUhlX3_AKYqjMzUrHe09uLcWWBvdkoB3646jA-9mK2GUWFQJFPwGulhpllBSzfgKqe_SJCjvkGetZ9aGsrN6Gsqxmb8lNHG/s1600/myspace.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqUP7dc7hv_4u4t9-mTe_1ovSzutK6mJV2I-EaEdRNpiZ-dUhlX3_AKYqjMzUrHe09uLcWWBvdkoB3646jA-9mK2GUWFQJFPwGulhpllBSzfgKqe_SJCjvkGetZ9aGsrN6Gsqxmb8lNHG/s200/myspace.png" alt="" id="BLOGGER_PHOTO_ID_5490895399056539522" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUroGeGzSxrshkm3MpjoJfZ3POtojnnJuu1ITGhjko8sgKnOfImtBehxw5Pq3dBTAkQBPaVLuz_rCXTe71jLskPqMyX1njij-JsFBWF4oAeTz8w2CdRiSAC41zZ1GmFyBtA2tuKFmF8jF/s1600/msn.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUroGeGzSxrshkm3MpjoJfZ3POtojnnJuu1ITGhjko8sgKnOfImtBehxw5Pq3dBTAkQBPaVLuz_rCXTe71jLskPqMyX1njij-JsFBWF4oAeTz8w2CdRiSAC41zZ1GmFyBtA2tuKFmF8jF/s200/msn.png" alt="" id="BLOGGER_PHOTO_ID_5490895355328476482" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_du4M9gJwhuXCa1lY1dg6fc8k2iE2ohuxwl7sc7d7MmkBcJ6_6S_RcRivm4Edh28r907RC2m69ESOmbOAyw0GmxqFE2GRWgH4Zq3XACkGrwr129m7WLiCb9nABXdJwaPgHeXGBuyTuJg/s1600/linkedin.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_du4M9gJwhuXCa1lY1dg6fc8k2iE2ohuxwl7sc7d7MmkBcJ6_6S_RcRivm4Edh28r907RC2m69ESOmbOAyw0GmxqFE2GRWgH4Zq3XACkGrwr129m7WLiCb9nABXdJwaPgHeXGBuyTuJg/s200/linkedin.png" alt="" id="BLOGGER_PHOTO_ID_5490895313696478770" border="0" /></a><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixlCLXP1B57ghDtaC1T0_2raZ3d_MHKsaXphFYuaQ54XRUCdPijfkjpXJ6ib9DaXaP5ElxHkzCCYpFThfuR_fY5033C9ZQW1xDEo5-6_j9lNg5NKCLOwlmL5LxiJBHVVTHXLRkpNY6wSiY/s1600/youtube.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixlCLXP1B57ghDtaC1T0_2raZ3d_MHKsaXphFYuaQ54XRUCdPijfkjpXJ6ib9DaXaP5ElxHkzCCYpFThfuR_fY5033C9ZQW1xDEo5-6_j9lNg5NKCLOwlmL5LxiJBHVVTHXLRkpNY6wSiY/s200/youtube.png" alt="" id="BLOGGER_PHOTO_ID_5490895595343747986" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeftN2Oi4hIV3okEbue4EN-ZC1UFT_6nmWLIkWC5l_FcJq-5t7_Ce_qsMfeHeZBkp16ZtbywXHSvXBJhg2xicBdrv6raMBG7ZhWzwoM1jPhaQdBLxY0Fnv4lZCMknE-WMNMT-8cdyqDHjx/s1600/blogger.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeftN2Oi4hIV3okEbue4EN-ZC1UFT_6nmWLIkWC5l_FcJq-5t7_Ce_qsMfeHeZBkp16ZtbywXHSvXBJhg2xicBdrv6raMBG7ZhWzwoM1jPhaQdBLxY0Fnv4lZCMknE-WMNMT-8cdyqDHjx/s200/blogger.png" alt="" id="BLOGGER_PHOTO_ID_5490895100034511698" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJoNmlePgwY4moG6paTnS1p8zeX8X4f_Nc617JRQE2-verpwLw1khPeYb66IZF_xIkIx2CLjm3ITcjrNQj4RxiIpUfP35YtFFXK_NsQmp-yY0W0YtNuAHlCRFFSNjnbHCaFEbYpdhMPLg/s1600/friendfeed.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJoNmlePgwY4moG6paTnS1p8zeX8X4f_Nc617JRQE2-verpwLw1khPeYb66IZF_xIkIx2CLjm3ITcjrNQj4RxiIpUfP35YtFFXK_NsQmp-yY0W0YtNuAHlCRFFSNjnbHCaFEbYpdhMPLg/s200/friendfeed.png" alt="" id="BLOGGER_PHOTO_ID_5490895178989883906" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGWAIwKQj57Zz64Uen3L8yCIO_7S5WVwuoRgTQA_15yga_H-8BPjecQ10VAiipur1UeBifN4N1OFtnkB2xYd8OCdRdVWVy4eM4OiX6A9K_-U6y1ivbcUKG56JbfDNokOfFt1UinZ4wlq_/s1600/lastfm.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimGWAIwKQj57Zz64Uen3L8yCIO_7S5WVwuoRgTQA_15yga_H-8BPjecQ10VAiipur1UeBifN4N1OFtnkB2xYd8OCdRdVWVy4eM4OiX6A9K_-U6y1ivbcUKG56JbfDNokOfFt1UinZ4wlq_/s200/lastfm.png" alt="" id="BLOGGER_PHOTO_ID_5490895276124344770" border="0" /></a><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38-q8yWwpmo_HRXNTAgdydOev2H8NKC3U00e7dCfyZOudqPLYT2O1L6Ce0fmJ_nUkyKa0oC3EIZ8tp_or9rJGSZzAVETY3j0IM2H9bZF4QfvUQOwmyCPrCU5k-_PqGiKqQQeer8ZwsVvH/s1600/facebook.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38-q8yWwpmo_HRXNTAgdydOev2H8NKC3U00e7dCfyZOudqPLYT2O1L6Ce0fmJ_nUkyKa0oC3EIZ8tp_or9rJGSZzAVETY3j0IM2H9bZF4QfvUQOwmyCPrCU5k-_PqGiKqQQeer8ZwsVvH/s200/facebook.png" alt="" id="BLOGGER_PHOTO_ID_5490895139597649362" border="0" /></a><br /><br /><br /><div style="text-align: center;">-------------------------------------------------------------------------------------------------<br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold; color: rgb(51, 102, 255);font-family:arial;" >2)Abrimos Flash y creamos el documento</span><br /><span style="font-family:arial;">Ya con el Adobe Flash CS3 funcionado, lo abrimos ya sea en el icono del escritorio o en inicio--> todos los programas-->Adobe Flash CS3 profesional:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTe4mbgEjyKB_dVCAchJQUCdsDLAXY3i0Ehzr_BWque7LuSItp5_O5kTlcU1Pk00jAzJuSX-vqrUlowsUC_ogzO5ZwSBU2bLSmALxKmDTM1HvGoNeUBbKAbdpBirMSdCLtDKy9xg6Z6oe/s1600/f3.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTe4mbgEjyKB_dVCAchJQUCdsDLAXY3i0Ehzr_BWque7LuSItp5_O5kTlcU1Pk00jAzJuSX-vqrUlowsUC_ogzO5ZwSBU2bLSmALxKmDTM1HvGoNeUBbKAbdpBirMSdCLtDKy9xg6Z6oe/s400/f3.jpg" alt="" id="BLOGGER_PHOTO_ID_5490896235287855138" border="0" /></a><span style="font-family:arial;">En el menú de crear Nuevo Documento seleccionamos Archivo de Flash ActionScript 2.0 :</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rTz5G-jCGJMKp3CwQXtBfr-VszxMQU58iFLJdGAMtKdT4eFAbchyeAgizIopcicvYiFEuMVAnRQDOO8Bplc2_MjbLYaBRHcdcH8Q4DFjIcsXrW5LvXZMpGPp511KmHDzD7APoho7QmPi/s1600/f5.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 313px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rTz5G-jCGJMKp3CwQXtBfr-VszxMQU58iFLJdGAMtKdT4eFAbchyeAgizIopcicvYiFEuMVAnRQDOO8Bplc2_MjbLYaBRHcdcH8Q4DFjIcsXrW5LvXZMpGPp511KmHDzD7APoho7QmPi/s400/f5.jpg" alt="" id="BLOGGER_PHOTO_ID_5490896395143188194" border="0" /></a><span style="font-family:arial;">Escogemos las dimensiones de nuestra animación, en la barra propiedades damos clic en tamaño (recuadro en rojo):</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHk06Rc6TIHSj7EVzsgG_rPhLu8rT2RwuudJNOAQZJQ9xhiyEWccofSZpEKNRBPbAGj3cUxmtnXMGhyt2gIkhXf4887MpoWB7VxJRBSMC34UWv9AVHA-N1GmhKLV2aX3L9zDWsaoMiQ0ew/s1600/f6.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 63px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHk06Rc6TIHSj7EVzsgG_rPhLu8rT2RwuudJNOAQZJQ9xhiyEWccofSZpEKNRBPbAGj3cUxmtnXMGhyt2gIkhXf4887MpoWB7VxJRBSMC34UWv9AVHA-N1GmhKLV2aX3L9zDWsaoMiQ0ew/s400/f6.jpg" alt="" id="BLOGGER_PHOTO_ID_5490896549324676834" border="0" /></a><span style="font-family:arial;">Luego nos aparece este recuadro y ponemos en la anchura 322 y la altura 62:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfOn8jC8jodP1AVHHQftlx-05ctiTmYetsyKpSPS_LeJ10pknHLIS_f2DujcqYVk0b-iZptMrvFingLeMtRjEdV23x7qoMnrlYsxg54zU-Sz6u_e4FABpD9Rv6zCTvZPTTp4W9MUMjV37e/s1600/f7.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 395px; height: 334px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfOn8jC8jodP1AVHHQftlx-05ctiTmYetsyKpSPS_LeJ10pknHLIS_f2DujcqYVk0b-iZptMrvFingLeMtRjEdV23x7qoMnrlYsxg54zU-Sz6u_e4FABpD9Rv6zCTvZPTTp4W9MUMjV37e/s400/f7.jpg" alt="" id="BLOGGER_PHOTO_ID_5490896745785614770" border="0" /></a><br /><div style="text-align: center;">-------------------------------------------------------------------------------------------------<br /></div><br /><span style="font-weight: bold; color: rgb(51, 102, 255);font-family:arial;" >3) importamos las imágenes de los iconos</span><br /><span style="font-family:arial;">Ya con nuestra área de trabajo definida, exportaremos las imágenes a biblioteca, Archivo-->Importar--> Importar a Biblioteca:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOQbM2G3ZJNmjuF30uyAlq7NezJzMxQ2ByezcXyhIH-Av7X3795yo0XGQDzE2wzTjEMV4wyUB3w2XiPWD2fY-KZQRLyGrUoQ4DebARa9u2zHeFQafONaSAeEubjREOoIiWyFamiv5y3U3/s1600/f8.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 399px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOQbM2G3ZJNmjuF30uyAlq7NezJzMxQ2ByezcXyhIH-Av7X3795yo0XGQDzE2wzTjEMV4wyUB3w2XiPWD2fY-KZQRLyGrUoQ4DebARa9u2zHeFQafONaSAeEubjREOoIiWyFamiv5y3U3/s400/f8.jpg" alt="" id="BLOGGER_PHOTO_ID_5490897150321708962" border="0" /></a> <span style="font-family:arial;">Buscamos las imágenes de los iconos sociales que previamente hemos guardado en la PC y las importamos, teniendo las así:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JWzhuI_Wuh3nPIO0pkdO7BCnldj28fXgIcdjr-c9frvVrjhtxyjgkcqFyMuVNudrFC3_pV6HaPfU9HjgijIu1B6Ye1Y4E6I0jwioXXfSLZBbZnHdi8QSirTwQIgYpSpZc2e2OYTknL5D/s1600/f9.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 250px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JWzhuI_Wuh3nPIO0pkdO7BCnldj28fXgIcdjr-c9frvVrjhtxyjgkcqFyMuVNudrFC3_pV6HaPfU9HjgijIu1B6Ye1Y4E6I0jwioXXfSLZBbZnHdi8QSirTwQIgYpSpZc2e2OYTknL5D/s400/f9.jpg" alt="" id="BLOGGER_PHOTO_ID_5490897329113107074" border="0" /></a><span style="font-family:arial;">Arrastramos solamente al campo de trabajo las imágenes que son de tipo mapa de bits (ya que tiene la calidad original), ya teniéndolas así:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY5wyi4RmyWVmT0vhGxcPfRKdHMNk1PraH-VVzZ9PKKMq4p-OjAAxTmFiUnuIFr7fN9nwlpvsXWxXboVN8KowEPOuOW_ysEZsTs_myQ-KfobsIqXdchmpYf5cojB9oJtAops0DfmU7rYfJ/s1600/f10.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 322px; height: 62px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY5wyi4RmyWVmT0vhGxcPfRKdHMNk1PraH-VVzZ9PKKMq4p-OjAAxTmFiUnuIFr7fN9nwlpvsXWxXboVN8KowEPOuOW_ysEZsTs_myQ-KfobsIqXdchmpYf5cojB9oJtAops0DfmU7rYfJ/s400/f10.jpg" alt="" id="BLOGGER_PHOTO_ID_5490897508610947314" border="0" /></a><span style="font-family:arial;">Para acomodar los iconos en línea, los puedes arrastrar y el asistente de flash te mostrara unas líneas para alinearlo respecto al primer icono. Si confias más en los números puedes señalar cada icono y en propiedades te aparecerá algo como esto:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbb68CSJSFUvqToUEqOq2OTy58_koAc_N5TcLVKMtKEQJlRj6PSSCjhA4HEf1KjhfgpuvroLKeuPMDDRao4GUbueEC_4VvzuJyF9WDPWGeQEd5hVHYk0a3t2t4FX4EJ_TzKnOm6XHU7rN/s1600/f11.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 188px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbb68CSJSFUvqToUEqOq2OTy58_koAc_N5TcLVKMtKEQJlRj6PSSCjhA4HEf1KjhfgpuvroLKeuPMDDRao4GUbueEC_4VvzuJyF9WDPWGeQEd5hVHYk0a3t2t4FX4EJ_TzKnOm6XHU7rN/s400/f11.jpg" alt="" id="BLOGGER_PHOTO_ID_5490897722579960802" border="0" /></a><span style="font-family:arial;">Todos los iconos tendrán 30 en el eje Y, cambiara siempre X; siendo el primero 0.0, el segundo 32, el tercero 64, el cuarto 96, etc. Siempre aumentándose en 32 ya que es el ancho de cada icono.</span><br /><br /><div style="text-align: center;">-------------------------------------------------------------------------------------------------<br /></div><br /><span style="font-weight: bold; color: rgb(51, 102, 255);font-family:arial;" >4)Pasarlas de imágenes a Botones</span><br /><span style="font-family:arial;">Ya las tenemos perfectamente alienadas en nuestro espacio de trabajo, empezamos a convertir cada imagen a botón. Seleccionamos el primero y nos vamos al menú Modificar--> Convertir en Símbolo (o presionamos F8) seleccionamos a Botón, no cambiamos el nombre que esta por defecto y damos clic en Aceptar:</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq2BzF5422g0k2S1dLhFcnx3KltvNDy41yb2BRZczp70uAko6r6nBzsu9DjZPAKc8gNKwXmM4VnOVkPjFwdaSkHaiRWJlQfA9QLq77s1_jX_Rfd2v-r7eJgBtIOumTpy3UeegwDApDwTII/s1600/f12.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 133px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq2BzF5422g0k2S1dLhFcnx3KltvNDy41yb2BRZczp70uAko6r6nBzsu9DjZPAKc8gNKwXmM4VnOVkPjFwdaSkHaiRWJlQfA9QLq77s1_jX_Rfd2v-r7eJgBtIOumTpy3UeegwDApDwTII/s400/f12.jpg" alt="" id="BLOGGER_PHOTO_ID_5490897989161447202" border="0" /></a><span style="font-family:arial;">Realizamos la misma acción para todos los iconos, cuando tenemos ya todos como Botones empezamos a agregarles un pequeño efecto de movimiento en la línea de tiempo, ¿como hacemos esto?</span><br /><br /><span style="font-family:arial;">Le damos doble clic al primero y nos abriera la línea de tiempo interna del botón, ósea sus estados (reposo, sobre, presionado, zona activa) :</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3gOXfm1xCU36dHv9p3g8-qh-ZbN8-8otqWcJ5Pmd-MkbJvdEULC_IxpBt6F5ouoczEdAhuaFVmhbTaYdNj9K8fsyvel8gj6qouPtwKvy_qrieYLqO7x87k-FEZImE3jF1xqnE-Ng8KvA/s1600/f13.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 273px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3gOXfm1xCU36dHv9p3g8-qh-ZbN8-8otqWcJ5Pmd-MkbJvdEULC_IxpBt6F5ouoczEdAhuaFVmhbTaYdNj9K8fsyvel8gj6qouPtwKvy_qrieYLqO7x87k-FEZImE3jF1xqnE-Ng8KvA/s400/f13.jpg" alt="" id="BLOGGER_PHOTO_ID_5490898218326330498" border="0" /></a><br /><div face="arial" style="text-align: justify;">Entonces ya identificando esta línea de tiempo interna, le daremos clic derecho en “sobre” y seleccionamos Insertar fotograma clave:<br /></div><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJVPMTCSD4w0d9Vb-5aCvlVk0BJfS7J6li3klUdHCy26i8Pk299o8wLVw_OoNJ9XsCfMNacH31LkHqWYs46aWPFH8VeXRxbZl2HVAuSvtpnlcGhopqLgZiwDG8RCkzAAE-X9rxzOTK6c7/s1600/f14.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 375px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJVPMTCSD4w0d9Vb-5aCvlVk0BJfS7J6li3klUdHCy26i8Pk299o8wLVw_OoNJ9XsCfMNacH31LkHqWYs46aWPFH8VeXRxbZl2HVAuSvtpnlcGhopqLgZiwDG8RCkzAAE-X9rxzOTK6c7/s400/f14.jpg" alt="" id="BLOGGER_PHOTO_ID_5490898960638058802" border="0" /></a>-------------------------------------------------------------------------------------------------<br /></div><span style="font-weight: bold; color: rgb(51, 102, 255);font-family:arial;" ><br />5) Animamos los botones:</span><br /><div style="text-align: justify; font-family: arial;">Estando en el fotograma clave creado pasamos al icono que tenemos seleccionado (el único que no esta opaco) y lo movemos hacia arriba, o también podemos ir a propiedades y en el eje Y ponemos -20, para que la línea sea recta y hacemos esto con todos los demás botones así tendremos un efecto uniforme y mejor visualmente:<br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWV9Uy2a2wSci1ofwFUX66VWxaebGugUcPAYPntEciOuSchfZWagL3Hn59tY6B7hqIl5YJvYeyGeK61EzXL_tK8X54gpCumWKq3OAe9yfJHuWqJfp3fCnfKuQP1SNJFL8VJ2z1LsJTgyT6/s1600/f15.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 185px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWV9Uy2a2wSci1ofwFUX66VWxaebGugUcPAYPntEciOuSchfZWagL3Hn59tY6B7hqIl5YJvYeyGeK61EzXL_tK8X54gpCumWKq3OAe9yfJHuWqJfp3fCnfKuQP1SNJFL8VJ2z1LsJTgyT6/s400/f15.jpg" alt="" id="BLOGGER_PHOTO_ID_5490899113775888962" border="0" /></a><span style="font-weight: bold; color: rgb(51, 102, 255);font-family:arial;" ><br /></span><div style="text-align: center;">-------------------------------------------------------------------------------------------------<br /></div><br /><span style="font-weight: bold; color: rgb(51, 102, 255);font-family:arial;" >6) los enlaces de los botones</span><br /><span style="font-family:arial;">Ya los tienes animados a todos, prueba por un momento la animación en el menú Control --> Probar Película; ahora vamos a ingresar los vínculos de las redes sociales, seleccionamos uno de los botones en mi caso seleccionare el icono de Twitter , e iré al menú Ventana y selecciono Acciones (o F9):</span><br /></div><br /><div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9gpZ4D3HeiXr7745-rZbtXCS5WTXsPULlgfngm1quVtZTJqsWqL4p4DhgrOmOUoeEhANZiVrjVlgJDwnsh8i_Br3DJwYHXy74GOZ6xYMp1oSNcdbAT3qx-2tWDl48sQSjy60l2TJAv4v/s1600/f16.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 388px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9gpZ4D3HeiXr7745-rZbtXCS5WTXsPULlgfngm1quVtZTJqsWqL4p4DhgrOmOUoeEhANZiVrjVlgJDwnsh8i_Br3DJwYHXy74GOZ6xYMp1oSNcdbAT3qx-2tWDl48sQSjy60l2TJAv4v/s400/f16.jpg" alt="" id="BLOGGER_PHOTO_ID_5490899590249948130" border="0" /></a><span style="font-family:arial;">Te aparecerá el asisten de Scripts y hay pegaremos el siguiente código:</span><br /><br /><span style="color: rgb(51, 102, 255);font-size:85%;" ><span style="font-family:courier new;">on(release){</span><br /><span style="font-family:courier new;">getURL("Aqui va el enlace tu perfil en Twiter, Facebook, lastfm, Blogger, etc.");</span><br /><span style="font-family:courier new;">}</span></span><br /><br /><span style="font-family:arial;">Dentro de las comillas tendrás que poner la dirección de tu perfil en una de estas redes sociales:</span><br /></div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOez9REnz49s7ZlYfdYgYoPjTgXSJk2dpburGkg_pHnJN9TuZJzZNLXaeG8sFdp2cXqa48zYM16XRH4yXgJX3jy1MXdhxEtUNHVOjaUWubDNfjElbWHzFkbhAZDtqSvQMYB8lxMuUZcj_/s1600/f17.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 82px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOez9REnz49s7ZlYfdYgYoPjTgXSJk2dpburGkg_pHnJN9TuZJzZNLXaeG8sFdp2cXqa48zYM16XRH4yXgJX3jy1MXdhxEtUNHVOjaUWubDNfjElbWHzFkbhAZDtqSvQMYB8lxMuUZcj_/s400/f17.jpg" alt="" id="BLOGGER_PHOTO_ID_5490899754557566642" border="0" /></a><br /><div style="text-align: justify; font-family: arial;">De esta forma tendremos enlazado el botón con nuestra red social, obviamente no tendrías un perfil en cada una. Puedes usar solamente los iconos que quieras y modificas el tamaño de lienzo para que no te quedes lugares en blanco o faltando espacio.<br /><br /><div style="text-align: center;">-------------------------------------------------------------------------------------------------<br /></div><br /><span style="font-weight: bold; color: rgb(51, 102, 255);">7) publicamos los botones</span><br />Ya tendiendo terminado de enlazar todos los botones exportamos nuestra animación Archivo-->Exportar película--> y la Guardas en tu PC. Te queda como un archivo SWF.<br /><br />Para subirla a tu web si usas Dreamwear solo tienes que dar insertar-->Media-->Flash y la animación la debes tener en la carpeta del sitio.<br /><br />Y posteriormente la subes a tu hosting y ya tienes tu propia barra Social.<br /><br /><div style="text-align: center;">-------------------------------------------------------------------------------------------------<br /></div> <div style="text-align: center;"><a href="http://barrasocial89.webcindario.com/"><span style="font-weight: bold;">Mira aquí la barra de navegación ya terminada</span></a><br /><br /><a href="http://www.megaupload.com/?d=FAHZ985Y"><span style="font-weight: bold;">La quieres descargar para agregar tus enlaces y modificarla, da clic acá</span></a><br /></div><br />Este Fue un Sencillo aporte, mi primer tutorial espero que les sea útil para toda la comunidad y pues espero aportes, comentarios y sugerencias para mejorar!<br /><br />Muchas gracias!</div>Ruben Dariohttp://www.blogger.com/profile/07988527649895921277noreply@blogger.com3