Main Contents
July 7, 2008
Path Folower, é esse o nome que eu dou pra esse aplicativozinho, uma mini engine de games em as3. Só no seu fla, crie um mc que vai ser seu carrinho e o instancie de la_mc e ponha o class path como pathFolower, salve como pathFolower.fla.
Na mesma pasta crie um arquivo .as e salve-o como pathFolower.as e depois insira o seguinte no arquivo .as
|
package
{
//importando classes
import flash.display.MovieClip;
import flash.events.*;
import caurina.transitions.Tweener;
/**
* ...
* @marceloduende classezinha pra andar o carro
*/
public class pathFolower extends MovieClip //iniciando a nossa classe
{
private var ang:Number;// angulo que vai receber os radianos
private var length:int = 5; //o quanto ele vai no angulo ang
private var angX:Number = 0; // valor da posição X
private var angY:Number = 0; // valor da posição Y
public function pathFolower()
{
stage.addEventListener(KeyboardEvent.KEY_DOWN, anda);//chamando a ação
}
private function anda(event:KeyboardEvent)
{
ang = la_mc.rotation * Math.PI / 180; //angulo em radianos
angX = la_mc.x;
angY = la_mc.y;
switch (event.keyCode) //pegando valor do parâmetro
{
case 37: //botão esquerdo pressionado
la_mc.rotation -= length;
break;
case 39: //botão direito pressionado
la_mc.rotation += length;
break;
case 38: //botão para cima pressionado
angX += Math.cos(ang) * 20;
angY += Math.sin(ang) * 20;
Tweener.addTween(la_mc, {x:angX, y:angY, time:1 } );
break;
case 40: //botão para baixo pressionado
angX -= Math.cos(ang) * 20;
angY -= Math.sin(ang) * 20;
Tweener.addTween(la_mc, {x:angX, y:angY, time:1 } );
break;
}
}
}
} |
Use as setas do teclado para mexer o robozinho 
Filed under: ActionScript 3.0 |
Comments (0)
April 8, 2008
Vamo lá, primeiro vamos organizar nossa pasta onde vai ficar o FLA. baixe essas classes aqui (serão necessárias para funcionar o arquivo). Agora dezipe os arquivos no diretório que você vai por o FLA.
Depois disso crie uma ou seis imagens com 200 x 200 pixels, eu deixei apenas uma imagem, mas é bom você fazer com 6 diferentes.
Ok, agora vamos ao flash, importe as imagens e transforme-as em MovieClip, na barra properties de cada MovieClip ponha o instance name de “face”, “face2″, “face3″, “face4″, “face5″ e “face6″, sem as aspas.
Ainda na barra de properties defina o blend como “Erase” para todos os MovieClips. e deixe-os no palco mesmo.
Agora vamos ao nosso código
|
// importanto classes para o filme principal
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.lights.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.events.*;
import org.papervision3d.core.utils.*;
import org.papervision3d.core.utils.virtualmouse.VirtualMouse;
// definindo nosso viewport
var viewport:Viewport3D = new Viewport3D(0, 0, true, true);
// adicionando o viewport
addChild(viewport);
viewport.buttonMode = true;
// definindo o renderizador
var renderer:BasicRenderEngine = new BasicRenderEngine();
// definindo o palco 3d
var scene:Scene3D = new Scene3D();
// definindo camera
var camera:Camera3D = new Camera3D();
camera.zoom = 11;
camera.focus = 100;
// definindo nosso movieclip para adicionar os MCS como material do cubo
var mam:MovieMaterial = new MovieMaterial(face);
mam.interactive = true;
mam.smooth = true;
mam.animated = true;
var mam2:MovieMaterial = new MovieMaterial(face2);
mam2.interactive = true;
mam2.smooth = true;
mam2.animated = true;
var mam3:MovieMaterial = new MovieMaterial(face3);
mam3.interactive = true;
mam3.smooth = true;
mam3.animated = true;
var mam4:MovieMaterial = new MovieMaterial(face4);
mam4.interactive = true;
mam4.smooth = true;
mam4.animated = true;
var mam5:MovieMaterial = new MovieMaterial(face5);
mam5.interactive = true;
mam5.smooth = true;
mam5.animated = true;
var mam6:MovieMaterial = new MovieMaterial(face6);
mam6.interactive = true;
mam6.smooth = true;
mam6.animated = true;
// pegando as vars definidas e jogando na lista de materiais do cubo
var cube:Cube = new Cube(new MaterialsList({front:mam, back:mam2, left:mam3, right:mam4,top:mam5, bottom:mam6}), 200, 200, 200, 10, 10, 10);
scene.addChild(cube);
// adicionando o evento loop para movimentação do quadrado
addEventListener(Event.ENTER_FRAME, loop);
// funcção do loop
function loop(e:Event):void
{
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;
cube.rotationY += xDist * 0.05;
cube.rotationX += -yDist * 0.05;
renderer.renderScene(scene, camera, viewport);
}
// definindo clique para cada lado do quadrado
face.addEventListener(MouseEvent.CLICK, faceClick);
function faceClick(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.marceloduende.com.br"));
}
face2.addEventListener(MouseEvent.CLICK, face2Click);
function face2Click(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.marceloduende.com.br"));
}
face3.addEventListener(MouseEvent.CLICK, face3Click);
function face3Click(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.marceloduende.com.br"));
}
face4.addEventListener(MouseEvent.CLICK, face4Click);
function face4Click(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.marceloduende.com.br"));
}
face5.addEventListener(MouseEvent.CLICK, face5Click);
function face5Click(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.marceloduende.com.br"));
}
face6.addEventListener(MouseEvent.CLICK, face6Click);
function face6Click(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.marceloduende.com.br"));
} |
Agora compile seu filme e brinque a vontade
Para baixar o arquivo acima clique aqui
Filed under: ActionScript 3.0, Papervision 3D |
Comments (2)
March 20, 2008
Olá pessoal.
Hoje vou mostrar um pouco do meu trabalho. Em parceria com a agência Midiaweb, foi desenvolvido um hotsite de páscoa para a Lacta, marca mundialmente conhecida da marca Kraft Foods da Alemanha.
Foi um trabalho árduo, pois teve alguns fatores (de saúde) que atrapalharam o projeto. Mas ta tudo resolvido O hotsite tem como objetivo principal vender o produto em destaque, no caso os ovos de páscoa, vários deles. Estão todos nas lojas Americanas e Pão de Açúcar como exclusividade, também deve ser achado em outros pontos de venda.
Vou dispor alguns prints do Hotsite e o “cast crew” do Hotsite que envolveu em torno de 15 pessoas.
Gerente de conta: Sérgio Coelho, Marcelo Biachi;
Gerente de projeto: Daniela Fernandes;
Atendimento: Julianne Fontoura, Carolina Veiga, Renata Adriazola;
Diretor de Arte: João Paulo;
Designers: João Paulo, Janara Lopes, Fabiano;
Flash Developer, XML e Client side: Marcelo Duende, Gabriel Gulbino;
Php Developer e Server side: André Arruda;
Esses são os nomes que deram vida ao hotsite, ao menos eu conto que seja, não sei se esqueci de alguém. Se esqueci mande e-mail avisando
E esse foi o hotsite Parabéns a todos os envolvidos. E principalmente a agência Midiaweb por me aturar
Filed under: Hotsite, Portfolio |
Comments (0)
March 10, 2008
Olá pessoal.
Hoje vou dar um tempo com códigos e fazer um post rápido sobre o novo hotsite da Coca-Cola Zero. Um projeto realmente perfeito. Sem erros, sem perda de qualidade em vista do prazo, com uma super equipe envolvida. Com certeza um dos melhores websites de 2008 até o momento.
Desenvolvido pela premiadíssima agência North Kingdom, com uma direção geral de Robert Lindström co-founder e designer da North Kingdom, e ilustradores como Anton Ericksson, Mikael Forsgren formaram uma gigante equipe de desenvolvimento, criação e externa.
Anton em sua ilustração.
Finalização.
Enfim, um super trabalho, uma super finalização. Perfeito, vale apena analizar e tomar por base para se fazer projetos melhores e melhores. E para quem quer ver mais sobre o projeto, eis o blog de Robert - Robert Lindström e quem quiser ver o projeto Coca-Cola Zero.
Um abraço
Filed under: Hotsite |
Comments (0)
March 7, 2008
Iaí galera, hoje vou postar um pouco sobre a classe tweener, a famosa “caurina”, me lembra taurina e me dá gás no trabalho hehe.
Bom, vamos lá, crie um arquivo no seu flash com as dimensões que quiser, eu usei 550 x 400, default do flash. Dentro dele insira uma bolinha e transforme-a em um Movie Clip depois no instance name ponha “anda_mc”. Esse vai ser o nosso objeto controlado. Salve o arquivo como “tweener.fla”.
Agora crie 5 botoes, instancie-os de:
xey_mc
scale_mc
alpha_mc
delay_mc
bezier_mc
respectivamente.
xey_mc: esse botão vai servir para mover nosso objeto no palco.
scale_mc: esse botão vai server para escalonar o objeto no palco .
alpha_mc: esse botão vai server para dar um alpha no objeto no palco .
delay_mc: esse botão vai server para dar um delay até acontecer a animação do objeto no palco.
bezier_mc: esse botão vai server para:
Esse é um método mais composto, ele pode dar varias direções ao um valor de x ou y. Criando concavos e tangentes na animação do objeto. Na classe abaixo eu criei uma animação em circulo com o _bezier, mas você pode usar apenas {x:0, y:100} por exemplo, que além de ir ao seu ponto original ele vai passar por esses pontos durante a animação.
Ok, agora no nosso classPath coloque “tweener”
Vamos para a classe agora.
Crie um arquivo .as e salve-o como tweener.as. Dentro desse arquivo ponha o seguinte.
|
package {
import caurina.transitions.Tweener;
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.MouseEvent;
public class tweener extends MovieClip{
public function tweener():void{ // centralizando objeto no filme
Tweener.addTween(anda_mc,{x:stage.stageWidth/2, y:stage.stageHeight/2, time:1, transition:"easeOutExpo"})
// acao de clique no X e Y
xey_mc.addEventListener(MouseEvent.MOUSE_DOWN, Movimenta);
// acao de clique no scaleX e scaleY
scale_mc.addEventListener(MouseEvent.MOUSE_DOWN, Escalonamento);
// acao de clique no alpha
alpha_mc.addEventListener(MouseEvent.MOUSE_DOWN, Alpha);
// acao de clique no delay
delay_mc.addEventListener(MouseEvent.MOUSE_DOWN, Delay);
// acao de clique no delay
bezier_mc.addEventListener(MouseEvent.MOUSE_DOWN, Bezier);
}
// funcao de movimento
private function Movimenta(e:MouseEvent):void{
Tweener.addTween(anda_mc,{x:100, y:100, time:1, transition:"easeOutExpo", onComplete:VoltaMovimenta});
}
private function VoltaMovimenta():void{
Tweener.addTween(anda_mc,{x:stage.stageWidth/2, y:stage.stageHeight/2, time:1, transition:"easeOutExpo"})
}
// funcao de escalonamento
private function Escalonamento(e:MouseEvent):void{
Tweener.addTween(anda_mc,{scaleX:4, scaleY:4, time:1, transition:"easeOutExpo", onComplete:VoltaEscalonamento});
}
private function VoltaEscalonamento():void{
Tweener.addTween(anda_mc,{scaleX:1, scaleY:1, time:1, transition:"easeOutExpo"})
}
// funcao de alpha
private function Alpha(e:MouseEvent):void{
Tweener.addTween(anda_mc,{alpha:0, time:1, transition:"easeOutExpo", onComplete:VoltaAlpha});
}
private function VoltaAlpha():void{
Tweener.addTween(anda_mc,{alpha:1, time:1, transition:"easeOutExpo"})
}
// funcao de delay
private function Delay(e:MouseEvent):void{
Tweener.addTween(anda_mc,{alpha:0, delay:1, time:1, transition:"easeOutExpo", onComplete:VoltaDelay});
}
private function VoltaDelay():void{
Tweener.addTween(anda_mc,{alpha:1, time:1, transition:"easeOutExpo"})
}
// funcao de bezier
private function Bezier(e:MouseEvent):void{
Tweener.addTween(anda_mc,
{x:stage.stageWidth/2, y:stage.stageHeight/2, time:3, transition:"linear", onComplete:VoltaBezier,
_bezier:[{x:stage.stageWidth, y:stage.stageHeight/2},
{x:stage.stageWidth/2, y:0},
{x:0, y:stage.stageHeight/2},
{x:stage.stageWidth/2, y:stage.stageHeight},
{x:stage.stageWidth, y:stage.stageHeight/2}]});
}
private function VoltaBezier():void{
Tweener.addTween(anda_mc,{x:stage.stageWidth/2, y:stage.stageHeight/2, time:1, transition:"easeOutExpo"})
}
}
} |
Pronto, nossa classe está pronta e nosso filme também… agora teste para ver o resultado! Abaixo eu estou dispondo o aplicativo funcionando.
Filed under: ActionScript 3.0 |
Comments (4)
March 5, 2008
Então pessoal com uma atualização do plugin do nosso flash player 9, agora podemos fazer um fullscreen de verdade, sem browser ou algo do tipo. Da pra ser usado em actionscript 2.0 ou 3.0, vou ensinar como se fazer isso usando AS3.0.Nota: Quando o modo fullscreen é ativado algumas funções são desabilitadas, assim como ações de teclas, input texts e coisas do tipo, motivo de segurança.
Bom, vamos lá.
No seu código HTML insira o seguinte dentro do body
|
<object height="100%" width="100%">
<param name="movie" value="fullScreen.swf"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="FullScreen.swf" allowfullscreen="true" type="application/x-shockwave-flash" height="100%" width="100%"></embed>
</object> |
Agora no seu arquivo flash crie um botão fullScreen_mc e insira…
|
stage.scaleMode = StageScaleMode.NO_SCALE;
fullScreen_mc.addEventListener(MouseEvent.MOUSE_DOWN, disparaEvento);
function disparaEvento(e:MouseEvent):void{
switch(stage.displayState){
case "normal":
stage.displayState = "fullScreen";
break;
case "fullScreen":
stage.displayState = "normal";
break;
}
}; |
agora abra seu HTML e clique no mc FullScreen para ver o resultado, caso tenha se perdido baixe aqui o tutorial.
Filed under: ActionScript 3.0 |
Comments (3)
March 5, 2008
Quem não enfrenta alguns problemas com AS3 e suas mudanças? Até se ambientalizar novamente vai algum tempinho, então pra ajudar a galera que ta começando agora vou postar um exemplinho simples de como carregar xml e ir adicionando no palco.
1. addChild é o nosso antigo attachMovie, por tanto crie um movieclip com um pequeno polígono. Vá até sua library e no classPath do linkage ponha “Polygon” sem as aspas. Agora crie outro Movie Clip só que vazio e no Linkage ponha “container”. Para fechar crie um campo de texto dinâmico para receber o valor do nosso xml e instance-o de cliquei_txt.
Ok, nosso palco está pronto.
Crie uma nova camada e insira o seguinte código.
|
// Importando a classe Tweener
import caurina.transitions.Tweener;
// Declarando variaveis
var final:Number = new Number;
var cont:container = new container;
var xml:XML;
var url:URLRequest = new URLRequest("meuXml.xml");
var carrega:URLLoader = new URLLoader();
// Quando carregado chamar a função "carregado"
carrega.addEventListener("complete", carregado);
carrega.load(url);
// Adicionando MovieClip Pai
this.addChild(cont);
cont.y = 100;
cont.x = (stage.stageWidth - cont.width)/2;
// Função quando o xml é carregado
function carregado(e:Event):void{
// Carregando dados do xml
xml = new XML(carrega.data);
// Definindo a variavel final como tamanho de nós do xml
final = xml.item.length();
for(var i:Number = 0; i<=final-1; i++){
// Adicionando MovieClips Filho e dando sua posição no randômica no palco
var objeto:Polygon = new Polygon();
objeto["id"] = i;
cont.addChild(objeto);
Tweener.addTween(objeto, {x:Math.random()*550-cont.x, time:1, transition:"easeInOutExpo"});
Tweener.addTween(objeto, {y:Math.random()*400-cont.y, time:1, transition:"easeInOutExpo"});
// Evento de clique no movie clip filho
objeto.addEventListener(MouseEvent.MOUSE_DOWN, ChamaObj);
}
}
// Função do clique
function ChamaObj(event:MouseEvent):void{
//Dando o valor "nome" do nó ao campo de texto
cliquei_txt.text = xml.item[event.currentTarget["id"]].@nome;
//Sorteando posição no palco
Tweener.addTween(event.currentTarget, {x:Math.random()*550-cont.x, time:1, transition:"easeInOutExpo"});
Tweener.addTween(event.currentTarget, {y:Math.random()*400-cont.y, time:1, transition:"easeInOutExpo"});
} |
Pronto, teste seu filme e veja o resultado. Abaixo está o arquivo rolando.
Filed under: ActionScript 3.0 |
Comments (0)
March 5, 2008
E aí galera, vou “recomeçar” o blog postando um pouco sobre AIR. Bom chega de muita conversa vamo fazer nosso aplicativo buscar uns videozinhos da web 
Crie dois arquivos, StreamVideo.fla e outro StreamVideo.as, um vai servir para o nosso código e o outro para nossos elementos. No arquivo .fla use já o formato AIR. crie 6 botões, um para fechar, minimizar, e arrastar e mais três para trocarmos de vídeo, e por último em nosso class path coloque StreamVideo que é o nome da nossa classe mais pra frente.
no arquivo .as insira o seguinte.
|
package{
import flash.display.MovieClip;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.media.Video;
import flash.events.MouseEvent;
public class StreamVideo extends MovieClip {
public function StreamVideo():void{
var myVideo:Video = new Video();
addChild(myVideo);
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachNetStream(ns);
myVideo.x = 15;
myVideo.y = 20;
ns.play("http://marceloduende.com.br/lab/air/01.flv");
// links
vid01_mc.addEventListener(MouseEvent.CLICK, video01);
vid02_mc.addEventListener(MouseEvent.CLICK, video02);
vid03_mc.addEventListener(MouseEvent.CLICK, video03);
function video01(event:MouseEvent): void{
ns.play("http://marceloduende.com.br/lab/air/01.flv");
}
function video02(event:MouseEvent):void{
ns.play("http://marceloduende.com.br/lab/air/02.flv");
}
function video03(event:MouseEvent):void{
ns.play("http://marceloduende.com.br/lab/air/03.flv");
}
close_mc.addEventListener(MouseEvent.CLICK, sair);
minimize_mc.addEventListener(MouseEvent.CLICK, minimize);
drag_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
function sair(e:MouseEvent):void{
stage.nativeWindow.close();
}
function drag(e:MouseEvent):void{
stage.nativeWindow.startMove();
}
function minimize(e:MouseEvent):void{
stage.nativeWindow.minimize();
}
}
}
} |
Instance name dos botões:
fechar = close_mc
minimizar = minimize_mc
drag = drag_mc
video 1 = vid01_mc
video 2 = vid02_mc
video 3 = vid03_mc
E ualáá fizemos nosso app desktop criar uma conexão com http sem browser nenhum. Possibilidades infinitas.
Filed under: AIR, ActionScript 3.0 |
Comments (0)