Archivo de agosto de 2013

Subflash 2013

Publicado por Iván Gajate el 28 de agosto de 2013 en Eventos, Flash, JavaScript | Los comentarios están cerrados.

Otro año que vamos al Subflash!!

y este año… me toca dar una charla a mi 🙂

Ironías de la vida, tantos años yendo como flashero y ahora voy a hablar de Programación en JavaScript, la idea es seguir trabajando como en flash pero con JS 🙂

Corréd! que aún estáis a tiempo! Este año es en Ezcaray, un lugar precioso de La Rioja.

http://www.subflash.com/talleres/2013/

Sublime Text – Mis Snippets

Publicado por Iván Gajate el 25 de agosto de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Estos son mis snippets para el Sublime. Son pocos y muy básicos pero al final son los que mas uso 🙂

El atajo de teclado para insertarlos es su propio nombre (class, docu, clearfix…)

Para instalarlos, descomprimir el zip en la carpeta de los paquetes de usuario del Sublime:

En Mac {Usuario}/Library/Application Support/Sublime Text 2/Packages/User/

Descargar Snippets

AS3 – Gestos Multitouch

Publicado por Iván Gajate el 22 de agosto de 2013 en AS3, Flash | Los comentarios están cerrados.

Vaya librería maja que he encontrado para gestionar los eventos de multitouch de un dispositivo móvil. Con ella es super fácil hacer el zoom y arrastrar y rotar un clip de película:

https://github.com/fljot/Gestouch

Es tan fácil como esto:

var freeTransform:TransformGesture = new TransformGesture(myImage);
freeTransform.addEventListener(GestureEvent.GESTURE_BEGAN, onFreeTransform);
freeTransform.addEventListener(GestureEvent.GESTURE_CHANGED, onFreeTransform);
 
function onFreeTransform(event:GestureEvent):void {
	// move, rotate, scale — all at once for better performance!
	trace(freeTransform.offsetX, freeTransform.offsetY, freeTransform.rotation, freeTransform.scale);
}

AS3 – Bitmap to ByteArray y ByteArray to Bitmap

Publicado por Iván Gajate el 20 de agosto de 2013 en AS3, Flash | Los comentarios están cerrados.

He encontrado esta utillería muy maja para convertir un Bitmap en un ByteArray y viceversa.

Yo la he modificado un pelín para que acepte el smoothing como parámetro en la conversión a Bitmap, algo que me parece muy necesario:

 

package au.com.dashdigital.utils{
 
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.utils.ByteArray;
 
	public class BitmapSerialize {
 
		/**
		* Bitmap to ByteArray
		*/
		public static function encode(bitmap:Bitmap):ByteArray {
			bitmap.smoothing = true;
			var bytes:ByteArray = new ByteArray  ;
			bytes.writeUnsignedInt(bitmap.bitmapData.width);
			bytes.writeBytes(bitmap.bitmapData.getPixels(bitmap.bitmapData.rect));
			bytes.compress();
			return bytes;
		}
 
		/**
		* ByteArray to Bitmap
		*/
		public static function decode(bytes:ByteArray,pixelSnapping:String="auto",smoothing:Boolean=false):Bitmap {
			var bitmap:Bitmap = null;
			try {
				bytes.uncompress();
				var width:int = bytes.readUnsignedInt();
				var height:int = bytes.length - 4 / 4 / width;
				var bmd:BitmapData = new BitmapData(width,height,true,0);
				bmd.setPixels(bmd.rect,bytes);
				bitmap = new Bitmap(bmd,pixelSnapping,smoothing);
			} catch (e:Error) {
				trace('BitmapSerialize error uncompressing bytes');
			}
			return bitmap;
		}
 
 
	}
}

Tutoriales sobre Canvas

Publicado por Iván Gajate el 6 de agosto de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Muy concisos estos tutos sobre canvas en html5 

http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

AS3 – Encriptar una imagen con contraseña

Publicado por Iván Gajate el 5 de agosto de 2013 en AIR, AS3 | 1 comentario »

Podemos “guardar” una imagen como una cadena de texto.

Además, encriptar esa cadena con contraseña, y así solo con esa contraseña se podrá ver esa imagen aunque nos decompilen el swf.

Me parece muy interesante para hacer aplicaciones AIR donde queremos meter una imagen pero con la tranquilidad de que no está guardada en la biblioteca.

El ejemplo tiene dos archivos:

  1. El primero es para cargar una imagen, especificar la contraseña, y la convierte en nuestra cadena de texto.
    • Carga la imagen como ByteArray.
    • La codifica en Base64 para que mida menos.
    • La encripta con la contraseña.
  2. El segundo es para introducir esa cadena de texto (se puede haber guardado en una BBDD por ejemplo) y metiendo la contraseña correcta la convierte en imagen de nuevo y la muestra.
    • Recoge el hash encriptado.
    • Lo desencripta con la contraseña.
    • Lo decodifico de Base64.
    • Trata de convertir ese ByteArray en una imagen.

Para la encriptación he utilizado TEA que me permite desencriptar a partir de una contraseña. Es una encriptación bidireccional.

Para ello he utilizado la librería ASCrypt3, y se usa así.

El ejemplo es muy simple para que se entienda bien el ejercicio, y no se comprueba si la imagen es demasiado grande, o si ha habido algún error.

JS – Dibujar en Canvas

Publicado por Iván Gajate el 3 de agosto de 2013 en JavaScript | Los comentarios están cerrados.

Un ejemplo básico para dibujar en canvas.



Descargar zip

Además, como el canvas es transparente, podemos simular que se dibuja sobre nuestra página, tal y como hice en el banner de Cuenta tu imposible de adidas :).

Utilizo HammerJS para que funcione también en iPad y dispositivos móviles.

JS – Anchura de un elemento con jQuery

Publicado por Iván Gajate el 2 de agosto de 2013 en JavaScript | Los comentarios están cerrados.

Si queremos obtener la anchura de un elemento html con jQuery, pero tiene margins o paddings, el width normal no nos dará bien el resultado, tenemos que utilizar outerWidth pasándole como parámetro true:

var anchuraItem = jQuery('div').outerWidth(true);

Por supuesto también existe outerHeight(true)

Webflow

Publicado por Iván Gajate el 1 de agosto de 2013 en Desarrollo Web | Los comentarios están cerrados.

No se si este tipo de herramientas terminarán cuajando, pero buena pinta si que tiene para editar un site responsive de forma mas o menos fácil.

http://www.webflow.com/

Y aquí se puede jugar con la demo:

https://webflow.com/demo