Blog de Diseño Web y Programación

Webs del año

Archivado en: Artículos, Cool sites, Flash — info @ Dic 19th, 2008

Esta vez sí que vamos con lo mejorcito del año.

Un recopilatorio de webs que nos han impactado a lo largo de este último año, muchas de ellas las habrás visto en números anteriores de nuestro boletín, otras son aportaciones de nuestros alumnos en el foro de Método Profesional, y bueno… recomendaciones, búsquedas de inspiración y de interminables paseos por la red, vista la alternativa que ofrece la caja tonta.

Esperamos que os guste, os impacten y os inspiren como a nosotros:

3D, Flash y cerveza.
www.thecoronabeach.com

Agencia con web de estética urbana, buena ejecución Flash.
www.red-pixel.net

Pesada web aunque impactante 3D y vídeo integrado en Flash.
www.fordvehicles.com/crossovers/2008taurusx

Brillante y graciosa idea original.
producten.hema.nl/#afhurl

Impactantes transiciones con Flash.
http://www.lexus-gs.ru

Visitar una web mientras juegas.
www.hellosoursally.com

Experimentando con el sonido.
demo.fb.se/e/ikea/comeintothecloset2/site

Hace tiempo que Nike nos da lecciones del potencial de desarrollos en entornos Flash.
www.nike.com/nikelab

Magníficos efectos de vídeo integrados en Flash.
www.experience159.com

Comments Off

Agencias de diseño web.

Archivado en: Artículos, Flash — info @ Dic 18th, 2008

Como viene siendo habitual en estas fechas, toca recopilación de lo mejorcito del año.En principio este post surgió como eso, las mejores agencias web del año. Aunque finalmente nos pareció mucho más interesante, ver las propuestas de agencias de diseño web de diferentes partes del mundo. Agencias que nos han impactado de alguna u otra manera; ya sea en diseño, originalidad, sus trabajos o desarrollo. Siempre dando preferencia a una de nuestras grandes pasiones, contenidos en Flash.

Juzguen ustedes mismos… como costumbres, modos de vida, clima, comida… pueden influir en la propuesta creativa… o quizás no.

USA Big Spaceship
Bélgica Group 94
Suecia North Kingdom
Francia Soleil Noir
Rusia BrandStudio
Brasil Gringo
Eslovenia Webshocker
Nueva Zelanda Andy Foulds
Hong Kong Pill and Pillow
Israel Inkod-Hypera
Polonia OS3 Multimedia
Korea Astrum
Inglaterra Akqa
Australia Amnesia
Canadá The secretlocation
España Javier Ferrervidal
Portugal Triworks
Italia Scozzese Desing
Holanda 10mg
Alemania Argonauteng2
Singapur Kinetic
Escocia Amberfly
Sudafrica Wireframe Studio
Taiwán Ai Interactive Media

Comments Off

Autoguardado en Flash

Archivado en: Flash, Recursos Flash — info @ Nov 21st, 2008

Cuántas veces… ya durante largo rato delante de la pantalla, se nos ha quedado la cara poco menos que de tonto. Al percatarnos que con el programa que estamos trabajando, simplemente…. pssss……… desaparece. Y ni siquiera nos avisa con un mensajito, para suavizar un poco el shock vamos, cosa que a Flash le gusta hacer, sin contar con cortes de luz o fallos del sistema.

Bueno, pues la solución a esto ha venido de parte de terceros.

Auto Save para Flash:

Una vez instalado, lo podéis activar en; “Ventana/Otros paneles/Auto Save” y configurar el tiempo para el autoguardado.

Uffff…….. respiremos tranquilos.

Descargar Auto Save

Comments Off

Curso de Flash OnLine, por Método Profesional.

Archivado en: Flash, Formación — info @ Nov 19th, 2008

El próximo mes de enero, Método Profesional lanza su curso Superior de Diseño Web Profesional con Flash y ActionScript en la modalidad de Online. Inicio de nueva modalidad de curso para el inicio del nuevo año, por lo que desde Método Profesional estimamos comenzar 2009 con muy buen pie.

Con este estreno volvemos a cumplir con el propósito que nos marcamos ya hace tiempo: conseguir que cada vez más personas se beneficien de la calidad y garantía que ofrece nuestra formación.

Para todo ello, hemos preparado esta plataforma Online con la herramienta Adobe Acrobat Connect. Una de las tecnologías más avanzadas en e-learning, que como sabéis es una opción alternativa para aquellos que combinan trabajo y actualización, ya que no es necesario acudir a un aula permanente, o estar sujeto a estrictos horarios.

Hemos empleado mucho tiempo y esfuerzo en su puesta a punto porque queríamos ofrecer la calidad profesional de nuestras clases presenciales, obteniendo así…
“el curso que en su día nos hubiera gustado haber podido recibir nosotros”.

Lo hemos conseguido, estamos preparados y queremos empezar ya.

Web del curso online

Comments Off

Tutorial 3D en Flash, realizar un cubo.

Archivado en: ActionScript 3.0, Flash, Tutoriales, Flash 3D — info @ Nov 18th, 2008

Lo primero será bajarnos las clases de Papervision3D y en su versión 2.0. Podemos hacerlo en esta dirección: http://code.google.com/p/papervision3d/downloads/list

Posteriormente, en Flash, tenemos que agregar en la ventana de Configuración de ActionScript 3, la ruta de las clases que hemos bajado.

Importamos las clases que vamos a usar y que están en los paquetes correspondientes de flash y de papervision3d. Recordamos que el asterisco (*) significa el comodín, para importar todas las clases de dicho paquete.

import flash.events.*;
import flash.display.*;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.core.proto.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.materials.*;

Ahora vamos a declarar las variables necesarias para el uso del 3D. Son los objetos cámara, un visor para mostrar lo que se va a renderizar, una escena, y el objeto de renderización que utilizaremos más adelante.

var camara:Camera3D = new Camera3D();
var vista:Viewport3D = new Viewport3D(550, 400);
var escena:Scene3D = new Scene3D();
var render:BasicRenderEngine = new BasicRenderEngine();

Por comodidad para este caso vamos a meter todos los elementos en un nuevo objeto 3D, que llamaremos contenedor. Esto no tiene por qué ser así, pero de esta forma tendremos la posibilidad de referirnos a todo el “objeto” 3D que vamos a realizar.

var contenedor:DisplayObject3D = new DisplayObject3D();

Definimos una variable para posteriormente usarla para el valor de transparencia de los materiales, en este caso un 20% (recordamos que debe ser un valor entre 0 y 1)

var transparencia = .2;

Cada cubo que vamos a hacer, tedrá un material asociado, que se ha de crear como una lista de materiales de las seis caras de un cubo. Cada cara puede ser el material deseado. Para este caso hemos usado un material de imagen (BitmapData) y cinco de color liso.

var material:MaterialsList = new MaterialsList({
front: new BitmapAssetMaterial(”foto”, true),
back: new ColorMaterial(0xFF0000, transparencia),
right: new ColorMaterial(0×00FF00, transparencia),
left: new ColorMaterial(0×333333, transparencia),
top: new ColorMaterial(0×0000FF, transparencia),
bottom: new ColorMaterial(0xFFFF00, transparencia)
});

Para el objeto BitmapData, que es usado en la clase BitmapAssetMaterial, es necesario crear una vinculación del símbolo (en el símbolo de la bibloteca pulsar el botón derecho y pulsar Vinculación) para ser usado en ActionScript y que extiende a la clase flash.display.BipmapData (la que sale por defecto). En este ejemplo se le ha asignado el identificado o clase “foto”.

Ahora nos toca hacer los cubos. Para ellos almacenamos en una variable la cantidad de cubos que vamos a hacer. En otra el Array que almacenará cada uno de los cubos. Definimos la variable “tam” para indicar el tamaño que tendrá cada cubo, para que vaya aumentando cada uno de forma progresiva. Mediante el constructor Cubo, pasamos el material, el tamaño y los vértices. Una vez hecho el cubo, lo incluimos en la lista como hijo del objeto “contenedor”.

var cant = 8;
var cubos: Array = new Array();
for (var i = 0; i<=cant; i++) {
var tam = (i+2)*10;
cubos[i] = new Cube(material, tam, tam,tam,2, 2, 2);
contenedor.addChild(cubos[i]);
}

Añadimos el visor (vista) con el tamaño definido arriba en su construcción, posicionamos la cámara, y añadimos el “contenedor” a la escena.

this.addChild(vista);
camara.z = -200;
escena.addChild(contenedor);

En la animación 3D en flash, hay que ir representando lo que se ha de ver en cada fotograma, por lo que aún siendo un proceso automático, hay que ordenar a que se renderice mediante el objeto “render” creado anteriormente. Para esto, creamos el evento ENTER_FRAME para que nuestro flash 3D se renderice a cada instante (si es eso lo que queremos, siempre que algo cambie en nuestro visor). La función que vamos a asociar a este evento es renderizar.

this.addEventListener(Event.ENTER_FRAME, renderizar);

Declaramos y definimos la función renderizar, que su objetivo es cambiar la rotación de los cubos, con una fórmula matemática fácilmente entendible, para que tengan una especie de deceleración con un rozamiento diferente según el tamaño del cubo.

Tras cambiar las rotaciones de los cubos, toca renderizar la escena. Para esto hacen falta los objetos: render, escena, camara y vista, y mediante el método renderScene de la clase BasicRenderEngine redibujamos la escena en el visor.

function renderizar(e:Event):void {
for (var i=0; i<=cant; i++) {
var clip = cubos[i];
var roz=(i+2)*3;
clip.rotationY = ((clip.rotationY*roz)+((mouseX-200)/1))/(roz+1);
clip.rotationX = ((clip.rotationX*roz)+((mouseY-275)/1))/(roz+1);
}
camara.z = ((camara.z*8)+mouseY-500)/9;
render.renderScene(escena, camara, vista);
}

Ver muestra

Descargar archivos

Comments Off

Novedades de Flash CS4

Archivado en: Flash — info @ Nov 18th, 2008

Esta nueva versión de Flash viene cargada de novedades, nuevas herramientas y procesos que van a cambiar nuestra manera de trabajar.

Para esta nueva edición de nuestro boletín, no hemos tenido suficiente tiempo de probar estas novedades de primera mano. Pero nos ocuparemos de ellas en profundidad en los próximos números.

Nada más abrir el nuevo flash vemos un profundo cambio en la interface, mucho más minimalista y sobria, aunque compacta. Damos por hecho que este cambio ha sido asumido por toda la familia CS4.

Por supuesto, aún seguimos teniendo la posibilidad de cambiar el espacio de trabajo y decantarnos por la forma clásica.

Veamos un listado con algunas novedades:

Animación basada en objetos
Quizás sea el cambio más radical que podemos observar en este primer acercamiento. Ya que cambiará nuestra manera de trabajar con los fotogramas y la línea de tiempo.

Ahora tenemos tres modos de realizar animaciones; la antigua interpolación de movimiento pasa a ser Interpolación clásica, la interpolación de forma se mantiene igual, y la que ahora es Interpolación de movimiento es la que trae las novedades.

Este nuevo tipo genera una animación más consistente, formando un “bloque animado” fácilmente manipulable, y resultando difícil estropear la animación por error. Ya que ahora no son fotogramas claves, como los entendíamos antes, los encargados de indicar un cambio en la animación. Ahora la interpolación se aplica directamente a las propiedades del objeto.

Panel Editor de movimiento
Otro cambio radical…. da la sensación de estar ante un programa de 3D, ofreciéndonos la posibilidad de manipular la animación a límites insospechados.
Podemos modificar de manera independiente cada una de las propiedades del objeto: rotación, transformación, filtros, efectos de color…. y todo mediante curvas beizer.

Configuración predefinida de la interpolación de movimiento
Colección de animaciones predefinidas, para la creación rápida de animaciones.

Cinemática inversa con la herramienta Hueso
Permite hacer vinculaciones para realizar animaciones basadas en el esqueleto humano o sistemas mecánicos.

Transformación 3D
Ya podemos utilizar la coordenada Z, donde un objeto 2D es tratado en un espacio 3D.

Dibujo decorativo con la herramienta Deco
Puede convertir fácilmente cualquier símbolo en una herramienta de diseño instantánea. Tanto en la creación de patrones para su aplicación con las herramientas de pincel o relleno, como en la creación de efectos de tipo caleidoscópico con uno o varios símbolos mediante la herramienta de simetría decorativa, Deco ofrece un método innovador para el diseño con símbolos.

Biblioteca de sonidos de muestra
Una biblioteca de sonidos por defecto, que van a ayudarnos a agilizar esta tarea, si no poseemos una organizada biblioteca de sonidos.

Edición en Soundbooth
Los usuarios de Soundbooth podrán ahora editar sonidos importados a Soundbooth directamente desde Flash.

Desbloqueo de JPEG
Esta opción de configuración de publicación reduce la apariencia de las irregularidades comunes de los archivos JPEG muy comprimidos.

Herramienta de Pincel Rociador
Habitual en otros programas como Illustrator. Nos permitirá pintar como si lo hiciéramos con un Spray, tomando un símbolo de la biblioteca…. Imaginad si ese símbolo tiene animación…

Seguiremos informado de las novedades de esta nueva versión en próximos boletines y desarrollando ejemplos de uso, que la disfrutéis.

Comments Off

Diseño web líquido con Flash… ¿cómo se hace?

Archivado en: Flash, Tutoriales — info @ Jul 14th, 2008

¿Cómo se hace esto www.la-goya.com/home.html
o www.riflejeans.com/rifle2008/rifle.html?

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.

Ver muestra

Desecargar archivos

Comentarios (0)

Un poco de historia, Flash en fechas

Archivado en: Flash — Alberto Zamora - www.medialan.es @ Dic 1st, 2007

1993: Jonathan Gay crea sus primeros programas de gráficos
1994: Se funda FutureWaves Software
1995: Se añade animación a SmartSketch
1996: Macromedia adquiere FutureSplash
1997: Macromedia lanza Flash 1.0
1999: Internet Explorer incorpora el Flash Player
2000: El nivel de penetración de Flash llega al 92%
2002: Lanzamiento de Studio MX y de Flash 6 Player
2004: Lanzamiento de FlashLite 1.0
2005: Adobe compra Macromedia
2006: Lanzamiento del Flash Player 9

Comentarios (0)

L	M	X	J	V	S	D
« Nov
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Blog de Diseño Web y Programación

Webs del año

Agencias de diseño web.

Autoguardado en Flash

Curso de Flash OnLine, por Método Profesional.

Tutorial 3D en Flash, realizar un cubo.

Novedades de Flash CS4

Diseño web líquido con Flash… ¿cómo se hace?

Un poco de historia, Flash en fechas

Categorías:

Archivos:

Web de alumnos de MP