The day 4 comes very late because it was a very busy period so I had no time to continue the tutorials.
Ok, so we should treat in this tutorial the media part of Appcelerator. This includes images – display and capture them with the camera – and how to play movie and sounds.

Display images with Appcelerator

To display an image we use the ImageView. The image view has some simple arguments, like any view in the Titanium framework. I won’t repeat them except for the important one. Obviously the source if the image is the one we are interested in set by the image argument, and accepts local or remote files.

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

How does Titanium treat the path for local images? The path of the files are simply relative to the Resources folder. So you can use any folder/subfolder under the Resources one to locate the images of your application.

For the remote images a simple url to the image it’s enough.

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

Titanium accepts all the formats the targeted OS supports.

How to take pictures using the camera?

The method you have to use is Titanium.Media.showCamera that will display the OS interface for taking photos and expose the 3 possible events (success, cancel, error) to us, so we can decide what to do next.

The function triggered by the success event receives as argument an object containing the media (the image itself) and the width and height of it. Using this data you can create a ImageView and add it to your window for example.

Below is a simple example:

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],
});

Like the previous examples this one is found in the Kitchensink provided by Titanium.

Basic sounds with Appcelerator

I will talk only about the basic sounds that are located on the device and can be used as games sounds or as sounds in your application.

The sounds are loaded by the method

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

From here you can play, stop, pause, reset, and set the volume of the sound with the methods presented in the documentation page of Titanium.Media.Sound.

Each sound has its events, the most notable being the complete one that triggers when the sound finished to play.

If the sound file is big you should use the preload set to true when you build the sound. If you don’t do this the sound won’t start instantly when you call the play method.

One thing that you need to pay attention to is to release the sound if you don’t need it anymore. For example you play an intro sound only when the user starts the app, then after the sounds completes, you have to release it to free some memory on the device.

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

The above code will play the sound and autorelease it when it ends.

Play Videos

Using videos is similar with using sounds. You will have to create a player using the Titanium.Media.createVideoPlayer method.

 
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();

The url of the videoplayer can be a remote or a local file but you have to take care to be supported by the OS.

On the videoplayer documentation page you will find more about the properties, methods and events supported by this control.

A notable thing is that in the SDK > 3.2 you can embed the videoplayer in any view and play it here without the need of making it fullscreen as in the next screenshot:

That’s it for today, see you on Day 5.

Check the Spanish version of this post:
Siete días con Titanium – día 4 – Media – Imágenes, películas y sonidos