Blog de Diseño Web y Programación

Gracias a este vídeo tutorial podrás traducir el contenido de una página web flash de una forma rápida y sencilla sin necesidad de realizar cargas externas usando la clase traductor que hemos creado para facilitar esta labor.

Ver tutorial en MPLive!

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

LA COORDENADA Z

Archivado en: ActionScript 3.0, Artículos — info @ Sep 15th, 2008

Mucho se ha hablado del futuro del 3D en el mundo web…

… Muchos se pensaban que el “render” en un programa tipo 3D Studio u otros… para trabajar la imagen de la empresa era la solución…

… Pero ¿es esto lo que nos augura?

Definitivamente ya abruma una ráfaga de lo que está por venir, y se podría resumir con esta frase: “La interactividad con la coordenada Z“

En el Boletín nº 2 de Método Profesional ya aparecen algunos enlaces que muestran exactamente de qué estamos hablando. La creatividad con la programación plasmada en un plano 2D ya se puede comenzar a dar por obsoleta en el mundo de la innovación, ahora tenemos el espacio 3D, y esta vez por fin, tan optimizado que Adobe Flash Player en su versión 10 hace uso de la configuración nativa de la tarjeta gráfica de nuestro equipo informático para evitar cálculos de representación en la pantalla.

Hasta la fecha, toda representación quedaba verdaderamente poco optimizada y requería de un microprocesador potente, o como consecuencia las animaciones se recalculaban de forma muy lenta quedando una web pesada de navegar.

Flash Player 10, cuyo nombre en código de Adobe es “Astro” (debido a que está en http://labs.adobe.com descargable como versión aún no definitiva), se puede comenzar a usar. La “pega” es que aún no contamos con un entorno de desarrollo en Flash para darle uso, pero con código AS3.0 se pueden realizar prácticas o proyectos. Existe una versión de la documentación AS3.0 actualizada para dicho player entre la que podemos encontrar las propiedades de la clase DisplayObject (Heredada por los objetos de visualización) “x“, “y” y cómo no, “z“. También podemos encontrar rotationZ, que es el mismo rotation que hasta ahora utilizábamos, puesto que en un plano 2D el eje de rotación para dicho plano es el contrario a ambos (es decir, el Z), pero ahora con la aparición de este nuevo eje, aparecen dos nuevos ejes contrarios debido a los dos nuevos planos que surgen, y por lo tanto se puede girar en estos dos planos, disponiendo de las propiedades rotationX y rotationY.

No obstante, como tecnología aún novedosa en el mercado teníamos el conocido PaperVision3D. ¿Qué es el PaperVision3D?. Pues es fácil de entender. Tecnológicamente no son más que clases de AS3.0 (también existen versiones para AS2.0), que se aplican desde el mismo entorno Flash. La cualidad de éstas clases es que su representación quedaba sorprendentemente optimizada. ¿sustituye el nuevo Flash Player 10 al PaperVision3D?. Pues bajo nuestra humilde opinión, la respuesta es absolutamente no (al menos de momento), puesto que mientras Flash Player 10 aún solo cuenta con asuntos primitivos del 3D, el PaperVision3D es un completo entorno de manejo del mismo, controlando luces, cámaras, etc. Por ello, puede ser que en un futuro Flash absorba de “serie” dichas cualidades, pero aún se le pueden sacar mucho partido a estas clases de entorno 3D como podrán ver en algunos ejemplos del boletín antes mencionado. En estos ejemplos la interactividad con el usuario es tan compleja que podrán utilizar incluso componentes de interfaz en 3D.

Como podrán ver tras leer este artículo, quedan muy lejos los simples “render” 3D de los que se hablaba años atrás como “las web del futuro”. De los desarrolladores dependerá la implementación de estas prácticas en el mercado, quedando cómo no, un abanico más amplio para los programadores de estos lenguajes tan visuales. Con esto último podemos concluir que está claro que actualizarse al AS3.0 con respecto al 2.0 traerá como consecuencia abrirse a un nuevo “espacio”; “un nuevo mundo”.

Disfruten de su “espacio”.

Antonio García
Director de Método Profesional y Aunamedia

Comments Off

Carlos Rovira, especialista en Rich Internet Applications.

Archivado en: ActionScript 3.0, Flex, Entrevista — info @ Jul 15th, 2008

Carlos es un Consultor-Jefe de Proyecto especializado en Rich Internet Applications y en la Plataforma Flash. Además, está certificado como experto en la aplicación de Adobe Flex 2.

Desde 1999 Carlos ha estado involucrado en el desarrollo de soluciones críticas de gran escala para clientes como BBVA, Vodafone o Línea Directa, entre otros. De forma paralela, su interés en las tecnologías emergentes basadas en Flash, Flex y RIA, así como su integración con otras tecnologías como Java o PHP, le han llevado a crear y mantener su blog carlosrovira.com.

Además, es colaborador habitual del popular portal de habla inglesa actionscript.com y parte integrante del equipo de desarrollo de ASDT, el plugin open source basado en Eclipse para desarrollo de ActionScript.

Actualmente, Carlos ha fundado su propia empresa carlosrovira.com. Desde la cual dirige a un grupo de consultores fuertemente especializados que ofrecen sus servicios de consultoría, formación, así como soluciones de arquitectura avanzadas, para aplicaciones RIA basadas en Flex y Java.

Hablemos un poco de tu inicio profesional Carlos, ¿Cuál fue tu primer puesto de trabajo?
Mi primer trabajo, nada más terminar la carrera de Informática, fue en Cartagena (Murcia), en una empresa de formación. Allí dábamos las típicas aplicaciones que demandaban los usuarios de a pie: Microsoft Office, Photoshop o 3D Studio MAX. Estuve, aproximadamente, 3 meses, hasta que ahorre algo de dinero para ir a Madrid, y empezar a buscarme la vida como desarrollador de Software de Internet, que era lo que realmente me gustaba.

¿A qué te dedicas ahora?
Ahora trabajo en mi propia empresa carlosrovira.com, cuyo objetivo es ofrecer un enfoque distinto a la hora de crear las nuevas aplicaciones ricas de internet. Por tanto, mi tiempo se reparte entre la dirección de los proyectos que llevamos a cabo, la gestión de la empresa y, evidentemente, en el desarrollo y formación continua en nuestras tecnologías ya que, al fin y al cabo, vendemos innovación tecnológica.

¿Qué vínculos te unen a Adobe y cómo se iniciaron?
Los vínculos con Adobe (y antes con Macromedia) son de colaboración y amistad entre ambas empresas, y las personas que la forman. En la medida de lo posible, intento aportar mi granito de arena en promocionar las tecnologías que ellos ofrecen, y ellos también cuentan con mi experiencia en dichas tecnologías cuando es necesario. Todo es gracias a la calidad humana de las personas que integran Adobe. Es realmente un placer trabajar con ellos.

¿Cuándo fuiste consciente de que el desarrollo de aplicaciones informáticas era lo tuyo?
Bueno, realmente siempre fui muy tecnólogo. En general siempre he disfrutado investigando el funcionamiento de las cosas. Quizás la informática se preste mucho a este análisis.

¿Qué lenguajes de programación predominaban en aquellas fechas?
En aquel momento empezaba a tomar cierta fuerza Java. También estaban ya siendo ampliamente usados HTML, CSS y JavaScript.
Evidentemente todavía existía muchas aplicaciones Visual Basic, Delphi, pero supongo que ya estaban en claro retroceso.

¿Cuándo y cómo conociste flash?
La primera vez que tuve contacto con flash fue con Flash 3, hacia el año 1998. Siempre he tenido una vena artística muy importante que me ha marcado, y en aquel momento Flash me atrapó directamente por las posibilidades interactivas y gráficas que ofrecía. Fué con Flash 4 cuando empecé a seguir el producto y su evolución de forma constante. Desde entonces he intentado aplicar lo que ofrecía en las aplicaciones web de la época en las que ha existido esa posibilidad.

¿Qué destacas sobre el uso de ActionScript le puede ofrecer a los desarrolladores Flash?
El uso de ActionScript es fundamental para sacar todo el partido del potencial que tiene Flash. La plataforma permite hoy en día hacer todo lo que se nos pase por la cabeza. Por tanto, el tener un buen manejo del lenguaje y de las posibilidades que ofrece el Flash Player es indispensable, para no limitarnos nosotros mismos en lo que podemos ofrecer a nuestros clientes.

¿Por qué decidiste especializarte en…digamos el SWF?
Bueno, quizá fue tener cierta visión de futuro. Por el año 2000-2001 vi claro el potencial de Flash y la importancia estética y visual de las aplicaciones. La experiencia del usuario, como predicaba Macromedia, tenía una importancia tremenda. Realmente era una lucha constante ya que mucha gente solo daba importancia a la robustez del middleware, pero yo veía cómo los clientes realmente apreciaban una presentación de los datos agradable y usable. Tarde o temprano tenía que imponerse una tecnología de interface que nos permitiera más riqueza y dinamismo, y eliminase las barreras estáticas existentes. Puede que al final no fuese el Flash Player, pero la verdad es que no existía mucha competencia. De hecho, la Plataforma Flash ya era una apuesta segura sin llegar al boom que vivimos estos días.

¿Eras consciente de que esta tecnología tendría la proyección que a tenido?
Si. Sin duda alguna y como he comentado antes, era algo en lo que siempre tuve presente. Por eso mantuve mi apuesta a través de los años.

En tu opinión Carlos ¿Cuál piensas que ha sido el motivo de la proyección de flash frente a otras tecnologías?
Se han dado multitud de factores. Lo bonito de la tecnología es que te engancha, tiene miles de posibilidades, una increíble penetración en todo el mundo, funciona igual en todos los navegadores y plataformas, posee competencia inexistente, y otros factores como la comunidad y la empresa (Adobe/Macromedia) que soportan la tecnología, la continua apertura de formatos (SWF, FLV, AMF,…) y tecnologías hacia un formato open source.

¿Destacarías alguna mejora o pérdida de Flash ahora de la mano de Adobe, frente a la anterior Macromedia?
Adobe ha sabido hacer una adquisición ejemplar. Ha absorbido todo lo bueno que tenía Macromedia, su proyección hacia el usuario y apoyo a la comunidad y lo ha potenciado con sus propias características que la hacían destacar como empresa de producto. Sin duda ha sido un paso muy importante para que la tecnología esté hoy día donde está.

Y de la mano de flash y la evolución de su código ActionScript llegaron las aplicaciones RIA (Aplicaciones ricas en internet). En tu opinión, ¿Que ha cambiado con la llegada de este tipo de aplicaciones? ¿Es una evolución de lo que ya había?
Siempre evolucionamos sobre lo que ya tenemos. Las RIAs son la evolución natural. Con estas nuevas aplicaciones tenemos el alcance global que ya poseíamos pero podemos manejar información de forma más gráfica y efectiva. Ahora los datos y su representación fluyen de forma más natural que con los pantallazos estáticos de las aplicaciones tradicionales. Podemos manejar mapas, gráficas bursátiles, video, elementos en 3D y en general todo lo que se nos pase por la cabeza. Es una evolución natural de los sistemas de información de las empresas, y de como éstas invierten en los mismos, empezando por asegurar los datos sensibles de dicho sistema, y progresando hasta el cliente final que tiene que consumirlos.

Cómo valoras el conocimiento actual del mercado sobre este tipo de aplicaciones, tanto de clientes como desarrolladores. ¿Crees que aún es demasiado desconocido y por lo tanto, no suficientemente valorado?
Aunque el año pasado hubo un claro Boom de este tipo de aplicaciones, todavía estamos en la pendiente inicial en lo referente al conocimiento de las posibilidades existentes. La tecnología tiene todavía un largo recorrido que no ha hecho más que empezar.

Hablando de la polémica actualización de la versión de ActionScript al 3.0 ¿Podrías lanzar algún mensaje convincente a los que aún temen dicha versión frente a la 1.0 y 2.0?
Simplemente hay que migrar. Es una cuestión de nuevas posibilidades y horizontes, un rendimiento mucho mejor del contenido desarrollado, evitar lenguajes obsoletos, incorporar las últimas tendencias y frameworks a nuestras creaciones. No hay ninguna razón para quedarse anclados en el pasado.

¿Crees que los diseñadores se encontrarán limitados al usar ActionScript 2.0 cuando deseen dar rienda suelta a su creatividad en 3d nativo en el nuevo flash player?
De hecho no podrán. Hay que tener en cuenta que las nuevas posibilidades del Flash Player 10 van unidas irremediablemente al nuevo lenguaje y por tanto, el que quiera usar las nuevas ventajas debe migrar a ActionScript 3.0

Hablemos de la nueva tecnología de Adobe: ADOBE AIR ¿Cómo la definirías?
AIR es la posibilidad de escribir una aplicación que unifique todas las grandes tecnologías (Flash, HTML, PDF, Javascript) y desplegarla en cualquier escritorio de cualquier sistema operativo, con las ventajas que ello supone (acceso al sistema local de ficheros, ventanas nativas, etc… ). Es la evolución natural de internet para traer a las aplicaciones de escritorio el alcance global a servicios externos que ya teníamos desde el navegador.

¿Qué es lo que viene de la mano de ADOBE AIR?
Ampliar el número de posibilidades y el arsenal de que disponemos, todo ello de cara a proponer soluciones a nuestros clientes que innoven o, simplemente, mejoren los procesos ya existentes.

¿Crees que un diseñador flash podría llegar a crear aplicaciones de escritorio con esta nueva tecnología?
Sin lugar a dudas. De hecho, ya puede desplegar cualquier aplicación Flash que tenga como una aplicación AIR. Luego puede mirarse las nuevas APIs, y usar los recursos adicionales que le ofrece AIR.

¿Qué le dirías a cualquier persona que esté interesado en especializarse en esta materia? ¿Por dónde debería empezar?
Le recomiendo que se apunte a la lista de correos de Made In Flex , donde podrá disfrutar de una gran comunidad de desarrolladores que podrán ayudarle en sus primeros pasos. También puede consultar la gran cantidad de artículos y tutoriales que tenemos en Made In Flex. Igualmente, los distintos blogs existentes y la documentación oficial son grandes ayudas.

Vamos con CARLOSROVIRA.COM, ¿por qué te lanzaste a montar empresa?
Realmente no fue algo premeditado, sino que las oportunidades y circunstancias llevaron a montar la empresa. Sin duda, la ventaja de haber estado apostando por las nuevas tecnologías de Adobe desde el principio, y el conocimiento del negocio de las TI, hizó que surgiesen muchas posibilidades. Todo este caldo de cultivo facilitó que el año pasado se pudiera crear un proyecto empresarial que pusiera especial mimo en hacer software con la calidad que yo buscaba, pudiendo controlar todo el proceso. El objetivo de la empresa es ofrecer excelencia, innovación tecnológica a clientes que sepan apreciar esa calidad y seriedad en la ejecución. En definitiva disfrutar trabajando y colaborando con nuestros clientes y otras empresas.

¿Qué servicios ofrecéis?
Principalmente hacemos proyectos software basados en RIA. Pero me gusta pensar que los hacemos de forma diferente al resto de empresas del sector, y quizá sea eso lo que nos diferencia y lo que hace que no tengamos competencia actualmente. También ofrecemos consultoría especializada de alto nivel. Adicionalmente, tenemos una pequeña línea de negocio dedicada a la formación.

El objetivo a corto plazo es ofrecer también producto, pero sobre esto , aunque está ya muy avanzado, todavía no puedo comentar mucho.

¿En qué os diferenciáis de vuestra competencia?
En varias cosas. Primero, intentamos ofrecer excelencia. En carlosrovira.com somos un equipo, pero es importantísimo cada persona y sus capacidades personales e individuales. Tenemos nuestras propias tecnologías y herramientas para mejorar la productividad. Esto, unido a la capacidad tecnológica, y a la metodología que seguimos, nos sirve para ofrecer un servicio óptimo.

También juega un papel importante la posición actual de ventaja con respecto a nuestro competidores, o las buenas relaciones con Adobe y sus ingenieros, para tener acceso al software que saldrá en la siguiente temporada, y estar varios pasos por delante tecnológicamente.

¿Cambia mucho la vida de un desarrollador cuando se convierte en empresario?
Totalmente, pero cambia todavía más cuando tienes un niño (risas). El ser empresario conlleva nuevas responsabilidades y obligaciones, y hay que esta a la altura para poder responder a todos esos retos. Si además se tiene pasión por el desarrollo y la tecnología, hay que intentar compaginar ambas facetas.

Teniendo en cuenta por ejemplo las tecnologías HTML, CSS, FLEX, FLASH, AIR, y cualquier lenguaje de servidor… imaginamos JSP, ¿Qué proyecto o proyectos a destacar consideras más sorprendente de los que has realizado?
Este año nos hemos centrado en seleccionar proyectos innovadores. Ahora que estamos terminando nuestra propia web queremos darles protagonismo en la misma.

Por ejemplo, GeoMetro, es un sistema de información cartográfico para Metro de Madrid, realizado con Flex y Java, y nuestra propia tecnología RIAlity, que posibilitará el consumo de los mapas de metro de forma rápida y efectiva desde el puesto de mando de la red. Sin duda, es una aplicación innovadora que soluciona el problema de manejar los cientos de mapas de la red, y que ofrece herramientas al personal de metro para hacer frente a números problemas del día a día, cuando se gestiona una red tan amplia como la de metro.

Tenemos más proyectos, pero espero que los podáis ver en breve en lo que será la nueva web de la empresa.

Termina esta frase: “El mayor valor de mi empresa es………………”

“…son los trabajadores”

En cuanto formación… ¿Crees que el estado de la formación actual ayuda a las personas que desean desarrollarse en esta profesión? ¿Qué ofertáis en Carlosrovira.com en este campo?
El estar al día tecnológicamente es complicado porque no paramos de evolucionar. Es una carrera que apenas admite descansos. Las empresas tienen que seguir siendo competitivas y, para ello, tienen que formar a su personal. La formación como tal suele ser un proceso costoso, en tiempo y en dinero. Desde carlosrovira.com intentamos, simplemente, ayudar a esas empresas que quieren formarse de forma más rápida acudiendo a profesionales que poseemos amplia experiencia en la tecnología y en formación.

Qué piensas de la innovación tecnológica por parte de cualquier desarrollador… ¿está todo inventado?
No! Siempre surgen nuevos retos y nuevas soluciones. Para prueba un botón: fijaos en la revolución 3D actual con todos los frameworks que están surgiendo en los últimos meses (Papervision, Away,…).

Antes de terminar y darte las gracias por tu amabilidad al atendernos, te damos carta blanca para que nos comentes lo que estimes oportuno.
Gracias a vosotros por contar conmigo para esta entrevista. Simplemente, desde aquí me gustaría animar a todo aquel que le guste este mundillo. Es realmente apasionante y divertido. Espero que podamos vernos por Made In Flex .

www.carlosrovira.com

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

MPLive! Recursos Web en AS3

MPlive! Web en AS3

MPlive! Botón en AS3

Clase Traductor de AS3, Traduce tu página desarrollada en Flash con AS 3.0

Tutorial 3D en Flash, realizar un cubo.

LA COORDENADA Z

Carlos Rovira, especialista en Rich Internet Applications.

Categorías:

Archivos:

Web de alumnos de MP