Cómo diseñar una página web en flash

mayo 10. 2006,
 Autor: 4 comentarios
 

Terminé de armar la estructura y el diseño de mi página web, es uno de los trabajos más complicados, primero por que cuando hago trabajos para mi, no me gusta cualquier cosa debe de estar bien diseñada y contener lo que a mi me gusta.

roc

Así es como hice mi primera página web en Flash

Ya termine la estructura, la navegación solo me falta meter los trabajos, pero eso lo estaré haciendo poco a poco por que tengo mucho material y por que a unos trabajos se le deben de tomar fotos.

Al principio pensé hacer un post con todos los pasos que seguí para hacer mi página web, pero vi que serían muchos y que ese post quedaría muy grande por ese motivo describiré lo que hasta este momento e hecho.

Primero y antes que nada hacer bocetos, los cuales contendrán la estructura base de la página, en donde se colocaran los botones y en donde serán más prácticos, eso es es muy importante planearlo antes de comenzar a diseñar, por que ese es un error muy común al momento de hacer una página, se comienza a diseñar en la computadora sin antes haber planeado todo en papel.

Luego de hacer bocetos y definir una idea correcta, se comienza hacer la página en Flash, y pensar como se aran los efectos, en este caso yo recomiendo hacer todo o lo más que se pueda en Action Script, porque el peso de la animación será menor y el resultado visual de la animación será mucho mejor.

La acción que utilice para los botones es que cuando se le de clic un rectángulo se posiciones en el botón, y al hacer clic en otro botón este rectángulo se cambie de posición, aquí fue en donde surgió el primer problema, por que no todos los botones son del mismo tamaño, por eso puse esta acción a cada uno de los botones:

on (release) { gotoAndStop(2); clip.onEnterframe = function() { clip._x += (-90.1-this._x); clip._y += (-0.4-this._y); clip._yscale = 100; clip._xscale = 105; }; }clip es el nombre de un rectángulo, este toma las coordenadas y la medida que el botón le indica.

Otra acción se encuentra en el logotipo del centro, que cuando se posiciona el cursor aparece el logo pero a color esto se logra, primero ocultando el cursor con esta acción en el primer fotograma en donde se encuentra el botón:

tres.useHandCursor = false;tres es el nombre del botón.

Muchos problemas en el pasado tuve por encontrar un preloading o cargador de películas, por que los que yo hacia aumentaban el peso a la animación, y por que cada que entraba a esa animación se veía la barra cargando de 0 a 100%, me dí a la tarea de buscar uno justo a mis necesidades. Encontré uno muy bueno y muy practico es puro Action Script, donde se le puede cambiar el color, tamaño, forma, etc. Y lo mejor de todo no aumenta el tamaño de la animación para nada, este es el código, -se debe de pegar en el primer fotograma de la animación, y en el fotograma 3 va todo lo demás, esto es por razones prácticas, para que se vea la barra comenzando desde 0%-

MovieClip.prototype.preloader = function() { var loading = "% Cargando.."; _root.createEmptyMovieClip("bar", -100); //aqui dibujamos el color interior del preloader _root.bar.lineStyle(.1, 0x808000, 0); _root.bar.beginFill(0x808000, 100); _root.bar.moveTo(0, 0); _root.bar.lineTo(0, 2); _root.bar.lineTo(100, 2); _root.bar.lineTo(100, 0); _root.bar.lineTo(0, 0); _root.bar.endFill(); _root.bar._x = 300; //270; _root.bar._y = 120; //300 _root.createEmptyMovieClip("ramme", 1); //aquí dibujamos el marco alrededor del la barra _root.ramme.lineStyle(1, 0x464600, 100); _root.ramme.moveTo(0, 0); _root.ramme.lineTo(0, 3); _root.ramme.lineTo(104, 3); _root.ramme.lineTo(104, 0); _root.ramme.lineTo(0, 0); _root.ramme._x = 300; _root.ramme._y = 119; //299 myFormat = new TextFormat(); //creamos el formato myFormat.font = "Arial"; myFormat.color = 0x999900; myFormat.bold = false; myFormat.size = 9; _root.createEmptyMovieClip("tekst", 2); //aqui creamos el texto que mostrara el porcentaje _root.tekst.createTextField("fjeld", 50, 50, 50, 20, 20); _root.tekst.fjeld.setNewTextFormat(myFormat); _root.tekst.fjeld.autoSize = true; _root.tekst._x = 355; _root.tekst._y = 62; _root.createEmptyMovieClip("control", 3); _root.control.onEnterFrame = function() { //aqui escalamos es color interior y el texto var b_total = getBytesTotal(); var b_loaded = getBytesLoaded(); if (b_loaded>=b_total) { unloadMovie(_root.bar); //se eliminan los mc cuando ya no son necesarios unloadMovie(_root.ramme); //se eliminan los mc cuando ya no son necesarios unloadMovie(_root.tekst); //se eliminan los mc cuando ya no son necesarios { myPorcent = (b_loaded/b_total)*100; _root.bar._xscale = myPorcent; _root.tekst.fjeld.text = Math.floor(myPorcent)+loading; } //else }; //onEnterFrame /******************** fin preloader *********************************/

Hasta aquí le dejo hoy luego le sigo con lo demás, si hay alguna duda o no fui lo suficientemente claro, me gustaría mucho ayudar, el resultado de todo esto lo pueden ver en roc21

Tweet about this on TwitterShare on Facebook0Pin on Pinterest0




  • cuackero

    cuack

  • cuackero2

    cuack
    cuack

  • carlos

    Hola esta muy bueno el pequeño manual q estas armando, pero yo tengo unas dudas para comenzar, primero el tamaño total, siempre al comenzar te sale q tamaña quieres, y mi pregunta es cual es el mejor tamaño?
    Otra pregunta q tengo en mi mente es como subo la pagweb ya diseñada, es decir, se que se hace un clip para comenzar a subir la pagweb, pero no estoy seguro de como, si me puedes ilustratar paso a paso como subirla se lo agredeseria mucho.

  • Emanuel

    hola. se puede diseñar una pagina web en flash y asi subirla al servidor?
    como se puenden crear link en flash?
    gracias

Búsqueda personalizada
Categorías
¡Sigue el blog!
botones socialesTwitterFacebookPinterestYouTubeGoogle+InstagramFeedlyRSS