Hacer un portafolio con Flash y XML

Hoy quiero mostrarles como hacer un portafolio estético, fácil, rápido y con scrollbar. Si no puedes ver bien las imágenes dales click para ampliarlas. (Necesitas estar logueado en L4C.me)

Elementos Visuales

Primero abrimos un documento de Actionscript 2. Después cambiamos la resolución a 1280 x 1024 (es un consejo, si quieres cambiarlo no importa )


Para la parte del scrollbar, tomaremos prestada de algún lugar de Clab, del cual no me acuerdo, la pueden descargar acá: ScrollBar by SomeBody

Abrimos el archivo scroll2.fla


Y de la librería copiamos el Movie Clip llamado scroll


Y lo copiamos en nuestro documento


Para detallar mas el scroll podemos cambiarle el color al background



Bueno ahora solo tenemos que meternos dentro del scroll y redimensionar la mascara y las partes del scroll, puede que esto nos lleve algo de tiempo, pero intenta hasta que lo logres. También necesitamos redimensionar el contenido y alinearlo con la mascara, para esto vamos al MovieClip conteudo, en el que daremos mayor anchura al campo de texto, la misma que la mascara con una diferencia de unos cuantos pixeles 5 a cada lado esta muy bien y arriba unos 7, de tal forma que quede mas o menos así:


Ahora vamos a ir a el movie clip conteudo, en el cual situaremos un movie clip que crearemos llamado tc, en el cual vamos a poner un campo de texto dinámico con las siguientes especificaciones:



En resumen las especificaciones son:

• Nombre de instancia titu
  
• De una sola linea
  
• Antia-alias for readability
  
• De un tamaño grande
  
• Y en embed:
  

Duplica el campo de texto pero esta ves las especificaciones van a ser:

• Nombre de instancia descr
  
• Multilinea
  
• Anti-alias for readability
  
• De un tamaño mediano
  
• Y en embed lo mismo que el anterior

Duplicalo de nuevo y las especificaciones de este tercero son:

• Nombre de instancia urldir
  
• De una sola linea
  
• Anti-alias for readability
  
• De un tamaño pequeño
  
• Y en embed lo mismo que el anterior

Nos salimos del MovieClip tc, y le ponemos de nombre de instancia tc.


En el movie clip conteudo, agregaremos un movie clip vacío al que llamaremos mc y de nombre de instancia le pondremos mc.

Elementos del Código

Ahora en el movie clip conteudo, crearemos un actions layer, al cual le pondremos en el primer frame el siguiente código:

Código :

var xm:XML = new XML();
xm.ignoreWhite = true;
var spacer:Number = 360;
var urls:Array = new Array();
var titu:Array = new Array();
var desc:Array = new Array();
var url:Array = new Array();
xm.onLoad = function(success) {
   var photos:Array = this.firstChild.childNodes;
   for(i=0;i<photos.length;i++) {
      urls.push(photos[i].attributes.url);
      var newY:Number = i * (holder._height + spacer);
      holder.duplicateMovieClip("holder" +i, i, {_y:newY});
      loadMovie(urls[i], "holder"+i);
      var dupTc:MovieClip = tc.duplicateMovieClip("tc" +i, 100 + i, {_y:newY});
      titu.push(photos[i].attributes.titu);
      desc.push(photos[i].attributes.desc);
      url.push(photos[i].attributes.urldir);
      dupTc.titu.text = titu[i];
      dupTc.descr.text = desc[i];
      dupTc.urldir.text = url[i];
   }
}
var aleatorio:Number = Math.round(Math.random()*20000-30000);
//Con la siguiente linea funcionara de manera local(para quitar el texto en forma de comentario quilate los dos //)
//xm.load("lost.xml");
//Con la siguiente linea funcionara cuando la hayas subido a Internet
xm.load("lost.xml?"+aleatorio);

De manera que quedara así:


En este punto, ya tenemos el sistema creado, pero nos falta el xml del cual se saca la información, la estructura es esta:

Código :

<portafolio>
<trabajo titu="Mi Primer Trabajo" url="t1.jpg" desc="el primer trabajo de mi portafolio" urldir="miprimert.com"/>
<trabajo titu="Mi Segundo Trabajo" url="t2.jpg" desc="el segundo trabajo de mi portafolio" urldir="misegundot.com"/>
<trabajo titu="Mi Tercer Trabajo" url="t3.jpg" desc="el tercer trabajo de mi portafolio" urldir="mitercert.com"/>
<trabajo titu="Mi Cuarto Trabajo" url="t4.jpg" desc="el cuarto trabajo de mi portafolio" urldir="micuartot.com"/>
</portafolio>

Lo puedes crear desde bloc de notas de windows y guardarlo de esta manera (recuerda que debes guardarlo en la misma carpeta donde guardaste el documento flash):


Ahora si pruebas la película (ctrl + enter), listo ya tienes la galería, pero no muestra las fotos, porque no están entonces las pondremos, el mejor tamaño es 418 x 334 (si estas haciéndolo con una resolución de 1280 x 1024), recuerda que debes guardar las imágenes con los nombres que pusiste en el xml y en la carpeta en la que guardaste el xml.



Y buenas noticias, prueba de nuevo la película (ctrl + enter), y veras tu nuevo portafolio cargado mediante xml.

Información adicional

• Ejemplo
  
• Archivos
  

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.