Diseño Web Archivos | Develooping

Colorear parte de imagen con Canvas

develooping — Wed, 24 May 2017 16:44:21 +0000

Hace unos días publiqué una entrada en la que explicaba cómo hacer uso de la propiedad CSS mix-blend-mode para conseguir colorear parte de una imagen. Pero como suele ocurrir frecuentemente, los navegadores de Microsoft se han quedado atrás en la adopción de esa propiedad a pesar de ser una recomendación oficial, así que la solución planteada no funcionaba correctamente en ellos. En esta ocasión ampliaremos lo explicado anteriormente para ofrecer una solución que cubre todos los navegadores recientes.

Como ya teníamos una solución válida para la mayoría de los navegadores, lo primero que haremos es detectar si el navegador soporta los efectos de fusión de capas por CSS, para ofrecerle una solución alternativa en caso contrario. Y como siempre que queremos detectar si el navegador soporta o no determinada propiedad, lo mejor es echar mano de Modernizr.

Para construir nuestro script de detección de propiedades, seleccionamos “CSS Background Blend Mode” y pulsamos el botón “Build”. Eso es todo, no necesitamos detectar nada más. En nuestro caso lo hemos renombrado como modernizr-backgroundblend.js

La página

La idea es seguir conservando la versión anterior en aquellos navegadores en los que funciona, y ofrecer una alternativa a través de canvas para los demás. Es cierto que la opción basada en canvas funcionaría correctamente en todos los navegadores recientes, pero mantendremos también la versión anterior por razones de rendimiento.




	

	Change Image Color

Si lo comparas con la solución planteada en la entrada anterior verás que la parte

if (Modernizr.backgroundblendmode) {// mix-blend-mode supported

    	$('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');
   	 	$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
		$('select[name="colorpicker-shortlist"]').on('change', function() {
    		$('#tshirt_layer_2').css('background-color', $('select[name="colorpicker-shortlist"]').val());
  		});	

}

es esencialmente idéntica y que todo lo nuevo ha sido añadido si no se cumple la condición (else).
También verás que hemos cambiado $(document).ready(function() { por $(window).load(function() {
Esto es así porque necesitamos asegurarnos de que las imágenes han sido cargadas para poder hacer operaciones con ellas.

La programación para crear un efecto multiply aplicando un color a una imagen se basa directamente en lo explicado en esta página añadiéndole algunas variaciones. En primer lugar lo hemos “empaquetado” en una función (redraw), y le hemos añadido una nueva función (hexToRgb) para convertir los valores devueltos por el selector de colores al formato de array [r,g,b] que necesita.

Como necesitamos poder aplicar la función múltiples veces, dentro de la misma usamos la expresión jQuery $('#tshirt_container canvas').remove(); para eliminar el elemento canvas antes de volverlo a recrear.

else {// mix-blend-mode not-supported (use canvas)

        function hexToRgb(hex) {       
            var color_array = new Object();
            hex = hex.replace(/[^0-9A-F]/gi, '');
    		var bigint = parseInt(hex, 16);
    		color_array[0] = (bigint >> 16) & 255;
    		color_array[1] = (bigint >> 8) & 255;
    		color_array[2] = bigint & 255;
    		return color_array;
		}

        $('select[name="colorpicker-shortlist"]').simplecolorpicker('selectColor', '#7bd148');

        $('select[name="colorpicker-shortlist"]').on('change', function() {

    		multiplyColor = hexToRgb($('select[name="colorpicker-shortlist"]').val());

    		redraw();

  		});

  		function redraw(){

  			imageBottom = document.getElementById('tshirt_layer_1');
  			$('#tshirt_container canvas').remove(); 
			canvas = document.createElement('canvas');
			canvas.width = imageBottom.width;
			canvas.height = imageBottom.height;
			imageBottom.parentNode.insertBefore(canvas, imageBottom);

			ctx = canvas.getContext('2d');
			ctx.drawImage(imageBottom, 0, 0);

			// Get the CanvasPixelArray from the given coordinates.
			imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			pix = imgData.data;

			//multiplyColor = [80, 120, 10];
			multiplyColor = hexToRgb($('select[name="colorpicker-shortlist"]').val());

	    	// Loop over each pixel and change the color.
			for (var i = 0, n = pix.length; i < n; i += 4) {
    			pix[i  ] = multiply(multiplyColor[0], pix[i  ]); // red
    			pix[i+1] = multiply(multiplyColor[1], pix[i+1]); // green
    			pix[i+2] = multiply(multiplyColor[2], pix[i+2]); // blue
    			// pix[i+3] is alpha channel (ignored)
			}
			// Draw the result on the canvas
			ctx.putImageData(imgData, 0, 0);

			function multiply(topValue, bottomValue){
  				return topValue * bottomValue / 255;
			}

		}

		redraw();

	}

El CSS

Modernizr también introduce las clases .backgroundblendmode y .no-backgroundblendmode para poder realizar selecciones en nuestro CSS basados en la detección de esta propiedad. Nuestro CSS queda prácticamente idéntico al del ejemplo anterior, pero aprovechamos para añadir la propiedad CSS mix-blen-mode: multiply solo en el caso de estar soportada.

.simplecolorpicker{
 max-width: 300px;
}
.simplecolorpicker span.color[data-selected]:after {
  content: '\2714'; /* Ok/check mark */
  width: 12px;
  display: block;
  padding-left: 4px
}

/*t-shirt*/
#tshirt_container{
 position: relative;
 width: 300px;
 height: 450px;
}

#tshirt_container .tshirt_layer, #tshirt_container canvas{
 position: absolute;
 display: table;
  width: 300px;
 height: 450px;
}

#tshirt_layer_1{
 z-index: 1;
}

#tshirt_layer_2{
	z-index: 3;
}
.backgroundblendmode #tshirt_layer_2 { 
	-o-mix-blend-mode: multiply;
	-ms-mix-blend-mode: multiply;
	-moz-mix-blend-mode: multiply;
	mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
}

.no-backgroundblendmode  #tshirt_layer_2  { 
/*styles if background blend mode is not supported*/ 
}

#tshirt_container canvas{
 	z-index: 2;
}

El resultado

Aquí tienes el resultado de todo el código anterior. Puedes usar el botón “Descargar” al final de la página para bajarte una copia con todos los scripts, estilos y archivos necesarios.

Descargar

La entrada Colorear parte de imagen con Canvas aparece primero en Develooping.

Cambiar el color de parte de una imagen

develooping — Fri, 19 May 2017 10:17:55 +0000

Si has usado Photoshop o algún otro programa de tratamiento de imágenes, puede que hayas empleado los modos de fusión de capas para conseguir colorear determinadas zonas de una imagen. Con el uso de una máscara para seleccionar la forma y una capa de color en modo “multiply” podemos colorear el área que deseemos. Ahora, con algunas de las nuevas propiedades de CSS3 podemos replicar este mismo efecto de forma dinámica en una página web.

En la imagen superior puedes ver un ejemplo del uso de las capas que permitiría conseguir este resultado. Solo cambiando el color de la capa en modo “multiply” vemos cambiar el color de la camiseta, colocada en una capa inferior.

Al igual que Photoshop, los principales navegadores soportan la fusión de capas en modo “multiply”. La única excepción importante la constituyen los navegadores de Microsoft, aunque los desarrolladores de la compañía ya han indicado que lo tienen bajo estudio y posiblemente lo implementarán para principios de 2018. En este estado de cosas ya no es descabellado plantearse hacer uso de ese modo de mezcla, ya que tiene un soporte mayoritario.

En esta ocasión vamos a centrarnos en cómo conseguir este efecto en los navegadores que soportan la propiedad CSS mix-blend-mode, que como ya he dicho son la mayoría, y más adelante ofreceremos una solución alternativa para otros navegadores.

Ponle la camiseta

Lo primero que hemos hecho es colocar la imagen del chico con la camiseta como un png con el hueco de la camiseta transparente, y debajo la camiseta sin color.

Usamos las posiciones y la propiedad z-index para colocar una sobre otra, y a la imagen del chico le añadimos la propiedad mix-blend-mode con el valor multiply.

#tshirt_container{
 position: relative;
 width: 300px;
 height: 450px;
}

#tshirt_container .tshirt_layer{
 position: absolute;
 display: table;
  width: 300px;
 height: 450px;
}

#tshirt_layer_1{
 z-index: 1;
}

#tshirt_layer_2{
	z-index: 2;
	-o-mix-blend-mode: multiply;
	-ms-mix-blend-mode: multiply;
	-moz-mix-blend-mode: multiply;
	mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
}

Dale color

Llegados a este punto, ya podemos comprobar que con solo añadirle un color de fondo (background-color) a la imagen superior (#tshirt_layer_2), podemos colorear la camiseta.

#tshirt_layer_2{
	background-color: #7bd148;
}

También podemos usar un script que nos permita asignar dinámicamente el color de fondo a partir de una selección por parte del usuario. Existen multitud de selectores de color basados en jQuery o directamente en JavaScript que realizan esta tarea y puedes elegir el que mejor se adapte al uso que le vayas a dar.

Yo particularmente he pensado en su aplicación en una tienda, en la que un producto puede tener un número limitado de variaciones de color. Para ello he usado jQuery Simple Color Picker.

Deja que seleccionen

No hay problema si has decidido usar cualquier otro selector de color, ya que todo lo que hay que conseguir es permitir al usuario escoger un color y asignar la propiedad background-color de la imagen principal según el valor escogido.

Si vas a usar jQuery Simple Color Picker nos queda poco para tener nuestro selector funcionando. En su propia página de GitHub se muestra cómo hacerlo. Empezaremos por añadir un “select” con las opciones que necesitemos.

Solo nos quedaría cargar el script (ten presente que es dependiente de jQuery) e indicarle qué hacer

Puedes encontrar una explicación más detallada en la propia página del plugin. No nos vamos a extender más en él ya que para nuestro propósito podríamos haber usado cualquier otro.

El resultado

Veamos el resultado obtenido al ponerlo todo junto en una aplicación práctica de uso genérico.

La economía del método es clarísima. Hemos usado dos imágenes en lugar de trece. El dibujo de la camiseta, en este caso, forma parte de la misma imagen png del chico, pero no sería difícil usar una imagen independiente que también cargara dinámicamente en función de la selección del usuario.

¿Qué nos queda?

Bien, como ya sugerí en el párrafo anterior, basándose en estas técnicas se podrían implementar todas las variaciones de una tienda de camisetas usando como base muy pocas imágenes y colocando encima el dibujo seleccionado.

En los casos en los que hay muchas variaciones de color la ventaja es más que evidente. En el ejemplo de abajo vemos que solo dos imágenes sustituyen a 24 variaciones.

Sin embargo, como dije con anterioridad, Explorer y Edge no producen el efecto deseado por su falta de soporte a la propiedad mix-blend-mode. Ambos cambiarán el color de fondo de la imagen según seleccionemos, pero se comportará de forma opaca y no se fusionará con la imagen inferior. Aunque se ha anunciado un futuro soporte por parte de Edge, en la actualidad esta es la situación.

Por ahora vamos a dejarlo aquí. Más adelante explicaremos la manera de conseguir el mismo efecto en esos navegadores. Para los que no puedan esperar puedo anticiparles que la solución cosiste en realizar un filtro multiply a través de una función aplicada sobre un elemento canvas.

Mientras encuentro tiempo para elaborar esa exlicación, con el siguiente botón puedes descargar todos los archivos necesarios para poner en práctica lo que te he contado en esta página. Espero que te sea de utilidad.

Descargar

Actualización: Si estás interesado en una nueva versión que funciona en todos los navegadores, visita nuestra nueva entrada: “Colorear parte de una imagen con Canvas“

La entrada Cambiar el color de parte de una imagen aparece primero en Develooping.

De SEO

develooping — Tue, 18 Apr 2017 16:33:32 +0000

Si, lo has adivinado. Este texto habla de SEO. Es verdad que internet está plagadita de páginas que tratan el tema, que aconsejan estrategias para ganar posiciones en los resultados de las búsquedas, que explican lo que Google considera correcto y lo que no, lo que podría ayudarte a escalar puestos y lo que podría perjudicarte…

Y no es difícil adivinar que este texto también habla de DESEO. Porque todo el que deposita ilusión en un proyecto desea verlo funcionar. Pero cuidado, porque muchos parecen empeñados en crearte una crisis existencial diciéndote que no existes si no estás en internet, o en la primera página de Google, o en Facebook o en cualquier otra plataforma social… y claro, supongo que querrás existir.

Google solo devuelve 10 resultados en su primera página, así que existir te va a costar lo tuyo.

¿Quieres ser de los primeros? Sé único.

Pretender alcanzar las primeras posiciones de Google, si acabas de llegar y perteneces a un sector con una competencia normal es, cuando menos, iluso.

Es verdad que encontrarás a “profesionales” que se aprovecharán de tu deseo y te dirán lo que quieres escuchar, prometiéndote colocar tu página en los primeros puestos. Y no es que esto no pueda conseguirse, pero en internet, como en la vida misma, el camino para destacar en algo consiste en diferenciarse de la competencia, aplicar una buena estrategia enfocada al resultado y dedicar tiempo y esfuerzo en crear contenidos únicos y útiles.

Desconfía de los que dicen que hacen SEO y crean contenidos de pésima calidad y nula utilidad, enfocados exclusivamente a recopilar palabras clave con la errónea idea de que eso mejorará la posición en los buscadores. El algoritmo de Google, cambiante y en continua evolución, es cada vez más “inteligente” y capaz de detectar y penalizar este tipo de contenido. Si bien todavía está lejos de ser perfecto, está claro cual es su tendencia.

¿Quieres que lleguen a ti? Llega tú a ellos.

Puedes hacer lo que quieras, pero mi consejo es que no crees contenidos porque piensas que Google los va a valorar, sino porque piensas que los van a valorar tus visitantes. De nada sirve aparecer en las primeras posiciones si estos enlaces conducen a contenidos de bajísima calidad y van a provocar que tu visitante prefiera saltar a la siguiente opción que le ha dado el buscador.

Piensa en tus visitantes y crea contenidos que les interese y les ayude. Sé natural y evita el texto escrito para buscadores. Los títulos y las negritas sirven fundamentalmente para estructurar el texto y reforzar las ideas principales, no para acumular palabras clave.

Al final son las personas las que validarán tu web y van a usar tus servicios o comprar tus productos. Miedo me da pensar en cómo quedaría “Cien años de soledad”, por poner un ejemplo, si lo retocara algún “experto” en SEO.

¿Quieres que te localicen? Encuéntrate.

La naturaleza de tu negocio influirá directamente sobre las estrategias de comunicación que necesitarás plantear, y también sobre las estrategias de posicionamiento. Ambas deberían ser fruto de un análisis profundo, ya que no existe un método universal aplicable a cualquier tipo de web, empresa o actividad.

Si alguien te ofrece algo parecido a “un paquete básico de posicionamiento por XX euros” te aconsejo que lo mires y remires bien ( en especial si XX no es un número muy alto). Ya he visto demasiadas veces como malas estrategias SEO han supuesto un perjuicio para la web que debían ayudar a posicionar.

Piensa en el producto que ofreces, dónde está tu público y qué busca. Imaginemos tres ejemplos de negocios localizados en Málaga: un empresa dedicada al alquiler turístico vacacional, una tienda online que vende perfumes y cosméticos, y un restaurante con servicio a domicilio. Aunque las tres están ubicadas en la misma ciudad van destinadas a públicos muy diferentes. La primera no tiene clientes locales y debería esforzarse en llegar a gente de fuera, especialmente extranjeros. La segunda, en nuestro ejemplo, pretende alcanzar al público nacional. Los clientes de la tercera residen en la localidad. Es bastante obvio que cada una necesita una estrategia diferente enfocada a sus clientes.

¿Quieres resultados? Analízalos a fondo.

El orden en que Google devuelve los resultados de una búsqueda depende de muchos factores. Entre ellos, Google usa la geolocalización para priorizar resultados cercanos. También tu historial de búsquedas ayuda a obtener conclusiones sobre tus preferencias y ofrecerte resultados más acordes a ellas. Ambos comportamientos pueden resultar útiles pero en algunas ocasiones pueden inducir a engaños.

Imagina la empresa de alquiler turístico del apartado anterior. Supongamos que su “especialista SEO” le muestra que ha logrado que aparezca una página en una posición aceptable buscando los términos “Holiday apartment in Malaga” (recuerda que la mayoría de sus clientes potenciales son extranjeros). Lo que parece un logro podría ser solo una ilusión.

En mi caso he hecho una sencilla prueba con esa misma búsqueda. Primero he buscado normalmente en Google, conservando mi historial de búsquedas y usando un navegador que, como la inmensa mayoría, reporta mi localización. Luego me he fijado en alguna empresa local que salga en la segunda o tercera página (lo siento, en este sector los resultados más relevantes están copados por los grandes portales).

Después he realizado exactamente la misma búsqueda usando el navegador Tor y el buscador StartPage (que consulta en Google pero no guarda datos). Curiosamente el resultado en el que me fijé anteriormente ha desaparecido. No hay ni la menor señal de la página, y ocurre lo mismo desde cualquier país extranjero. Si la empresa quería llegar a visitantes de otros países, los resultados que se obtienen cuando realiza una búsqueda local solo le están confundiendo.

Como decía al principio, encontrarás miles de textos más o menos técnicos sobre SEO. Mi intención con éste es solo aclarar algunas dudas frecuentes y, si puede ser, evitar problemas a las muchísimas personas que seguramente están interesadas en enteder algo más sobre el posicionamiento en buscadores y prefieren que no les hablen con siglas, jerga especializada, términos técnicos o palabrería SEO.

La entrada De SEO aparece primero en Develooping.

Vídeos de fondo en iOS (con autoplay)

develooping — Fri, 01 Apr 2016 08:08:03 +0000

Últimamente habrás encontrado más de un sitio (como nuestra página principal) que usa vídeos como fondos.

Usando la marca de HTML5 y su atributo autoplay, es posible hacer que empiecen de forma automática sin necesidad de acción por parte del usuario. Con el CSS adecuado puede colocarse como fondo y ajustarse al ancho de la pantalla.

Hasta aquí todo bien. Sin embargo, habrás visto que esas páginas suelen sustituir ese vídeo por una imagen fija en sus versiones para móvil. Esto se debe principalmente a que Apple y Google, entendiendo que el pobrecito usuario de móvil podría disponer de un consumo de datos más limitado que el de ordenadores, han desactivado la posibilidad de que los vídeos comiencen automáticamente para evitarles sorpresas y gastos innecesarios. Y en el caso de iOS, además, el vídeo ni siquiera se reproduce dentro de la página.

No es que quiera contradecir los filantrópicos principios que han motivado a ambas compañías a tomar tal decisión, pero ya sabéis que hay gente que no soporta bien los límites impuestos. Buscando una solución, encontré el código de Stanko en GitHub (no, no vende tabaco), que permite reproducir vídeos inline en móviles sobre un elemento . Quede claro que todo el mérito es suyo y que yo solo me he limitado a modificar su código para mis propósitos.

Que empiece ya, que el público se va

Ok, vayamos al grano. Como suelen decir, en la vida todo tiene solución. Así que empecemos por el principio y veamos el código estándar para insertar un vídeo con HTML5.


	
	
	
	Tu navegador no soporta video HTML5.

Ya que vamos a usarla como fondo, añadiremos a la marca los atributos autoplay, para que empiece automáticamente, loop para que reproduzca en bucle, y muted para eliminar el sonido. He puesto el vídeo en los tres formatos estándares para aumentar el número de navegadores alcanzados, si bien, hoy en día la práctica totalidad respondería perfectamente solo con un archivo mp4 como puedes ver en caniuse.com. Por ese motivo, una vez mostrado el ejemplo genérico, a partir de aquí usaré solamente el archivo mp4.
Añadimos también el atributo poster para mostrar una imagen estática mientras el vídeo carga y un poquito de CSS para hacer que el vídeo se adapte al elemento que lo contiene.

video{
  width: 100%;
}

Como resultado del código anterior obtenemos el siguiente vídeo.
Tu navegador no soporta video HTML5.
Si estás visitando esta página con un ordenador, verás que el vídeo se reproduce automáticamente en bucle. Pero si estás usando un móvil la cosa cambia. En otra ocasión nos ocuparemos de Android. Ahora, como dice el título, veamos qué pasa en iOS y cómo resolverlo.

iOS: ni inline, ni autoplay

Pues si, una pena. Si nos estás viendo desde un iPhone o un iPad, en lugar de un vídeo en movimiento verás una imagen estática con una marca encima esperando a que la pulses para ponerse en marcha. Y si pulsas sobre ella la cosa empeora. El vídeo no se reproduce en la página, sino que se abre a toda pantalla. Recuerda que nuestro propósito inicial era usarlo como fondo, así que este comportamiento, por mucha carita de niña buena que ponga el vídeo, no nos vale.
Afortunadamente, tal como indiqué antes, nuestro amigo Stanko ha creado el estupendo script HTML canvas video player que nos permite reproducir un video de forma inline en un iAparato, y con pequeñas modificaciones conseguiremos que funcione para nuestro propósito.
Su funcionamiento es sencillo, aunque requiere alguna marca más que un vídeo HTML5 estándar. Para empezar colocamos el vídeo, un elemento canvas y un par de div anidados que servirán de barra de tiempo, y lo metemos a su vez en otro div para tenerlo localizado.


  
	
	Tu navegador no soporta video HTML5.

Después cargamos el archivo JavaScript

E insertamos las instrucciones para que funcione

Si lo único que querías era poder reproducir vídeos inline en iPhones y iPads puedes bajártelo y obtener más información sobre sus opciones y métodos aquí.
Pero si lo que quieres es usarlo para poner un vídeo de fondo, necesitará unas pequeñas modificaciones y seguir leyendo un poquito más.

Un poquito más a fondo

Como indicaba, nuestro propósito es poder usar el vídeo como fondo, así que hay pequeños detalles que conviene modificar para ajustar el script a nuestras necesidades.
Para empezar, una prestación del script original es hacer que se pare o reanude la reproducción cada vez que se hace click sobre el vídeo. Un comportamiento que no nos viene bien para usar el vídeo como fondo. El script original tampoco permite hacer loops, y es posible que queramos que nuestro fondo sea un bucle perpetuo.
Para añadir estas dos prestaciones he añadido dos nuevas opciones: makeLoop y pauseOnClick

En esta nueva versión modificada, makeLoop es un valor booleano que permite indicar si queremos que el vídeo se ejecute en bucle. A pauseOnClick puede asignársele el valor false para evitar pausar el vídeo cuando se detecta un click.
Hay que aclarar que, al igual que en la versión inicial, para que el autoplay funcione es necesario desactivar el audio. Eso no debería preocuparnos, ya que lo queremos como imagen de fondo.
Por último, recordemos que no hay problemas con ordenadores de escritorio, así que mejor ponemos un condicional que haga que éstos sigan usando el vídeo HTML5 y los iCacharros su versión corriendo sobre canvas. Así, nos quedaría lo siguiente

¿El fin?

Bueno, tanto como el fin no. La versión mostrada es mejorable y, por ahora, no plantea qué haremos con Android, algo que dejaremos para otra ocasión. Poniéndolo todo junto, la página nos queda como sigue




	
	
	

	HTML canvas video player

	



		
			
				
				Your browser does not support HTML5 video.
			

			
			
			Look at me

Pulsa aquí para ver en otra ventana el resultado de lo anterior (si tienes uno, puedes mirarlo en tu iPhone), con el CSS correspondiente y el script de Stanko modificado.
También puedes bajártelo todo juntito, con un vídeo de prueba y el script original pulsando aquí

DESCARGAR

La entrada Vídeos de fondo en iOS (con autoplay) aparece primero en Develooping.

Flash revive como HTML5 gracias a Swiffy

develooping — Mon, 29 Feb 2016 23:37:52 +0000

Si llevas ya algunos años recorriendo internet quizás recuerdes la moda de las intros en Flash. No había web que no tuviera una animación “chula” y llenita de efectos que había que saltarse para poder ir al contenido. Aunque el pobrecito Flash realmente no tenía la culpa. Algunos desarrolladores, entre los que me incluyo, nos esforzábamos por hacer entender que, como todas las tecnologías, era buena siempre que se usara de manera correcta y se aprovecharan sus ventajas y prestaciones. Eran los tiempos en los que no teníamos HTML5, ni CSS3 y las posibilidades de Flash y su ActionScript estaban muy por delante de lo que podía hacerse con otras herramientas. A pesar de ello, se utilizó mayormente para dificultar la usabilidad y el acceso a la información.

¿La muerte de Flash?

La irrupción masiva de móviles y tablets, con su escaso o nulo soporte para Flash, y las nuevas posibilidades que incorporaban los últimos estándares hizo que muchos terminaran dando por muerta esta tecnología. De hecho, incluso yo mismo llevaba ya muchísimo tiempo sin hacer nada con Flash hasta que hoy he descubierto Swiffy de Google, un conversor de Flash a HTML5 que puede hacer que tus archivos SWF lleguen a mayor audiencia y funcionen en todos los dispositivos modernos.

Aunque Swiffy está lejos de ser perfecto, es ideal para convertir animaciones, pequeños juegos o banners con los que generalmente hace un buen trabajo, pero puede fallar con proyectos complejos o que hagan uso de prestaciones no soportadas. Además, es incapaz de convertir archivos superiores a 1MB lo que supone una gran limitación.

Si tienes archivos SWF de menos de 1MB, puedes convertirlos a HTML5 subiéndolo a la página de Swiffy. Si dispones de Adobe Flash también puedes bajarte e instalar la extensión que te permitirá guardar tus archivos .fla como HTML5. Hay que tener presente que la extensión tiene la misma limitación de 1MB y que no es compatible con la versión Creative Cloud de Flash. Y aunque animaciones y proyectos simples pueden convertirse sin más, en proyectos más complejos podría ser necesario readaptar algo de código para “su nueva vida” o replantear las interacciones para su uso con dispositivos táctiles.

Al usar cualquiera de las dos versiones obtendremos una página .html compatible con todos los dispositivos, que incluye los scripts necesarios para emular el proyecto Flash mediante JavaScript.

Un pequeño juego de ejemplo

Para que veas las posibilidades de esta tecnología aquí te dejo una versión del juego clásico snake que debería funcionar en cualquier dispositivo y navegador reciente.

Actualización: Google ha abandonado el proyecto Swifty y su herramienta de conversión on-line, aunque sigue dando soporte a los contenidos creados anteriormente. Si dispones de alguna versión de Flash Creative Cloud con la extensión Swifty aún podrás seguir creando contenidos compatibles HTML5. Si no es así, la única alternativa actual es usar Adobe Animate.

La entrada Flash revive como HTML5 gracias a Swiffy aparece primero en Develooping.