Siete días con Titanium – día 4 – Media – Imágenes, películas y sonidos

Deberíamos tratar en este tutorial la parte de medios de Appcelerator. Este incluye imágenes – muestra y captura con la cámara – y cómo reproducir películas y sonidos.

Mostrar imágenes con Appcelerator

Para mostrar una imagen usamos el ImageView. El ImageView tiene algunos argumentos simples, como cualquier vista en el framework Titanium. No las repetiré, a excepción del más importante. Obviamente la fuente si la imagen es la que estamos interesados establecer en el argumento image, y acepta archivos locales y remotos.

var the_img = Titanium.UI.createImage({ 
image:"test.jpg"
})

Cómo trata Titanium la ruta para las imágenes locales? La ruta de los archivos son simplemente relativas a la carpeta Resources. Así que puedes usar cualquier carpeta/subcarpeta debajo de la Resources para localizar las imágenes de tu aplicación.

Para las imágenes remotas un simple URL a la imagen será suficiente.

var the_img = Titanium.UI.createImage({ 
image:"http://example.com/test.png"
})

Titanium acepta todos los formatos que los Sistemas Operativos soportan.

Cómo tomar fotos usando la cámara?

El método que tienes que usar es Titanium.Media.showCamera que mostrará la interfaz del sistema operativo para tomar fotos y exponiendo los 3 eventos posibles (éxito, cancelar, error) a nosotros para que podamos decidir que hacer luego.

La función disparada por el evento éxito recibe como argumento un objeto que contiene el medio (la imagen en sí misma) y el ancho y alto de la misma. Usando esta data, puedes crear un ImageView y añadirlo a tu ventana por ejemplo.

Debajo se encuentra un ejemplo:

var win = Titanium.UI.currentWindow;
Titanium.Media.showCamera({
 
	success:function(event)
	{
		var image = event.media;
 
		Ti.API.debug('Our type was: '+event.mediaType);
		if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
		{
			var imageView = Ti.UI.createImageView({width:win.width,height:win.height,image:event.media});
			win.add(imageView);  
		}
		else
		{
			alert("got the wrong type back ="+event.mediaType);
		}
	},
	cancel:function()
	{
               alert('You canceled the action.');
	},
	error:function(error)
	{
		// create alert
		var a = Titanium.UI.createAlertDialog({title:'Camera'});
 
		// set message
		if (error.code == Titanium.Media.NO_CAMERA)
		{
			a.setMessage('Please run this test on device');
		}
		else
		{
			a.setMessage('Unexpected error: ' + error.code);
		}
 
		// show alert
		a.show();
	},
	saveToPhotoGallery:true,
	allowEditing:true,
	mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO],
});

Como los ejemplos anteriores, este se encuentra en Kitchensink proveído por Titanium.

Sonidos Básicos con Appcelerator

Hablaré sólo acerca de los sonidos básicos que se localizan en el dispositivo y que pueden ser usados como sonidos de juegos o sonidos en tu aplicación.

Los sonidos son cargados por el método

var sound = Titanium.Media.createSound({
	url:'cricket.wav'
});

Desde aquí puedes reproducir, detener, pausar, reiniciar y establecer el volumen del sonido con los métodos presentados en la página de documentación de Titanium.Media.Sound.

Cada sonido tiene sus eventos, el más notable es complete que se dispara cuando el sonido termina de reproducirse.

Si el archivo de sonido es grande, deberías colocar preload en true cuando construyas el sonido. Si no lo haces, el sonido no iniciará instantáneamente cuando llames al método play.

Una cosa a la que necesitas prestarle atención es a liberar el sonido si no lo necesitas más. Por ejemplo si reproduces un sonido de introducción sólo cuando el usuario inicie la aplicación, luego de que el sonido finalice, tienes que soltarlo para liberar algo de memoria en el dispositivo.

var intro_sound = Titanium.Media.createSound({
	url:'cricket.wav',
	preload:true
});
 
intro_sound.addEventListener('complete', function(e){ intro_sound.release(); });
intro_sound.play();
//... código

El código de arriba reproduce el sonido y lo retrocede automáticamente cuando termine.

Reproducir Videos

Usar videos es similar a usar sonidos. Tendrás que crear un reproductor usando el método Titanium.Media.createVideoPlayer.

 
var videoURL = 'http://movies.apple.com/media/us/ipad/2010/tours/apple-ipad-video-us-20100127_r848-9cie.mov';
 
var activeMovie = Titanium.Media.createVideoPlayer({
	url: videoURL,
	width:300,
	height:200,
	top:50,
	left:50,
	backgroundColor:'#0f0'
});
 
view.add(activeMovie);
activeMovie.play();

El URL del reproductor de vídeo puede ser un archivo local o remoto que tienes que tener cuidado de que lo soporte el Sistema Operativo.

En la página de documentación de videoplayer tienes más información sobre las propiedades, métodos y eventos soportados por este control.

Algo notable es que el SDK > 3.2 es que puedes integrar el reproductor de vídeo en cualquier vista y reproducirlo aquí sin necesidad de hacerlo en pantalla completa tal como se muestra en la siguiente captura de pantalla:

reproductor video para iphone

Eso es todo por hoy, nos vemos en el Día 5.

5 thoughts on “Siete días con Titanium – día 4 – Media – Imágenes, películas y sonidos”

  1. 🙁 Dificil de decir, Daniel tiene el día 5 como Draft desde hace 2 meses – creo que necesita un empujón o una cerveza muy grande para acabarlo. Tambien es bastante ocupado con sus proyectos y con una ponencia y esto le ocupa demasiado tiempo ultimamente. Gracias por recordarle que tiene responsabilidades con vosotros tambien :))

  2. ¿Algún avance con los siguientes capítulos de esta serie?

    ¿O de plano nos olvidamos de ellos?

    Saludos desde México. 🙂

Comments are closed.