El día de hoy les tengo un excelente tutorial que va a complementar mis tutoriales sobre botones y la precarga (preLoader) además va sacar de dudas a aquellas personas que quieran saber como hacer un sistema de navegación en Flash.

En el cual vamos a tocar lo siguientes temas:
Crear botones a partir de 1 (duplicación y swap – les va ahorrar tiempo).
Estructura de navegación en la Línea de Tiempo
Crear contenido a partir de la Duplicación y swap.
Crear animación de entrada.
Vemos los siguientes Conceptos:
Copia
Duplicar
Swap Simbol (intercambiar símbolos)
Navegación a través de etiquetas.
Programación AS3:
Listeners
Funciones
Eventos de Mouse (Sobre, Fuera & Click)
Es decir, si han tomado mis tutoriales este va a impulsar su conocimiento para crear una estructura sencilla de navegación a través de la línea de tiempo.
Aclaro que este no es un tutorial de Diseño, sino de programación AS3.
Link al Video – 20 min
Descarga de Archivos
Ver el resultado del Tutorial
Archivado bajo: Diseño de Layouts, Flash, Flash tutoriales, Video Tutoriales Flash, batatastudio, diseño web, programación | Etiquetado: batatastudio, diseño web, flash CS3, programación, Flash CS4, flash animacion, tutoriales flash español, sitios en flash, flash video tutoriales en español, botones en Flash CS3 y CS4, Botones Flash, Programación AS3, animar contenido en Flash, interfase en flash, estructura de navegación, hacer un sitio en flash, como hacer un sitio en flash, navegación en flash, como crear botones, como crear links internos en flash, links en flash, botones y secciones en flash
Primero en comentar me llego al toque al google Reader estoes justo lo uqe kiero empezar a practicar a ver si te animas a subir tutoriales de como crear una wen hecha en flash desde 0 seria muy interesante…!!!
muchas gracias por los videotutoriales
saludos
Lo he pensado y aún lo sigo pensando, pero no me decido aún ya que serían videos mucho más largos… mmmm no se.
Puede que un futuro haga uno.
amigo q tal excelente tutoriales…. me preguntaba si no podrias hacer una tutorial.. q simule el paso de las hojas de una revista o libro…. XD
http://www.revista-d.com.mx/…. este es el link donde vi la animacion…
Hey que tal, te pasaste con este tutorial, muy bueno para ser gratuito, gracias por compartirlo.
Un saludo desde Peru.
Atte
Juan de flashadictos.
Hola Edgar, ok lo voy a tomar en cuenta… es bastante complejo hacer eso… pero la anote en lista de tutos…
Saludos!!!
Sí, creo que tienes razón… igual y voy hacer cosas más sencillas, este sistema de navegación es sencillo, hay otros muchos más complejos con submenús y comportamientos más vistosos…
Me da gusto que comentes!!!
Saludos!!!
termine de hacer el navegador pero lo hice dirente me salio luego te muestro como me quedo peor ahora quiero que si existe la posibilidad de que me orientes un poco de como hacer el banner de http://www.dell.com donde rotan las imagenes…
e intentado hacer las imagenes que pasa una por una pero quiero meterc odigo AS3 para programar 1 2 3 4 5 del menu para ir a otra imagen (espero me entiendas) …a ver si chekas un rato la pagina y me comentas…o si puedas hacer un tuto mucho mejor se aprender mejor con los videos….
GRACIAS OTRA VEZ SALUDOS DESDE PERU…!!!
Hola Javier, ya vi el banner y se pude resolver de varias formas, me parece interesante… Es decir voy a sacar un tuto de lo que me pides en AS3, yo creo que
lo saco en un máximo de dos semana, por el trabajo que tengo, y además tengo que hacer las imágenes para el banner… pero es un hecho… Saludos desde México!!!
Estaba vuelto mono con as3 no sabia como dar la navegacion atravez de frame en cs3 cuando en las otras versiones si funcionada, solo una cosa que decir, te pasaste, desde chile las infinitas gracias.
Que bueno que te fue útil!!! me alegra! Saludos desde México!
No Acostumbro Comentar Blogs, pero de vdd tampoco te kiero alavar, gente como tu que se merece mucho, gracias por tus tutoriales!, estan mega bien! sigue subiendo mas!
Bae!
Gracias por comentar, no es alabar pero si es una forma de agradecimiento por mi trabajo ¿no crees? Me da gusto que sea útil. Saludos!!!!
Hola que tal. Bien, hoy te quiero hacer una pregunta:
¿Como se llama el programa en donde filmas los tutoriales?, te preguntaras porque, pues quiero hacer tutoriales sobre otros temas de informatica y he probado con varios pero no son muy buenos en cuanto a los colores y se distocionan y queda horrible.
Espero que me respondas.
Gracias.
Saludos!!
Si es para PC hay uno que se llama camtasia studio, no lo he probado pero se que se utiliza mucho.
Si es para mac se encuentran el iShow HD y Screen Flow, ya probe ambos y me quedo con el segundo, es más sencillo, intuitivo, estable.
Espero que te ayude mi respuesta!!!!
Saludos!
Gracias por tu excelente ayuda, pues bien ya lo estoy descargando para probarlo.
Muchas gracias.
Saludos!!
He leído el comentario de Javier, y el banner de http://www.dell.com/ con los botones que van indicando la imagen y estas van pasando una detrás de otra es justo lo que necesto aprender. Te estaría muy agradecido si algún día pudieses colgar un tutorial de como se podría resolver con actionscript 3.
Un saludo y felicidades por esta gran página.
Estuve viendo los tutoriales muy buenos por cierto y antes que nada gracias por los mismo.
ahora tengo dudas. Sobre el sistema de navegacion todo se desarrolla dentro de flash, si yo creo un boton en flash que posteriormente sea usado en una pag. web pero que tiene que direccionarme a una pagina html, eso se se programa desde flash o en el programa donde se arma la pag. ej, dreamweaver?
y otra mas bien curiosa tu pagina en que esta hecha?
Agrezco en lo que me puedas ayudar.
Hola Rene, a lo que te refieres es a crear un botone flash y después incrustarlo en un html (con dreamweaver), yo nunca he trabajado así, pero es bastante común lo que mencionas, te paso el código para que tu botón abra otro html:
var link:URLRequest = new URLRequest(“http://www.batatastudio.html”);
Home_btn.addEventListener(MouseEvent.CLICK, Clic);
function Clic(event:MouseEvent):void
{
navigateToURL(link);
}
Sobre mi “sitio” y lo pongo entre comillas porque es el colmo que aún no lo haga y sea diseñador web jajaja. esta hecha en flash, la animación es creada con puro código, son como 3 o 5 líneas de código, de hecho comparto con ustedes eso en posts pasados – LINK-
Saludos =)
Hola nuevamente Luis María.
Quisiera hacerte la siguiente consulta. En el tuto de navegación los botones siguen activos incluso una vez que ya llamaron a los contenidos (la animación continúa y si volvés a dar click rellaman al contenido que ya está en pantalla).
Con un remove del ROLL_OVER y del CLICK sirve, pero si hago un remove del ROLL_OUT queda trabado el fondo del botón y no vuelve.
Se agradece la ayuda.
Saludos!!
Ale: Muy buena observación!!!!!! Pero ese tema es para otro tutorial!!!!! =) ya que el que presente es básico y más bien me sentré en la navegación entre etiquetas, pero sin duda sacaré otro con este tipo de características. Hice un sitio donde pasa hago eso, te dejo la dirección: http://www.mgiovanna.com/ Saludos!!!
Felicidades Luis, son muy buenos tus videotutoriales, me ha servido mucho, tanto que me he suscrito a tu canal por youtube.
Esperaré por próximos videotutoriales, espero que sea lo que habla Ale, tambien he tenido problemas como las de él.
saludos desde Venezuela
Dels: Que bueno que te son de utilidad los tutoriales!!!! Saludos!
Luis Maria.
Acabo de descubrir este sitio me encanta, hace meses ando buscando como aprender AS3, ya q quiero mejorar ya vi el video de entender el AS3 esta de 10, entendi bien la info.
Me gustaria mucho algun tuto para aprender a hacer lo basico que hago en AS2, ahora en mi casa reviso todo el sitio para ver si ya estan aca pero de todas formas dejo mi inquietud.
como hacer en AS3 (equivalencias):
LoadMovieNum
UnLoadMovieNum
y carga de escenas.
imagino que stop sige igual, ya que en el video de enterder AS3 vi que usaste el GoToAndPlay tal cual como en As2.
ahora no recuerdo las otras funciones q uso. luego comento mis inquietudes.
primero voy a checar este video pare ver si aprendo y entiendo mas el AS3.
sige con el proyecto, y muchisimas gracias.
Krvger: Hola!! Que bueno que te gusto el contenido de este lugar, poco a poco se va llenando de buen contenido!
Te recomiendo que veas los tutoriales refrentes a AS3, donde explico cosas sencillas y me mediano nivel, ya saldrán otros tutoriales despenjando más dudas. Saludos!!
si ahora lo que mas me gustaria aprender es esas funciones basicas en AS3:
LoadMovieNum
UnLoadMovieNum
el FSComand de quit y FullScreen
en sus equibalentes de AS2 para el AS3
ya el resto seguire viendo el blog para ver si encuentro cosas nuevas.
Hola Luis,
Primero que nada queria decirte que estoy muy contenta de haber encontrado esta pagina, yo soy diseñadora grafica pero me encanta la forma en la que explicas paso a paso todos los tutoriales… bueno apenas vi el tutorial de sistema de navegacion y me quedo una duda, en tu boton de cliente, tienes escrito en el contenido cliente1, cliente2, etc. mi duda es si esos clientes se pueden convertir a botones y hacer que ellos arrastren los archivos de sus contenidos??
bueno me despido, besos
saludos
-Aura
Aura: Hola!!! Me da gusto que te sea útil este espacio, trato de hacarlo lo mejor posible!! =)
Respecto a tu duda, si, puedes hacer más botones dentro de esa sección y que estós te lleven a más contenido de la sección de clientes. Utiliza la misma lógica que el sistema de navegación pero en una “sub sección”. Saludos!!! espero aclrar tu duda!!!
Hola, tengo una pregunta que la verdad ya no se como resolver. Necesito saber como hacer un sistema de navegacioon flash con AS3. Resulta que tengo las distintas secciones del sitio en los fotogramas, por ejemplo Home esta en el fotograma 1, Servicios en el fotograma 10, productos en el 11 y asi sucesivamente. La botonera hace la navegacion de acuerdo a los distintos labels y cada seccion muestra su contenido en forma correcta. Pero lo que necesito hacer es que ademas del contenido que se muestra, me cargue un banner swf externo en cada seccion de mi sitio, por supuesto que es un swf para cada banner.
La verdad ya estoy desesperado porque no se como resolverlo y no soy un experto con AS3, de hecho Este sitio estaba hecho en AS2 pero ahora requieren que sea AS3. Desde ya gracias si me puedes ayudar.
Nahuel: Espero que estés bien! Gracias por tu explicación, me ha quedado muy claro lo que necesitas, para cargar el banner externamente tendría que pasarte el código y prefiero hacerlo por medio de un video, no se cuando saldrá pero pasará, lo siento si eso incomoda tu proyecto. Puedes utilizar o modificar un poco el código del tutorial de “Pre Loader“. Saludos!
Muchas gracias por tu atencion. Ahora encontre dando vueltas por ahi un codigo que me sirve para cargar varios swf en las distintas secciones pero lo que no logro es hacer que cuando se cambia de seccion, el swf desaparezca. Es decir los carga pero cuando la linea de tiempo se moviliza hacia una seccion determinada, no desaparece el swf y se muestra en todas las secciones. Gracias igual y esperare a que salga el video que hagas para saber aplicarlo en un proximo proyecto. Que sigas bien!
Nahuel: pues genera un video en blanco (sin nada) y cada que cargue una sección que no lo tenga que cargar video, que cargue el video sin nada… Me explico?¿? Saludos!!!