Para quién no haya leído todavía el primer volumen o desconozca en absoluto de lo que estoy hablando, le pongo en antecedentes:

Durante los primeros compases de los 80, se gestó una generación de jóvenes talentos que, mamando de los primeros ordenadores que veiamos a nivel usuario en España (Spectrum, Amstrad, Commodore, MSX), decidieron dedicarse a esto de la programación de videojuegos. Estamos hablando de empresas como Dinamic, Made in Spain, Ópera, Topo… De juegos como Abu Simbel, Game Over, Sir Fred, Livingstone supongo, Survivor… Y de distribuidoras como Erbe, Zigurat…

Durante estos 2 volumenes de los que consta Ocho Quilates nos iremos sumergiendo en la historia de estas empresas, que comenzaron en la buhardilla de su casa y que llegaron a dominar el mercado del videojuego español, incluso exportando muchos de sus éxitos fuera de España.
Lectura totalmente recomendable.

La entrada La Edad de Oro del software español se publicó primero en Programación Multimedia.

Creando los estilos CSS

El truco está en utilizar la propiedad text-shadow varias veces, cambiando los valores de posición de la sombra en horizontal-vertical en -1px y 1px con todas las posibles combinaciones, y el valor blur a 0. En la práctica esto es así:

.borde {
    color: #000;

    text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
   -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

Esta clase CSS nos añade un borde blanco de 1px a la tipografía de un texto de color negro. Por desgracia si aumentamos el tamaño del borde creado a 2px o valores superiores, los resultados no son los esperados.

Conclusión

Este Tip no soluciona del todo el asunto de crear bordes mediante CSS por su limitación. Esperemos que la propiedad text-outline esté pronto disponible.

La entrada CSS3: Añadir borde a una tipografía se publicó primero en Programación Multimedia.

Crear proyecto y añadir materiales

Creamos un nuevo proyecto en Xcode a partir de la plantilla Single View Aplication y mantendremos marcadas las casillas de las opciones Use Storyboard y Use Automatic Reference Counting.

Añadiremos a continuación todo los materiales gráficos que va a necesitar la aplicación al proyecto de Xcode. Para el ejemplo se muestran 4 celdas en la tabla, con lo que tendremos 4 imágenes para la tabla, además de otra imagen de separador y otra de fondo. Además para la vista detalle tendremos la versión más grande de las anteriores 4 imágenes (todas estos materiales con sus correspondientes versiones retina ).

Agregamos el controlador de la vista detalle y su XIB

Vamos a añadir al proyecto la clase DetalleGaleriaViewController que es subclase de UIViewController y será la clase que controlará la vista detalle. Marcamos la opción de crear XIB. Este .xib lo podremos usar posteriormente como archivo base de otras vistas detalle.

Preparamos Storyboard y XIB

Abrid MainStoryboard y vereis que se ha creado un View Controller por defecto en nuestra escena. Borramos este View Controller y añadimos una instancia de Navigation Controller, que a su vez ya lleva asociada una instancia de un nuevo View Controller. Asegúrate que Navigation Controller está marcado como is initial View Controller y elige en la vista del View Controller, nuestra clase ViewController como clase base de esta vista.

Añadimos ahora una instancia de Image View y de Scroll View en la Vista de nuestro View Controller y cambia el título a Tableless en las propiedades de Navigation Item. A Image View le asociamos la imagen del fondo (fondo_vacio.jpg) y a Scroll View lo conectamos como un outlet en la clase ViewController que llamaremos scrollView. No nos olvidemos de sintetizar la propiedad en ViewController.m.

Exactamente de igual forma que hemos hecho en el Storyboard vamos a proceder con el archivo DetalleGaleriaViewController.xib. Añadimos Image View y de Scroll View en la Vista. A Image View le asociamos la imagen del fondo (fondo_vacio.jpg) y a Scroll View lo conectamos como un outlet en la clase DetalleGaleriaViewController que llamaremos scrollView. No nos olvidemos de sintetizar la propiedad en DetalleGaleriaViewController.m.

Código de ViewController

Os dejo el código completo de ViewController y lo comento. Ya os adelanto que solamente vamos a crear 2 métodos nuevos que son initialSetup y buttonPressed y que por sus nombres ya podreis adivinar lo que van a hacer. De propiedades tan solo scrollView.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController 

@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;

-(void) initialSetup;
-(void) buttonPressed:(id)sender;

@end

Declaramos el método initialSetup que lo llamaremos desde viewDidLoad para disponer todos los elementos en la pantalla. el método buttonPressed será llamado cada vez que pulsemos sobre una de las imágenes/botones a modo de celdas que componen nuestra tabla/listado.

#import "ViewController.h"
#import "DetalleGaleriaViewController.h"

@implementation ViewController
@synthesize scrollView;

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [self initialSetup];
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
   

}

- (void)viewDidUnload
{
    [self setScrollView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
	[super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
	[super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
   return (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown );
}



//*****************************************************************



-(void) initialSetup
{
    
    
    // Custom initialization
    
    NSMutableArray* textosArray = [NSMutableArray arrayWithObjects:  @"LIMA", @"PASEO EN BICICLETA", @"PUESTA DE SOL", @"COCHE ABANDONADO", nil];
    CGFloat  margenY=20.0;
    CGFloat  margenMiniatura=30.0;
    
    CGFloat  margenInicialYSeparador=144.0;
    CGFloat  margenDeSeparador=124.0;
    
    CGFloat  margenInicialYTexto=128.0;
    CGFloat  margenDeTexto=108.0;
    
    
    
    
    for (int i=0; i< [textosArray count]; i++) {
        
        //**********miniatura***********************************
        NSString *fileName= [NSString stringWithFormat:@"min_galeria_00%i.jpg",i];
        UIImage *miniatura = [[UIImage imageNamed:fileName] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
        
        
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 
        button.frame=CGRectMake( (scrollView.frame.size.width - miniatura.size.width)/2, margenY, miniatura.size.width, miniatura.size.height);
        
        // Set the button's image  
        [button setBackgroundImage:miniatura forState:UIControlStateNormal]; 
        button.tag=i;
        
        // Attach an event  
        [button addTarget:self action:@selector(buttonPressed:)  
         forControlEvents:UIControlEventTouchUpInside];  
            
        
        //*************separador**********************************
        NSString *separadorName= [NSString stringWithFormat:@"separador.jpg"];
        UIImage *separador = [[UIImage imageNamed:separadorName] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
        UIImageView* separadorView = [[UIImageView alloc] initWithImage:separador];

        
        separadorView.frame = CGRectMake( 0, margenInicialYSeparador, separadorView.frame.size.width, separadorView.frame.size.height);
        
        
        //*******************texto***********************
        
        UILabel *label =  [[UILabel alloc]  initWithFrame: CGRectMake(button.frame.origin.x, margenInicialYTexto, button.frame.size.width, 14)];
        [label setBackgroundColor:[UIColor clearColor ]];
        label.numberOfLines = 1;
        label.textColor=[[UIColor alloc] initWithRed:164.0 / 255 green:164.0 / 255 blue:164.0 / 255 alpha:1.0];
        
        UIFont* font=[UIFont systemFontOfSize:12.0];
        
        [label setFont:font];
        label.text = [textosArray objectAtIndex:i];
        
        
        //*******************************************
        margenY= button.frame.origin.y + button.frame.size.height  + margenMiniatura ;
        margenInicialYSeparador= margenY  + margenDeSeparador ;
        margenInicialYTexto= margenY  + margenDeTexto ;
        
        
        [self.scrollView addSubview:label];
        [self.scrollView addSubview:button];  
        [self.scrollView addSubview:separadorView];
        
        
    }
    
   
    [self.scrollView setContentSize:CGSizeMake(320,margenY + 8)];
    
}

-(void) buttonPressed: (id)sender
{
    //NSLog(@"pulsa: %i",[(UIButton*)sender tag]);
    
    DetalleGaleriaViewController *detalleView = [[DetalleGaleriaViewController alloc] initWithNibName:@"DetalleGaleriaViewController" bundle:nil] ;
    detalleView.tag=[(UIButton*)sender tag];
    
    [self.navigationController pushViewController:detalleView animated:YES];
    
    
}


@end

Dentro de viewDidLoad hemos puesto la llamada a initialSetup. En este método tenemos un Array llamado textosArray donde van a ir los textos de los títulos de nuestro listado. Aprovecharemos este Array para ir maquetando cada una de las partes que tienen nuestras celdas, que van a tener: Un título, un botón (con una imagen de fondo) y un separador (una imagen). Después tenemos una serie de variables que empiezan con margen… y que debemos inicializar con los valores que consideremos oportunos.

 // Custom initialization
    
    NSMutableArray* textosArray = [NSMutableArray arrayWithObjects:  @"LIMA", @"PASEO EN BICICLETA", @"PUESTA DE SOL", @"COCHE ABANDONADO", nil];
    CGFloat  margenY=20.0;
    CGFloat  margenMiniatura=30.0;
    
    CGFloat  margenInicialYSeparador=144.0;
    CGFloat  margenDeSeparador=124.0;
    
    CGFloat  margenInicialYTexto=128.0;
    CGFloat  margenDeTexto=108.0;

Después de la inicialización recorremos textosArray. Las imágenes que van a ir dentro de los botones están nombradas de tal forma que, al recorrer el Array, las podemos llamar fácilmente. Usaremos instancias de UIImage, UIButton y UIImageView y UILabel para disponer los elementos y posteriormente añadirlos como subvistas de scrollView.
Es importante observar como a la propiedad tag de nuestra instancia de UIButton le damos el valor del iterador i del Array y como le añadimos en el evento UIControlEventTouchUpInside una llamada a la función buttonPressed.

      button.tag=i;
     
      // Attach an event  
      [button addTarget:self action:@selector(buttonPressed:)  
      forControlEvents:UIControlEventTouchUpInside];  

Cuando se termina de recorrer el array por completo, seteamos el tamaño de scrollView convenientemente para que contenga todas nuestras celdas.

 
[self.scrollView setContentSize:CGSizeMake(320,margenY + 8)];

A continuación definimos el método buttonPressed que está ligado al evento de pulsar alguno de los botones de nuestras celdas. Es muy sencillo lo que hacemos: Creamos una instancia de DetalleGaleriaViewController llamada detalleView. Esta clase va a tener una propiedad llamada tag y le damos el valor que ya le dimos al botón en initialSetup. Por último mandamos un mensaje a self.navigationController para colocar detalleView como controlador activo. No olvideis importar DetalleGaleriaViewController.h.

 
-(void) buttonPressed: (id)sender
{
    
    DetalleGaleriaViewController *detalleView = [[DetalleGaleriaViewController alloc] initWithNibName:@"DetalleGaleriaViewController" bundle:nil] ;
    detalleView.tag=[(UIButton*)sender tag];   
    [self.navigationController pushViewController:detalleView animated:YES];
     
}

Código de DetalleGaleriaViewController

 
#import <UIKit/UIKit.h>

@interface DetalleGaleriaViewController : UIViewController 

@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;

@property  NSInteger tag;
-(void)initialSetup;


@end

Tenemos 2 propiedades, las ya comentadas scrollView y tag. Tan solo un método, initialSetup. De tag y el valor que le pasemos desde ViewController, dependerá el mostrar una u otra de las imágenes convenientemente nombradas que ya existen en nuestro proyecto.

 
#import "DetalleGaleriaViewController.h"

@implementation DetalleGaleriaViewController
@synthesize scrollView;
@synthesize tag;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self initialSetup];
}

- (void)viewDidUnload
{
    [self setScrollView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown );
}


//***********************************************************************************************

-(void)initialSetup
{
    
    NSString *fileName= [NSString stringWithFormat:@"max_galeria_00%i.jpg",self.tag];
   
    UIImage *foto = [UIImage imageNamed:fileName] ;
    
    UIImageView* fotoView = [[UIImageView alloc] initWithImage:foto];
    
       
    [self.scrollView setContentSize: CGSizeMake(fotoView.frame.size.width, fotoView.frame.size.height)];
    
	    
    
    [self.scrollView setScrollEnabled:YES];
    
    [self.scrollView addSubview:fotoView];
    
    
    


}

@end

llamanos a initialSetup desde viewDidLoad. Dentro de este método vamos a recuperar nuestra imagen nombrada de acuerdo al valor de tag y la añadimos a scrollView como subvista.

Conclusión

Hemos creado una vista de tabla de datos maquetada a nuestro antojo y una vista de detalle en la que se muestra una imagen dentro de un Scroll View; además no hemos usado UITableView ni UITableViewCell.
Para el ejemplo he limitado la orientación a UIInterfaceOrientationPortrait y UIInterfaceOrientationPortraitUpsideDown para no complicar en exceso el tutorial. Espero os sea de utilidad, podeis descargar el proyecto de Xcode completo:

La entrada iOS: Crear vista de tabla personalizada sin usar UITableView se publicó primero en Programación Multimedia.

Código php en tu template de wordpress

Abre la carpeta de tu template, localiza el archivo functions.php y ábrelo con tu editor; éste archivo está presente en la mayoría de las plantillas de wordpress.
A continuación dejo el código y posteriormente comento algunas cosas importantes:

function shortcode_recientes($atts, $content = null, $code) {

//Uso: [recientes  limite="3" longitud_titulo="50" longitud_desc="50" thumbnail="1" tamano="50"]
//thumbnail="1" muestra imagen destacada. thumbnail="0" no muestra la imagen
	extract(shortcode_atts(array(
		'limite' => 5,
		'longitud_titulo' => 50,
		'longitud_desc' => 80,		
		'thumbnail' => false,
		'tamano' => 65
		
		
	), $atts));

	
	
   	$query = array('showposts' => $limite,  'orderby'=> 'date', 'order'=>'DESC', 'post_status' => 'publish', 'ignore_sticky_posts' => 1);

	
	$q = new WP_Query($query);
	if ($q->have_posts()) :
	$salida  = '';
	$salida .= '<ul class="listado-recientes">';



	/* comienzo while */
	while ($q->have_posts()) : $q->the_post();
	$salida .= '<li>';
	if ( has_post_thumbnail() && $thumbnail == true):
	$salida	.= '<a href="'.get_permalink().'" title="'.sprintf( "Enlace permanente a %s", get_the_title() ).'">';
	$salida	.= get_the_post_thumbnail(get_the_id(),array($tamano,$tamano),array('title'=>get_the_title(),'alt'=>get_the_title(),'class'=>'imageborder alignleft'));
	$salida	.= '</a>';
	endif;

	$salida	.= '<div class="posts_content">';
	$salida	.= '<a href="'.get_permalink().'" title="'.sprintf( "Enlace permanente a %s", get_the_title() ).'">';
	$salida	.= wp_html_excerpt (get_the_title(), $longitud_titulo );
	$salida	.= '</a>';
	$salida	.= '<p>';

        /* Calculo las categorías  */

        $categories = get_the_category();
        $separator = ' ';
        $output = '';
        if($categories){
                foreach($categories as $category) {
                        $output .= $category->cat_name.''.$separator;
                }
                $salida	.= trim($output, $separator);
        }
	$salida	.= '</p>';
        /* Escribo fecha  */
	$salida	.= '<p>'.get_the_time().'</p>';

        /* Escribo extracto  */	

	$excerpt = get_the_excerpt();
	$salida	.= ($excerpt)?'<p>'.wp_html_excerpt($excerpt,$longitud_desc).'...</p>':'';

	

	$salida	.= '</div>';
	$salida .= '</li>';
	endwhile;
	wp_reset_query();
	/* fin while */



	$salida .= '</ul>';
	endif;

	return $salida;

}
add_shortcode('recientes',    'shortcode_recientes');

Podemos configurar los siguientes valores:

• limite – número máximo de entradas a mostrar
• longitud_titulo – Longitud máxima de caracteres del título
• longitud_desc – Longitud máxima de caracteres de la descripción
• thumbnail – Mostrar thumbnail: valores 1 o 0 (mostrar o no mostrar)
• tamano – Tamaño de la miniatura en píxeles (será cuadrada)

Si además queremos meter el shortcode en un widget lo tenemos muy fácil, añadimos esta línea al final del código anterior:

//para insertarlo en un widget del sidebar
add_filter('widget_text', 'do_shortcode');

Con esto vamos a poder incluir shortcodes en el widget de Texto o HTML arbitrario que viene por defecto en wordpress.

Insertar el shortcode

Podemos utilizar el shortcode en entradas, páginas o en el widget de texto como comentábamos antes. Un ejemplo de uso puede ser:

[recientes  limite="3" longitud_titulo="50" longitud_desc="50" thumbnail="1" tamano="50"]

Conclusión

Éste código puede ser ámpliamente mejorado y es fácil aumentar sus posibilidades, como por ejemplo con:

• Dar la posibilidad de mostrar entradas recientes o relacionadas
• Mostrar solamente las entradas de unas determinadas categorías
• Mostrar fecha, autor, etc…

…Estamos abiertos a vuestras aportaciones.

La entrada PHP: Entradas recientes con imagen destacada en WordPress via Shortcode se publicó primero en Programación Multimedia.

A meter código php en tu template de wordpress

Abre la carpeta de tu template, localiza el archivo functions.php y ábrelo con tu editor; éste archivo esta presente en la mayoría de las plantillas de wordpress.
A continuación dejo exactamente el mismo código que tiene esta página para mostrar los detalles del tutorial y posteriormente lo explico:

function detalle_func( $atts ) {
	extract( shortcode_atts( array(
		'tecnologia' => 'iOS',
		'dificultad' => 'Principiante',
		'tiempo' => '30 - 60 minutos',
	), $atts ) );
	
	$salida='<div class="tut_bottom">
    <div class="tutorial_details">
    <p><span>Detalles del tutorial</span></p>
    <ul>
      <li><strong>Tecnología: </strong>'.$tecnologia.'</li><li><strong>Dificultad: </strong>'.$dificultad.'</li><li><strong>Tiempo de realización: </strong>'.$tiempo.'</li>    </ul>
  </div>
</div>';

	return $salida;
}
add_shortcode( 'detalle', 'detalle_func' );

Lo más importante es la línea donde se definen los nombres de las variables del array y se les da un valor por defecto. Podemos poner todos los atributos que queramos y les damos nombres y valor para recogerlos luego:

extract( shortcode_atts( array(
		'tecnologia' => 'iOS',
		'dificultad' => 'Principiante',
		'tiempo' => '30 - 60 minutos',
	), $atts ) );

Luego con las variables $tecnologia, $dificultad y $tiempo creamos una salida html para mostrar lo que queremos y lo guardamos en $salida:

$salida='<div class="tut_bottom">
    <div class="tutorial_details">
    <p><span>Detalles del tutorial</span></p>
    <ul>
      <li><strong>Tecnología: </strong>'.$tecnologia.'</li><li><strong>Dificultad: </strong>'.$dificultad.'</li><li><strong>Tiempo de realización: </strong>'.$tiempo.'</li>    </ul>
  </div>
</div>';
return $salida;

No te olvides de devolver el html de la variable $salida. Por último notifica a wordpress que has creado un shortcode:

add_shortcode( 'detalle', 'detalle_func' );

Creando las css

Ya está creado el shortcode. El siguiente paso sería añadir un poco de css. Tu plantilla debería tener un archivo llamado style.css. Ábrelo e introduce las css a tu antojo. Para este ejemplo yo he utilizado las siguientes:

.tut_bottom {
    float: left;    
    padding: 0 ;
    width: 660px;
}

.tut_bottom .tutorial_details {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    
}

.tutorial_details {
    color: #5B6D79;
    float: left;
    font-size: 1em;
    padding-top: 0px;
    width: 100%;
    border-bottom: 1px dotted #8AA7B9;
}

.tutorial_details p{
    color:#5B6D79;
    font-family: "WinterthurCondensedRegular",Georgia,Times,sans-serif;
    font-size:26px;
    background: url("images/fdo_titular_pagina.jpg") repeat-x scroll left bottom transparent;
    line-height: 28px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.tutorial_details p span{

    background: url("images/pm-general-bk.jpg") repeat-x scroll left center transparent;
    padding-right: 10px;
}

Insertar tu shortcode recién creado en una entrada

Ahora vamos a utilizar nuestro shortcode al comienzo de este post para mostrar los detalles de este tutorial. El código sería el siguiente:

[detalle tecnologia="PHP" dificultad="Nivel básico" tiempo="15 minutos"]

Conclusión

Ya habeis visto que es muy fácil crear un shortcode en wordpress. Observad que no hay que poner etiquetas de apertura y cierre (como los de crear columnas por ejemplo), tan solo encerrar con corchetes tal y como os he mostrado.

La entrada PHP: Crear un Shortcode personalizado para WordPress se publicó primero en Programación Multimedia.

Comenzando con los materiales a usar

Vamos a necesitar 2 imágenes para este tutorial de 1024x768px. La primera será con los puntos numerados y la segunda con el dibujo con color. Las podeis descargar aquí:

Una vez tengamos el material creamos en flash un nuevo documento ActionScript3 y le damos al escenario un tamaño de 1024x768px. Añadimos 2 capas (dibujo trazado y dibujo sin trazar) y añadimos en cada una la imagen que le corresponde, centrándolas en el escenario.

La imagen del dibujo coloreado la vamos a convertir en símbolo de Movieclip y le pondremos nombre de instancia dibujo_trazado_mc para poder mostrarla y ocultarla mediante AS3.

Preparando el resto del escenario y Movieclips

Bien vamos a la línea de tiempo y creamos ya todas las capas que vamos a necesitar: as, puntos, botón repetir. En la capa as va a haber 2 keyframe en los que va a ir todo el código. llamaremos a estos keyframes/fotogramas inicio y repetir.

Ahora creamos un botón para repetir la actividad cuando la completemos. Yo he optado por un Movieclip sencillo, lo he colocado en la capa botón repetir a la altura del keyframe repetir y le he puesto de nombre de instancia repetirActividad_mc.

Seguidamente vamos a crear un símbolo de botón consistente en un círculo de color rojo que será cada uno de los puntos a seguir para hacer el dibujo. Creo el símbolo de botón con el primer fotograma vacío para que sea invisible pero tenga hit-area.

En la capa puntos vamos a colocar una instancia de este símbolo del punto en cada uno de los puntos que tiene el dibujo (20 en este caso) y los vamos a nombrar como nombre de instancia de la siguiente manera: mc_pto20, mc_pto21, mc_pto22… Colocándolos como corresponda numéricamente de acuerdo con el dibujo.

Metiéndole AS3

Llegados a este punto la mécanica del programa es sencilla. Tenemos 2 variables de configuración que son el punto inicial y el punto final y un array arrClips que se va a llenar solito con todos esos moviclips que hemos metido en la capa puntos. También tenemos otro array auxiliar, arrClipsUsados, que medirá los nombres de los clips usados. Estas son las variables más importantes. Tenemos como vereis otras variables más que vienen comentadas en el código que os dejo a continuación y que está todo explicado en su línea correspondiente. Solamente tenemos código en los keyframes inicio y repetir.

import  flash.display.MovieClip;
import  flash.events.MouseEvent;

//******INICIALIZACIÓN******************

var numInicialPunto:Number=20;//número inicial de punto
var numFinalPunto:Number=39;//número final de punto
var arrClips:Array=new Array();//array de todos los clips de puntos
var arrClipsUsados:Array=new Array(); // Para almacenar SOLO EL NOMBRE de cada clip pulsado, cuando tenga la misma longitud que arrClips significa que hemos pulsado sobre todos



for(var j:Number=numInicialPunto;j<numFinalPunto+1;j++)
{
	//relleno el array con los puntos que hay en el escenario
	arrClips.push(this["mc_pto"+j]);
	
}



var numPunto:Number=0;

var i:String=new String(); //variable de iteración

dibujo_trazado_mc.alpha=0;// Borra el dibujo coloreado

// CREA LA FORMA PARA DIBUJAR LAS LÍNEAS Y DEFINE EL ESTILO
var sh_lienzo:Shape = new Shape();
addChild(sh_lienzo);

stop();

init();

//**********************************

function init(){
	
	arrClipsUsados= []; // limpia la lista de clips usados
	activaBtns();// activa botones
	
}
//**********************************

function activaBtns(){ 
	
	
	if (numPunto == 0){ // Sólo activa los botones al empezar la actividad
		for (i in arrClips){
			arrClips[i].addEventListener(MouseEvent.CLICK,dibujaLinea);
			//arrClips[i].buttonMode=true;	
			arrClips[i].enabled=true;
		}			
	}
}
//**********************************

function desactivaBtns(){
	//desactivamos eventos en los clips de los puntos
	for (i in arrClips){
		arrClips[i].removeEventListener(MouseEvent.CLICK,dibujaLinea);
		arrClips[i].enabled=false;
	}	
}
//**********************************

function dibujaLinea(e:MouseEvent){
	if (e.target.name == arrClips[numPunto].name){ // Si hemos pinchado en el punto que toca
		// Dibuja la línea desde el punto anterior
		if (numPunto > 0){ // ...pero no teniendo en cuenta el punto de origen
		    trace("Dibujando línea de " + arrClips[numPunto-1].name + " a " + arrClips[numPunto].name);
			sh_lienzo.graphics.lineStyle(3, 0x000000, 1);
			sh_lienzo.graphics.moveTo(arrClips[numPunto-1].x, arrClips[numPunto-1].y);
			sh_lienzo.graphics.lineTo(arrClips[numPunto].x,arrClips[numPunto].y); 
		}
		// Incluye el clip en la lista de clips usados
		arrClipsUsados.push(e.target.name);
		// Desactívalo como botón
		e.target.removeEventListener(MouseEvent.CLICK,dibujaLinea);
		e.target.enabled=false;
		
		numPunto++;
		
		// Comprueba si has pulsado todos comparando el tamaño de los 2 arrays
			
		if (arrClipsUsados.length >= arrClips.length) {
				desactivaBtns();
				dibujo_trazado_mc.alpha=1; // Colorea el dibujo
				// pequeño retardo (en este caso el cuádruple, para que de tiempo a escuchar la frase)
				terminaActividad();
		}
	}
}

//**********************************

function terminaActividad(){
	gotoAndPlay("repetir");
}

stop();

//botón de repite actividad******************-
repetirActividad_mc.addEventListener(MouseEvent.CLICK,repiteActividad);
repetirActividad_mc.buttonMode=true;

//****************************************
function repiteActividad(e:MouseEvent){
	
	repetirActividad_mc.removeEventListener(MouseEvent.CLICK,repiteActividad);
	repetirActividad_mc.buttonMode=false;
	
	sh_lienzo.graphics.clear();// Limpia el lienzo
	desactivaBtns();
	gotoAndPlay("inicio");
}

Conclusión

Si todo va correcto, compilais y terminais el dibujo, os aparecerá una cosa tal que así:

Espero os sea útil en un futuro este tutorial, podeis descargar el .fla completo si quereis:

La entrada AS3: Dibujar uniendo puntos se publicó primero en Programación Multimedia.

SaberOnViewController

Vamos a utilizar un patrón de delegación para poder devolver el control a ViewController cuando desaparezca la vista modal SaberOnView mediante un toque del usuario en la pantalla. Presuponemos unos conocimientos básicos de creación de protocolos para este tutorial. Crearemos el protocolo SaberOnViewControllerDelegate y su delegado estará en ViewController. Aquí vamos a tener toda la lógica del desplazamiento del láser y de disparar sonidos y vibración. Los valores de las constantes se pueden variar a gusto, yo les he dado esos valores después de testear bastante.

Cuando apretemos el botón de lanzar el sable ocurrirán las siguientes cosas:

• Lanzamos la vista modal SaberOnView y se activará de inicio, un sonido constante (pulse) y una vibración será disparada
• Se activará el acelerómetro y dependiendo de nuestros movimientos en el espacio y la brusquedad de estos, serán lanzados determinados sonidos y vibración algunos de forma aleatoria y otros fija. Además el sable se moverá por el eje X
• Cuando toquemos la pantalla será disparado un sonido de final y la vista SaberOnView se ocultará y volveremos a la vista inicial

Os dejo el código completo de la clase:

#import <uikit /UIKit.h>
#import <avfoundation /AVFoundation.h>

#import "SaberOnView.h"

@protocol SaberOnViewControllerDelegate;

@interface SaberOnViewController : UIViewController <uiaccelerometerdelegate , AVAudioPlayerDelegate>{

    AVAudioPlayer *pulse;
    AVAudioPlayer *startLaser;
    AVAudioPlayer *stopLaser;
    AVAudioPlayer *pasada1;
    AVAudioPlayer *pasada2;
    AVAudioPlayer *pasada3;
    AVAudioPlayer *pasada4;

    NSMutableArray *saberSoundsArray;
    UIAccelerometer *acelerometro;
    //SaberOnView *saberOnView;

    double min;
    double max;
    double negMin;

}

@property (nonatomic, assign) id <saberonviewcontrollerdelegate> delegate;

@property (nonatomic, strong) SaberOnView *saberOnView;
@property (nonatomic, strong)  NSMutableArray *saberSoundsArray;

- (void) done;
- (void) createSounds;

@end

@protocol SaberOnViewControllerDelegate
- (void)flipsideViewControllerDidFinish:(SaberOnViewController *)controller;
@end

#import "SaberOnViewController.h"
#import <audiotoolbox /AudioToolbox.h>

@implementation SaberOnViewController

@synthesize delegate=_delegate;
@synthesize saberOnView;
@synthesize saberSoundsArray = _saberSoundsArray;

double const kminimum = 0.8;
double const knegativeMinimum = -0.8;
double const kmaximum = 1.3;
double const knegativeMaximum = -1.3;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidUnload
{
    [super viewDidUnload];
    self.saberOnView=nil;
    acelerometro=nil;
    self.saberSoundsArray=nil;
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (void)loadView {

    UIApplication *thisApp = [UIApplication sharedApplication];
    thisApp.idleTimerDisabled = YES;

	saberOnView = [[SaberOnView alloc] initWithFrame:CGRectZero];
	[saberOnView canBecomeFirstResponder];
	[saberOnView becomeFirstResponder];

    [self createSounds];

    acelerometro = [UIAccelerometer sharedAccelerometer];

    [acelerometro setUpdateInterval:0.0416];

    [acelerometro setDelegate:self];

    //variables del acelerometro
    min=kminimum;
    max=kmaximum;
    negMin=knegativeMinimum;

	NSLog(@"monitoring accelerometer");

	self.view = saberOnView;

    [startLaser play];

    [pulse play];

}

- (void)touchesBegan:(NSSet *)touches
           withEvent:(UIEvent *)event
{
    NSLog(@"stopLaser!!");
    [self done];

}

- (void)done
{
    [acelerometro setDelegate:nil];
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
    [pulse stop];

    [stopLaser play];

    UIApplication *thisApp = [UIApplication sharedApplication];
    thisApp.idleTimerDisabled = NO;

    NSLog(@"not monitoring accelerometer");

    [self.delegate flipsideViewControllerDidFinish:self];

}

- (void)accelerometer:(UIAccelerometer *)meter didAccelerate:(UIAcceleration *)accel
{

    saberOnView.xShift = saberOnView.xShift * 0.8 + [accel x] * 20.0;
    NSLog(@"monitoring accelerometer2");

    // Redraw the view
    [self.view setNeedsDisplay];

    if (  accel.x > min && accel.x < kmaximum)

    {

        &#91;pasada1 play&#93;;
        min=accel.x;
        negMin=knegativeMinimum;

    }

    if (  accel.x < negMin && accel.x > knegativeMaximum)

    {

        [pasada2 play];
        negMin=accel.x;
        min=kminimum;
    }

    if (  accel.y > min && accel.y < kmaximum)

    {

        &#91;pasada3 play&#93;;
        min=accel.y;
        negMin=knegativeMinimum;
        max=kmaximum;
    }

    if (  accel.y < negMin && accel.y > knegativeMaximum)

    {

        [pasada4 play];
        negMin=accel.y;
        min=kminimum;
    }

    if (  accel.y > max)

    {
        int randomHit = 7 + arc4random() % 7;
        //NSLog(@"randomHit:%i",randomHit);

        [(AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:randomHit]    play] ;
        max=accel.y;

        AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);

    }

    //NSLog(@"accel.x:%f",accel.x);
    //NSLog(@"accel.y:%f",accel.y);
    //NSLog(@"accel.z:%f",accel.z);

}

- (void)viewDidDisappear:(BOOL)animated
{
    [super viewDidDisappear:animated];

}

-(void) createSounds
{

    //sonido constante*************************
    pulse = (AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:0];

    pulse.numberOfLoops=-1;
    pulse.delegate=self;

    //sonido entrada*************************

    startLaser=(AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:1];

    //sonido salida*************************
    stopLaser = (AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:2];

    //sonido pasada1*************************

    pasada1 = (AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:3];

    //sonido pasada2*************************
    pasada2 = (AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:4];

    //sonido pasada3*************************

    pasada3 = (AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:5];

    //sonido pasada4*************************

    pasada4 = (AVAudioPlayer *)[self.saberSoundsArray objectAtIndex:6];

}

-(void)audioPlayerBeginInterruption:(AVAudioPlayer *)player
{
    //NSLog(@"audioPlayerBeginInterruption");
    [pulse stop];

}
-(void)audioPlayerEndInterruption:(AVAudioPlayer *)player
{
    //NSLog(@"audioPlayerEndInterruption");
    [pulse play];
}

@end

ViewController

Para concluir vamos a añadir la delegación a esta clase con lo cual añadiremos el protocolo SaberOnViewControllerDelegate a ViewController, asignaremos como delegado de SaberOnViewController a ViewController e implementaremos el método flipsideViewControllerDidFinish.

@interface ViewController : UIViewController <saberonviewcontrollerdelegate>{

ViewController.m quedará de la siguiente forma:

#import "ViewController.h"

@implementation ViewController
@synthesize saberSoundsArray=_saberSoundsArray;

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    self.saberSoundsArray = nil;
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
	[super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
	[super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

- (IBAction)startLaser:(id)sender {

    //vibración
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);

    SaberOnViewController *controller = [[SaberOnViewController alloc] init];

    [controller setDelegate:self];

    [controller setSaberSoundsArray: _saberSoundsArray];

    [self presentModalViewController:controller animated:YES];

}

- (void)flipsideViewControllerDidFinish:(SaberOnViewController *)controller
{
    [self dismissModalViewControllerAnimated:YES];

}

@end

Conclusión

Supongo que a estas alturas ya habeis compilado en vuestro dispositivo y vereis que cumple dignamente, pero hay muchas otras cosas que se pueden hacer… Tampoco creo que ésta sea la única o mejor forma de hacerlo ni nada parecido, es simplemente una forma más que espero os pueda servir de base para otros proyectos.
Espero os haya gustado, podeis descargar el proyecto completo de Xcode:

La entrada iOS: Sable láser con UIAccelerometer y sonido (III) se publicó primero en Programación Multimedia.

Modelo de sonidos SaberSoundsModel

Creamos una nueva clase Objetive-C que sea subclase de NSObject y la llamamos SaberSoundsModel. Aquí creamos 2 Arrays, uno con los nombres de los ficheros de audio, filesArray, que recorreremos para llenar saberSoundsArray con los objetos de sonido. Como vereis saberSoundsArray es una property para poder acceder posteriormente. No se te olvide importar AVFoundation/AVFoundation para manejar los objetos de audio.

#import <Foundation/Foundation.h>

@interface SaberSoundsModel : NSObject{
        
    NSMutableArray *saberSoundsArray;
    NSArray *filesArray;
}

@property (nonatomic, strong) NSMutableArray *saberSoundsArray;

@end

#import "SaberSoundsModel.h"
#import <AVFoundation/AVFoundation.h>

@implementation SaberSoundsModel
@synthesize saberSoundsArray=_saberSoundsArray;

-(id)init
{
    if ((self = [super init])) 
    {
        //array con todos los nombres de los archivos de sonido
        filesArray = [NSArray arrayWithObjects:@"sabramb1.wav",
                      @"ltsaberon01.wav",
                      @"ltsaberoff01.wav",
                      @"sabrswg1.wav",
                      @"sabrswg2.wav",
                      @"sabrswg6.mp3",
                      @"sabrswg4.mp3",
                      @"sabhit1.WAV",
                      @"sabhit2.WAV",
                      @"sabhit3.WAV",
                      @"ltsaberhit15.wav",
                      @"espadazo1.wav",
                      @"espadazo2.wav",
                      @"espadazo3.wav",                      
                      nil];
             
        //array que contendrá los objetos de sonidos
        self.saberSoundsArray = [NSMutableArray arrayWithObjects: nil];
        
        for (int i=0; i<[filesArray count]; i++)            
        {
                       
            NSString *file = [NSString stringWithFormat:@"%@", [[filesArray objectAtIndex:i] description]  ];
            
            
            NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/%@", [[NSBundle mainBundle] resourcePath],file]];
            
                        
            AVAudioPlayer *sound = [[AVAudioPlayer alloc]  initWithContentsOfURL:url error:nil] ;
                        
            [_saberSoundsArray addObject:sound];
                     
            
        }
        //NSLog(@"saberSoundsArray: %@",[_saberSoundsArray description]);    
        
    }
    
    return self;
    
}

@end

Ahora vamos a AppDelegate para inicializar el modelo de sonidos y pasarlo a ViewController ya inicializado. Crearemos en ViewController una property llamada saberSoundsArray para darle valor desde AppDelegate.

#import <UIKit/UIKit.h>
@class SaberSoundsModel;

@interface AppDelegate : UIResponder <UIApplicationDelegate>{
    
    
    SaberSoundsModel *saberSoundsModel;
}

@property (strong, nonatomic) UIWindow *window;

@end

#import "AppDelegate.h"
#import "SaberSoundsModel.h"
#import "ViewController.h"

@implementation AppDelegate

@synthesize window = _window;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    //inicializamos modelo
    saberSoundsModel = [[SaberSoundsModel alloc] init];
    //sacamos viewController desde la jerarquía de window
    ViewController *viewController=(ViewController *)self.window.rootViewController;
    //pasamos a saberSoundsArray el modelo inicializado anteriormente
    [viewController setSaberSoundsArray: [saberSoundsModel saberSoundsArray ]];
    
    return YES;
}

//el resto de código generado por Xcode lo dejamos tal cual

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController{
    
    NSMutableArray *saberSoundsArray; 
    
}
//creamos la property
@property (nonatomic, strong)  NSMutableArray *saberSoundsArray;
- (IBAction)startLaser:(id)sender;

@end

//sintetizamos la property
@synthesize saberSoundsArray=_saberSoundsArray;

- (void)viewDidUnload
{
    [super viewDidUnload];
    //liberamos saberSoundsArray
    self.saberSoundsArray = nil;
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

Clase SaberOnViewController

SaberOnViewController será la clase encargada de controlar la vista que hará posible visualizar el sable láser. Creamos de la manera habitual una nueva clase que sea subclase de UIViewController, le añadimos una property llamada saberSoundsArray y la sintetizamos.

#import <UIKit/UIKit.h>

@interface SaberOnViewController : UIViewController{
    
     NSMutableArray *saberSoundsArray;
}

@property (nonatomic, strong)  NSMutableArray *saberSoundsArray;

@end

@synthesize saberSoundsArray = _saberSoundsArray;

- (void)viewDidUnload
{
    [super viewDidUnload];
    self.saberSoundsArray=nil;
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

Clase ViewController

Ahora vamos a añadir el código necesario a la función startLaser de ViewController para que tome el control la clase SaberOnViewController de manera modal con presentModalViewController. Primero importamos SaberOnViewController y AudioToolbox/AudioToolbox para la vibración.

#import "SaberOnViewController.h"
//añadimos este framework para que se pueda acceder a la vibración
#import <AudioToolbox/AudioToolbox.h>

Después vamos a ViewController.m y metemos código en la función startLaser. A este controlador le pasamos el modelo saberSoundsArray.

- (IBAction)startLaser:(id)sender {
    
    //vibración
    AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
    //inicializo SaberOnViewController de nombre controller
    SaberOnViewController *controller = [[SaberOnViewController alloc] init];
    //pasamos el modelo a controller
    [controller setSaberSoundsArray: _saberSoundsArray];
    //presentamos controller de manera modal
    [self presentModalViewController:controller animated:YES];
  
}

Vista SaberOnView

Vamos a crear una vista mediante código exclusivamente que contendrá la imagen del sable láser, para lo cual creamos una nueva clase que sea subclase de UIView.

En el código de esta clase/vista tendremos una property xShift que será para indicar el desplazamiento horizontal que se aplicará dependiendo del acelerómetro. (El sable se mueve en el eje x de la pantalla dependiendo del movimiento aplicado al iPhone). También tendremos la imagen del fondo y la del sable, siendo esta última la que se va a desplazar manteniendo la otra estática. Para salir del modo láser bastará con tocar la pantalla por lo que canBecomeFirstResponder debe de responder YES.

#import <UIKit/UIKit.h>

@interface SaberOnView : UIView   {
         
    float xShift; 
    CGImageRef image;   
    
} 
    @property (nonatomic, assign) float xShift; 
    
@end

#import "SaberOnView.h"

@implementation SaberOnView
@synthesize xShift; 

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        
        //fdo********************************
        UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"fdo_Saber.png"]];
        self.backgroundColor = background;
        
        
        
        //sable*****************************
        NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"sable.png" ofType:nil];
		UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
		image = CGImageRetain(img.CGImage);

        
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    
    // Drawing code
    // What rectangle am I filling?
	CGRect bounds = [self bounds];
	
	// Where is its center?
	CGPoint center;
	center.x = bounds.origin.x + bounds.size.width / 2.0;
	center.y = bounds.origin.y + bounds.size.height / 2.0;
    
	// Get the context being draw upon
	CGContextRef context = UIGraphicsGetCurrentContext();
    
    center.x += xShift; 
    
       
    CGRect imageRect;
	imageRect.origin = CGPointMake(center.x - 71, center.y -240);
	imageRect.size = CGSizeMake(143.0, 480.0);
	
    // Draw the image
	CGContextDrawImage(context, imageRect, image);
	
    
}

- (BOOL)canBecomeFirstResponder 
{ 
    return YES; 
} 

@end

Te animo a continuar con la 3ª y última parte de este tutorial en la que nos meteremos con el acelerómetro para disparar sonidos, vibración y mover el sable láser por el eje x de la pantalla.

La entrada iOS: Sable láser con UIAccelerometer y sonido (II) se publicó primero en Programación Multimedia.

Para realizar una transición más fluida de esta imagen, vamos a colocar la imagen en lo más alto de la jerarquía de subvistas de nuestra vista inicial y vamos a realizar un fundido alpha de la imagen, con lo cual, cuando desaparece la imagen de precarga, se ve la misma imagen, que es la que hay también en la misma posición en la primera vista. Para hacer el ejemplo se ha usado iOS5 y Automatic Reference Counting (ARC).

Crear proyecto y agregar materiales

Creamos un nuevo proyecto en Xcode a partir de la plantilla Single View Aplication y las opciones por defecto.

Preparamos nuestras imágenes Default.png (320x480px) y Default@2x.png (640x960px) y las añadimos al proyecto de la manera habitual. En cuanto las añadimos ya nos salen en las propiedades del Target en el apartado Launch Images. Podeis descargar las imagenes aquí:

Añadimos Outlets y código

Ahora vamos a ViewController.h y añadimos un IBOutlet que va a ser la imagen que se funde. También vamos a añadir la función (void)fadeOut… que vamos a usar para realizar el fundido y que admite 2 parámetros: La vista a disolver y la duración del efecto, por lo que es bastante reusable.

#import <uikit /UIKit.h>

@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *entradaView;
-(void)fadeOut:(UIView*)viewToDissolve withDuration:(NSTimeInterval)duration ;

@end

En ViewController.m sintetizamos entradaView y añadimos el cuerpo de la función (void)fadeOut…

#import "ViewController.h"

@implementation ViewController
@synthesize entradaView;

-(void)fadeOut:(UIView*)viewToDissolve withDuration:(NSTimeInterval)duration
{
    [UIView beginAnimations: @"entradaView" context:nil];
    [UIView setAnimationDelegate:self];
	// wait for time before begin
	//[UIView setAnimationDelay:wait];

	// druation of animation
    [UIView setAnimationDuration:duration];
    viewToDissolve.alpha = 0.0;
    [UIView commitAnimations];
}

Seguimos en ViewController.m e invocamos al método (void)fadeout.. desde viewDidLoad con entradaView como vista a disolver y 1 segundo de duración. Aprovechamos también y seteamos a nil entradaView en el cuerpo del método viewDidUnload.

- (void)viewDidLoad
{
    entradaView.alpha = 1;
    [self fadeOut : entradaView withDuration: 1  ];
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [self setEntradaView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

En el Storyboard

Seguidamente vamos al MainStoryboard, seleccionamos de la Escena el View Controller y añadimos dentro de la vista View una subvista Label para darnos cuenta del efecto y le ponemos algo de texto. Después añadimos una Image View en la que cargamos la imagen Default.png con coordenadas y tamaño x=0, y=-20, width=320, height=480. Esta imagen la vamos a mapear con entradaView en Referencing Outlets.

Y bueno ya podeis compilar y ver el efecto. Hay muchas maneras de hacer esto pero yo he elegido esta por su simplicidad, espero os sea de utilidad…

A continuación puedes descargar el proyecto Xcode:

La entrada iOS: Fundir imagen de carga con primera vista de la aplicación se publicó primero en Programación Multimedia.

No nos vamos a parar en detalles como imágenes de precarga, iconos o nociones de manejo básico del storyboard, por lo cual para seguir este tutorial es necesario poseer un conocimiento básico de Xcode. Para hacer el ejemplo se ha usado iOS5 y Automatic Reference Counting (ARC). También debeis saber que para testear correctamente el funcionamiento de los contenidos de este tutorial, será prácticamente imprescindible hacerlo en un dispositivo (iPhone aunque puede ser iPad) por razones relativas al uso del acelerómetro.

Crear proyecto y agregar imágenes y sonidos

Comenzamos creando un nuevo proyecto a partir de Single View Application, le nombramos sablelaser y seleccionamos Storyboard y ARC (valores por defecto).

Posteriormente agregamos las imágenes sable.png y fdo_Saber.png al proyecto (con sus correspondientes versiones @2x) y los 14 archivos de sonido que va a tener el sable láser. Lo coloco todo por grupos dentro del proyecto de Xcode para ordenarlo como veis en la imagen.

Añadimos Outlets, IBActions y Frameworks

Vamos a añadir un botón para lanzar el Láser, para lo cual vamos a MainStoryboard y añadimos de la manera habitual una instancia de Round Rect Button dentro de nuestra vista de View Controller. Mapeamos el evento Touch Up Inside con un IBAction que llamaremos startLaser. Con lo cual quedará nuestro ViewController de la siguiente forma:

#import <uikit /UIKit.h>

@interface ViewController : UIViewController
- (IBAction)startLaser:(id)sender;

@end

#import "ViewController.h"

@implementation ViewController

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated
{
	[super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated
{
	[super viewDidDisappear:animated];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
   return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (IBAction)startLaser:(id)sender {
}

@end

Para el tema de sonido y vibración tendremos que añadir los frameworks AudioToolbox y AvFoundation.

Con esto ya tenemos todo preparado para comenzar a programar las 4 clases de las que va a constar el proyecto: ViewController, SaberOnViewController, SaberOnView y SaberSoundsModel.
Te animo a continuar con la 2ª parte de este tutorial.

La entrada iOS: Sable láser con UIAccelerometer y sonido (I) se publicó primero en Programación Multimedia.