[Tutorial] Scroll de Frames

Bom galera,
Hoje vou dar uma explicação de como fazer um scroll, mas não é um scroll de textos nem nada disso… vou ensinar como fazer para dar scroll nos frames de sua animação!!

Isso é bom para fazer coisas girar sem ter nenhum programa 3D ou fazer alguns efeitos legais como vai e vem em uma animação…

Basicamente código é de um scroll … mas como estamos falando de frames, vamos ter que pegar o frame corrente (_currentFrame) e o total de frames (_totalFrames)… mesma coisa de um loader vc pega o BytesLoaded e o BytesTotal

Só que é para fazer um scroll
Então segue o código:

//Crio uma timeline com 72 frames
//Dou um stop para ele iniciar parado
stop();
//Digo qual a posição inicial do meu scrollSeek a bolinha do scroll
var inic = scroller._x;

//No onEnterFrame eu vou procurar o frame que me encontro e executar a função anda
onEnterFrame = function(){
//Aqui tenho um campo de texto criado para indicar que frame eu estou
frame_atual.text = _currentframe;
//Aqui chamo a função
anda();
}

/*
* A função anda… é nada menos nada mais que uma função de Load
* só que faz o clip andar… ou seja é um scroll mas para os frames
*/
function anda(){
var scroll_inicial = scroller._x – inic;
var scroll_final = barra._width;
var total_scroll = Math.round((scroll_inicial/scroll_final)*100);
valor = Math.round((_totalframes/100)*total_scroll);
gotoAndStop(valor);
}

/*
* Aqui eu dou a ação para a bolinha andar na minha barra de scroll e somente nela
* no caso minha barra é horizontal por isso uso a posição y e não x
*/
scroller.onMouseDown = function(){
startDrag(this, true, inic, barra._y, barra._width + inic, barra._y);
}
//Aqui é só quando soltar o mouse para o drag
scroller.onMouseUp = function(){
stopDrag();
}

Espero que gostem até o proximo tutorial

Abraços

Usando Mascara com gradiente

Bom como todo mundo sabe, flash e mascara né é lá uma coisa que cheira muito bem… então eu resolvi fazer aqui um post de uma maneira simples para fazer suas mascaras com gradiente.

O que você vai precisar são 2 MovieClips e 3 linhas de código

O primeiro movieclip você vai montar como se fosse sua mascara, faça ela ficar com o gradiente que você bem entender… e instacie o clip como mascara. Lembre de criar o gradiente etc, usando as ferramentas do proprio flash, não use photoshop etc… pois vai ficar uma transparencia falsa… e se a pessoa usar monitor de 16bits vai conseguir ver a sua “transparencia”.

Feito isso coloque o outro clip, ou imagem tbm em seu palco, logo a baixo da imagem que você quer e então você vai colocar como imagem a instancia.

Feito isso tudo, clique sobre o frame, abra seu ActionScript(F9) e coloque a action no frame
mascara.cacheAsBitmap = true;
imagem.cacheAsBitmap = true;
imagem.setMask(mascara);

E pronto ta feito… simples fácil e pratico.

Abraços e até a proxima!

Criando campos de texto por AS 2.0 e AS 3.0

Bom hoje vou explicar como se faz campos de texto por AS 2.0 e 3.0

Para começar vocês não vão precisar de nada, basta abrir o flash clicar no frame e copiar e colocar o código para ver funcionar.

Em AS 2.0 temos a função createTextField
Então vamos ver como ela funciona:

/*
* Criando um campo de texto dinamico
*/
var campo:TextField = this.createTextField(‘campo’, 1);
/*
* Como usar
*/
campo.text = “um texto de testes”;

Bom como podem ver é muito fácil criar campos de texto em AS o this significa que ele vai criar onde você já está, se eu colocar _root ele vai criar no palco principal… mesmo se existir uma função chamando dentro de um MovieClip, se estiver escrito _root é no palco e se estiver this. é onde ele se encontra
A declaração var campo:TextField serve apenas para indicar para o flash que aquela variavel tem as propriedades de texto então se você só digitar depois de declarar a variavel campo.(ponto) ele vai mostrar ja todas as propriedades do campo de texto que você pode usar.

Agora como fazer isso em AS 3.0

/*
* Criamos o campo de texto
*/
/*
* IMPORTANTE NUNCA ESQUECER
*/
import flash.text.TextField;
// Aqui eu crio o nosso campo de texto
var campo:TextField = new TextField();
// coloco um texto qualquer
campo.text = ‘um texto de testes’;
// adiciono ao palco
addChild(campo);

Como pode-se ver em AS 3.0 eh diferente de AS 2, você declara depois onde vai adicionar o campo, como eu só escrevi addChild(campo) é a mesma coisa que eu estiver colocando o campo no root do palco, se eu colocar MovieClip.addChild(campo) eu vou estar adicionando dentro de um MovieClip
E lembre-se que em AS 3.0 é necessário importar todas as coisas que você estiver trabalhando… campos de texto etc.

E por hoje é só, espero ter ajudado as pessoas nessa passagem de AS 2.0 para 3.0

abs

Usando Tween

Hoje vou dar um pequeno exemplo de como usar o tween do flash
Fazendo uma bolinha ir e voltar de uma posição de uma maneira simples

Eis o código:

//Importo as classes necessárias
import mx.transitions.*;
import mx.transitions.easing;

//Crio meu tween que vai fazer a animação
var primeiroTween:Tween = new Tween();
//Crio minha variavel verificadora
var foi:Boolean = true;

//Agora dou a bolinha intanciada de bola no palco a ação de clic
bola.onPress = function() {
//Se foi estiver em true, ele executa a primeira ação
if(foi) {
//Aqui faço a bolinha se movimentar no eixo x de 0 a 200 em 1 segundo
primeiroTween = new Tween(bola, “_x”, Back.easeOut, 0, 200, 1, true);
//Aqui ao terminar a ação do movimento da bolinha eu troco o valor da minha variavel
//assim evito que multiplos clics façam com que ela vá para proxima ação
primeiroTween.onMotionFinished = function() {
foi = false;
}
//Aqui é se ela já foi então volta
}else {
//Para ela voltar eu uso o yoyo() que faz a ação inicial ao contrário
primeiroTween.yoyo();
}
}

Simples fácil e pratico

Agora só aplicar para outras opções
Té mais

[Tutorial] virtual hosts

Bom galera eu hoje, quebrei minha cabeça de tudo quando foi maneira para conseguir montar um virtual host em meu computador. E ao resolver esse problema resolvi compartilhar a solução para outras pessoas que encontraem o mesmo problema.

Eu uso xampp, mas esse procedimento também serve para o apache normal.

Então vamos lá

Passo número 1 é ir no httpd.conf
E habilitar a linha descomentando a mesma
# Virtual hosts
Include “conf/extra/httpd-vhosts.conf”

E ai vamos agora ao vhosts

Muitos tutoriais explicam de uma maneira que é errada… pois acaba apontando para a pasta de localhost e isso ficam pessoas se matando para concertar

Primeiramente descomenta a linha NameVirtualHosts *:80
#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

Então vamos la
Para fazer o famoso mysite

Basta fazer o seguinte:

ServerAdmin mysite@localhost.com
ServerName www.mysite.com
DocumentRoot “C:/xampp/htdocs/mysite”

Vendo ali vemos o DocumentRoot, esse deve indicar qual o caminho ou pasta que se encontra o seu site, no meu caso eu uso xampp então por isso que fica nessa pasta.

Agora salvamos o arquivo vhosts e temos nosso host funcionando reinicie o apache.

Bom até ai tudo certo… teste a url www.mysite.com
Abriu? dependendo da configuração de seu computador pode abrir perfeitamente bem. Masssssss não deveria se você usar windows.

Temos ainda que configurar para o windows o arquivo hosts para isso vamos no seguinte caminho:
C:\WINDOWS\system32\drivers\etc

E temos que abrir o arquivo hosts, para abrir ele pode usar o bloco de notas ou algum arquivo que abre um texto

Você vai encontrar a linha
127.0.0.1 localhost

Aee correto então agora o que tenho que fazer?
Agora você precisa colocar o endereço de seu site
Eu usei o www.mysite.com correto?
Então temos que colocar assim

#LocalHost
127.0.0.1 localhost
#My site
127.0.0.1 www.mysite.com

Salve o arquivo, se der um erro e tiver que salvar em txt salve, ou com outro .nome que vc quiser… ai o que você vai fazer é pegar o original do windows e vai trocar o nome dele para que ele fique de backup e vai remover a terminação do nome do arquivo que você colocou, assim ele vai voltar a ser um arquivo sem nome como o proprio hosts que você encontrou primeiramente.

Agora basta você testar
www.mysite.com

Se tudo foi feito corretamente você tem um site virtual agora em sua máquina

Para configurar de outras pessoas encontrarem pelo seu ip requer outras configurações.

E isso fica para um outro tutorial

Abraços e até a proxima