martes, 28 de junio de 2011

Condición If

Cuando queremos que el programa, llegado a un cierto punto, tome un camino concreto en determinados casos y otro diferente si las condiciones de ejecución difieren, nos servimos del conjunto de instrucciones if, else y elseif. La estructura de base de este tipo de instrucciones es la siguiente:

 

if (condición)
{
   Instrucción 1;
   Instrucción 2;
   ...
}
else
{
   Instrucción A;
   Instrucción B;
   ...
}

 

PRÁCTICA:

PRACTICA

Video para apreciar cómo se utiliza la condicion IF en PHP

Si tienen dudas, consulten conmigo por favor.

viernes, 24 de junio de 2011

Boton Imprimir en HTML

Para poder imprimir, se necesita una instruccion Javascript, utilizando el método print del objeto window.

window.print()



Si lo deseas vincular a la pulsación de un botón quedería así:

<input name="imprimir" onclick="window.print();" type="button" value="Imprimir" />

viernes, 10 de junio de 2011

Efecto Giro 3D de Carta en Flash

Hoy veremos cómo crear un efecto de un giro animado en 3D utilizando Adobe Flash. Esta practica puede ser realizada con cualquier versión de Flash, ya sea de las más antiguas como Flash mx y Flash 8 ó la más reciente, Flash CS5. Aplicaremos un efecto de animación creando la ilusión de tres dimensiones jugando con las perspectivas de un rectángulo.




Descarga el archivo Flash aquí.

lunes, 6 de junio de 2011

Crear efecto lupa

El archivo que generaremos hoy, 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.


1.- 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.

2.- 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.

3.- 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.

4.- La Capa 1 donde está el relleno, la convierto en Máscara.

5.- 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.

6.- 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 ejemplo.

Descargar ejemplo

jueves, 2 de junio de 2011

Banner con efecto de nieve.

Debemos abrir un nuevo documento de Flash y cambiar el color blanco del fondo del escenario por uno oscuro que permita distinguir el efecto de nieve que se pretende realizar.

Crear un MovieClip, seleccionando en el menú: Insertar > Nuevo símbolo y nombrarlo SnowFlake

Dentro de dicho MovieClip dibujar un círculo blanco sin bordes, con la herramienta Óvalo, de apróximadamente 4 x 4 píxeles.

Seleccionar en la biblioteca el MovieClip creado(SnowFlake) con el botón derecho del mouse. En el menú hacer click a la opción Linkage y seleccionar la opción Exportar para ActionScript . Este MovieClip será el copo de nieve que posteriormente se programará.

Crear otro MovieClip cuyo nombre será Control, de igual forma que el anterior, y dejarlo en blanco. Arrastrarlo al escenario y ponerle por nombre de instancia control_mc .

Crear un tercer MovieClip cuyo nombre será Ice, donde dibujará un rectángulo sin bordes y de color blanco con alpha 14% (también se exporta para ActionScript), este MovieClip es para realizar el efecto de que la nieve se acumula.

También se creó otro MovieClip llamado poster que contiene el dibujo de un cartel, cuyo nombre de instancia es rect_mc y en el borde superior de dicho cartel se colocó el MovieClip Ice, al que se le asignó el nombre de instancia Ice_mc.

Posteriormente, se procede a programar el evento onEnterFrame para que cada vez que entre se ejecute la función que crea los copos de nieve llamada, en este caso, createSnow .

cod1

Posteriormente se programa la función createSnow:

cod2

Ahora se programa la función moveSnow.

cod3

Por último, randRange es una función auxiliar que devuelve un número aleatorio entre dos extremos, ambos inclusive.

cod4

Y como resultado tenemos

miércoles, 1 de junio de 2011

Efecto Niebla

Crear este convincente efecto niebla es más que simple, y apenas tiene código. Para empezar, vamos a necesitar dos imágenes de efecto nube en blanco y negro. Estas imágenes se crean fácilmente, por ejemplo en Photoshop, sería: Filtro>Interpretar>Nubes de diferencia, y listo, pero para que sea más rápido, pueden descargar estas:

Descargar imágenes

Abrimos una nueva película de flash y vamos a crear 3 capas, siendo una de ellas una mascara y las otras dos estando sometidas a la capa. Una cosa así:

Tutorial

Para convertir una capa en mascara, solo hay que hacer click derecho sobre ella y darle a mascara.

Bien, ahora nos vamos al menú archivo y le damos a importar a biblioteca, e importamos las 2 imágenes. Antes de nada, vamos a poner el fondo de nuestra película de color negro:

Tutorial

Seleccionamos la capa "Nubes 1" y apretamos F11, se nos abrirá la biblioteca; agarramos la imagen nubes1 y la pasamos a nuestra película (arrastrar y soltar). Seleccionamos la imagen y apretamos F8 para convertir en clip de película, le damos un nombre en la ventana que se nos abrirá y elegimos la opción clip de película. Una vez convertido, vamos a darle un nivel de transparencia, para ello, seleccionamos el clip y abajo, en las propiedades, en color seleccionamos la opción "alfa" y le damos un valor de "68%":

Tutorial

Y para terminar con esta capa, vamos a darle el código para que rote, click derecho del ratón sobre el clip y nos vamos a acciones, e introducimos este código:

codigo1 

Con esto hemos terminado con esta capa, ahora hay que hacer exactamente lo mismo en la capa Nubes 2, añadiendo de la biblioteca la imagen nubes2, convirtiendola en clip, igual que antes, con las únicas diferencias de que el valor de alfa que le daremos en las propiedades será de "23%" y el código que meteremos hará que gire, pero en sentido opuesto, esto es:

codigo2 

Ya por último, nos queda crear la máscara, realmente no haría falta, funcionaría exactamente igual sin máscara, pero con la máscara, si se maximiza el flash player no se verán los trozos sobrantes de las imágenes. Seleccionamos la capa Mascara, y dibujamos un rectángulo que sobresalga un poco de los límites que le hayamos dado a la película:

Tutorial

Los dos clips de nubes tienen que quedar uno exactamente sobre otro, pero no centrados sobre los límites de nuestra película, ya que las imágenes girarán sobre su centro, de modo que quedando algo ladeadas las imágenes, el resultado es más convincente, algo así:

Tutorial

NOTA:

Si las imágenes, en puesto de ser en blanco y negro, son en blanco y azul, un azul claro, tipo turquesa, y el fondo de la película lo ponemos del mismo color, (turquesa), el efecto final, en vez de niebla será agua, como un lago, con el agua moviéndose, tambien es muy interesante. Podría quedar algo así:

No tiene instalado el plugin de Flash necesario, haga click aquí para descargarlo gratuitamente.


Añadiéndole además un sonido de brisa marina y el canto de las gabiotas, quedaría muy bien.