20 de dezembro de 2007

Introdução a JQuery

Bom pessoal como ultimo post de 2007, quero fechar com chave de ouro!

Ultimamente tenho ultilizado o JQuery é um 'framework' eu chamo mais de uma linguagem de progrmação, porque é extremamente animalesco(como disse meu amigo Fernando ;D).

Vou deixar aqui pra vocês uma introduçãozinha sobre o que é JQuery.

JQuery
é um conjunto de biblioteca criada em JavaScript que facilita muito a criação de aplicativos web.

Site para donwload: http://jquery.com

Para o download das bibliotecas: http://docs.jquery.com/Downloading_jQuery

Para os plugins: http://docs.jquery.com/Plugins

E claro, um simples tutorial: http://i18n.2kminterativa.com.br/jquery

O mais interessante que ele interage diretamene com CSS, DOM, HTML, entre milhares de outras..

Bom Desejo pra todos um Feliz Natal
e um Exelente ano Novo...

até mais ;D

19 de dezembro de 2007

Criar Preloader Simples [ActionScript]

Novamente mais um post aqui!!

Como estou trabalhando em um site feito em puro ActionScript vi que é essencial um Preloader e por isso nosso post vai ser a respeito..!
Vamos aprender a fazer um Preloader ;D

Bom primeiramente você tem que ter conhecimento que toda animação tem um "Tamanho em Kbytes", ou seja, tudo tem um tempo para carregamento. Se você tem uma animação de 10mb, ou seja, 10.000 Kbytes e sua conexão é de 5 Kbytes, (10.000/5 = 2.000) você demoraria 2.000 segundos ou 33 minutos para poder carregar sua animação. Inquanto carrega sua animação seria interessante ir rodando uma animaçãozinha né, um Preloader.

Bom agora que vocês sabem o que é um Preloader e qual utilidade ele tem, vamos aos codigos... ;D

Antes de mais nada abra o Flash e crie um MovieClip, instancie-o de "meu_mc" (sem aspas);

Vamos entender as princiapais funções.

1000 bytes = 1 Kbyte - 1kb
1000 Kbytes = 1 Megabyte - 1mb

(OBS estou utilizando valores arredondados para facilitar a conta de cabeça, os valores reais de bytes é 1024b);

1) getBytesTotal() - A função retorna o valor total de bytes do objeto. Você pode tanto pegar o valor total do frame como o valor de um MovieClip exclusivo.

Ex:.

>CODE <<>

trace (meu_mc.getBytesTotal());
// retorna o total de bytes do movieclip




2) getBytesLoaded() - Retorna o valor de bytes carregado.

Ex:.

>CODE <<>

loadedbytes = meu_mc.getBytesLoaded();
totalbytes = meu_mc.getBytesTotal();

_root.onEnterFrame = function(){
if(totalbytes > (loadedbytes - 50000)){
trace (loadedbytes);
}
}


Você pode perceber que ele irá fazer um loop com o valor de bytes total, mas isso ocorre porque você está abrindo ele locamente sem tempo de carregamento, se fosse Online isso demoraria muito pra carregar.

Agora vamos montar nosso primeiro Preloader.

>CODE <<>

onClipEvent(load) {
total = _parent.getBytesTotal();
_parent.stop();
}
onClipEvent(enterFrame) {
loaded = _parent.getBytesLoaded();
if(loaded == total) _parent.play();
}


Explicando cada linha:

01 - Ao carregar o movieclip, executa...
02 - Seta a variável "total" como sendo o valor total de bytes do filme. Utilizamos aqui junto a função getBytesTotal() o aliás _parent. Ele indica um caminho relativo do preloader em relação a timeline principal. Quer dizer, ele indica que o valor de bytes total é o da timeline principal, é escopo acima
(_parent) da timeline do movieclip.
03 - Pàra a execução do filme. A explicação do _parent é a mesmo da linha 2. Só que aqui, ao invés de retornar o total de bytes, ele está parando a execução da timeline.
04 - Encerra o evento load.
05 - Ao entrar no frame... Este seria o nosso loop, onde cada vez que ele executar o frame, ele atualizaria o valor da variável.
06 - Seta a variável "loaded" como sendo o valor de bytes recebidos até o momento. A cada execução do loop esse valor é atualizado.
07 - Faz um verificação de condicional. Caso o valor da variável total seja igual "== " (sinal de comparação) ao da variável loaded, executa o filme. Caso essa condicional não seja verdadeira, continua o loop.
08 -Encerra o evento enterFrame.

Bom pessoa esse é um Preloader bem simples.. seman que vem eu coloco um avançado com animação ;D

mas apartir daqui você já consegue fazer o carregamento!!

até mais ;D

13 de dezembro de 2007

Integração de Flash + XML [ActionScript]

OPa!!

Mais um Post aqui pra vocês sobre ActionScript..
Bom vamos logo ao que interessa ;D

É interessante que antes de tudo vocês já tenham uma boa introdução em XML.

<?xml version="1.0" encoding="iso-8859-1"?>
<album>
<foto imagem="img.jpg" legenda="Minha legenda"/>
<foto imagem="amigos.jpg" legenda="altas festas"/>
<foto imagem="servico.jpg" legenda="mais uma reunião"/>
<foto imagem="montanha.jpg" legenda="uma bela imagem de uma montanha"/>
</album>

Veja que na primeira linha declaramos a versão do XML e o encoding que dá suporte à acentos, assim podemos colocar acentos em nossas tags.

Na segunda linha abrimos a tag "album", informando que ali começa o nosso album de fotos.

Da 3ª à 6ª linha estão nossas fotos e suas legendas. É importante saber que para cada foto você tem que declarar dessa maneira.

<foto - para indicar o início de uma nova foto;
imagem="img.jpg" - para declarar o local do arquivo;
legenda="Minha legenda" - para informar o texto correspondente à imagem;
/> - declara o término da foto.

Salve seu xml como "album.xml" (sem aspas) e vamos ao Flash.
Para testarmos o código, usaremos o "trace", para exibir os resultados na janela de saída.

Abra o Flash e no 1º frame coloque este código:
(As duas barras após cada linha servem para comentários no flash. )

>CODE <<>

System.useCodepage = true; // habilita acentos;
var
arquivo:XML = new XML(); // cria a variável para ler o xml;
arquivo.load("album.xml"); // manda a variável ler o album.xml salvo anteriormente;
arquivo.ignoreWhite = true; // ignora espaços em branco no XML
arquivo.onLoad = function() { // após a leitura do XML, executa a ação:
trace(this); // mostra o conteúdo na janela de saída.
}

Pressione Ctrl + Enter e veja que aparecerá todo o nosso XML na janela de saída.

Vamos começar a fazer a leitura de linha por linhda do XML.
No XML a contagem das linhas começa apartir do 0 (zero), ou seja, a linha 1 na verdade é a linha 0 (zero).

Troque o código pelo seguinte:

>CODE <<>

System.useCodepage = true;
var
arquivo:XML = new XML();
arquivo.load("album.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
trace(this.childNodes[0]);
}

Repare que agora ele mostrou somente o que esta entre <album> ... <album> .
Mas por que isso? Simples, porque informamos que nós queríamos tudo o que estiver no primeiro nó do XML. Cada childNodes representa um nó no XML.
Você poderia ter usado também "firstChild"(sem aspas).

Vamos entrar mais no XML.

>CODE <<>

System.useCodepage = true;
var
arquivo:XML = new XML();
arquivo.load("album.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
trace(this.childNodes[0].childNodes[0]);
}

Com isso ele acessa a primeira linha das fotos. Lembre que no XML, a contagem começa do 0 (zero).

Sua caixa de saída deve ter aparecido o seguinte:

<foto imagem="img.jpg" legenda="Minha legenda" />

Quando nós vamos usar o XML para ler imagens e textos externos, não podemos deixar assim né? Temos que falar qual atributo queremos que ele pegue para mais tarde usarmos em um loadMovie.

Então vamos fazer isso agora. Pegar apenas o texto e o nome do arquivo no XML.
Como nós já estamos na linha que vai ler os atributos da foto, podemos declarar um "attributes".

>CODE <<>

System.useCodepage = true;
var
arquivo:XML = new XML();
arquivo.load("album.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
trace(this.childNodes[0].childNodes[0].attributes.imagem);
trace(this.childNodes[0].childNodes[0].attributes.legenda);

}

Pronto. O seu clipe de filme instanciado como "clipe" vai ler a imagem correspondente à primeira linha do XML, que nesse caso é a "casinha.jpg" e a sua caixa de texto vai ler a legenda correspondente.

Perceba que agora temos 2 trace. Um pra a foto e outro para a legenda.
No primeiro, o "attributes.imagem" pega o valor que está declarado no xml como imagem="img.jpg". E no segundo, o "attributes.legenda" pega a respectiva legenda no XML legenda="Minha legenda".

Sua janela de saída deverá ter ficado assim:

img.jpg
Minha legenda

Agora para exibir as informações no Flash, faça o seguinte:

  1. Crie um MovieClip, instancie-o de "imagem_mc" (sem aspas);
  2. Crie um campo de texto dinâmico e instancie-o de "legenda_mc" (sem aspas);

Agora é só informar ao flash para ler a imagem e o texto dentro dos alvos correspondentes.

>CODE <<>

System.useCodepage = true;
var
arquivo:XML = new XML();
arquivo.load("album.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
imagem_mc.loadMovie(this.childNodes[0].childNodes[0].attributes.imagem);
legenda_mc.text = this.childNodes[0].childNodes[0].attributes.legenda;

}


É isso pessoal!!
como sempre, espero que tenham gostado...
até mais!
;D

6 de dezembro de 2007

Controlando impressão [ActionScript]

Opa galera... essa informação é show de bola, e depois que descobri teve um avanço em minha vida
kkkkkkkkk

;D
bom vamos lá..

Nesse post vou ensinar a vocês como determinar qual Frame ou Mc você deseja imprimir.

Primeiramente crie um MovieClip e o istancie como 'impressao_mc' (sem as aspas)
Agora no nosso primeiro frame cole o seguinte código:
*no frame não no MC

>CODE <<>

// Criando a variável de instância com o nome de 'impressao'
var impressao:PrintJob = new PrintJob();
//
Criando uma instância e a chamei de resultado. Ela não irá retornar nenhum valor, por que a ela dei o método start() para começar a impressão.
var resultado:Boolean = impressao.start();

if (resultado) {
trace ("Imprimindo...");
// Aqui é onde eu chamo o MC ou o Frame desejado para impressão.
impressao.addPage("impressao_mc");
}else{
trace ("Erro ao imprimir");
}


É importante saber que o 'addPage' segue essa lógica de sintaxe para funcionar perfeito.

>CODE <<>
impressao.addPage(target, printArea, options, frameNumber);

ela pode até ser costumizada, não sendo necessário seguir o padrão, sendo opcional o uso de alguns desses parâmetros exceto o target.

Conheca os parâmetros:

.target - Esse parâmetro define qual o alvo será atingido, se você digitar números o compilador do filme vai entender que você está definindo por níveis de camadas, mas se for digitado strings como "impressao_mc" (sem aspas) ele vai entender que será o movieclip instanciado que será impresso.

.printArea - Esse parâmetro é especificado por 4 propriedades internas, a 'xMin', 'xMax', 'ymin', 'yMax' (sem as aspas). Essas propriedades vai determinar a área que será impressa dentro do alvo mencionado.

.options - Nas opções você define se você quer que ele imprima como bitmap ou vetor, nesse caso ele é um valor booleano definido pela palavra chave printAsBitmap, da qual vai ser impressa e se igualada a true vai imprimir bitmap se false imprime como vetor. Padrão é imprimir como vetor

.frameNumber - Imprime o Frame especificado. *lembrando que ele aceita apenas por números de frames e não em labels.


Mais abaixo outros exemplos mais complexos:

Ultilizando .options e
.frameNumber
>CODE <<>
var impressao:PrintJob = new PrintJob();
var resultado:Boolean = impressao.start();
if (resultado) {
minhaimpressao.addPage("imprima_mc", null, {printAsBitmap:true}, 5);
} else {
trace ("Impressão cancelada pelo usuário");
}


Utilizando
.printArea
>CODE <<>
var impressao:PrintJob = new PrintJob();
var resultado:Boolean = impressao.start();
if (resultado) {
minhaimpressao.addPage(
"imprima_mc", 0, {xMin:50, xMax:134, yMin:21, yMax:160});
} else {
trace ("Impressão cancelada pelo usuário");
}



Bom pessoal é isso...
Espero que ajude ;D

Até mais!!

3 de dezembro de 2007

Rodar um MC a partir de um ponto [ActionScript]

Uffaa.. 1 mês sumido mas estou aqui novamente com uma coisinha legal ;D

ultimamente ando meio sem tempo para postar devido a muita correria do serviço.. mas muita muita mesmo
kkkkkkkkkkkkkkkkk
algo do tipo trabalho escravo =p

bom mas vamos ao que interessa!

esse post vai ensinar vocês como fazer um MC (MovieClip) ficar girando em volta de um ponto fixo. Como se fosse uma 'Lua' ao redor da 'Terra'.

Primeiramente crie um MovieClip e o istancie como 'meuMC_mc'

>CODE <<>

// Aqui estou setando o 'raio' ou seja a distancia que o MC vai girar do ponto
raio = 100;
// Aqui estou setando a posição do MC (centralizando MovieClip)
this._x = Number(Stage.width - this._width)/2;
this._y = Number(Stage.height - this._height)/2;

// Função para girar o MC
function girar(){
meuMC_mc.onEnterFrame = function(){
// Seta a posição do X (formula para rotacionar a posição x)
this._x = Math.cos(Math.PI/180*angulo)*raio;
// Seta a posição do Y (formula para rotacionar a posição y)
this._y = Math.sin(Math.PI/180*angulo)*raio;

/* Verifica se o valor do angulo é menor que 360, caso seja ela almenta 20 em seu angulo. Caso contrário ele seta o valor do angulo para 1 */
angulo = angulo >= 360 ? angulo = 1 : angulo += 20;
}
}

girar();

Facil galera!!!
bom uma dica galera.. você pode criar varios MC's e fazerem ficar rodando.. algo como os 9 planetas ao redor do sol

pra fazer isso é só você repetir o mesmo precesso com outro MC e ir adicionando um valor depois do angulo

this._x = Math.cos(Math.PI/180*angulo+21)*raio;
this._y = Math.sin(Math.PI/180*angulo+21)*raio;

Espero que gostem disso heheh

bom até mais pessoal!
Fuiz.....