Bases Para Crear Grandes Disenos

Efecto de sobreexposición de imágenes en Flash.

2007-11-15T11:46:00.000-08:00

Seguro que este efecto de sobreexponer imágenes lo habéis visto en infinidad de webs y siempre os habéis preguntado como se hace. La verdad es que este efecto asombra por su sencillez, no se necesita ni una línea de código.
COMO HACERLO.Para hacerlo, simplemente creamos una interpolación de movimiento con nuestra imagen. En el primer fotograma clave seleccionamos la instancia y en la barra de propiedades seleccionamos un ajuste de color "Avanzado", en el cuadro ponemos estos ajustes: rojo 100% Verde 100% azul 100% alfa 100% R + 255 V + 255 A255 Al 0
En el segundo fotograma clave hacemos lo mismo con estos datos: Rojo verde azul y alfa 100% R, A, V 1 y Al 0

Y nada más...evidentemente podemos invertir el orden de los fotogramas clave para cambiar el sentido de la animación.

Formulario de contacto en Flash

2007-11-12T07:47:00.001-08:00

Abrimos una nueva película de Flash. Para empezar, vamos a crear dos capas, una que se llamará "Formulario" y otra "Fondo", En la capa de "Formulario" creamos un nuevo fotograma clave vacio y otro más donde pondremos el formulario. El primero lo dejamos vacio de momento, ya veremos más adelante para qué lo usaremos. En el segundo fotograma clavecreamos un nuevo campo de texto y le damos las siguientes propiedades:

Como veis, tenemos que poner un campo de texto de tipo "introducción de texto", que sea línea única, con el formato de texto que deseemos (tipografía, color, tamaño, alineado, etc...), y muy importante, darle un nombre de variable, en este caso, este campo será para introducir el nombre, y a la variable le hemos dado el nombre "nom".Con esto ya tenemos el campo nombre NOTA:
En la capa "Fondo" pondremos el fondo de cada campo, así que los campos de texto deben ser transparentes, para ello, asegurate de que queda deseleccionado el botón a la izquierda de "Var" en las propiedades.
Añadimos tres campos de texto más, "E-mail", "Empresa", "Motivo del contacto", donde haremos exactamente lo mismo, solo que dandole a las variables los siguientes nombres:
Campo E-mail: Variable "email"
Campo Empresa: Variable "empresa"
Campo Motivo del contacto: Variable "contacto"
Siempre sin comillas. Ahora vamos a crear el campo de texto para el mensaje, este tiene las propiedades algo distintas:

Las diferencias son dos basicamente, le hemos dado el nombre de instancia "eltexto", y ya no es línea única sino multilinea, aparte de que la variable en este campo se llamará "mensaje".Lo de "eltexto" es para hacer el scroll de este campo. Con el scroll ya creado, Añadimos dos botones, uno el de enviar y otro el de borrar y un nuevo campo de texto donde se mostrará el estado de envío del mensaje, es decir, dirá si el mensaje se ha enviado correctamente o no. Este último campo de texto tendrá estas propiedades:

Antes de introducir el código ActionScript necesario, vamos a terminar la presentación del formulario, para ello, en la capa "Fondo", en el segundo fotograma, dibujamos el fondo que deseemos y que coincida en tamaño, forma y posición con los campos de texto.Ok, con esto hemos terminado la presentación, ahora vamos con el código que hará que todo esto funcione.
Seleccionamos el botón de enviar, y metemos el siguiente código:on (release) {
if ((nom=='') or (email=='') or (contacto=='') or (mensaje=='')) {
respuesta = "Hay campos obligatorios sin rellenar. Por favor,
revise el formulario.";
} else {
loadVariablesNum ("php2excel_csv.php", 0, "POST");
respuesta = "El formulario ha sido enviado con éxito.
Nos pondremos en contacto con Ud. lo antes
posible. Reciba un saludo.";
}
}
Aquí lo que estamos haciendo es comprobar que los campos obligatorios no estén vacios, si alguno de ellos lo esta, en el campo de texto estado aparecerá el mensaje de error arriba indicado, si no, el correo se enviará y aparecerá el mensaje de envio exitoso.
En el botón borrar ponemos:on (release) {
nom = "";
email = "";
empresa = "";
contacto = "";
mensaje = "";
respuesta = "";
}
Con lo que al apretar el botón borrar todos los campos de texto se borrarán :P
Ahora retomamos algo que dejé pendiente al comienzo; en el primer fotograma de la capa "Formulario", donde creamos un fotograma clave vacio, pondremos el siguiente código:nom=''
email=''
contacto=''
mensaje=''
Esto es para que los campos obligatorios estén vacios cuando se cargue la pelicula de flash. ¿Por qué?, Las variables que se crean se alojarán en un espacio que le asigne el sistema operativo en la memoria ram, si no los inicializamos a "vacio", podrían tener 'basura' con lo que la comprobación de estos campos podría fallar. Y para terminar, en el segundo fotograma de la capa "Formulario" añadimos la orden:stop();
Con esto hemos terminado de crear el formulario en Flash, pero aun no funciona, nos queda la parte de php.´

Necesitamos tres archivos, uno se llamará php2excel_csv.php, libmail.php y formulario.csv.

Los archivos libmail.php y formulario.csv no hay que tocarlos, donde hay que hacer los cambios para adaptarlo a nuestro formulario es en el otro archivo, ya en el propio archivo he puesto los comentarios, así que abrir php2excel_csv.php y allí lo explico.
El archivo formulario.csv es un archivo de texto que se nos enviará conjuntamente con el email como archivo adjunto, de modo que el email lo recibiremos como siempre, con el texto escrito en el cuerpo del email, y además el mismo email en un fichero adjunto por si queremos guardarlo en el disco duro. Los archivos *.csv son de Microsoft Excel, sin embargo, si lo abrimos con dicho pograma, los caracteres raros como acentos y eñes no se leen bien, así que mejor abrirlos con el block de notas.
Para terminar, un par de cosas a tener en cuenta para no tener problemas:
Estos tres archivos han de estar en la misma carpeta en la que esté el formulario en Flash.
El archivo formulario.csv se escribirá cada vez que alguien envíe un correo, con lo que en nuestro servidor, con la opción correspondiente del programa ftp que usemos, tenemos que cambiar los permisos (buscar en el programa la opción 'chmod' o permisos) sobre este archivo a 777.
Y bueno, aunque es evidente, por si a alguien se le pasó, es imprescindible que nuestro servidor interprete el lenguaje php.

puedes descargar los archivos de aqui:

http://www.scourdesign.com/articulos/tutoriales/flash/descargas/php.zip

Puedes ver el atchivo de ejemplo de aqui:

http://www.scourdesign.com/articulos/tutoriales/flash/descargas/formulario.zip

La informacion a sido obtenida de http://www.scourdesign.com/ Autor: Carlos Carmona

Lupa en Flash

2007-11-09T04:44:00.000-08:00

Este es un efecto que es bastante pedido y sirve para hacer lucir varios diseños. Aqui se los dejo todo detallado.

El archivo fla consta de una capa donde coloco la imagen de tamaño normal, que es la que se ve en el escenario. El punto de registro lo he puesto en la esquina superior izquierda.
Otra capa (encima) con un movie clip, creado de la siguiente manera.
Creo un círculo y le quito el contorno, queda sólo el relleno. Lo convierto a movieclip y le doy un nombre de instancia. Yo le puse casagrande_mc.
Edito el MC. El relleno está en la capa 1. Agrego otra capa (Capa 2) y en ella coloco la misma imagen de la escena principal y le aumento su escala X y Y en 200%. Debe estar en el centro del MC. Convierto también esta imagen en Mc y le doy un nombre de instancia. Yo le puse lacasota_mc.
En la línea de tiempo cambio el orden de las capas, colocando la Capa 1 encima de la Capa2. Ahora puedes ver el relleno del círculo en la Capa 1.
La Capa 1 donde está el relleno, la convierto en Máscara.
Agrego una tercera capa encima de la máscara. La Capa 3 debe estar encima de las otras dos.
Dibujo el aspecto que tendrá la mira. En mi caso, solo dibuje dos líneas dentro del círculo que lo dividen en cuatro sectores y le hice unos lados redondeados. En esta capa (y si quieres en otras más arriba) dibujas la forma que quieres para tu mira o lupa. Puedes hacer otro MC, etc.
Ahora escribimos las acciones.
Selecciona el MC que creaste en el punto 2 (lacasota_mc) y abre el panel de acciones, ahí escribes lo siguiente:
onClipEvent (enterFrame) {
/*casagrande_mc es el nombre de instancia del clip que creaste en el punto 1.*/
xmove = _root.casagrande_mc._x;
ymove = _root.casagrande_mc._y;
_x = (250 - xmove) * 2;
_y = (225 - ymove) * 2;
}
Otra forma es escribiendo el código en una capa del nivel principal y hacer referencia de puntos en vez de colocar simplemente _x y _y. Este código podrías escribirlo debajo y después de la llave de cierre del código del Punto 7.
Quedaría así:
_root.onEnterFrame = function () {
xmove = _root.casagrande_mc._x;
ymove = _root.casagrande_mc._y;
/*para indicarle a lacasota_mc que cambie su
posición X Y según se mueva el ratón en la escena
principal */
this.casagrande_mc.lacasota_mc._x = (250 - xmove) * 2;
this.casagrande_mc.lacasota_mc._y = (225 - ymove) * 2;
}
El valor 250 y 225 depende del tamaño del gráfico de tamaño normal que utilices.
Según el dibujo que tengas, va a ser más o menos la mitad del ancho de tu imagen. En mi ejemplo la casa
de tamaño normal mide 499.9 (500) de ancho por 302.7 (300) de alto. Lo que hay que tomar en cuenta, es que que el valor, permita que la imagen grande a través de la lupa, se vea cerca de la imagen
normal.
Regresa a la escena principal (primer nivel)
Si quieres agrega otra capa para escribir el siguiente código
_root.onLoad = function () {
casagrande_mc.startDrag(true);
// repito que casagrande_mc es el MC creado en Punto 1
Mouse.hide();
}
Eso es todo. Este es un efecto bastante sencillo pero te dará las pautas para crear diseños donde necesites un efecto lupa, que según tu conveniencia pueden ser más sofisticados y llamativos que este simple ejemplito.
Recalco que existen formas más optimizadas y mejores de crear esto.

Suerte!!!!

ESPECIFICANDO LA PREVISUALIZACIÓN DE LOS NAVEGADORES EN DREAMWEAVER

2007-11-07T07:20:00.000-08:00

ESPECIFICANDO LA PREVISUALIZACIÓN DE LOS NAVEGADORES

Durante el proceso de diseño y creación del sitio Web es conveniente obtener una vista previa en navegadores, para detectar los errores y evitar copiarlos o repetirlos. Puede obtener la vista previa en cualquier momento y no es necesario guardar previamente el documento. Podrá activar todas las funciones relacionadas con el navegador, como los comportamientos JavaScript, los vínculos absolutos y relativos al documento, los controles ActiveX y los plug-ins de Netscape Navigator, siempre que haya instalado los plug-ins o los controles ActiveX necesarios en los navegadores:

Puede definir hasta 20 navegadores para realizar vistas previas, los cuales aparecerán en el menú Vista previa en el navegador. Es recomendable obtener una vista previa en los siguientes navegadores: Internet Explorer 4.0, Netscape Navigator 4.0.

Para obtener la vista previa del documento en un navegador, elija Archivo > Vista previa en el navegador y seleccione uno de los navegadores que aparecen en la lista. Si aún no ha seleccionado un navegador, elija Edición > Preferencias y, a continuación, seleccione la categoría Vista en Navegador a la izquierda para seleccionar un navegador.

Presione F12 para mostrar el documento actual en el navegador principal.
Presione Control+F12 para mostrar el documento actual en el navegador secundario.
Para comprobar vínculos en un navegador:

Elija Archivo > Vista previa en el navegador o presione F12.
Haga clic en los vínculos activos para comprobar su correcto funcionamiento
Para definir o cambiar las preferencias de los navegadores principal y secundario, realice una de estas operaciones para abrir las opciones de Vista previa en el navegador:

Elija Edición > Preferencias, a continuación, seleccione Vista en Navegador en la lista de categorías de la izquierda.
Elija Archivo > Vista previa en el navegador > Editar lista de navegadores. Aparecerá el cuadro de diálogo Preferencias con las opciones de Vista previa en el navegador.
CONFIGURACION DE LAS OPCIONES DE VISTA PREVIA EN EL NAVEGADOR

La finalidad de este cuadro de diálogo es establecer las preferencias del usuario para la categoría Vista previa en el navegador. Este cuadro de diálogo muestra los navegadores principal y secundario definidos y su configuración.

Para añadir un navegador a la lista, haga clic en el botón de signo más (+), seleccione las opciones deseadas en el cuadro de diálogo Añadir navegador y, a continuación, haga clic en Aceptar. El nombre del nuevo navegador aparecerá en la lista.
Para eliminar un navegador de la lista, selecciónelo y haga clic en el botón de signo menos (–). El nombre del navegador desaparecerá de la lista.

Para cambiar la configuración de un navegador seleccionado, haga clic en el botón Editar, realice los cambios en el cuadro de diálogo Editar navegador y, a continuación, haga clic en Aceptar. Seleccione la opción Navegador principal o Navegador secundario para especificar si el navegador seleccionado es el principal o el secundario.
Presione F12 para abrir el navegador principal o Control+F12 para abrir el secundario. Seleccione la opción Vista previa utilizando el archivo temporal para crear una copia temporal para vista previa y depuración del servidor. Desactive esta opción si desea actualizar el documento directamente.