Objetivo
En este post se explica todo el proceso necesario para crear la rotación de un objeto con una herramienta que genera el código flash llamada yofla.
A través de este ejemplo vamos a animar la rotación de una camiseta tal y como se muestra en el siguiente ejemplo:
Detecting Flash
Pasos
- Fotografiamos el objeto. Rotaremos el objeto de 5º en 5º aproximadamente. Cada 5º es una fotografía. Lo recomendable es realizar aproximadamente unas 72 fotografías que completen una vuelta. Conviene no tocar en absoluto ni el encuadre ni la iluminación en todo el reportaje fotográfico.
- Retocamos cada fotografía, ajustando niveles, curvas, saturación, contraste, tamaño de la imagen, etc... Yo recomiendo el uso de las acciones de photoshop para que este proceso resulte algo más rápido.
- Conforme vayamos teniendo las imágenes correctas, las iremos insertando en un nuevo documento de photoshop, una foto por capa. Es importante mantener el orden de captura de las imágenes así como alinearlas en el centro cuando las tengamos todas insertadas.
- Guardaremos cada capa como imagen para web y las nombraremos todas igual añadiéndoles un número al final, ejemplo: "camiseta-blanca-01.jpg". Importante respetar el orden de la animación a la hora de enumerar las fotos para que no existan saltos.
- Una vez tenemos todo el proceso fotográfico y de retoque finalizado, es hora de empezar a crear y configurar los archivos necesarios para la animación de las imágenes. Así pues vamos a la página de Yofla y descargamos los archivos para la animación. O bien haz click aquí para descargarte sólo los que vas a necesitar (el resto de la explicación se basará en la descarga de este archivo).
Nota: la animación es dispone de varias interfaces que puedes utilizar, esta todo en la página de Yofla, no obstante aquí se va a explicar sólo el tema aqua, en colores azules. - Descomprime el archivo que te acabas de descargar llamado "animacion-3D-tema-aqua.rar". Sube a tu servidor los archivos siguientes:
- expressInstall.swf
- rotateTool_aqua_400x350.swf
- swfobject21.js
- A continuación sube a tu servidor todas las imágenes que componen la animación, bien nombradas y enumeradas. Puedes utilizar las imágenes de este ejemplo para probar. Y como en el caso anterior, localiza la url de todas esas imágenes para después.
- El último archivo que necesitamos crear y subir es el archivo del tipo xml.
Para ello, Yofla nos proporciona una aplicación que nos ayudará a crearlo sin problemas. Puedes descargarte la aplicación aquí. Instalalá y ábrela para obtener el último archivo que necesitamos.
Es muy sencillo de utilizar, tan sólo tienes que indicar al programa la ruta donde están las imágenes con el botón Select folder.
Luego pulsa Load images...
...y finalmente Save xml.
Te aconsejo que abras el archivo creado como config.xml y revises que las rutas de las imágenes son correctas para que al subirlo todo al servidor no exista ningún problema. Si está todo correcto sube el archivo config.xml a tu servidor. Así ha quedado el mío para que os sirva de ejemplo:
<?xml version="1.0" encoding="UTF-8"?>
<config>
<configUtilityData pathToImages="C:\Users\laura\Desktop"/>
<settings>
<preloader image="first" showStartButton="false" preLoadImages="false" showLoadedImages="false"/>
<userInterface showPlayPauseButtons="false" showTogglePlayButton="true" showTogglePanButton="zoom" showToggleRotateButton="zoom" showResetButton="zoom" showArrows="true" showZoomButtons="false" defaultCursor="false" showScrollbar="false" showSpeedbar="false" showZoombar="false" zoomBarClickable="false" showActionControl="false"/>
<control dragSpeed="1" reverseDrag="false" reversePan="false" disableDrag="false" disableClick="false" disableMouseControl="false" playAfterDrag="false" enableSwing="true" maxZoom="200" zoomSteps="3" zoomInStopsRotation="true" zoomOutStartsRotation="false" clickZoomsIn="false" zoomSetsPan="true" mouseWheelZooms="false" rotateZoom="false" arrowInterval="500"/>
<rotation firstImage="1" rotate="true" rotateDirection="1" rotatePeriod="2" autoRestart="0" bounce="false" rotationAxis="vertical" disabledIfZoom="false"/>
<defaults>
<image shrinkToFit="true" zoomToFit="true" showTitle="true" showDescription="false"/>
<hotspot type="rectangle" width="40" height="30" showTitle="true">
<border type="double" color="#F00B0B" color2="#FFFFFF" width="1"/>
</hotspot>
</defaults>
</settings>
<hotspots/>
<images>
<image src="/themes/theproces/images/maillot-chica-05.jpg"/>
<image src="/themes/theproces/images/maillot-chica-06.jpg"/>
<image src="/themes/theproces/images/maillot-chica-07.jpg"/>
<image src="/themes/theproces/images/maillot-chica-08.jpg"/>
<image src="/themes/theproces/images/maillot-chica-09.jpg"/>
<image src="/themes/theproces/images/maillot-chica-10.jpg"/>
<image src="/themes/theproces/images/maillot-chica-11.jpg"/>
<image src="/themes/theproces/images/maillot-chica-12.jpg"/>
<image src="/themes/theproces/images/maillot-chica-13.jpg"/>
<image src="/themes/theproces/images/maillot-chica-14.jpg"/>
<image src="/themes/theproces/images/maillot-chica-15.jpg"/>
<image src="/themes/theproces/images/maillot-chica-16.jpg"/>
<image src="/themes/theproces/images/maillot-chica-17.jpg"/>
<image src="/themes/theproces/images/maillot-chica-18.jpg"/>
<image src="/themes/theproces/images/maillot-chica-19.jpg"/>
<image src="/themes/theproces/images/maillot-chica-20.jpg"/>
<image src="/themes/theproces/images/maillot-chica-21.jpg"/>
<image src="/themes/theproces/images/maillot-chica-22.jpg"/>
<image src="/themes/theproces/images/maillot-chica-23.jpg"/>
<image src="/themes/theproces/images/maillot-chica-24.jpg"/>
<image src="/themes/theproces/images/maillot-chica-25.jpg"/>
<image src="/themes/theproces/images/maillot-chica-26.jpg"/>
<image src="/themes/theproces/images/maillot-chica-27.jpg"/>
<image src="/themes/theproces/images/maillot-chica-28.jpg"/>
<image src="/themes/theproces/images/maillot-chica-29.jpg"/>
<image src="/themes/theproces/images/maillot-chica-30.jpg"/>
<image src="/themes/theproces/images/maillot-chica-31.jpg"/>
<image src="/themes/theproces/images/maillot-chica-32.jpg"/>
<image src="/themes/theproces/images/maillot-chica-33.jpg"/>
<image src="/themes/theproces/images/maillot-chica-34.jpg"/>
<image src="/themes/theproces/images/maillot-chica-35.jpg"/>
<image src="/themes/theproces/images/maillot-chica-36.jpg"/>
<image src="/themes/theproces/images/maillot-chica-37.jpg"/>
<image src="/themes/theproces/images/maillot-chica-38.jpg"/>
<image src="/themes/theproces/images/maillot-chica-39.jpg"/>
<image src="/themes/theproces/images/maillot-chica-40.jpg"/>
<image src="/themes/theproces/images/maillot-chica-41.jpg"/>
<image src="/themes/theproces/images/maillot-chica-42.jpg"/>
<image src="/themes/theproces/images/maillot-chica-43.jpg"/>
<image src="/themes/theproces/images/maillot-chica-44.jpg"/>
<image src="/themes/theproces/images/maillot-chica-45.jpg"/>
<image src="/themes/theproces/images/maillot-chica-46.jpg"/>
</images>
</config> - La última parte de la animación es copiar y pegar el código html que nos permitirá visualizarlo todo. Ahora es cuando hay que indicar las rutas de los archivos correctas donde pone /(ruta del archivo)/. El código es el siguiente:
<style>
#envelope{width: 400px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 40px; padding: 0px; background: white; font-family: Verdana, Arial, sans-serif; border-left: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD; border-right: 2px solid #AAAAAA; border-bottom: 2px solid #AAAAAA;}
#flashwrapper{ margin-left: auto; margin-right: auto; margin-top : 20px; text-align:center;}
</style>
<script type="text/javascript" src="/(ruta del archivo)/swfobject21.js"></script>
<div id="envelope">
<script type="text/javascript">
var flashvars = {};
flashvars.configFileUrl = "/(ruta del archivo)/config.xml";
var params = {};
params.scale = "noScale";
params.salign = "lt";
var attributes = {};
attributes.id = "myFlash";
attributes.name = "myFlash";
swfobject.embedSWF("/(ruta del archivo)/rotateTool_aqua_400x350.swf", "flashContent", "400", "350", "9.0.0","/(ruta del archivo)/expressInstall.swf", flashvars, params, attributes);
</script>
<div id="flashwrapper" style="width: 500px; height: 350px;">
<div id="flashContent">Detecting Flash</div>
</div>
</div>
Esto es todo. Esperamos que os sirva.
