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: animar contenido en Flash, batatastudio, botones en Flash CS3 y CS4, Botones Flash, botones y secciones en flash, como crear botones, como crear links internos en flash, como hacer un sitio en flash, diseño web, estructura de navegación, flash animacion, flash CS3, Flash CS4, flash video tutoriales en español, hacer un sitio en flash, interfase en flash, links en flash, navegación en flash, programación, Programación AS3, sitios en flash, tutoriales flash español
ingeniero zapatilla: Hola! El asunto es que desde el CS3 ya no puedes generar código sobre símbolos como en Flash 8 con AS2, es decir, desde AS3 solo puedes generar código en los keyframes o documentos .as, es por eso que no puedes hacerlo. Saludos!
david022: Hola!!! Sí claro que se puede, puede generar un usuario y password para entrar a contenido exclusivo, es una buena idea para un tutorial! Saludos!!!
holasoy nuevo en flash y me salto una duda, estoy haciendo unsitio en flash y el rpoblema es que que tengo un clip de pelicula en un fotograma y dentro del mismo quiero poner una galeria de imagenes u otro menu de navegacion, la cosa es que en flash cs4 no me habilita el panel de acciones o tambien y otro problema es que cuando esta habilitado el on release no funciona y me da error, ahora cuando utilizo el flash 8 dentro de un clip de pelicula puedo generar botones de navegacion o utiizarelpanelde acciones perfectamente.
no se cual puede ser el error o de que forma puede generar un sub sistema de navegacion n flash cs4
hola, tengo una pregunta; se puede hacer que ciertos
usuarios entren a ver cierta informacion con un usuario o un pass. Tus tutoriales esta super, gracias.
ithaca23: Hola! Gracias por escribir!! Lo que necesitas es un Scroll Bar, sip, haré uno de esos, espero tenerlo pronto!
Saludos!!!!
Que tal Luisma ! Espero andes bien, estoy haciendo este sistema de navegacion, mejor dicho, estoy siguiendo su lógica para implementarlo en una web que me pidieron, el problema que tengo es el siguiente:
El contenido que debo ponerle a la web en cada sección es muy grande (Textos largos e imagenes que ocupan espacio), pues bien, yo no quiero que el escenario ocupe muchos pixels de altura, entonces estaba pensando en crear una barra deslizable (como la de cualquier programa) que permita subir y bajar para ver todo el contenido. Es algo parecido a lo que tienes en la página “Border” a la izquierda que dice “Noticias”, hay una barra deslizable que permite subir y bajar el contenido.
Se podrá hacer esto de manera sencilla o tendré que esperar a que saques otro videotutorial ?
Espero me hayas entendido. Un gran saludo y que sigas de 10
[...] Sistema de Navegacion en Flash CS3 & CS4 [...]
camilo lugo: nop… puedes llamar swf des AS2 a AS3 pero no puedes importar AS3 a AS2… Saludos!!
quiero saber si puedo hacer un sistema de navegacion en accionscript 3 y mesclarlo cargandolo como pelicula (loadmovie) desde un boton en un archivo de accionscript 2
dannyolivier: Hola, mira los símbolos de botones son muy limitados en cuanto a animación, no puedes hacer mucho, de hecho yo digo que ya lo deberían de quitar del programa, casi no se usan. Cuando los haces con movie clip, le das la animación que tu quieras, eso sí, tiene que se más elaborada la animación para que valga la pena, o ese botón puede tener más de 4 estados, los que uno quiera. El símbolo de botón solo lo he usado 1 vez en todos los tutoriales que he desarrollado. Saludos!!!
hola que tal una pregunta en vez de usar simbolo boton pones un movie clip es necesario usar movie clip? nose puede usar como simbolo boto? y por que? gracias epsero q me saques de dudas
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!!!
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: 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!
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.
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 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
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.
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!!
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.
Dels: Que bueno que te son de utilidad los tutoriales!!!! 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
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!!!
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!!
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 =)
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.
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.
Gracias por tu excelente ayuda, pues bien ya lo estoy descargando para probarlo.
Muchas 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!
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!!
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!!!!
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!
Que bueno que te fue útil!!! me alegra! 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.
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!!!
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…!!!
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!!!
Hola Edgar, ok lo voy a tomar en cuenta… es bastante complejo hacer eso… pero la anote en lista de tutos…
Saludos!!!
Hey que tal, te pasaste con este tutorial, muy bueno para ser gratuito, gracias por compartirlo.
Un saludo desde Peru.
Atte
Juan de flashadictos.
http://www.revista-d.com.mx/…. este es el link donde vi la animacion…
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
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.
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