En este sentido demostraré cómo construir una galería de fotos dinámica utilizando la API de Flickr. Para agregar un poco más de estilo, aprovecharemos el poder de Away3D y mostraremos las fotos en un entorno 3D.
Hay mucho que discutir, así que sigamos adelante!
Paso 1: Revisión de la API de Flickr
Esta aplicación recuperará las fotos de Flickr para mostrarlas dentro de un espacio 3D. Brevemente, el proceso de descarga de fotos desde Flickr es el siguiente:
Se obtiene una clave API de Flickr..
Las bibliotecas de ActionScript AS3Flickr y AS3CoreLib se descargan y hacen referencia desde Flex Builder.
Los archivos de políticas de dominio cruzado de Flickr se cargan para permitir que Flex acceda a imágenes desde dominios remotos.
Se realiza una búsqueda de flickr..
Los resultados se utilizan para encontrar la URL de las imágenes de Flickr..
Las imágenes son descargadas y guardadas..
Este proceso está cubierto en profundidad por un tutorial anterior que puede encontrar aquí. Le recomiendo que lea este tutorial si no está familiarizado con la biblioteca AS3Flickr, ya que estos puntos solo se mencionarán brevemente en este tutorial..
Paso 2: Una introducción a Away3D Lite
El tiempo de ejecución de Flash ha logrado un progreso impresionante en los últimos años. El despliegue generalizado del tiempo de ejecución de Flash, tanto con Adobe AIR como con los complementos del navegador, junto con el aumento del rendimiento en versiones posteriores, significa que Flash tiene un ecosistema muy diverso de bibliotecas y aplicaciones. Ha pasado de ser una herramienta de animación a una plataforma de desarrollo de propósito general para juegos, aplicaciones empresariales, visualizaciones 3D, reproductores de video y más..
Los motores 3D han evolucionado junto con Flash durante algún tiempo, pasando de una curiosidad a ser ahora completamente equipados e incluso bibliotecas comerciales. Away3D es uno de los motores Flash 3D gratuitos más populares, y recientemente se lanzó una versión más pequeña y rápida de Away3D llamada Away3D Lite. Si bien Away3D Lite carece de algunos de los caramelos presentes en los motores 3D más complicados, su enfoque en la simplicidad significa que es perfecto para una aplicación simple como un álbum de fotos en 3D..
Paso 3: Consigue Away3D Lite
Puede descargar una copia de Away3D Lite 1.0 de forma gratuita desde esta página web aquí. Descargue y extraiga el código fuente del motor en una ubicación conveniente.
Paso 4: Obtén la biblioteca TwensMax de Greensock
El movimiento de la cámara dentro de la galería de fotos 3D se realizará utilizando la biblioteca Greensock TweenMax, que puede obtener desde esta página aquí. Nuevamente, descargue y extraiga la biblioteca en una ubicación conveniente.
Paso 5: Obtenga AS3Flickr y AS3CoreLib
Las bibliotecas AS3Flickr y AS3CoreLib se utilizan para ponerse en contacto con el servicio web de Flickr. Puede encontrar detalles sobre estas bibliotecas en el artículo Construye un visor de fotos usando Flex y la API de Flickr.
Paso 6: Crear un nuevo proyecto
Cree un nuevo proyecto Flex y agregue las bibliotecas Away3D Lite, TweenMax, AS3Flickr y AS3CoreLib a la ruta de creación de Flex Build.
Paso 7: Definir los atributos de la aplicación
applicationComplete = "appComplete ()" Esto establece la función appComplete que se llamará cuando la aplicación se haya inicializado, y servirá como punto de entrada para nuestro código.
frameRate = "100" Esto establece el límite de velocidad de fotogramas para la aplicación en 100 fotogramas por segundo. El valor predeterminado es 24, y aumentar esto hará que la aplicación parezca más fluida..
width = "600" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 374040]" Estos atributos definen el tamaño y el color de fondo de la aplicación Flex..
Su etiqueta de aplicación debe verse como el código a continuación:
Paso 8: Añadir algunos controles
Agregue las siguientes etiquetas a la etiqueta de la aplicación.
Le daremos al usuario la posibilidad de buscar en Flickr y mostrar los resultados dentro de nuestra galería de fotos 3D en tiempo de ejecución. Estas dos etiquetas agregan un cuadro de texto, donde se puede ingresar la frase de búsqueda, y un botón para iniciar la búsqueda.
El evento clic para las llamadas de botón. applicationManager.flickrSearch (this.txtSearch.text). El ApplicationManager se creará en pasos posteriores, y la función de búsqueda de flickr contendrá el código para contactar a Flickr y descargar las fotos..
Paso 9: Añadir algún código
Agregue una etiqueta de Script a la etiqueta de la aplicación. Aquí es donde se escribirá el código ActionScript.
Paso 10: Añadir las variables
Agregue la siguiente variable dentro de la etiqueta Script.
private var applicationManager: ApplicationManager = null;
La clase ApplicationManager será responsable de inicializar el motor Away3D, cargar las imágenes de Flickr y mover la cámara. Mantenemos una referencia a él en la variable applicationManager para que el botón creado en el paso 8 pueda llamar a la función de búsqueda de flickr.
Paso 11: Cargar los archivos de políticas de dominio cruzado
Para poder acceder a las imágenes en los servidores de Flickr, se deben cargar los archivos de políticas de varios dominios. Esto se trata con más detalle en el artículo Crear un visor de fotos usando Flex y la API de Flickr.
Esta función se llama cuando la aplicación Flex se ha cargado e inicializado. Aquí es donde creamos una nueva instancia de la clase ApplicationManager y la agregamos como un control secundario. Observe que en realidad pasamos una instancia de una clase llamada SpriteUIComponent a la función addChildAt.
Como verá en pasos posteriores, ApplicationManager extiende una de las clases de plantilla de la API de Away3D Lite. Estas clases de plantillas extienden la clase Flex Sprite. Aunque la función addChildAt aceptará un Sprite, se generará una excepción en el tiempo de ejecución. Esto se debe a que solo las clases que extienden la clase UIComponent pueden agregarse a los controles secundarios de una aplicación Flex. Para evitar esta limitación, SpriteUIComponent extiende la clase UIComponent y luego agrega un Sprite como su propio hijo..
Como se mencionó anteriormente, la clase SpriteUIComponent extiende la clase UIComponent (lo que significa que se puede agregar como elemento secundario de una aplicación Flex), y luego agrega el objeto Sprite suministrado como su propio elemento secundario..
Defina la clase ApplicationManager como extensión de la clase BasicTemplate.
ApplicationManager de clase pública extiende BasicTemplate
Una nueva característica incluida con Away3D Lite son las clases de plantillas. Casi todas las aplicaciones de Away3D necesitan inicializar las mismas clases subyacentes, como una cámara y una vista, y también configurar detectores de eventos para eventos de marco. Estos pasos comunes, que solían ser codificados manualmente por cada desarrollador, ahora son realizados por una de varias clases de plantillas. Extenderemos una de estas clases de plantillas, BasicTemplate, con el ApplicationManager.
Paso 16: Definir las constantes
El ApplicationManager tendrá una serie de variables constantes que definen el aspecto y la función de la clase.
Estas tres constantes se relacionan con el servicio web de Flickr..
constata estática privada PHOTO_HEIGHT: Número = 50; const estática privada PHOTO_WIDTH: Number = PHOTO_HEIGHT * 1.618;
Estas dos variables definen el tamaño de las fotos en el espacio 3D. El ancho se define en relación con la altura utilizando la proporción de rectángulo dorado, que produce un rectángulo cuya forma generalmente se considera estéticamente agradable.
const estática privada PHOTO_CLOUD_WIDTH: Número = 1000; const estática privada PHOTO_CLOUD_HEIGHT: Número = 1000; constata privada privada PHOTO_CLOUD_DEPTH: Número = 3000;
Estas tres variables definen el área donde estarán contenidas todas las fotos..
constata estática privada NUMBER_PHOTOS: int = 300;
Esta variable define cuántas fotos individuales se crearán en el área definida arriba.
const estática privada CAMERA_JUMP_TIME: Número = 3; const estática privada CAMERA_DIST_FROM_PHOTO: Número = 30; const estática privada CAMERA_DIST_JUMP_BACK: Número = 100;
Estas variables definen el movimiento y la velocidad de la cámara al saltar de una foto a la siguiente. La cámara seguirá una curva bezier, con el comienzo de la curva a 30 unidades de una foto, avanzando hacia un punto de 100 unidades y luego terminando en un punto de 30 unidades de la foto siguiente..
Todas las imágenes que se mostrarán provienen de Flickr, lo que significa que habrá un retraso inicial a medida que se recuperen las fotos. Mientras tanto, se mostrará una imagen incrustada en el archivo SWF, para dar al usuario algo que mirar, aparte de los rectángulos blancos..
Paso 18: Agregando las Variables
texturas de var protegidas: ArrayCollection = new ArrayCollection (); fotos de var protegidas: ArrayCollection = new ArrayCollection (); protegido var LoadTextures: int = 0;
Las imágenes devueltas desde Flickr se almacenan en la colección de texturas. Las mallas de Away3D Lite que mostrarán las imágenes se almacenan en la colección de fotos. La variable loadedTextures mantiene un registro de cuántas imágenes se han cargado desde Flickr, para que puedan almacenarse en la posición adecuada en la colección de texturas..
Paso 19: Inicializando el ApplicationManager
Agrega una nueva función llamada onInit.
anular la función protegida onInit (): void
Una vez que el objeto BasicTemplate subyacente se haya inicializado, se llamará a la función onInit. Es aquí donde inicializamos la clase extendida..
para (var i: int = 0; i < MAX_RESULTS; ++i) addTexture(Cast.bitmap(DefaultTexture));
Primero, creamos una colección de texturas para el uso de nuestras mallas fotográficas en 3D, todas inicialmente utilizando la imagen predeterminada que incrustamos en el paso 17. Cast es una clase de utilidad proporcionada por Away3D Lite, y aquí la usamos para transformar la imagen incrustada en un BitmapData objeto, que se suministra a la función addTexture.
para (var j: int = 0; j < NUMBER_PHOTOS; ++j) createPlane();
Ahora creamos las mallas que mostrarán las imágenes de la foto. Las fotos en 3D serán planos: rectángulos en 2D sin profundidad que se enfrentarán a la cámara.
flickrSearch (SEARCH_STRING);
Luego, iniciamos una búsqueda predeterminada de la base de datos de imágenes de Flickr llamando a flickrSearch, para que el usuario pueda ver algunas imágenes antes de realizar su propia búsqueda..
this.debug = falso;
La propiedad de depuración de la clase BasicTemplate se establece en falso, lo que desactiva la pantalla de estadísticas de depuración predeterminada que normalmente se muestra con una aplicación Away3D Lite.
Por defecto, la clase BasicTemplate coloca a la cámara en el extremo negativo del eje z, mirando hacia el origen a lo largo de un eje z positivo. Cuando los planos son creados por la función createPlane, también se crean con su frente apuntando a lo largo del eje z positivo. Esto significa que la cámara estará, por defecto, mirando la cara posterior de los planos.
Por lo general, en las aplicaciones 3D, los polígonos con su parte posterior a la cámara no son visibles (esto se denomina eliminación de caras posteriores), por lo que para ver los planos necesitamos mover la cámara hacia arriba en el extremo positivo del eje z y luego mirar hacia atrás en el origen. un eje z negativo.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) como Mesh;
Luego obtenemos una referencia a un plano aleatorio almacenado en la colección de fotos..
La cámara se coloca ligeramente delante de este plano aleatorio. Esta es la primera foto que verá el usuario cuando se cargue la aplicación..
bezierJump ();
Finalmente, comenzamos la operación de interpolación de TweenMax que moverá la cámara desde la foto actual para ver una nueva foto al azar..
Paso 20: La función addTexture
Agregar una nueva función llamada addTexture.
función protegida addTexture (data: BitmapData): void var texture: BitmapMaterial = new BitmapMaterial (data); texture.smooth = true; textures.addItem (textura);
La función addTexture, llamada por onInit en el paso 19, crea una nueva clase BitmapMaterial (que es la clase que define la textura de una foto en 3D) usando el BitmapData suministrado, establece su propiedad suave en verdadero y la agrega a la colección de texturas.
La función createPlane, llamada por onInit en el paso 19, crea un nuevo plano utilizando las dimensiones definidas por las constantes en el paso 16 y texturizado con un BitmapMaterial aleatorio de la colección de texturas, las coloca al azar dentro del área de "nube de fotos", las agrega a la escena (un objeto Away3D de la clase BasicTemplate) para que sea visible, y los agrega a la colección de fotos para que podamos consultarlas fácilmente más adelante.
Paso 22: Obteniendo imágenes de Flickr
Agregue dos nuevas funciones, una llamada flickrSearch y la otra llamada onPhotosSearch.
función pública flickrSearch (búsqueda: Cadena): void var service: FlickrService = new FlickrService (API_KEY); service.addEventListener (FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch); service.photos.search ("", búsqueda, "cualquiera", "", nulo, nulo, nulo, nulo, -1, "", MAX_RESULTADOS, 1); función protegida onPhotosSearch (evento: FlickrResultEvent): void para cada (var foto: foto en event.data.photos.photos) var imageURL: String = 'http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg'; var loader: Loader = new Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, function (event: Event): void var texture: BitmapMaterial = textures.getItemAt (loadedTextures) como BitmapMaterial; texture.bitmap = event.currentTarget.content.bitmapData; % = MAX_RESULTADOS;); loader.load (nueva URLRequest (imageURL));
Ambas funciones se toman casi línea por línea desde Build a Photo Viewer Using Flex y la API de Flickr. La única diferencia es que a medida que las imágenes se cargan desde Flickr, su BitmapData se asigna a la propiedad de mapa de bits de los objetos BitmapMaterial almacenados en la colección de texturas. Esto a su vez cambia la imagen que se muestra en los planos dentro de la escena 3D.
De esta manera podemos actualizar dinámicamente las fotos en 3D que se muestran con múltiples llamadas a la función de búsqueda de flickr cuando el usuario realiza una búsqueda desde la GUI principal.
Paso 23: La función bezierJump
La función bezierJump se llama repetidamente para saltar la cámara de una foto a la siguiente.
Función protegida bezierJump (): void
Las curvas de Bézier son una forma conveniente de mover suavemente la cámara a lo largo de la curva definida por solo 3 puntos de referencia: la posición actual de la cámara delante de una foto, una posición detrás de la cámara y el destino final frente a una nueva foto.
var randomPhoto: Mesh = photos.getItemAt (Math.random () * (MAX_RESULTS - 1)) como Mesh;
Primero se selecciona una nueva foto aleatoria para moverla de la colección de fotos.
Luego usamos TweenMax para mover la posición de la cámara (según lo definen las propiedades x, y, z) justo en frente de la posición de la foto de destino seleccionada al azar ...
retraso: 2,
después de un retraso inicial de 2 segundos (lo que significa que el usuario ve cada foto durante 2 segundos) ...
a lo largo de una curva bezier que está influenciada por un punto justo detrás de la posición actual de la cámara ...
onComplete: bezierJump);
llamar recursivamente a la función bezierJump una vez que se completa el movimiento.
De esta manera, la cámara se mueve a una foto, la ve durante 2 segundos, salta a la siguiente foto y comienza el proceso nuevamente. En general, las funciones de interpolación de llamadas recursivas son una excelente manera de generar scripts de movimientos en aplicaciones Flex.
Conclusión
Creo que estarás de acuerdo en que un álbum de fotos en 3D es una forma atractiva de mostrar fotos. Aunque usamos imágenes de Flickr disponibles públicamente como la fuente de las fotos aquí, esta aplicación podría modificarse fácilmente para mostrar sus propias imágenes, ya sea alojadas en Flickr o descargadas de otros lugares..
Espero que te haya gustado este tutorial, gracias por leerlo.!
Share
Accentsconagua
