Botones en flash

En tutoriales anteriores hemos aprendido distintas cosas en Flash, crear una intro, crear un menú, modificar archivos.swf, etc.
Pero tal vez algo que ustedes no saben y les puede resultar muy útil es crear botones en flash para incorporar a sus webs y darles un aspecto más estético a su sitio.
Para eso les presento una nueva herramienta llamada Amara - Flash Intro and Banner Builder que nos ayudará a crear distintos trabajos en flash.
Vamos a los pasos y comenzemos:



1)Abrimos nuestro programa Amara - Flash Intro and Banner Builder
Lo que debemos tener antes es una imagen para el fondo de nuestro boton, también debemos saber las dimensiones exactas de nuestra imagen (Pueden usar el paint para ver la dimensiones).
Ahora sabiendo las dimensiones de la imagen, ingresamos los datos correspondientes en Width (el ancho) y en Height (el alto)
En mi caso 222x88, ahora más abajo destildamos donde dice "border" (Si quieren ponerle un borde de color entonces lo tildamos y seleccionamos el color)
Luego en la opción de Background (Fondo) selecionamos Image (Sino tienen una imagen o quieren hacer un boton de color entonces seleccionamos la opción de arriba que dice "Color")
Para poder buscar la imagen en nuestra PC debemos hacer un clic en los "..." (Sino ven los "..." miren la siguiente imagen a continuación)
Para ver como quedo hacemos un clic en
Generate And Display
(Todos estos puntos están marcados en la siguiente imagen)

Interfaz del amara flash

2)Ahora pasamos a la pestaña que se llama
Type
ahí lo que debemos deshabilitar es donde dice
Show Skip Intro
(Para sacar la intro que aparece en nuestor botón, ya no estamos creando una intro sino un botón)

Configurando características del boton en flash

3)En la siguiente pestaña llamada
Texts
debemos editar lo siguiente:
Donde dice "Url link" ponemos nuestra url o link a donde queremos redireccionar cuando hagan clic sobre el "Texto 1" de nuestro botón
(Como verán pueden agregar todos los textos que quieran y cada uno puede tener un link distinto. Para agregar más textos hacemos clic en "Add Item")
Debajo "En Texto 1" ponemos el texto que deseamos visualizar en el boton (Shop, foro, etc)
Luego debajo de todo podemos editar el efecto en flash que queremos darle, la posición o ubicación que aparece en el botón, el tiempo, el tipo y color relacionado a la letra (Eso lo configuran a su gusto)
Para ver como va quedando hagan un clic en "Generate and display".

Aclaración si sólo van a poner un sólo texto debemos eliminar los otros que tenemos arriba, para eso hacemos un clic en texto 2 y luego clic en "Remove" (Boton que se encuentra arriba)
Para lograr la posición correcta deberán hacer varias pruebas antes de dar por finalizado.

Agregando url del boton

4)La siguiente solapa sería
sound
pero en mi caso no le pondré sonido. (Si quieren pueden hacerlo tildando la opción sound y buscando la ruta de su archivo)
Ya tenemos nuestro botón terminado, para guardar nuestro proyecto hacemos un clic en donde dice SAVE (Debajo de donde visualizamos nuestro botón )
Luego un clic en SAVE SWF y elegimos en donde queremos guardarlo, y por último este fantástico programa nos generá el código en flash con el nombre de nuestro archivo, el tamaño exacto de nuestro botón listo para pegarlo en un archivo.php que querramos visualizarlo.
Para esto, hacemos un clic en donde dice
Copy to clipboard
y se nos copia el código que podemos visualizar arriba.
Ese código es el que deben pegar en su archivo.php de la web en donde quieran que aparezca el botón, no está de más decir que después de pegar el código, deben pegar el archivo en flash generado recientemente en el mismo directorio.
Por ejemplo si pegamos el código de flash en un archivo que se aloja en la siguiente ruta
C:\AppServ\www\index.php
el archivo en flash debe ir en esa misma carpeta en este caso en
C:\AppServ\www\
Generando y copiando código del boton

Menu en flash by asd*

  • Para realizar este tutorial vamos a necesitar Macromedia Flash Profesional 8.0 y lo pueden descargar en este web.
    (Repito lo mismo que en el anterior tutorial: pueden utilizar cualquier versión de flash pero puede que suceda que nos encontremos frente a incompatibilidades)




  • Bueno empezemos, buscando en internet, navegando diariamente me encontré una plantilla web en flash que cuando la ví me pareció conocida, me puse a pensar donde la habia visto antes y dije: ¡Ya sé en el www.muarg....com! (Esto no es publicidad ni nada por el estilo), en un primer momento me sorprendí porque pensé que un server conocido (Al menos en Argentina) copio una plantilla de internet en vez de crear la suya propia.
    La pantilla original es la siguiente.

    Interfaz de la web electric company

    Yo le hice unas pequeñas modificaciones al menú en flash, el resto de la página está escrita en html.
    Me quedó algo así:

    Menu modifcado y personalizado

    Lindo ¿no?
    Bueno comenzemos y veamos como podemos personalizar nuestro menú.
    1)Descargamos el template o plantilla la cual contiene todo lo que vamos a utilizar

    2)Una vez que lo descargamos vamos a ver que es cada archivo :

    Archivos correspondientes a la web

    A)La carpeta imágenes contiene todos los archivos .gif de la plantilla web
    b)La carpeta font son las fuentes con las que trabaja la web, lo que debemos hacer con esa carpeta es pegar los archivos que contiene la carpeta font en C:\WINDOWS\Fonts con eso logramos que nuestra pc tenga las mismas fuentes disponibles en cualquier procesador de texto.
    C)La carpeta Flash contiene dos archivos uno llamado 0789.swf y otro llamado 0789.fla
    Un detalle que podemos destarcar, es que si observan el archivo .fla pesa 2mil veces mas que el archivo en .swf eso es porque .fla es la descompresión de .swf para poder ser editado.
    D) EL archivo index.php lo modifiqué yo, lo cree en .php para mayor facilidad.
    Este contiene la configuración del menú en flash y también contiene la parte html de la web.
    E)El archivo .html nos permite tener una vista previa.
    Para esto lo abren y le dan los permisos ( Por eso lo llame vista previa).
    3)El archivo 0789.fla será con el que trabajaremos en este tutorial, entonces hacemos un clik derecho sobre el archivo, vamos a donde dice abrin con ... y seleccionamos Flash 8.

    Abriendo archivo fla con flash

    4)A ver ¿Cómo explico ahora esto?
    Cuando abran el programa primero no toquen nada veamos cosas basicas.

    Archivo abierto

    Marqué con distintos colores las cosas básicas que debemos tener en cuenta antes de comenzar a utilizar esta fantástica herramienta para WebMaster.
  • Rojo=[Herramienta de selección] la vamos a utilizar casi siempre para marcar y descubrir las capas que se ocultan detrás

  • Azul=[Herramienta para transformación libre] esta herramienta nos permite poder agrandar, achicar, redimensionar los distintos elementos de forma libre.
    (Cumple la misma función que el Photoshop )

  • Negro=[Herramienta de texto]¿Me imagino que saben para que sirve, no? es la misma que tenemos en el paint y nos permite escribir sobre una capa.

  • Rosa=[es la biblioteca] donde podemos ver todos los archivos, clips de películas, imágenes, etc que tenemos en nuestro archivo .fla

  • Con esa breve introducción podemos comenzar a trabajar.

    5)Lo primero que vamos a modificar será el fondo de este menú, yo voy a ponerlo en negro (Ustedes pueden seleccionar el color que deseen), para eso hacemos un clic en fondo y seleccionamos el color [Ver la siguiente imagen]

    Modificando color de fondo

    6)Lo que haremos siempre que deseamos probrar modificación, es ir a
    CONTROL=>probar película
    (El método más rápido es [control+enter])
    Seguramente no verán el fondo si no ampliam la ventana igual el fondo lo verán después de los sguientes cambios:

    Probando película

    7)Nuestro siguiente paso será cambiar una imagen, veamos la siguiente foto para saber de cual se trata

    Seleccionando cabezera de la web

    Hago una aclaración, sólo modificaremos la imagen marcada en la foto anterior, sólo la imagen, ya que el texto y el logo de arriba lo haremos después, tampoco se preocupen en recortar la imagen ya que va debajo.
    Lo que si debemos respetar son las mismas dimensiones de la imagen, en este caso necesitamos una foto 770x104.
    Para cambiar la imagen hacemos lo siguiente: en el panel derecho buscamos un mapa de bit (imagen) llamada " power " luego hacemos un clic derecho y seleccionamos la opción "Propiedades", en la nueva ventana hacemos un clic en "Importar" finalmente buscamos nuestra imagen y aceptamos.

    Importando imagen

    Para ver como quedo, hacemos un clic donde dice "scene 1" (Desde ahí podemos ver como va quedando nuestro proyecto)

    Visualizando los cambios

    Como pueden ver, la imagen se adapta perfectamente al menú, ya que esta queda detrás y no delante, es por eso que no necesitan recortar la imagen.

    8)Ahora lo que haremos, será cambiar los nombres en el menú, para eso utilizamos
    La herramienta de texto
    (Sino recuerdan cual es, revisen más arriba donde expliqué las herramientas básicas, y sino tienen ganas de ver lo que puse arriba, la herramienta de texto es "La letra A" que se encuentra en el panel izquierdo de herramientas, sino presionen la letra "T" del teclado)
    Una vez que tenemos seleccionada nuestra herramienta nos posicionados sobre SCENE 1, hacemos un clic donde dice [About Us] en la barra del menú flash que estamos editando.

    Seleccionando herramienta de texto y modificando el nombre en el menu

    Este paso lo repetimos con todos los nombres (Pueden poner el texto que desean).
    Sino saben que poner les dejo algunas ideas (Inicio, descargas, crear cuenta, ranking, foro, contacto, etc )
    También, debajo en el panel que se encuentra en el medio, pueden editar el color, tamaño y tipo de letra.
    Tengan en cuenta el color de la letra que utilizarán, porque nuestro próximo paso será cambiar de color de la barra del medio y si ponen las letras del mismo color que la barra, será imposible poder leer que contiene cada menú.
    Al terminar les deberia quedar algo así:

    Nombre de los menus modificados

    9)Seguramete si realizan una vista previa, más de uno dirá que se ve todo desordenado.
    Es verdad que se ve todo desordenado porque sólo cambiamos los textos, ahora nuestro siguiente paso seá alinearlos por cuestiones de estética.
    Para eso utilizaremos la "Herramienta de selección"
    (Pueden ver más arriba cual era, sino presionen la letra "V" o sino haga un clic sobre la flechita negra que se encuentra en el panel de herramientas)
    Una vez que la tenemos seleccionada hacemos sólo un clic sobre el primer nombre que vamos a alinear
    (Digo sólo un clic porque si hacen dos entrarían en edición de texto nuevamente). Si de casualidad hiciste doble clic tendrás que seleccionar la herramienta de seleccion nuevamente
    (Ya que te queda marcada la herramienta de texto al haber hecho doble clic)
    Bueno, entonces, lo que haremos será ubicar de la mejor manera posible nuestros textos.
    A mi me quedo algo así, seguramente a ustedes les quede mucho mejor.

    Alineando textos

    10)Recuerden cada vez que quieran ver el diseño pre-terminado vamos a
    Control=>probar película
    (sino apretan Control+Enter).
    Como dije en el punto anterior, nuestro siguiente paso será cambiar el color de la barra del menú (No es necesario si ustedes quieren consevar ese color o quieren conservar algo del menú original, en ese caso salten los pasos correspondien)
    La barra de menú en flash tiene dos colores, el primer color es ese celeste (Estado inactivo) y el segundo color es un blanco que aparece cuando ponemos el mouse sobre ella (Esa sección la denominaremos como activa y lo pueden ver realizando la vista previa o aprentando Control+Enter).

    Entonces vamos a cambiar el color de la barra en estado inactivo (Sería el celeste actual)
    Para esto, buscamos el Shape 6 (Está 13 posiciones debajo de la última imagen que cambiamos)
    Otra forma o manera de localizarlo es presionando la letra "S" y nos llevará cerca de nuestro objetivo "Shape 6", ahora simplemente debemos hacer doble clic sobre el icono (No hagan doble clic donde dice "Shape 6" porque eso es para cambiarle el nombre al clip los dos clic deben ir sobre el icono)

    Seleccionando shape 6

    En el medio, abajo; tenemos la barra para cambiar el color, transparencia, tonalidad, brillo a la barra de nuestro menú
    Si observan, en este momento está en "ninguno" eso lo modifican a su gusto y recuerden el color de letra que le pusieron ya que el fondo no debe ser el mismo

    Cambiando propiedades de transparencia, tonalidad o brillo

    11)Ahora nuestro siguiente paso será cambiar/modificar el color de los botones en estado Activo (Es decir cuando pasamos el mouse por cada boton toma un color, ahora está en un color blanco)
    Tengan en cuenta que al cambiar el boton de color también cambia el color del símbolo.
    En mi caso voy a darle un poco de brillo y mantener el original, para eso hacemos un clic en
    Scene 1
    y luego hacemos un clic sobre cualquiera de los botones (Recuerden que debemos tener seleccionado siempre la herramienta de selección [Flecha negra]
    Si observan, al hacer clic sobre uno de los botones les aparecerá un remarcado en la pantalla indicando que fue lo seleccionado. El método para cambiar el color es el mismo que el anterior

    Seleccionar barra a modificar

    Si quieren ver como les va quedando el trabajo, recuerden aprentar "CONTROL+ENTER" o van a "Control=>probar película"
    En caso de que cometan algun error o hicieron algo que no les gusto apretamos "Control+z" y de esta manera regresarán un paso atrás (Si manejas photoshop, verás que Macromedia Flash usa las mismas teclas rápidas y esto se debe a que tantos los dueños de Photoshop como de Flash son los mismos creadores)

    12)Nuestro nuevo paso será quitar lo que no nos sirve en el menú en flash.
    Para esto buscamos en el panel derecho de nuetro programa los siguientes Symbol:
    Symbol 73
    Symbol 74
    Symbol 80
    Symbol 92
    Symbol 96
    Symbol 97
    Symbol 98
    Symbol 99
    Symbol 101
    Symbol 102
    Luego arriba borramos uno que dice "Advansed search but", "Advanced search", también borramos uno que se llama "search" (la lupa) "pic001" y "pic002" y por último una que se llama "panel left"
    Para borrarlos hacemos un clic y apretramos "Suprimir" de su teclado, otra forma es : hacemos clic derecho=>Eliminar
    (Tal vez nos quede un recuadro en lineas punteadas abajo a la izquierda, para borrar eso usen la "Herramienta de selección" le damos un clic y apretamos suprimir.
    Debería quedarnos asi:

    Visualizando los cambios

    13)Como verán sólo deje la parte superior para último momento, porque mientras armaba este tutorial se me ocurrió una idea, pero antes de ir a eso vamos a quitar la parte azul de abajo.
    Para esto hacemos un clic (solo uno, si hacen dos no van a poder quitarlo, en ese caso para regresar atrás apretamos "Control+z" o hacemos un clic arriba donde dice Scene 1) en esa zona (En la siguiente imagen marqué la zona con un círculo) y apretamos suprimir.

    Eliminando espacio seleccionado

    14)También hacemos un clic donde dice "Electric Company" y apretamos suprimir.
    Ahora hacemos un clic (Recuerden que deben tener seleccionada la "herramienta de selección") y sólo deben hacer un clic en el rectángulo azul en donde están las letras y ponen suprimir (Si hacen dos clic por error hagan lo mismo que puse en el paso 13 respecto a este error)

    Ahora lo que haremos será editar el texto que dice
    Welcome to your company electric - the worldwide leader in electric field!
    Para esto hacemos primero dos clic sobre las letras (Teniendo seleccionada la herramienta de selección) verán como un recuadro que sale de ahi, eso nos indica que entramos a el Symbol 104
    Ahora sobre las letras volvemos hacer doble clic y automáticamente pasará a la herramienta de texto y nos permitirá poder modificarlo.
    Debajo en el medio, tienen disponible una barra de herramientas para modificar el tamaño, color, etc ...

    Visualizando cambios

    15)Si quieren mover el texto de lugar o ponerlo más a la derecha o izquierda hacemos un clic derecho sobre el texto y nuevamente un clic en donde dice "Transformación libre" y desde allí podemos mover el texto (cuadro completo)
    El último paso será y esta fue la idea que tuve es: en vez de borrar el símbolo o logo de compañia (Es una especie de rayo) que dejamos arriba de todo ( No es que me lo olvide) lo podemos poner abajo al lado del texto, ya que en mi caso, sobre mi imagen no se ve bien.

    Entonces para esto, lo que haremos será un clic derecho sobre ese "rayito", buscamos la opción "Transformacióno libre" y lo podemos mover a donde mas nos guste. (Con la opción: "Transformación libre" podemos agrandar o achicar las imágenes pero no lo recomiendo en este caso).
    Un posible error que observé es que antes que aparezca nuestro texto se ve una línea blanca, para sacar eso debemos borrar "Symbol 103", lo buscamos en el panel derecho y lo suprimimos.
    Particularmente me quedó así:

    Moviendo el rayito con la opción de transformación libre

    16)Pero esto no termina acá, ahora viene la parte de programación.
    Como verán nuestro menú tiene botones y si los queremos implementar a nuestra web debemos indicarle a cada boton a donde redireccionarnos.
    Este paso no es difícil vamos hacerlo rápido:
    Primero debemos tener nuestro trabajo terminado y conformes con los resultados para eso hacemos un vista previa (Control+Enter)si necesitan realizan otro cambio, ahora es el momento sino cerramos la vista previa y hacemos un clic donde dice "Acciones" no miren arriba porque el boton está abajo.
    Si quieren aun más rápido todavía apretamos "F9" (No la letra F más el 9, sino apretamos le tecla [F9])

    Seleccionando el menu

    17)Buscamos en el panel de la derecha
    Menu 1
    y hacemos doble clic sobre el ícono (Sobre sobre el "menu 1" NO, porque desde alli estamos cambiando el nombre al clip )
    En la pantalla de acciones verán algo como esto:

    on (rollOver) {
    gotoAndPlay(2);
    }
    on (rollOut) {
    gotoAndPlay(11);
    }

    Lo que debemos hacer aca es agregarle en la linea 7 este texto:
    on(release) {
    getURL("https://guiaservermu.blogspot.com")
    }
    Entonces nos quedaria asi:
    on (rollOver) {
    gotoAndPlay(2);
    }
    on (rollOut) {
    gotoAndPlay(11);
    }
    on(release) {
    getURL("https://guiaservermu.blogspot.com")
    }
    No está demás decir que ("http://guiaservermu.blogspot.com") debe ser cambiado por el link de su web segun corresponda y otra aclaración: "Menu 1" corresponde al primer boton (El que está del lado izquierdo)
    "Menu 2" es que le sigue a su derecha y asi hasta Menu 7 que es el último botón.
    El procedimiento es para todos los botones el mismo, sólo deben hacerles un doble clic sobre el botón y agregan la línea, cambián el link y listo.
    (En caso que no aparezca para que podams escribir el texto, hacemos un clic sobre la imagen y luego abajo agregamos la línea.)

    Agregando enlace o link a cada boton del menú

    18) Para guardar nuestro menú terminado, vamos
    Archivo=>Exportar=>Exportar película=>Aceptar
    (No modificamos nada allí) le ponemos el mismo nombre 0789 y lo guardamos en la carpeta
    Template by asd\flash
    que descargamos al comienzo de este tutorial.
    Si quieren guardar el original, sacan ambos arhivos (.swf y .fla) que están dentro de la carpeta Template by asd\flash y pegan sólo el archivo que recien terminamos de personalizar.
    Hacemos un paso atrás y vamos a "Vistra-Previa" y ya podemos ver como quedo terminado nuestro trabajo.
    En caso que quieran ponerlo en su web, abrimos el index.php que tenemos dentro de la carpeta Template by asd y copiamos sólo estas lineas en el index de su web que se encuentra en
    C:\AppServ\www
    si utilizan AppServ o en
    C:\Xammp\htdocs
    si utilizamos Xammp
    (Si tienen una intro y quiere agregar el menú alli, deben pegarlo en el index1.php)

    Agregando el código para insertar el menu

    Última aclaración y con esto me despido, si van a usarlo en la web recuerden que además del código para flash deben pegar también la carpeta flash que se encuentra dentro de la carpeta "Template by asd", además en el código para poner flash pueden editar el tamaño, etc.
    Si quieren cambiarle el nombre y que no lo busque dentro de la carpeta flash al archivo simplemente editan la parte del código que dice
    src="flash/0789.swf"
    por este otro
    src="0789.swf"
    Si le quieren cambiar el nombre y lo llaman por ejemplo menu.swf entonces deberán poner
    src="menu.swf"
    (Deben modificar esto en dos lineas del código ya que se repite).
    Ahora si me despido espero que les sirva, porque no sólo aprendieron a modificar un menú en flash sino que también aprendieron a utilizar herramientas básicas y no tan básicas en flash.

    Guia intro WEB-MU II

    Como mencioné en el anterior tutorial, existen distintos tipos de intros ya vimos como crear una intro a partir de una imagen y que tenga varios links, pero no hay dudas que las intros más atractivas son las hechas en flash (.swf )
    Entonces lo que vamos aprender en este tutorial es a editar una intro en flash.
    Los programas que vamos a utillizar son:



  • Flash Decompiler Trillix By Eltima Software (Lo pueden descargar e instalar siguiendo el siguiente tutorial: Instalar el editor en Flash

  • También vamos a utilizar Macromedia Flash 8.0 Profesional y lo pueden descargar en esta web.
    Antes de comenzar voy hacer una breve explicación y se trata que no sólo nos encontraremos con archivos de tipo ".swf" sino también nos vamos a encontrar con otro tipo de extensión y es la llamada .fla
    Básicamente lo que deben saber es que .fla es una descompresión de la extensión .swf la cual nos permitirá editar este tipo de archivos y volver a exportarlos.
    Esto lo digo porque vamos a trabajar con ambas extenciones y vamos hacer lo siguiente:
    Cuando trabajemos con .swf usaremos el Flash Decompiler Trillix By Eltima Software y Cuando trabajemos en .fla vamos a utilizar Macromedia Flash 8.0 Profesional
    (Aclaro, pueden usar la versión que dseen de Flash pero puede que sucede que nos encontremos frente a incompatibilidades a la hora de trabajar con variantes de diferentes archivos ya exportado)

    Terminada la explicación y aclaración vamos a lo que verdaderamente nos intereza y para esto vamos a los pasos que nos guiaran y orientaran duracte este tutorial.

    1)Lo primero que debemos hacer será descargar la intro con la que vamos a trabajar.

    2)Luego abrimos nuestra intro con el Flash Decompiler.
    Yo la voy a modificar por completo, pero si ustedes quieren conservar algo del original simplemente saltean el paso correspondiente a ese cambio.
    3)Comenzemos con las imágenes, la primera imagen en modificar será el fondo, hacemos un clic en "Edit" y luego un clic en "Images".

    Editando imagenes

    4)En el panel izquierdo desplazamos la barra hasta la última imagen (Image 24), y ahora observen la ficha que está abajo en el medio, si prestan atención dice asi:
    SIZE=1024*768
    eso nos quiere decir que esa imagen tiene esas dimensiones las cuales debemos respectar.

    Visualiznado las dimensiones de la imagen seleccionada

    5)Nuestro nuevo paso será cambiar la imagen por una que nos guste (Dos cosas a tener en cuenta, la primera y la más importante son las dimensiones; recuerden que las dimensiones era 1024*768
    Lo segundo a tener en cuenta, es un consejo sobre estética. Seguramente ustedes ya vieron la reproducción y sino veanla ahora, fijense del lado izquiero donde dice
    Tu server prueba
    está dentro de una esfera blanca, si su imagen que van a agregar tiene justo allí la cara de algun personje, recuerden que esa esfera blanca aparecerá delante de su imagen tapando todo lo que este detrás
    Para cambiar la imagen hacemos un clic en el "Sobre" que se encuentra debajo, buscamos nuestra imagen y la abrimos.

    Abriendo imagen

    6)Una vez que cargaron la imagen puede probrar la escena para ver como les quedo.
    Para esto deben cerrar las ventanas expandibles (las que se encuentran en el panel derecho) y luego un clic sobre el archivo .swf
    A mi me quedo de la siguiente manera y tambien marqué el detalle estético al cual hacía referencia en el punto anterior.

    Cargando imagen

    7)Ahora lo que debemos hacer es crear una imagen (Para tener mayor calidad recomiendo utilizar Photoshop )
    La primera que vamos a modificar es la que dice "Tu server" (Image 13) podemos poner nuestro nombre del server (Recuerden que las dimensiones deben ser exactas en este caso 200x30 y con el fondo transparente [.png]).

    Seleccionando nueva imagen

    8)Ahora cambiamos la imagen que dice Prueba.
    Recuerden que también deben tener en cuenta las dimensiones exactas en este caso 159x24 (Sino queremos poner nada ahi o en la otra simplemente creamos una imagen en blanco sin texto y transparente [.png])

    Verificando las dimensiones

    9)Editamos nuestra ultima imagen, si quieren pueden dejarla así siempre y cuando su server sea Season 4.
    En ese caso lo que debemos hacer es cambiar la imagen por una que nosotros querramos, recuerden que la dimensión de la original es de 580x150 con fondo transparente [.png]
    10)Para ir finalizando debemos ir
    Edit => Dynamic text
    y cambiar en la línea donde dice
    inde2.php
    por
    index1.php
    También pueden cambiar ahi mismo el color de la letra del boton "Entrar" cambiando hexadecimalmente esta linea
    color="#bababa"
    por otro color por ejemplo si quieren su texto en blaco ponen
    color="#ffffff"
    si lo quieren en negro ponen
    color="#000000"
    Para saber que color corresponde al que ustedes quieren Ver tabla aqui

    Modificando la url

    11)Una vez finalizado vamos a "Save as ...", seleccionamos nuestro escritorio y verificamos que el nombre del archivo sea introfinal.
    Finalmente ponemos guardar.

    Guardando los cambios

    12)Ahora lo que deben hacer es entrar a
    C:\AppServ\www [Si utilizan AppServ]
    C:\Xammp\htdocs [Si utilizan Xampp]
    Y deberán buscar el archivo de su web llamado index.php y renombrarlo por index1.php (Para más información sobre este tema Ver Aqui)

    Luego en esa misma carpeta deben pegar dos archivos el primero introfinal.swf (Importante no cambiar el nombre, este es el archivo en flash que creamos recientemente y debería de estar en nuestro escritorio)
    También deben pegar el archivo index.php
    Ese archivo junto con introfinal.swf deben ir juntos dentro de la misma carpeta.

    El archivo que hemos descargado anteriomente, es decir, el llamado ByAsd.rar contiene el index.php con la configuración para la intro en Flash, lo que pueden editar ahí es el título, el color de fondo (BODY BGCOLOR="#000000") el alto (height="600") y ancho (width="800") de la web.
    Tanto el ancho como el alto se debe modificar dos veces en ese mismo archivo.

    Bueno eso es todo, algunos se preguntará para que descargamos Macromedia Flash 8.0 Profesional, eso será en el proximo tutorial donde aprenderemos a usar esa fantástica herramienta [Sobre todo, porque podremos modificar este archivo de forma directa].
  • Guia intro WEB-MU I

    Bueno después de varias consultas por E-mail y considerando aspectos estéticos de nuestro server, voy a dar inicio a una nueva seccion en la web: "Crear intros para nuestra página web ",



    Algunos se preguntaran ¿Y eso que es? .
    Bien las intros son páginas iniciales apartir de ahora la voy a llamar index.php
    Las intros se clasifican de acuerdo a su uso o formato, es decir, podemos encontrar 3 tipos de intros la primera puede ser un video en flash, la segunda un index con una foto/imagen y la tercera puede ser un trailer o una película.
    Creo que la forma de explicar esto es haciendo un gráfico y lo puede ver a continuacion:

    Esquema ejemplificador del funcionamiento de una intro

    ¿Que significa eso?... Bien PC a, b, c, y d son gente que visita nuestra web, al entrar a nuestra web el primer archivo que van a ver va a ser el index.php (Es decir la intro) y nosotros desde la intro podemos derivarlos hacia un foro, la web principal, shop o ventas o a donde ustedes quieran.

    Bueno vamos a comenzar yo voy a uitilizar una intro en html con una foto (Las intros pueden traer dentro un archivo llamado .psd, ese archivo nos permite modificar el contenido de la imagen.
    La extensión .psd sólo se puede editar con el photoshop (O herramienta similar), y los archivos que viene en .fla son para editar en flash.

    1)Bueno comenzemos yo voy a utilizar la "Intro 1" que la pueden descargar en esta web, lo primero que hacemos es decomprimimos el archivo intro1.rar en una carpeta cualquiera y veremos en este caso una carpeta y un archivo con extensión .html

    Archivos correspondiente a la intro

    2)Si abrimos el archivo index.html podemos ver como sera nuestra intro, despues de mirarla lo que vamos hacer sera editar nuestro links, entonces hacemos clic derecho sobre el index.html => abrir con => bloc de notas ( sino tiene el block de notas a mano ponen elegir programa y buscar el block de notas, o el word o cualquier programa de texto)

    Abriendo el archivo index con el bloc de notas

    3)Bueno lo que debemos editar son 4 lineas la primera linea es la que se encuentra entre las etiquetas -title- Untitled-1 -title- (esto seria el titulo de la intro que se puede visualizar arriba en la ventana del explorador, después veran yo voy a poner -title MU ASD* -title )

    La segunda linea que deben modificar es la siguiente "http://website/" ( la etiqueta href sirve para hacer links es decir al hacer clic ahi nos derivara a otro sitio) en este caso debemos poner asi "http://127.0.0.1/index1.php" (donde 127.0.0.1 debe ser el dominio de su web ya sea .no-ip, .com o su ip numerico publico)
    La tercera linea que debemos modificar es "http://forum/", en esta linea debemos poner el link de nuestro foro como yo no tengo foro voy a poner el link de mi web "https://guiaservermu.blogspot.com/">

    Y por último debemos modificar la siguiente linea "http://vote/" donde ahi deberiamos poner nuestro link para que voten nuestra web, obviamente sino tienen anotada su web en alguna pagina no pongamos nada o pongan esto ="http://127.0.0.1/index1.php" (donde 127.0.0.1 debe ser el dominio de su web ya sea .no-ip, .com o su ip numérico público) asi si alguien quiere entrar ahi entraría a su web al igual que la modificación número 2 que hicimos.

    Modificando enlaces

    Bueno guardamos los cambios y nos vamos a la carpeta de nuestro server generalmente C:\AppServ\www buscamos el archivo llamado index.php y le cambiamos el nombre por el de index1.php

    Renombrando archivo index a index1

    4)Ahora lo que hacemos es pegar los dos archivos de la intro 1 (index.html y la carpeta imagenes ) en donde tenemos los archivos de nuestra web es decir en C:\AppServ\www
    Aclaración importante: sucede que a veces las webs tienen tambien una carpeta llamada imagenes pero no se les ocurra reemplazar estas carpetas ya que perderíamos la web original del server, lo que podemos hacer aprovechando que las carpetas tienen el mismo nombre es copiar el contenido de la carpeta imagenes de la intro 1 dentro de la carpeta imagenes de nuestra web y por lógica el index.php nunca nos debería preguntar si deseamos reemplazarlo ya que antes debemos cambiar por index1.php

    Finalmente terminamos, vamos a nuestro navegador ponemos nuestra web (Ya sea 127.0.0.1, locahost, nuestra no-ip o simplemente la ip numérica pública) y vamos a ver nuestra presentacion.
    Bueno ya en la siguiente imagen marque algunas cosas para finalizar con la explicación de cosas que deje pendientes anteriormente:

    Visualizando trabajo final

    Bueno lo primero que resalte fue el título, si recuerdan yo le había puesto "Mu asd*" y ese es del titulo que yo hablaba que aparece arriba de la ventana de su navegador.

    En segundo lugar los links: yo marque el link forum, si recuerdan bien yo dije que iba a poner mi página web porque no tenía un foro y abajo sale detalladamente el link al cual me redirije la web al hacer clic en forum, obviamente siguiendo este criterio si hago un clic en Webs me dirije a mi pagina web del server lo mismo con Vote porque recuerden que puse el mismo link tanto en Webs como en Vote.

    SQL Server 2000 vacio

    Un error frecuente que podemos tener luego de instalar el Sql Server 2000, es ingresar al "Administrador Corporativo" y encontramos con que no hay ningun elemento, no es para preocuparse, lo que debemos hacer es agregar nuestro registro de servidor SQL Server de forma manual.



    1)Para esto vamos a
    Inicio => Programas => Microsoft SQL Server => Administardor Corporativo
    Ingresando al administrador corporativo

    2)Hacemos un clic derecho sobre "Grupo de SQL Server" y seleccionamos la opción "Nuevo Registro de Sql server ..."

    Agregando nuevo registro

    3)Automáticamente se ejecutará el "Asistente para registro de SQL Server", entonces hacemos un clic en siguiente.

    Interfaz del asistente

    4)En la nueva ventana nos pide que ingresemos un Servidor, es decir nuestro servidor, en caso de tener alguno disponible hacemos clic en "Agregar", sino tenemos ningun servidor asociado lo que debemos hacer es saber el nombre de nuestro servidor.

    Para saber el nombre, podemos abrir el "Administrador de servicios" del SQL server ( hacemos dos clic sobre el icono en forma de pc que se encuentra en donde esta la hora de su sistema o bien vamos a Inicio => Programas => Microsoft SQL Server => Administador de servicios.
    El nombre que debemos agregar es el sale en el administardor de servicio (Ver imagen para comprender mejor).

    Agregando nuevo servidor

    En mi caso mi servidor se llama "Pc" eso es lo que debo copiar en el Asistente para Registro de Servidor SQL Server. (Importante: la copia debe ser exacta, puede que tu servidor se llame por ejemplo PC-4D223 debemos copiarlo tal cual lo vemos)
    En caso que tengan alguna dificultad con el nombre del servidor pueden poner esta ip como nombre : 127.0.0.1

    Servidor agregado

    5)En la siguiente pantalla dejamos tildado la opción que viene marcada por defecto y hacemos un clic en siguiente.

    Conectando al servidor

    6)Dejamos tildada la opción: "Agregar los servidores SQL server a un grupo de servidores SQL existente"

    Agregando servidor al grupo

    7)Y por último finalizar.

    Completando registro

    8)Esperamos unos segundos y si todo está bien veremos una ventana como la siguiente:

    Registro finalizado

    9)Y listo ya tenemos nuestro registro listo para comenzarlo a usar.

    Registro agregado correctamente