Como compartilhar texto e imagem no Android

Nível: básico.
Nesse tutorial vou demostrar como é simples e fácil compartilhar texto e imagem no Android.

Criei um projeto no Android Studio com a opção “Blank Activity”, como demonstra a figura 1.
Captura de Tela 2015-03-13 às 16.52.09

No nosso layout vai ter apenas uma imagem(ImageView) e dois botões(buttons), como vocês podem ver na figura 2.

Captura de Tela 2015-03-19 às 10.28.49

No método “onCreate” da Activity, vamos capturar os elementos do layout e adicionar os eventos para click nos botões.

ImageView imageView = ( ImageView ) findViewById( R.id.imageview );
imageView.setImageResource( R.drawable.android );

Button btShareText = ( Button ) findViewById( R.id.bt_share_text );
Button btShareImage = ( Button ) findViewById( R.id.bt_share_image );

 btShareText.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick( View v ) {
                shareText();
            }
        } );

        btShareImage.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick( View v ) {
                shareImage();
            }
} );

Dentro do método “shareText” adicione o código a seguir e após adicioná-lo, faça alguns teste de compartilhamento.

private void shareText() {
        // cria a intent e define a ação
        Intent intent = new Intent( Intent.ACTION_SEND );
        // tipo de conteúdo da intent
        intent.setType( "text/plain" );
        // string a ser enviada para outra intent
        intent.putExtra( Intent.EXTRA_TEXT, "tutorial blog como compartilhar text no android." );
        // inicia a intent
        startActivity( intent );
}

Agora, dentro do método “shareImage”, adicione o seguinte código:

private void shareImage() {

        StringBuilder strBuilder = new StringBuilder();
        strBuilder.append( "android.resource://" )
                // defina o seu package aqui
                .append( "com.luizgadao.sharetextandimage/" )
                //drawable a ser capturado, repare que esse é o drawable definido no src do ImageView
                .append( "drawable/android" );

        //captura a uri do drawable que está no Imageview
        Uri uriImage = Uri.parse( strBuilder.toString() );
        // cria a intent e define a ação
        Intent intent = new Intent( Intent.ACTION_SEND );
        // tipo de conteúdo da intent
        intent.setType( "image/*" );
        // stream a ser compartilhado
        intent.putExtra( Intent.EXTRA_STREAM, uriImage );

        startActivity( intent );
    }

Nos testes que fiz não foi possível compartilhar texto nem imagem no Facebook. No próximo tutorial vou demonstrar como capturar o click ao selecionar um determinado aplicativo, com isso você pode utilizar o SDK do Facebook para compartilhar, conforme sua necessidade.

Segue o vídeo da aplicação rodando no Android.

Titanium, criando uma intent no OS Android

Pessoal, nesse tutorial vou mostrar como é simples criar uma “intent” do Android pelo Titanium e iniciar a “activity” através da “intent“.

Vamos supor que eu preciso acessar o recurso de geolocalização do device do usuário. Para acessar esse recurso pelo Titanium é bem simples, basta verificar se o serviço de geolocalização esta ativa no device acessando a propriedade: Ti.Geolocation.locationServicesEnabled. Para saber mais acesse aqui.
Ao verificar a propriedade, se ela estiver desativada retornando “false“, você não vai conseguir capturar a latitude e a longitude referente a posição do device. Como o serviço esta desativado, você pode informar o usuário através de um “alert“, para que ele ative o serviço de geolocalização e volte ao app. Mas lidar com o usuário é complicado, pois alguns não vão nem saber como habilitar esse serviço e você como desenvolvedor tem que tentar facilitar esse trabalho ao máximo no aplicativo que você estiver desenvolvendo.

Hora de botar a mão na massa! Criei um projeto clássico no Titanium apenas com foco no Android. No arquivo “app.js”, vamos criar uma window e um button, no button vou adicionar um evento de “click” para verificar se a geolocalização esta ativa. Se estiver ativa vou mostar a latitude e a longitude onde o device se encontra, senão, por agora vou exibir um alerta informando o usuário que a geolocalização está desativada.

//criando uma função anônima
( function(){
    var win = Ti.UI.createWindow({
		backgroundColor:'#fff'
	});

	var buttonShowLocation = Ti.UI.createButton({
		title:'show location',
		width:140,
		height:80
	});
	win.add( buttonShowLocation );

        buttonShowLocation.addEventListener( 'click', clickButtonShowLocation );
	function clickButtonShowLocation (e)
	{
		// verificando se geolocalização está ativa
		if( Ti.Geolocation.locationServicesEnabled )
		{
                        //define a precisão requerida da geolocalização
			Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;

			// caso a geolocalização esteja ativa tente capturar a posição do device
			// o método getCurrentPosition, recebe como parâmetro uma função de callback
			// Caso "e.success" seja verdadeiro é mostrado um alerta com a latitude e longitude
			// que o device se encontra. Senão, é exibido um alerta para o usuário sobre o erro ocorrido
			Ti.Geolocation.getCurrentPosition( function( e ){
				if ( e.success )
				{
					alert( 'latitude: ' + e.coords.latitude + ' longitude: ' + e.coords.longitude );
				}
				else
				{
					alert( 'Error get current position:' + e.error );
				}
			});
		}
		else
		{
			alert( 'GPS disabled.' );
		}

	}

} )();

Vou executar esse exemplo direto no meu nexus e printar aqui os resultados com a geolocalização ativada e desativada.

GPS desativado

GPS desativado

GPS ativado

GPS ativado

Agora, ao invés de mostar um “alert” ao usuário que o serviço de geolocalização está desativado, vamos abrir a tela específica do Android para que ele consiga habilitar o serviço de GPS.

Basta comentar a linha 40 e adicionar o seguinte trecho de código.

var intent = Ti.Android.createIntent({
	action:"android.settings.LOCATION_SOURCE_SETTINGS"
});
Ti.Android.currentActivity.startActivity( intent );

Ao testar o exemplo e ele estiver com o gps desativado, e você clicar no botão, a tela que deve aparecer deve ser semelhante ao print abaixo.
IMG_20140413_224834

Segue o código completo.


( function(){

	var win = Ti.UI.createWindow({
		backgroundColor:'#fff'
	});

	var buttonShowLocation = Ti.UI.createButton({
		title:'show location',
		width:140,
		height:80
	});
	win.add( buttonShowLocation );

	buttonShowLocation.addEventListener( 'click', clickButtonShowLocation );

	function clickButtonShowLocation (e)
	{
		// verificando se geolocalização está ativa
		if( Ti.Geolocation.locationServicesEnabled )
		{
                        //define a precisão requerida da geolocalização
			Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;
			// caso a geolocalização esteja ativa tenta capturar a posição do device
			// o método getCurrentPosition, recebe como parâmetro uma função de callback
			// Caso "e.success" seja verdadeiro é mostrado um alerta com a latitude e longitude
			// que o device se encontra. Senão, é exibido um alerta o usuário sobre o erro ocorrido
			Ti.Geolocation.getCurrentPosition( function( e ){
				if ( e.success )
				{
					alert( 'latitude: ' + e.coords.latitude + ' longitude: ' + e.coords.longitude );
				}
				else
				{
					alert( 'Error get current position:' + e.error );
				}
			});
		}
		else
		{
			//alert( 'GPS disabled.' );

			var intent = Ti.Android.createIntent({
				action:"android.settings.LOCATION_SOURCE_SETTINGS"
			});
			Ti.Android.currentActivity.startActivity( intent );

		}

	}

	//open window
	win.open();

} )();

Você pode abrir qualquer janela do OS Android, basta definir a “action” certa. Para abrir as definições de rede wifi, altere a “action” do nosso exemplo para a linha abaixo.

action:"android.settings.WIFI_SETTINGS"

Veja o vídeo de exemplo que demonstra o código desse exemplo em execução.

Qualquer dúvida ou sugestão, poste um comentário.

Titanium Studio Error Domain=DTiPhoneSimulatorErrorDomain Code=2

Nesse tutorial vou abordar como solucionar o seguinte error: Error Domain=DTiPhoneSimulatorErrorDomain Code=2 “Simulator session timed out.” UserInfo=0x1005698b0 {NSLocalizedDescription=Simulator session timed out.} [INFO]Esse error acontece devido a sobrecarga de processamento, mas por qual motivo?
Talvez você esteja com muitos programas abertos, e um desses programas pode estar executando um processo de forma inadequada na CPU e sobrecarregando-a. Outra possibilidade também, é que sua máquina já não é mais aquela de 3 anos atrás. Então meu amigo, é hora de pensar em um upgrade.Você consegue resolver isso de duas formas.
No Titanium Studio, no item do menu click em Project -> Clean. Ou abrindo o iOS Simulator clicando no menu iOS Simulator -> Reset Content and Settings -> Reset.
Figura 1.

Figura 1.

Qualquer uma dessas soluções, resolvem o mesmo problema de imediato. Porém, sempre que eu utilizei uma dessas formas, ao precisar re-copilar meus projetos, o error voltava à tona. Caso você necessite utilizar uma dessas soluções, faça Project -> Clen, é a solução mais rápida. Pois, não tem a necessidade de abrir o iOS Simulator e fazer o Reset Content.

Essa soluções resolvem, mas de forma temporária. Para verficar o problema de consumo de processamento, abra o Monitor de Atividades, observe o uso da CPU (%CPU), procure e encerre o processo que estiver consumindo mais ciclos de processamento.Monitor de Atividades

Espero que esse tutorial seja útil para você e obrigado pela visita.

EaselJS parte 1

Nesse tutorial vamos criar uma interatividade básica com JavaScript sobre a tag canvas do HTML5 usando o framework EaselJS. Para quem não conhece esse framework, ele é inspirando no ActionScript3 a linguagem de programação mais atual do plugin FlashPlayer.

O EaselJS faz parte de um conjunto de frameworks escrito em JavaScript do pacote CreateJS, faz parte também dessa família os frameworks TweenJS, PreloadJS e SoundJS. Os principais patrocinadores dessas ferramentas são: Adobe, Microsoft, AOL e GSkinner. Ano passado (2012) a GSkinner reescreveu uma série de games criado pela ATARI no passado, usando CreateJS, você pode conferir aqui.

Então chega de blablabla e vamos ao que interessa.

Primeiro, aconselho que vocês naveguem no site da CreateJS, vejam os trabalhos já publicados, teste os vários exemplos que tem disponíveis, aproveite também e espie a documentação, pois ela vai atender suas necessidades. Logo em seguida, baixe todo o pacote da CreateJS ou se preferir, apenas o EaselJS.

Após baixar o(s) pacote(s), crie um simples arquivo html, como abaixo, e salve com um nome de sua preferência.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> TEST with JavaScript </title>
	</head>

	<body onload="Main();">
		<h3> CLICK TO DRAW </h3>
    	<canvas id="canvas" width="550" height="550">
        </canvas>

        <!-- imports js -->
        <script src="js/easeljs-0.6.0.min.js"></script>
        <script src="js/Main.js"></script>
	</body>
</html>

Nessa estrutura básica de html, temos um elemento canvas onde acontecerão nossas interações, arquivos javascripts onde na linha 11 e a referência para o framework EaselJs baixado, a linha 12 está configurada para o arquivo “Main.js” que criaremos logo em seguida.

Observe que a tag body tem a propriedade “onload” que recebe como parâmetro uma função JavaScript.

Crie um arquivo Javascript como abaixo, salve-o com o nome “Main.js”. Se salvar com um nome diferente, não se esqueça de alterar esse nome no html.


var canvas;
var stage;
var containerBalls;
var containerLines;
var shapeLines;
var graphicsLines;

 function Main()
{
	// canvas
	canvas = document.getElementById('canvas');
	stage = new createjs.Stage( canvas );
 	// enabled interaction
	stage.mouseEventsEnabled = true;

 	// container
	containerBall = new createjs.Container();
	containerLines = new createjs.Container();

 	//lines
	shapeLines = new createjs.Shape();
 	graphicsLines = new createjs.Graphics();

 	//background black
	var g = new createjs.Graphics();
	g.beginFill( "#000000");
	g.drawRect(0,0, canvas.width, canvas.height);
 	var s = new createjs.Shape(g);
	s.x = 0;
	s.y = 0;

	stage.addChild(s);

 	//add elements
	containerLines.addChild(shapeLines);
	stage.addChild(containerLines);
	stage.addChild(containerBall);

 	stage.addEventListener( 'click', onClickStage );
}

function onClickStage( e )
{
	var ball = createBall(8);
	ball.x = stage.mouseX;
	ball.y = stage.mouseY;
	containerBall.addChild(ball);

	stage.update();
	debug( "stage-click => x "+ ball.x + " y => " + ball.y );
}

function createBall( raio )
{
	var g = new createjs.Graphics();
	g.beginFill('red');
	g.drawCircle(0, 0, raio);
	var s = new createjs.Shape(g);

	return s;
}

function debug( s )
{
	console.log( s );
}

Segue abaixo fluxo do algoritmo.

Figura 1.

Figura 1.

Observe: sempre que adicionarmos uma bola ao palco é necessário fazer uma atualização do mesmo. Caso você se esqueça de fazer essa atualização, não conseguirá visualizar as alterações ocorridas.

Até o momento, nosso experimento está adicionando uma bola vermelha ao clicar no palco. Que deve estar parecido com esse abaixo.

Figura 2.

Figura 2.

Até o momento estamos conseguindo visualizar apenas as bolas, mas calma, vamos implementar agora o desenho das linhas. Basta alterar a função “onClickStage”, como abaixo, e todas as bolas estarão conectadas umas com as outras.


function onClickStage( e )
{
	var ball = createBall(8);
	ball.x = stage.mouseX;
	ball.y = stage.mouseY;
	containerBall.addChild(ball);

	debug( "stage-click => x "+ ball.x + " y => " + ball.y );

	var len = containerBall.getNumChildren()-1;
	for (var i = 0; i < len; i++)
	{
		//debug("filhos: ", i);
		var l = containerBall.getNumChildren();
		for (var j = i+1; j < l ; j++)
		{
			//captura bola i
			var dObj1 = containerBall.getChildAt(i);
			//captura bola j
			var dObj2 = containerBall.getChildAt(j);
			//inicia define cor da linha em hexa
			graphicsLines.beginStroke("#ffffff");
			//início da linha, como se movesse a caneta para cima da bola i
			graphicsLines.moveTo(dObj1.x, dObj1.y);
			//como se riscasse um traço da bola i em direção a bola j
			graphicsLines.lineTo(dObj2.x, dObj2.y);
			//finaliza linha
			graphicsLines.endStroke();

			//debug("container I: ", dObj1, " container J: ", dObj2);
		}

	}

	//apenas atualiza a propriedade graphics.
	//containerLines.removeChild(shapeLines);
	//shapeLines = new createjs.Shape(graphicsLines);
	shapeLines.graphics = graphicsLines;
	// containerLines.addChild(shapeLines);

	stage.update();
}

O segredo está nessa estrutura de repetição. Então vou detalhar todo o processo.

Cada bola deve estar conectada uma com a outra e cada bola estará adicionada no container “containerBall“. Com o método “getNumChildren() eu consigo saber quantos filhos tem dentro do container. Agora faremos uma simulação de três bolas para ficar mais fácil o entendimento.

Vamos supor que tenho 3 bolas dentro do container, essas bolas devem estar conectadas entre si. A bola 1 deve estar conectada com a bola 2 e 3. A bola 2 tem que se conectar apenas com a bola 3, já que temos uma conexão da bola 1 com a bola 2. Então, não é nessário repetir a conexão da bola 2 com a 1, concorda? Já a bola 3 não precisa ter nenhuma conexão, pois as bolas 1 e 2 já fazem conexão com ela.

Veja o um exemplo com 4 bolas.

Figura 3

Figura 3

O código está bem comentado e simples, mas caso você tenha alguma dúvida, não deixe de perguntar.

Você pode baixar o código fonte aqui.

Você pode visualizar o resultado final aqui.

Obrigado.

Como criar uma sequência de imagens com o Adobe Flash para seu App.

A plataforma Flash é bastante conhecida no mercado Web, por produzir um conteúdo mais interativo que o convencional Html & Css. Mas, isso tem mudado bastante.

Hum, tudo bem, mas que importância isso tem pra mim que sou um programador que utiliza o Titanium Studio?

Com o Flash você pode criar uma sequência animada de imagens (SpriteSheet) e importá-las para seu projeto feito no Titanium, deixando o seu projeto com um diferencial bem atrativo.

Se você não tem experiência com o Flash, não se preocupe. Pois, o que vou demostrar, não exige nenhum conhecimento e detalharei todos os passos, basta seguir com atenção.

Se você não tem o Flash instalado, você poderá baixar uma versão trial direto do site da Adobe. Se você tem o Flash instalado e for superior ou igual a versão “CS 3″ acredito que também não terá nenhum problema eu usarei a versão “CS 6″.

Primeiro baixe a imagem abaixo, pois criaremos uma animação de um coração pulsando.

Fígura 1.

Figura 1.

Abra o Flash e crie um novo documento com 278px de largura por 215px de altura, frame rate com 24 fps.  A versão do ActionScript não faz nenhuma diferença.

Figura 2.

Figura 2.

Agora importe a “Figura 1” para o palco com as teclas command + r no Mac ou ctrl + r no Windows, a “Figura 1″ deve ter aparecido no palco. A imagem está bem maior que o palco, pois nem estamos visualizando-o. Clique na imagem importada pressione command + k ou ctrl + k aparecerá a janela “Transform” em “Scale Width” e “Scale Hight” deixe em 31%.

Fígura 3.

Figura 3.

O palco é esse retângulo branco que você está visualizando, senão aperte command + 2 ou ctrl + 2 para visualiza-lo.

Clique na imagem, pois vamos centralizá-la no centro do palco. Pressione command + K ou ctrl + k, aparecerá uma janela “Align” então selecione a segunda e a quinta opção de “Align” e se a opção “Align to Stage” não estiver marcada marque-a.

Fígura 3

Fígura 3

A imagem está centralizada no palco, vamos converte-la em um símbolo. Clique direito sobre ela, escolha a opção “Convert to Symbol” nomeie para “coracao” em “Type” deixe como “Movie Clip” em “Registration” marque o pontinho branco  no centro caso ele esteja desmarcado.

Fígura 4.

Fígura 4.

Nosso símbolo está pronto para ser animado. Poderíamos criar uma animação de forma manual, mas vamos utilizar uma animação já definida pelo Flash. Vá em Window da barra de tarefa e escolha “Motion Presents” dentro da pasta “Default Presents” escolha “pulse” e clique no botão “apply“.

Fígura 5.

Fígura 5.

Observe que foi adicionado alguns quadros na timeline e você pode clicar em um deles e pressionar “Enter” para reproduzir a animação de “pulse” escolhida.

Se por algum motivo a imagem escolhida não estiver em uma resolução satisfatória, vá na “Library”. Se essa janela não estiver visível, vá em Window e clique em “Library“. Na “Library” você vai visualizar a imagem importada e o símbolo criado. Clique direito sobre a imagem e depois em “Properties…“, marque a opção “Allow smoothing” e em “Compression” escolha “Photo (JPEG)” em “Quality” deixa marcado a opção “Use imported JPEG data“.
Dessa forma, a imagem não vai ter nenhum tipo de compressão e ainda vai suavizar os pixels quando estiverem em movimento.

Fígura 6.

Fígura 6.

Agora vamos exportar essa animação em uma sequência de imagens para utilizarmos no Titanium. Na barra de ferramentas click File -> Export -> Export Movie escolha “PNG” como formato e nomeie como “coracao” e click em “save” aparecerá a janela “Export PNG” deixe-a como abaixo e click em “Export

Figura 7.

Figura 7.

Observe que foi gerado 24 imagens “coracao0001.png”, “coracao0002.png”… Pois a animação tem duração de 1 segundo a 24 fps. Se você precisar de mais frames por segundo basta aumentar o fps no Flash.

Ok, agora que temos a sequência de imagens vamos criar nosso projeto no Titanium. Estarei disponibilizando todos os arquivos, então se você não tem o Flash instalado e também não o instalou pode iniciar a partir daqui.

No Titanium crie um novo projeto do tipo “Default Project” ou outro de sua preferência. Eu estou usando a versão 3.0.2 do SDK e vou exportar apenas para iPhone e Android.

Abra o arquivo “app.js” apague todo código e o deixe como abaixo.

//create window
var window = Ti.UI.createWindow();

//create view
var view = Ti.UI.createView({
	backgroundColor:'#ffffff',
	layout:'vertical'
});

//label
var label = Ti.UI.createLabel({
	color:'#000000',
	text:'Sequência de imagens',
	height:'auto',
	width:'auto',
	top:'10dp'
});

//add label in view
view.add( label );

//add view in window
window.add( view );

// open app
window.open();

Esses passos são bem básicos, então acho que você não vai ter nenhuma dificuldade. Isso é o que temos até o momento.
Figura 8.Vamos adicionar a sequência de imagens criada no app. Para isso, vamos criar um objeto do tipo ImageView. Mas, antes de tudo, criei uma pasta “images” dentro da ”Resources” e adicione as imagens.

Precisamos de uma array para setarmos o caminho de todas as imagens, que nesse caso são 24, com os seguintes nomes: ‘coracao0001.png’, ‘coracao0002.png’…
Não seria nem um pouco elegante criar uma array e setar todos esses valores na mão. Utilizaremos então, uma estrutura de repetição que todos já devem conhercer, o famoso “for”.

// images
var images = [];
for( var i = 1; i < 25; i++ )
{
	var path = '/images/coracao0' + (i < 10 ? '00' : '0') + i + '.png';
	images.push( path );
}

var image = Ti.UI.createImageView({
	images:images,
	width:'278dp',
	height:'215dp',
	top:'15dp',
	repeatCount:0, // 0 repetição infinita
	duration:(1/24) // configurando frame-rate
});

// add image in view
view.add( image );

Observe que fiz uma condição para verificar quantos zeros são necessários antes de concatenar o valor do “i” a “string“. Se for menor que 10, utilizo 2 zeros, senão apenas um. Se você executar o app nesse estágio, não vai visualizar nada diferente da última execução. Precimos adicionar um evento para saber quando todas as imagens foram carregadas e iniciar a animação com o método “resume“.

image.addEventListener('load', function(e){
	image.resume();
});

Execute novamente e o coração estará pulsando no seu app. Esse resultado deve ser praticamente o mesmo para o emulador Android.

Figura 8.

Figura 8.

Segue abaixo todo o código do app.

//create window
var window = Ti.UI.createWindow();

//create view
var view = Ti.UI.createView({
	backgroundColor:'#ffffff',
	layout:'vertical'
});

//label
var label = Ti.UI.createLabel({
	color:'#000000',
	text:'Sequência de imagens',
	height:'auto',
	width:'auto',
	top:'10dp'
});

var images = [];
for( var i = 1; i < 25; i++ )
{
	var path = '/images/coracao0' + (i < 10 ? '00' : '0') + i + '.png';
	images.push( path );
}

var image = Ti.UI.createImageView({
	images:images,
	width:'278dp',
	height:'215dp',
	top:'15dp',
	repeatCount:0, // 0 repetição infinita
	duration:(1/24) // configurando frame-rate
});

image.addEventListener('load', function(e){
	image.resume();
});

var changeStatus = Ti.UI.createButton({
	title:'clange-status',
	top:'15dp',
	color:'#ff0000'
});

changeStatus.addEventListener('click', function(e){
	image.animating ? image.pause() : image.resume();
});

//add label in view
view.add( label );

// add image in view
view.add( image );

//add button
view.add( changeStatus );

//add view in window
window.add( view );

// open app
window.open();

Vlw galera, até a próxima.

Baixe aqui os arquivos

Como utilizar o método “getDefinitionByName(“MyClassLibrary”)”

A vantagem em utilizar o método “getDefinitionByName()” é que você consegue instanciar objetos da sua biblioteca de forma dinâmica. Mas, como assim de forma dinâmica? Quer dizer que existe outra forma de instanciar um objeto além dessa: new MC()? Exatamente. Primeiro abra seu Flash e crie um “MovieClip” retangular de 117 x 154 ou das dimensões que você preferir. Depois seta o AS Linkage d0 mc para “MC”, como na figura 1 abaixo.

Figura 1

Vamos adicionar esse mc criado ao palco na forma convencional.

var mcCriado:MovieClip = new MC();
mcCriado.x = 30;
mcCriado.y = 30;

addChild( mcCriado );

Agora, utilizado o “getDefinitionByName(“”)“. A primeira etapa é criar uma variável do tipo “Class” que vai receber a classe capturada pelo método “getDefinitionByName(“”)“. Isso pareceu estranho, então vamos ver como funciona na prática.

import flash.utils.getDefinitionByName;
import flash.display.MovieClip;

/*var mc:MovieClip = new MC();
mc.x = 30;
mc.y = 30;

addChild( mcCriado );*/

var MyClass:Class = getDefinitionByName( "MC" ) as Class;
var mc:MovieClip = new MyClass();
mc.x = 30;
mc.y = 30;

addChild( mc );

Éeee funcionou, mas e aí? Eu poderia fazer sempre da forma convencional, que funcionaria da mesma forma que essa utilizando o “getDefinitionByName(“”)
Isso é verdade e eu concordo com você. Mas a vantagem de utilizar o “getDefinitionByName(“”)” é a forma dinâmica como eu disse acima.
Vamos supor que você precisa instanciar 5 mcs que estão na biblioteca. Ao invés de você fazer dessa forma:


var mc1:MovieClip = new MC1();
mc1.x = 30;
addChild( mc1 );

var mc2:MovieClip = new MC2();
mc2.x = 130;
addChild( mc2 );

var mc3:MovieClip = new MC3();
mc3.x = 230;
addChild( mc3 );

var mc4:MovieClip = new MC4();
mc4.x = 330;
addChild( mc4 );

var mc5:MovieClip = new MC5();
mc5.x = 430;
addChild( mc5 );

var mc6:MovieClip = new MC6();
mc6.x = 530;
addChild( mc6 );

você pode fazer assim:

for ( var i:uint = 0; i < 5; i++ )
{
	var MyClass:Class = getDefinitionByName( "MC" + (i+1) ) as Class;
	var mc:MovieClip = new MyClass();
	mc.x = 30 + (i * 100);
	addChild( mc );
}

E você obterá um resultado parecido como na figura 2,  independente da forma utilizada. Mas note que, com um simples laço de repetição, você simplifica bem seu código. Sem falar nas vantagens de setar valores das propriedades do seu objeto pela interação de cada repetição no laço.

Ok, já aprendi a utilizar o “getDefinitionByName(“”)“, mas eu consigo instanciar apenas “MovieClip”?

Não, você pode utilizar também para instanciar “BitmapData” e “Sprite“.

Para utilizar com imagem é bem simples e funciona da mesma forma. Importe uma imagem para sua biblioteca e depois nomeie seu “AS Linkage” para “IMG“, como na figura 3.

A única diferença é que agora vamos instanciar um “Bitmap” ao invés de um “MovieClip“.

import flash.display.Bitmap;
import flash.utils.getDefinitionByName;

var MyClass = getDefinitionByName( "IMG" ) as Class;
var bmp:Bitmap = new Bitmap( new MyClass() );
bmp.x = 20;
bmp.y = 20;
bmp.smoothing = true;
addChild( bmp );

Pronto, adicionamos uma imagem e poderíamos também adicionar imagens, como no laço de repetição mostrado acima com MovieClips.
Você também pode utilizar essa técnica para dispositivos móveis com Adobe AIR sem problemas.

Mas cuidado, se você estiver utilizando o Flash Builder com SWC você vai precisar utilizar o new MC() ou new IMG(), independe do nome que estiver seu mc ou imagem na biblioteca. Você precisa fazer isso para anexar seu objeto na VM do FlashPlayer ou Adobe AIR. Depois de instanciar seu objeto, você pode utilizar o “getDefinitionByName(“”)” sem problemas.

OBSERVAÇÃO.

Caso você queira obter qual é a classe de origem do seu objeto, você pode utilizar o método “getQualifiedClassName” veja:

import flash.display.Bitmap;
import flash.utils.getDefinitionByName;

var MyClass = getDefinitionByName( "IMG" ) as Class;
var bmp:Bitmap = new Bitmap( new MyClass() );
bmp.x = 20;
bmp.y = 20;
bmp.smoothing = true;
addChild( bmp );

trace( getQualifiedClassName( bmp ) );

Observe que o retorno foi “flash.display::Bitmap” é não IMG como definido. Mas se você estiver utilizando para Sprite e MovieClip o retorno vai ser a classe definida e não “flash.display::Sprite” ou “flash.display::MovieClip“.
Espero que esse material te ajude de alguma forma.

Mover objetos com seno e cosseno

O primeiro fato ao mover objetos com seno e cosseno e saber como funciona os ângulos no flash.

O segundo fato e que sempre precisamos converte o ângulo em radiano.
O terceiro fato e termos que ter um valor para o raio desse ângulo.
Observações:
O cosseno movimento objeto apenas na horizontal, ou seja, no eixo x.
O seno faz a movimentação no eixo y, ou seja, apenas na vertical.

Então, agora vamos abrir o Flash e criar um arquivo do tipo “ActionScript 3.0″ de 500px de largura por 500px de altura a 30 fps. Você pode criar o arquivo do tamanho que preferir.
Com a ferramenta “oval toll” ou pressionando “o” criei um círculo branco, e pressione f8 para converte-lo em Movie Clip com o ponto de registro no centro. Também definir que a classe responsável por esse círculo vai ser “Ball” isso possibilita que eu adicione esse círculo no palco por código.

Observe que na biblioteca está o movieclip que acabamos de criar e seu “linkage” é “Ball”. Se você não estiver visualizando a biblioteca pressione “f11″.
Se o círculo criado estiver no palco click sobre ele e pressione “Delete” para que seja excluído.
Pressione “f9″ para que abra a janela “Actions” é onde vamos inserir nosso código.

var ball:MovieClip = new Ball(); //instanciando o objeto criado
var posX:Number = stage.stageWidth * .5; //capturando metade do palco na horizontal
var posY:Number = stage.stageHeight * .5; //capturando metade do palco na vertical

//posicionado e adicionando no centro do palco
ball.x = posX;
ball.y = posY;
addChild(ball);

Apenas adicionei o objeto no palco, ele ainda não tem nenhum movimento. Para adicionar movimento objeto, vou utilizar o evento “ENTER_FRAME” esse evento é atualizando de acordo com o fps definido. Ou seja se você definiu com 30 fps a função responsável por esse evento vai ser chamada 30 vezes por segundo.

Vamos definir também, o raio e o ângulo de movimento. Como não vamos trabalhar com o ângulo diretamente, utilizaremos uma fórmula que vai converter o ângulo em radiano. Que é o seguinte: ângulo multiplicado por (Math.PI / 180)

import flash.display.MovieClip;
import flash.events.Event;

var radius:Number = 50;
var angle:Number = 0;

var ball:MovieClip = new Ball(); //instanciando o objeto criado
var posX:Number = stage.stageWidth * .5; //capturando metade do palco na horizontal
var posY:Number = stage.stageHeight * .5; //capturando metade do palco na vertical

//posicionado e adicionando no centro do palco
ball.x = posX;
ball.y = posY;
addChild(ball);

//adicionando o evento que vai atualizar a posição de ball
ball.addEventListener(Event.ENTER_FRAME, updateBall);

function updateBall(e:Event):void
{	
	var radians:Number = getRadians(angle);//converteno o ângulo em radiano	
	ball.x = (Math.cos(radians) * radius) + posX;
	ball.y = (Math.sin(radians) * radius) + posY;	
	
	angle += 10; //incrementando o ângulo
	angle %= 360; //o resto da divisão do ângulo por 360, assim esse valor não ultrapassa 360
}

function getRadians(angle:Number):Number
{	
	return angle * (Math.PI / 180);	
}

Nas linhas 23 e 24 é onde acontece os cálculos referente a nova posição. Utilizei os métodos Math.cos e Math.sin para calcular o cosseno e o senno, passei como parâmetro o valor do ângulo convertido em radiano e multipliquei pelo valor do raio. O ângulo determina a direção em que o objeto vai traçar e o raio determina a velocidade com que o objeto vai traçar a direção!

Faça alguns teste alterando o valor do ângulo, raio e o valor com que o ângulo é incrementado.
Observação:
O diâmetro do movimento de “ball” é 2 vezes o valor do raio, sendo assim 2 * radius = 100.
Você pode movimentar “ball” apenas na direção x ou y comentando as linhas 22 e 23.
Você pode usar valores negativos para o valor do ângulo.
Exemplo: -90 que seria exatamente o mesmo que 270.

Na próxima etapa desse tutorial, vou apresentar alguns exemplos práticos que utilizei na criação de uma game.
Valew galera.

Adicionar smoothing em tempo de execução

Ei galera, esse é meu primeiro tutorial e espero que vocês gostem, então vamos ao que interessa.

Primeiro abra o flash e crie um novo arquivo do tipo “ActionScript 3.0″, logo em seguida pressione CTRL + J, e configure seu documento como a imagem seguinte.

Agora, vamos usar essa imagem abaixo ou uma outra qualquer para fazer o carregamento dela via actionscript, de preferência salve está imagem no mesmo diretório do seu arquivo flash.

Agora dentro do flash pressione F9 para abrir o painel “actions” e digite

//caminho relativo da imagem em relação ao arquivo flash
var urlImg:URLRequest = new URLRequest("naruto.jpg");
//classe loader utilizada para carrregar imagens e swfs
var imgLoad:Loader = new Loader();
//método load precisa como parametro um objeto do tipo "URLRequest"
imgLoad.load(urlImg);

//adiciona o loader que no nosso caso é uma imagem ao stage
addChild(imgLoad);

Nossa imagem foi adicionada ao palco, vamos alterar a scala dela para 60% para percebermos as alterações ocorridas, digite

imgLoad.scaleX = .6;//.6 é igual á 0.6 que por sua vez é igual 60%
imgLoad.scaleY = .6;

Perceba que nossa imagem fico bem detonada, para suavizar esse desgaste na imagem, vamos criar uma função que vai adicionar um smothing em tempo de execução.

function suavizaImg(img:Loader):void
{
	//pega o contéudo do Loader e o transforma em um Bitmap
	var image:Bitmap = img.content as Bitmap; 
	//ativando o smoothing
	image.smoothing = true;
}

Faça a chamada da função na linha debaixo onde estamos adicionando a imagem no palco e passe como parâmetro o objeto Loader, ficando assim

addChild(imgLoad);
suavizaImg(imgLoad);

Observe que vai acontecer um erro, esse diz que não pode acessar um método ou uma propriedade de referência nula.

Mas por que isso acontece? Quando utilizamos o método load da classe Loader fazemos o download do arquivo e no momento que fazemos essa chamada suavizaImg(imgLoad); esse download ainda não foi concluído. Solução: adicionar um evento que vai nos dizer quando esse download está completo.
Vamos remover

addChild(imgLoad);
suavizaImg(imgLoad);
//e logo abaixo de imgLoad.load(urlImg), vamos adicionar o nosso evento

imgLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, imgCarregada);

Observação: a função “imgCarregada” é responsável pelo evento ou seja, essa função apenas vai ser executada quando o download estiver completo e dentro dela vamos adicionar aquelas 2 linhas que agente apagou

function imgCarregada(e:Event):void
{
addChild(imgLoad);
suavizaImg(imgLoad);
}

Pronto, chegamos ao fim do meu primeiro tutorial. Segue abaixo o código completo.

//caminho relativo da imagem em relação ao arquivo flash
var urlImg:URLRequest = new URLRequest("naruto.jpg");
//classe loader utilizada para carrregar imagens e swfs
var imgLoad:Loader = new Loader();
//método load precisa como parametro um objeto do tipo "URLRequest"
imgLoad.load(urlImg);

//evento que vai nos dizer quando o download estiver concluido
imgLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, imgCarregada);

imgLoad.scaleX = .6; //.6 é igual á 0.6 que por sua vez é igual 60%
imgLoad.scaleY = .6;

function imgCarregada(e:Event):void
{
	//adiciona o loader que no nosso caso é uma imagem ao stage
	addChild(imgLoad);
	suavizaImg(imgLoad);
}

function suavizaImg(img:Loader):void
{
	//pega o contéudo do Loader e o transforma em um Bitmap
	var image:Bitmap = img.content as Bitmap; 
	//ativando o smoothing
	image.smoothing = true;
}

Dica rápida, o nome do seu app não…

O nome do seu app não deve o que mesmo?

Já esqueci eu acho.

Não, não lembrei, estou parecendo um velho amigo que as vezes não lembra a data de aniversário.

Enfim, vamos lá.

O nome do seu app não deve conter, de forma alguma, a string “titanium” em sua nomenclatura. Pois isso gera um erro de copilação e você não vai conseguir visualizar nenhum resultado, independente se estiver copilando no simulador iOS ou emulador Android.

Vai aparecer o seguinte erro: “[ERROR] :  xcodebuild: error: The project ‘Titanium_3.xcodeproj’ does not contain a target named ‘Titanium_3′.

[ERROR] :  xcodebuild: error: The project 'Titanium_3.xcodeproj' does not contain a target named 'Titanium_3'

[ERROR] : xcodebuild: error: The project ‘Titanium_3.xcodeproj’ does not contain a target named ‘Titanium_3′

Como resolver?

Delete e crie outro, lembrando-se de…

Aposto que você se lembrou! Senão, deixe o seu comentário que talvez, quem sabe, eu lembrarei de te responder.

Hahahaha…