martinpulido.com - Blog sobre programacion front, xhtml, css, estándares y accesibilidad web.

Pautas para integrar Photoshop y Flash
1ª Parte: Obteniendo capas de Adobe Photoshop en Flash
La primera vez que importas un archivo por capas de Photoshop (PSD) en un documento Flash (FLA), te sorprenderás con el resultado. Flash Professional 8 y todas las versiones previas no saben qué hacer con los archivos PSD. Lo único que puede importar Flash es una versión agrupada del archivo, y solo es posible si tienes instalado QuictTime en tu ordenador. Afortunadamente, hay numerosas formas de trabajo que puedes usar si quieres tus capas de Photoshop en Flash. Aquí hay tres de ellas:

a) Photoshop a PNG

Cada capa en el archivo PSD necesita ser exportada desde Photoshop como un archivo PNG separado para preservar la transparencia porque guardando las capas como JPEGs o GIFs los dejaríamos con un fondo opaco blanco. Puedes automatizar este proceso con la secuencia “Archivo > Exportar > Capas como Archivos” en ImageReady CS2. Cuendo estés listo para importar la serie de PNGs a Flash, estarán todoas como imágenes separadas pero en el mismo fotograma en la misma capa. Para conseguir que cada imagen aparezca en su propia capa dentro de la línea de tiempo de Flash, escoje ‘Modificar > Línea de Tiempo > Distribuir en Capas’

La única pega sobre esta técnica es que habrá unca caja alrededor de tus imágenes cuyo tamaño será el del documento Photoshop original, algo que hará que seleccionar las imágenes en el Escenario sea muy dificil.

b) ImageReady a SWF

Mejor que exportar archivos PNG individuales de Photoshop o ImageReady, puedes también exportar un archivo SWF desde ImageReady CS2. Elige ‘Archivo > Exportar > Macromedia Flash SWF’. Muchas de las veces, querrás mantener la opción de Preservar Apariencia desactivada. Finalizará con un archivo SWF que contendrá todas las capas como imágenes individuales.

Una ventaja de este método es que las capas de texto de Photoshop pueden ser convertidas a objetos de texto de Flash que siguen siendo vectoriales y pueden ser editados en Flash. La desventaja de este método es que mientras que la caja mientras que limitación de la caja descrita en el método Photoshop al PNG se resuelve, las imágenes se guardan con nombres genéricos de símbolos en lugar de mantener los nombres de las capas de Photoshop. Si quieres renombrar los símbolos en la Biblioteca puedes hacerlo fácilmente identificándolos por nombre más tarde.

c) PSD2FLA

Este es un plugin de exportación para Photoshop que exporta archivos multicapa PSD a un archivo FLA con todas las capas intactas, con cada capa de Photoshop como capa separada en la Línea de Tiempo de Flash. Mejor todavía, los nombres de capa de Photoshop se mantienen tanto en las imágenes como en sus correspondientes capas, y con el tamaño de las cajas correcto. El plugin trabaja con Photoshop 4.0 y posteriores, y está altamente recomendado si te propones maquetar para Flash usando Photoshop como algo normal. (PSD2FLA cuesta 89 U$D y está disponible desde Media Lab.)

2ª Parte: Pautas para trabajar con imágenes basadas en píxel en Flash.
a) No redimiensionar las imágenes en Flash.
Siempre que traes imágenes a Flash te propones usarlas a su tamaño actual (dimensiones píxel).
Cuando escalas una imagen en el Escenario de Flash, ésta será redimensionada e interpolada. Photoshop hace este trabajo mucho mejor que flash cuando se trata de redimensionar. La única excepción a esta regla es cuando tienes que animar la escala de una imagen. Por supuesto, en el escenario, siempre es mejor traer la imagen de Photoshop al tamaño más grande que se va a utilizar en la animación que pretendemos hacer.

b) La resolución no importa
Muchos diseñadores web todavía creen que sus gráficos para la web tienen que tener una resolución de 72ppp. Resulta que la resolución solo es relevante cuando quieres imprimir un gráfico. Cuando trabajas con un gráfico que va a ser mostrado en un monitor de cualquier tipo, solo necesitas preocuparte por las dimensiones de píxeles, no la resolución. ¿No me crees?. Prueba esto: Abre el cuadro de diálogo de Nuevo Documento en Photoshop y cambia las dimensiones a 800 x 600 píxeles. Entonces cambia la resolución de 72ppp a 600ppp. Observa como el tamaño del archivo no cambia en todo?

c) Usa Bicúbico
Muchas de las imágenes que te propones usar en tus proyectos Flash necesitarán ser resampleadas a menor tamaño con el comando Tamaño de Imagen en Photoshop. El cuadro de diálogo está dividido en dos partes: una “planta de arriba” para diseñadores web y una “planta de abajo” para diseñadores de impresión. Observa….¿qué no hay en el área de la planta de arriba?
Correcto, no hay ningún campo de Resolución. Si no puedes seleccionar los campos ancho o alto en la zona de la “planta de arriba”, el checkbox de Redimensionar Imagen está desmarcado.
Márcalo, y ahora podrás usar el comando de Tamaño de Imagen para redimensionar una imagen.
Como recuerdo, la redimensión cambia el número de píxeles de una imagen (y el tamaño del archivo). Redimensionar significa que estás cambiando las dimensiones de impresión y resolución sin cambiar el actual número de píxeles de la imagen. El “algoritmo de redimensionamiento” por defecto en Photoshop es Bicúbico. Para mejores resultados, utilizar “Bicúbico Mas Enfocado” cuando redimensionemos más pequeña una imagen. Bicúbico tiende a hacer las imágenes un poco más suaves mientras que Bicúbico Mas Enfocado preserva más los detalles originales.

d) Mantener la rejilla de píxel.
Utilizar siempre los valores enteros de píxel para las posiciones X e Y de tus imágenes porque muchas veces puedes acabar con un extraño “pixel-shifting” en el archivo SWF exportado si tus imágenes no están alineadas en la rejilla de píxeles en Flash. Puedes forzar a Flash a ayudar a ajustar a la rejilla eligiendo ‘Ver > Ajuste > Ajustar a Píxeles’. Elige este comando en el menú antes de importar imágenes al Escenario porque no se puede deshacer. Esto es, si una imagen no está en la rejilla de píxel antes que elijas Ajustar a Píxeles, Flash automáticamente no ajustará la imagen en la rejilla. Necesitarás seleccionar la imagen y cambiar los valores de X e Y manualmente en el panel de Propiedades. Una vez que este comando ha sido activado, sin embargo, puedes usar las flechas de tu teclado para empujar las imágenes en el Escenario en incrementos de un píxel y saber que seguirán alineadas en la rejilla.

3ª Parte: Controlar la optimización de mapa de bits en Flash
a) Configuración de Publicación
Por defecto, cuando importas un archivo PNG a Flash, no exportará el archivo resultante SWF como un PNG; exportará el archivo SWF como JPEG. Porque JPEG es un formato de archivo de baja compresión, la calidad de imagen será baja. La configuración de calidad del JPEG por defecto utilizada para todos los PNGs importados se puede cambiar. Elige ‘Archivo > Configuración de Publicación’, selecciona la pestaña Flash y cambiar la calidad del JPEG. Mira la sección ‘Compresión Por Objeto’ al final de este artículo para más información sobre cómo controlar la configuración de optimización para cada mapa de bits independientemente.

b) Importar JPEGs para mejores resultados

El motor de optimización JPEG en Flash no está tan bien como el comando Salvar para Web de Photoshop. Lograrás resultados mucho mejores y más predecibles al guardar tus imágenes como JPEGs desde Photoshop, ImageReade o Fireworks. Mientras esto significa más trabajo para tí, las buenas noticias son que un JPEG importado a Flash da un archivo SWF resultante exactamente como es.

c) Compresión Por Objeto
Siempre puedes invalidar como Flash optimiza los mapa de bits importados en una base por objeto. Para hacerlo, haz doble clic en la imagen que quiere cambiar en la Biblioteca para abrir el cuadro de diálogo de Propiedades del Mapa de Bits. Si seleccionas un archivo JPEG, puedes forzar a recomprimirlo a una baja calidad y reducir aun más el tamaño del archivo. Si seleccionas ‘Archivo PNG’, puedes forzar a exportarlo como PNG asi la calidad no cambia, o puedes elegir una calidad JPEG como configuración por defecto especificada en la pestaña Flash dentro de Configuración de Publicación.