elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Top 20 herramientas Hacking más populares de 2020


  Mostrar Temas
Páginas: [1] 2
1  Programación / Desarrollo Web / Como agregar elementos a mi diseño liquido en flash? en: 12 Octubre 2009, 18:33 pm
Citar

Como podemos ver en las muestras, tienen una característica en común estas páginas. Y es la propiedad de adaptarse al tamaño del navegador.

A esta facultad se le llama diseño web líquido, y es mucho más habitual ver esto en páginas HTML formateadas por CSS, como www.amazon.com, pero aquí vamos a hacerlo para una web en Flash.

Básicamente sólo necesitamos de la clase Stage de Flash. Esta clase hace referencia a los límites de nuestra película, no al tamaño al que configuramos el proyecto o escenario, si no a todo el espacio que ocupa nuestro Flash cuando lo reproducimos.

Comenzamos definiendo nuestro proyecto a un tamaño de por ejemplo de 770 x 420, dentro de este espacio diseñamos nuestra interface. Nosotros hemos dibujado una barra superior a modo de menú, una barra inferior para incorporar algunos datos, un clip como fondo y en el centro un motivo que es donde podrían ir los contenidos.

En el fotograma que contendrá el código, escribimos:
Stage.align = “TL”

Con la propiedad align y como valor “TL” del Stage, situamos nuestro escenario en la esquina superior izquierda del reproductor o en navegador, siempre que el contenido de flash no esté escalado, controlado con Stage.scaleMode. Hay más valores para la propiedad align como “T” que consigue una alineación superior y centrada, puedes consultar todos los valores en la ayuda de Flash.

Flash se alinea por defecto al centro, horizontal y verticalmente, pero en este caso preferimos alinearlo al “TL” para que controlar las coordenadas sea más sencillo, y no dependa del tamaño del escenario, como de otra forma sería, dejando de este modo el 0,0 en la esquita superior izquierda.

La siguiente línea de código es:
Stage.scaleMode = “noScale”;

Con esto especificamos de que modo se va a escalar nuestra película. Con el valor “noScale” vamos a impedir que nuestra película se escale si modificamos el tamaño de la ventana del reproductor o navegador. Por defecto, Flash, incorpora el valor “showAll”  haciendo que la película se escale para ocupar todo el área del navegador, consiguiendo un resultado bastante inadecuado.

Llegamos al punto clave, y es detectar constantemente cuando se producen cambios en el tamaño del navegador. Para ello creamos un objeto Listener para detectar el evento onResize y se lo asignamos al Stage.

Creamos el listener y la función que se ejecutara al redimensionar el navegador:
var miListener:Object = new Object();
miListener.onResize = function() {
};

y le asignamos el listener al Stage:
Stage.addListener(miListener);

En el escenario dibujamos un texto dinámico y definimos la variable “text_info”

Dentro de la función onResize vamos a colocar todas las operaciones que queramos realizar cuando cambie el tamaño del navegador. Por lo tanto incluimos la siguiente línea de código dentro de la función:
text_info = “Tamaño del Stage: “+Stage.width+” x “+Stage.height;

y ejecutamos nuestra película.Como vemos, el texto se actualiza constantemente para mostrarnos el tamaño de la película.

Vamos a incluir algunas líneas más para interactuar con los elementos de la interface, todo dentro de la función onRezise
barrasup_mc._width = Stage.width;
barrainf_mc._width = Stage.width;

Igualamos el ancho de la barra superior y la inferior, al ancho del Stage.
barrainf_mc._y = Stage.height-barrainf_mc._height;

Alteramos la posición vertical (_y) de la barra inferior, para que se recoloque constantemente en la parte inferior.La imagen de nubes que tenemos como fondo, queremos que siempre ocupe la totalidad de la pantalla, para así decorar nuestra web, y no nos importa que se desforme. Por lo tanto igualamos la altura y el ancho al Stage:
fondo_mc._width = Stage.width;
fondo_mc._height = Stage.height;

Para el motivo central (el avión) que puede ser el contenido, vamos a mantenerlo centrado, pero vamos a controlar su desplazamiento mediante la clase Tween. El Tween es una clase de Flash que nos permite hacer interpolaciones de movimiento por código, con distintas funciones matemáticas de animación, quedando un resultado bastante atractivo.

Primero, importamos y definimos la función Tween:
import mx.transitions.Tween;
import mx.transitions.easing.*
mov_tw=function(clip,prop,inicio,fin){
new Tween(clip,prop, Strong.easeOut,inicio,fin, 25, false);
}

Volvemos a centrarnos en la función onResize, dentro escribimos:
mov_tw(foto_mc,”_x”,foto_mc._x,Stage.width/2);
mov_tw(foto_mc,”_y”,foto_mc._y,(Stage.height/2)+20);

Con estas líneas llámanos a la función y pasamos como parámetros la nueva posición respecto al tamaño del Stage.

En definitiva, nuestro código queda se la siguiente forma:
import mx.transitions.Tween;
import mx.transitions.easing.*
mov_tw=function(clip,prop,fin){
new Tween(clip,prop, Strong.easeOut,clip[prop],fin, 25, false);
}Stage.align = “TL”;
Stage.scaleMode = “noScale”;
var miListener:Object = new Object();
miListener.onResize = function() {
text_info = “Tamaño del Stage: “+Stage.width+” x “+Stage.height;
barrasup_mc._width = Stage.width;
barrainf_mc._width = Stage.width;
barrainf_mc._y = Stage.height-barrainf_mc._height;
fondo_mc._width = Stage.width;
fondo_mc._height = Stage.height;
mov_tw(foto_mc,”_x”,Stage.width/2);
mov_tw(foto_mc,”_y”,(Stage.height/2)+20);
};
Stage.addListener(miListener);

Como el objetivo final es una página web, nuestro HTML necesita ciertos retoques.Insertamos de forma habitual en el HTML el archivo .swf, y configuramos su alto y ancho al 100%

Vamos a incluir un poco de CSS en nuestro HTML:

Con esta regla también configuramos el alto y el ancho al 100% de lo elementos que van a contener al archivo.swf , las etiquetas html y body.

Si ahora ejecutamos el HTML dependiendo en qué navegador lo hagamos, es posible que observemos que la película flash no se adapta, hasta que no variemos el tamaño de la ventana del navegador. Algo muy lógico, recordando que la función responde al evento onResize.

Por lo tanto, en nuestro código de Flash incluimos la última línea:
miListener.onResize();

Que ejecuta directamente la función aún sin ser variado el tamaño, puesto que lo normal es que cualquier usuario abra la web al tamaño que desee, independientemente del original de nuestro SWF, por lo que al iniciar ha de saltar la función.

Con esto quedaría listo nuestro ejemplo de un flash líquido.

NOTAS: Un flash líquido, no siempre tiene unas reglas escritas. Como se han visto en este ejemplo, existen muchas formas de actuar con los objetos, por lo que primero, lo se que ha de estructurar, es pensar qué queremos que pase con cada uno de ellos (escalar, mover, etc.). También hay que tener en cuenta todo, y todos los tamaños, pero es posible que deseemos querer forzar la visualización a un mínimo de tamaño, tanto vertical como horizontal, ya sea desde el mismo flash, o forzándolo desde el html, con un scroll. Controlar absolutamente cada clip que deseemos tener en cuenta para su escalado, puede resultar largo, pero quedará un resultado bastante positivo.



Hola termine este tutorial al pie de la letra y funciona perfecto, tanto IE como firefox. pero ahora, como puedo ingresar elementos, cuando agrego algo no forma parte del diseño liquido!, ayuda
2  Media / Diseño Gráfico / como hacer estos efectos en flash en: 26 Septiembre 2008, 16:54 pm
Hola estoy haciendo una pagina web, y quisiera que al presionar sobre uno de mis enlaces , se cargue una imagen con este efecto de mascaras (el segundo ejemplo), saludos


http://javirodriguez.es/?p=468
3  Media / Multimedia / duda dvd lab pro en: 25 Noviembre 2007, 21:44 pm
hola ya solucione el error anterior,gracias goku si era "WAV" el formato que admitia..,ahora quiero hacer que ahiga un video que se reprodusca en el menu y que  ocupe una parte de la pantalla y que haga un loop ?? como hago eso??
mas o menos 30 segundos la duracion del video o meno0s.
4  Media / Multimedia / problema con dvd lab pro en: 25 Noviembre 2007, 02:10 am
hola estoy haciendo una autoria con varios menus con el programa ya mensionado y no puedo ponerle musica de fondo a los menus me sale un error que puede ser?? que formateo aguante el progrmaa??
5  Media / Multimedia / [MOD] se puede hacer este menu de dvd? en: 20 Septiembre 2007, 20:28 pm
hola tengo que crear un dvd con la siguiente extructura...
me han dicho que con Dvd LAb PRo 2.2 lo puedo hacer facilmente ,alguien me puede decir si es asi ,y  si lo es les agradeceria q me pasaran un tutorial  ;)


6  Media / Diseño Gráfico / que opinan de mi firma? en: 16 Julio 2007, 22:57 pm
espero criticas  :D :D :D :D
7  Media / Diseño Gráfico / como puedo hacer este efecto en flash mx? en: 10 Julio 2007, 18:23 pm
alguien me puede decir? se ve simple pero no recuerdo como se hace  :xD :xD
se los agradeceria!!  :D :D
http://www.fjwebsites.com/portfolio_clientes/demos/3d-arq-patagonia/index.html
8  Media / Multimedia / problemas con adobe premier 6.5 en: 21 Enero 2007, 20:37 pm
 :Dhola ,me baje el programa "Hollywood FX PRO 5.2b48" para agregarle transciciones a mi premier 6.5 anteriormente tenia el ""Hollywood FX 4.1" pero sus tranciciones me dejaron de gustar , entonces me baje el nuevo ya mencionado.

al principio no me reconosia el Hollywood FX PRO 5.2b48 el la solapa trancicione del premier por eso busque y encontre este truco :

Como veo q se os resiste en Hollywood FX aqui teneis el modo de activarlo para Premiere

Esto es posible gracias a una pequeña modificacion:
Solo hay que copiar el archivo HfxEdt5.vfx que está en el directorio C:\Archivos de programa\Pinnacle\Hollywood FX 5\Host Plugins\Edition\
Al directorio C:\Archivos de programa\Adobe\Premiere Pro\Plug-ins . Renombrando la extensión a HfxEdt5.prm

Y ya esta, eliges en Efectos el modo transicion de imagen Hollywood FX, y luego en Monitor control de Efectos le dais a custom y se abre el Hollywood FX

----------------------------------------------------------------

Después de terminar este procedimiento me lo reconoció , pero ahora no me deja importar sus efectos como lo hacia en la versión anterior , por favor necesito su ayuda
 :(
9  Media / Diseño Gráfico / que me aconsejan para diseñar web como un profesional? en: 9 Enero 2007, 05:28 am
hola quiero aprender a diseñar pero con buena calidad, se un poco de diseño , pero las paginas no me salen cierto nivel de profesional como por ej : http://www.pixelartweb.com.ar/

algo asi quiero aprender  y obviamente quiero aprenderlo por internet no en cursos, son muy caros  :-( :-( :-( por favor
10  Media / Multimedia / problemas al editar un DVD en: 31 Octubre 2006, 11:46 am
hola como estan . hoy dia estoy con una DUDA no puedo editar un dvd , osea lo que necesito es un programa para borrar el menu del mismo y poner un video de presentacion desde ya  gracias
Páginas: [1] 2
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines