Soportalo

Ok , esto es  bastante simple, no hay por que complicarnos, muchas veces necesitamos que un clip  nos sirva para enmascarar a otro , pero esto debe ser en tiempo de ejecucion , por lo tanto no podemos hacerlo en layers, o en capas, si no que debemos establecerlo al momento, bueno pues para esto esta la funcion setMask(), la cual es una de las propidades de los clips de pelicula, por lo tanto necesitaremos dos clips creados   a los que deberemos asignarle nombre de instancia,  par aempezar yo cree un letrero que converti en clip (f8) y le di nombre de instancia letrero, despues cree un circulo y  lo converti en clip de pelicula (f8)  para despues darle nombre de instancia Msk, ya que es el que utilizare para enmascarar el letrero, una vez terminado esto, seleccione el primer fotograma de la pelicula principal y  en su ventana de codigo (f9) ahi fue donde coloque este codigo

Código :

Letrero.setMask(Msk);

una vez hecho al publicarlo, se puede ver como lo enmascara, claro que el circulo debe esstar encima del letrero,  para apreciarlo,  las consideraciones a tomar son,

• El clip de pelicual que utilicemos como mascara debe tener Relleno ya que es lo que toma como  base para enmascarar

• Los dos deben ser clips para que funcione

• Revisar que este encima  el circulo para poder apreciarlo

Ahroa que si queremos hacerlo mas vistoso podemos hacer la mascara movil, solo agregandole   el codigo de este tema para poder moverlo al presionarlo con el Mouse

Una de las acciones que muchas veces es requerida es Arrastrar un clip  de Pelicula al presionar con el puntero del mouse sobre el,  esto  puede hacerce con las propiedades startDrag() y StopDrag(), sin embargo ,  varias veces es necesario  determinarlos de manera particular por algun conflicto con otros clips, o dentro del mismo nivel, es por eso que  este es un pequeño codigo que permite arrastrar y  soltar un clip a placer y de manera mas estetica.

Primero Crearemos un a pelicula, dentro de la cual pondremos lo que deseemos, recordar que para convertir a pelicula es necesario selccionar el objeto(s) y presionar (f8) para convertir en clip de pelicula. una ves hecho esto  lo seleccionamos y  presionamos (f9) para abrir la ventana de codigo, z ahi escribiremos esto

Código :

onClipEvent(mouseDown){
   if (this.hitTest(_root._xmouse, _root._ymouse))
   {
      this.startDrag();
   }
}

onClipEvent(mouseUp){   

   this.stopDrag();

}

Ahoa analicemos el codigo

onClipEvent()

es uan funcion que detecta cualquier evento del Clip De pelicula , en este caso mouseDown para cuando el mouse se presiona y mouseUp para cuando el boton del mouse es liberado, sin embargo esto no nos asegura que sea presionado encima del clip por lo que tendremos que recurrir a otra Funcion que detecta si un clip esta en contacto con otro , en caso de estarlo, manda el valor de True ,

Esta util funcion es hitTest la cual es propiedad de los clips de pelicula, a la cual le pasaremos como parametro otro clip de pelicula, o en este caso , las coordenadas de el Mouse, en la Funcion ya predeterrminada de la pelicula principla. que nos manda en _root._xmouse y _root._ymouse las coordenadas de el mouse ,

por lo tanto al presionarse y estar en contacto , empieza a arrastrar al clip, cuando se libera sencillamente lo libera

Cuando deseamos crear una pagina en flahs que se adapte a toda la pantalla como www.fento.com.mx

Nos topamos con una Interrogante , como hacer para que la resolucion del monitor y  las barras del navefgador (internet Explorer, o Firefox) no nos limiten y no tengamos que hacer una pagina por cada tipo d emonitor, esto es relativamente sencillo,  esto tendra que ver con los parametros que   estan dentro de la pagina HTML donde esta incrustado nuestra pelicula, de la cual solo deberemos modificar ciertos parametros para poder hacer que ocupe toda la pantalla.

Por lo tanto necesitaremos modificar ciertas lineas e insertar otras, el primer paso es hacer que la pagina no tenga bordes, esto se puede hacer con html dentro del body

dentor de la etiqueta pondriamos asi

Código :

body topmargin="0" leftmargin="0"

sin embargo esto ya es un metodo antiguo, asi que utilizaremos CSS , para poder ampliarlo y quitar los margenes

asi que teclearemos esto antes de la etiqueta </head>

<style type=”text/css”>

html body {
height:100%;

padding:0;

margin:0;

}

y por ultimo modificaremos los parametros del objeto flash insertado dentro de la pagina

Dentro de las etiquetas <objet> encontraras estos parametros repetidos dos veces width y height, a estos le deberas cambar los aprametros que tiene asignados, los cuales son el tamaño de la pelicula, por el porcentaje del 100% para que se ajuste a toda la pantalla. quedando asi las dos veces que se repite

Código :

width="100%"  height="100%"

con esto tu pelicula quedara a todo lo ancho y largo , sin embargo si quieres que se respeten el tamaño de los elementos de tu pelicula sin importar que amplies el tamaño de la pelicula , entonces necesitaras leer el tutorial de diagramacion liquida que sacare despues

Si te sirvio este post y quieres divertirte un poco ahora da click aqui y Visita Soportalo.com Post nuevos todos los dias

Simepre es necesario que  nuestras peliculas realizadas en flash interactuen con datos externos, para que una vez creadas puedan ser  dinamicas y mostrar datos que puedan variar y ser modificados de manera externa ala pelicula en flash, es por esto que   contamos con  los archivos XML una excelente ayuda para todos los que creamos paginas web y deseamos interactuar con el usuario.

Por lo tanto debemos Conocer bien la estructura y correcta creacion de los archivos  XML  el cual debera tener varias partes, de manera estricta asi que empecemos

• Los documentos han de seguir una estructura estrictamente jerárquica con lo que respecta a las etiquetas que delimitan sus elementos. Una etiqueta debe estar correctamente incluida en otra, es decir, las etiquetas deben estar correctamente anidadas. Los elementos con contenido deben estar correctamente cerrados.

Esto quiere decir que si Abrimos una etiqueta debemos cerrarla, por ejemplo al abrir la etiqueta   <Fotos> debera tener  una terminacion para definir  ese bloque </Fotos> y dentro de esta tener un elementoqu eeste  tambein abierto y cerrado  como por ejemplo <foto id=”foto01″ /> en la cual el nodo foto tiene dentro  su identificador, y por lo tanto quedaria asi

<Fotos>

<foto id=”foto01″ />

</Fotos>

• Los documentos XML sólo permiten un elemento raíz del que todos los demás sean parte, es decir, solo pueden tener un elemento inicial.

Esto  se traduceen puede haber muchos subnodos pero solo uno en el principal, tomando el ejemplo anterior solo puede haber un Fotos pero  muchos foto

• Los valores atributos en XML siempre deben estar encerrados entre comillas simples o dobles.

en este caso es para los valores del identificador , por ejemplo  en el caso anterior se le asigna foto01 a el atributo id  este valor debe estar encerrado entre comillas( “valor” ó ‘valor’) sea simple o dobles

• El XML es sensible a mayúsculas y minúsculas. Existe un conjunto de caracteres llamados espacios en blanco (espacios, tabuladores, retornos de carro, saltos de línea) que los procesadores XML tratan de forma diferente en el marcado XML.

Por lo tanto no es lo mismo FOTO que foto, y cuidado con los espacios en blanco tabuladores, etc ya que dependiendo de el programa que  jale al Archivo XML sera como lo interprete

• Es necesario asignar nombres a las estructuras, tipos de elementos, entidades, elementos particulares, etc. En XML los nombres tienen alguna característica en común.

En General  defina los tipos y las estructuras para saber que datos  van a manejar

• Las construcciones como etiquetas, referencias de entidad y declaraciones se denominan marcas; son partes del documento que el procesador XML espera entender. El resto del documento entre marcas son los datos “entendibles” por las personas.

Lo unico que veras  para  los demas o los datos almacenados son los datos entre comillas, esto sentara las bases para pdoer generar muchos  sistemas simples con XML  y que funcionen adecuadamente.

En varias páginas he utilizado el efecto de dibujar una foto y luego aparecerla o hacerla visible. Este es un efecto bastante simple y muy vistoso.

Lo primero que haremos es importar una imagen ( Ctrl + r ), luego la seleccionamos y la convertimos en MovieClip ( f8 ). Esta es la imagen que utilizaré para aplicarle el efecto:

Generamos cuatro capas arriba de la capa de la imagen y bloqueamos ésta última.

Ahora haremos lo siguiente:
Trazaremos los contornos de la foto en cuatro modos, dos para horizontales y dos para verticales, yo recomiendo que se haga espaciando entre capas, me refiero a que dibujamos una línea horizontal en la dos, la siguiente en la tres, la siguiente en la dos y así. Hacemos lo mismo con las líneas verticales.

Una vez terminado debe quedarnos el trazo de la foto encima de ésta. Para comprobar si las líneas corresponden con exactitud a la imagen, podemos ocultar la capa para ver bien el trazado.

Un vez hecho esto generaremos una capa encima de cada una de las capas que contienen las líneas para crear las máscaras para el efecto.

Hasta este momento la línea de tiempo nos debe quedar de esta manera:

En el ejemplo nombraremos las capas así:
La que contiene la imagen: foto.
Las que contienen las líneas comenzarán con: Lin.
La H refiere a las lineas y máscaras horizontales y la V a las líneas y máscaras Verticales.
Msk refiere a que contiene la máscara correspondiente a esa capa.

Después crearemos un cuadrado en las capas de máscara y generaremos una interpolación, la cual llevará el cuadro de afuera hacia adentro, combinado las dos horizontales y las dos verticales al mismo tiempo para no sobrecargar el procesador.

Estas irán de la siguiente manera:

Como vemos, de afuera hacia adentro, quedando las interpolacioens así, y en vertical lo mismo, sólo que en sentido vertical.

Acá podemos ver la versión final:

Veamos algunos detalles:

Las capas tienen los fotogramas claves ubicados de acuerdo al orden de aparición: primero los horizontales y después los verticales, lo que se mueve es la máscara, las lineas quedan estáticas.
Las líneas abarcan un poco del efecto de aparición de la imagen para darle continuidad, sin embargo no abarcan al final ,y el efecto de la interpolacion de la foto debe hacerse desde un alfa 0% a alfa 100%, después siguen 4 fotogramas claves, cada uno de los cuales llevará un diferente efecto de brillo siendo el orden así:
el primer fotograma clave: brillo 80%
el segundo fotograma clave: brillo 0%
el tercer fotograma clave: brillo 80%
y por último el cuarto fotograma clave: brillo 0%

y en éste último fotograma puse en las acciones ( f9 ) un stop(); para que ahí se detenga y se aprecie la animación.

Es muy importante trabajar con cada capa individual, lo que yo recomiendo es bloquear todas y desbloquear solamente la que vamos a trabajar para que no movamos otros objetos que no corresponden.

El efecto final queda así:

Cuando creamos un clip dentro de Flash se manejan profundidades por lo tanto si el ultimo que creaste si lo pones encima de otro aparecera enfrente de el , para poder manejar quien aparecera en frente en tiempo de ejecucion Manejaremos las propiedades de profundidad

getNextHighestDepth()

y swapDepths

de las cuales la primera optiene la profundidad mas alta , y la segunda establece en que profundidad aparecera

por lo tanto si creamos dos clips y le damos nombre de instancia cl1 y cl2 para alternarlos deberemos de pones en codigo

Código :

cl2.swapDepths( cl2._parent.getNextHighestDepth() );

y para el clip 1

Código :

cl2.swapDepths( cl2._parent.getNextHighestDepth() );

lo que hacen estas funciones es obtener la profundidad mas alta y establecercela de el clip determinado

Para ocultar una pelicula dentro de flash , tendremos primero que asignarle un nobmbre de instancia al clip, en caso de tenerlo no tenemos mas que dentro del menu de acciones (f9) asignarle falso a la propiedad _visible

Código :

NombreDeInstancia._visible=false

y listo

yo puse esto dentro de un boton y le asigne que cuando se presionara el clip desapareciera

Código :

on (release){
	cl._visible=false;
	}

y lisot funciona para desaparecer , para descargar debemos utilizar unloadMovie

Para empezar crearemos un cuadrado

lo seleccionaremos y presionaremos F8 para que nos salga el menu de objetos

seleccionaremos boton, para hacerlo mas facil, se puede con clip pero en este caso haremos con boton para simplificarnos la vida

seleccionamos el objeto tipo boton y abrimos la ventana de Acciones con F9Donde colocaremos este codigo

Código :

on(rollOver){
   Mouse.hide()
   
   }

on(rollOut)
{
   Mouse.show()
   }

y listo podremos publicarlo con f12

ahora analicemos el codgio

en la primera parte

Código :

on(rollOver){

detecta cuando el mouse pasa por encima del boton lo cual hara que la condicion se cumpla y entonces ejecutar el codigo

Código :

Mouse.hide()

en esta parte estaremos invocando a el objeto Mouse ya predefinido en flash con la funcion hide, tambien predefinida, lo que hara sera esconder el puntero del mouse, sin embargo seguira mandando las coordenadas del puntero

en la siguiente parte se detectara cuando el mouse haya salido del area del boton

Código :

on(rollOut)

y por lo consiguiente ejecutar otra funcion del objeto Mouse para mostroarlo

Código :

Mouse.show()

y listo!!1 Hemos mostrado y ocultado el puntero del mouse en flash, parece muy sencillo pero es la base de muchos tutoriales que escribire

Cuando creamos un archivo de Flash para Internet (swf), es importante tener cuidado a la hora de diseñar cada elemento que manejemos o creemos. Cada cosa añadida a un SWF puede incrementar el tamaño del archivo final, generando más tiempo de carga y limitando las visitas para todo tipo de usuarios, como aquellos que se conectan vía telefónica (dialup).

Aquí te decimos algunas recomendaciones para bajar el peso de un SWF.

• Maneja una película principal y has la carga de secciones de manera externa. Esto reducirá los tiempos de espera innecesarios, como la carga total de la película. Además hará mas dinámica la pagina en caso de no querer ver todas las secciones.
• No uses sonidos dentro de ella, a menos que sea muy pero muy necesario. Si lo haces, primero invadirás las bocinas del usuario, que es bastante molesto. Segundo, el peso de tu película se incrementara. Si es necesario que pongas música de fondo, cargala de manera externa y crea una opción de parar dicha música. No pongas sonido en los botones, al final , el oído se acostumbra, no hace caso e irritarás al usuario.
• En lugar de imágenes bitmap utiliza diseño vectorial. Reducirás mucho el peso de la película y es posible hacer zoom sin deformar la figura. En caso de que sea imágenes, cargalas también de manera externa. Utiliza JPG o PNG , NO utilices BMP son demasiado pesadas.
• No sobrecargues de elementos tu pagina. Evalúa su funcionalidad y estética.

Estos son algunos pequeños consejos para poder reducir el tamaño de tus archivos y optimizarlos para la web

Si te sirvio este post y quieres divertirte un poco ahora da click aqui y Visita Soportalo.com Post nuevos todos los dias

Muchas veces nos es necesario hacer un efecto de zoom a ciertos clips o imágenes, por ejemplo cuando tenemos mapas, entornos que muestran opciones más pequeñas conforme se van acercando a ella, etc. Realizar este efecto es muy útil y ayuda a la usabilidad de nuestra aplicación.

En este caso en específico explicaré sólo el método de acercamiento por medio del click del mouse a un lugar en específico del clip.

Lo que necesitaremos será el clip a trabajar, dentro del cual podremos poner lo que queramos, imágenes, dibujos, etc. Luego le asignamos un nombre de instancia (en este caso mapa) y sólo resta copiar este código en el primer frame de la película principal.

Código :

incremento = 2;
function zoom(x,y,ancho,alto, aceleracion) {
mapa.onEnterFrame = function() {
this._x += (x-this._x)/aceleracion;
this._y += (y-this._y)/aceleracion;
this._width += (ancho-this._width)/aceleracion;
this._height+= (alto-this._height)/aceleracion;
if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 && Math.abs(ancho-this._width)<0.5 && Math.abs(alto-this._height)<0.5) {
this._x = x;
this._y = y;
this._width = ancho;
this._height = alto;
delete this.onEnterFrame;
}
};
};
onMouseDown =function(){
if (mapa.hitTest(_xmouse,_ymouse)){
Alto = incremento*mapa._height;
Ancho = incremento*mapa._width;
x = _xmouse-((_xmouse-mapa._x) * incremento);
y= _ymouse-((_ymouse-mapa._y) * incremento);
zoom(x,y,Ancho,Alto,3);
}
};

¡Y listo! Ya puede usarse, sólo prueba dando click encima del clip.

Ahora procederé a explicar el código.

Incremento es la variable que determina el tamaño del acercamiento, en este caso lo incrementa en un 200% puede ser modificable a nuestro antojo.

Esta porción de código es parte de este tip con la diferencia que incrementa dos variables más, ancho y alto, las cuales se encargarán de modificar el ancho y el alto del clip, haciendo la misma función que las variables de columna y fila y la misma comprobación, si se ha cumplido, para poder eliminar el enterframe.

Código :

function zoom(x,y,ancho,alto, aceleracion) {

mapa.onEnterFrame = function() {

this._x += (x-this._x)/aceleracion;

this._y += (y-this._y)/aceleracion;

this._width += (ancho-this._width)/aceleracion;

this._height+= (alto-this._height)/aceleracion;

if (Math.abs(x-this._x)<0.5 && Math.abs(y-this._y)<0.5 && Math.abs(ancho-this._width)<0.5 && Math.abs(alto-this._height)<0.5) {

this._x = x;

this._y = y;

this._width = ancho;

this._height = alto;

delete this.onEnterFrame;

}

};

};

La siguiente parte es la importante, lo primero que hará será detectar si el mouse ha sido presionado.

Código :

onMouseDown =function(){

Esto hará la comprobación por medio de la cual verificará si las coordenadas del mouse en el momento que se presionó están sobre el clip, lo cual indicará que se ha echo click sobre él.

Código :

if (mapa.hitTest(_xmouse,_ymouse)){

Después de eso se calculará el tamaño de la película con el zoom:

Código :

Alto = incremento*mapa._height;
Ancho = incremento*mapa._width;

que es donde interviene la variable incremento, la cual, reitero, podremos manejar a nuestro antojo.

Luego haremos el cálculo de la nueva posición del clip, ya que si lo dejamos en esa posición, se nos moverá hacia la derecha y hacia abajo, lo cual nos desubica, para lo cual se emplea la siguiente ecuación:

Código :

x = _xmouse-((_xmouse-mapa._x) * incremento);
y= _ymouse-((_ymouse-mapa._y) * incremento);

Y por último le mandamos a la función los parámetros y ella se encargará del resto.

Código :

zoom(x,y,Ancho,Alto,3);

Nota: es importante que al crear el clip, el punto de registro sea a la izquierda arriba.

Espero les sirva.

Si te sirvio este post y quieres divertirte un poco ahora da click aqui y Visita Soportalo.com Post nuevos todos los dias