Na Prancheta com Borges

Aplicativo Estadão

2009-03-30T18:33:00.000-07:00

Pessoal.

Soltei no meu blog sobre Publicidade a matéria sobre o lançamento de mais um trabalh0 com a minha direção de criação: Aplicativo do Estadão para iPhone.

Leia na íntegra

Quer ganhar de graça o evento pixel show 200?

2007-09-20T19:12:00.000-07:00

Então é simples ... demais !!!

Participe da promoção promovida pelo "Site Artigos e Tutoriais" e a "Revista Zupi".
clique aqui para concorrer!

Abs do Borges

Novo Blog do Borges

2007-07-16T09:44:00.000-07:00

Pessoal. Boas.

Para melhorar o desempenho do Blog - Na prancheta com Borges, dividi em dois Blogs os conteúdos:
Na Prancheta com Borges - http://www.eduborgs.blogspot.com: só programação em Flash
Quê? Publicitários - http://eduborgs.wordpress.com comentários gerais sobre peças e campanhas que estão no ar, acontecimentos e muita informação de novidades em Publicidade.

Em minha primeira matéria o Quê Publicitários, falo sobre algo nada novo, mas que acontece diariamente, lembrando do nosso grande comunicacor Abelardo Barbosa, vale a pena conferir.

Envie-me opiniões.

Abs.... do Borges

Flash e XML- Conteúdo em XML - Importando Dado.

2007-06-18T16:26:00.000-07:00

Conteúdo em XML(Extensible Markup Language) - Importando Dado.

Olá pessoal.

Atendendo algumas sugestões sobre tutoriais em Flash, hoje vamos falar um pouco sobre como trabalhar com conteúdo em XML, importando os dados.

Abra um novo arquivo no Flash, com formato 400 x 400px e 18fps.

1- Crie dois layers chamado de AS e Interface

2- Em interface desenhe o seu palco.

3- Ainda em interface, crie um MovieClip que será o nosso menu.
Nele insira a sua imagem.

4- Duplique-os mais duas vezes, troque as fotos pelas desejadas e de novos nomes a cada um e ainda atribua o Linkage.

5- Atribuído o linkage, delete do palco.

Exemplo de nosso menu construído

6- Antes de escrever o XML, pegue as três imagens que usamos no menu e exportem na pasta img, no formato 180 x 148px;

7-Agora o Dreamweaver ou o Bloco de notas, pois agora vamos escrever o nosso XML.

XML:

Chamada da Primeira Imagem

Aqui inserimos o primeiro texto referente a primeira imagem

img1_gde.jpg

Chamada da Segunda Imagem

Aqui inserimos o segundo texto referente a segunda imagem

img2_gde.jpg

Chamada da Terceira Imagem

Aqui inserimos o terceiro texto referente a terceira imagem

img3_gde.jpg

Neste caso teremos 3 chamadas, três conteúdos de texto e três imagens.

A funcionalidade que darei na programação em Flash aqui é quando executar o filme randomizar a notícia e quando clicar no menu imagem carregar a notícia referente aquele botão.

Veja como está a nossa interface no Flash:

Action Script:

//Importar Classes

import mx.transitions.Tween;

import mx.transitions.easing.*;

//Atribui os MC ao palco - imagem pequena - depth de 1 a 3 //

_root.attachMovie("bt1","bt1_mc",1,{_x:83,_y:93});

_root.attachMovie("bt2","bt2_mc",2,{_x:200,_y:93});

_root.attachMovie("bt3","bt3_mc",3,{_x:320,_y:93});

/////////////////////////////////////////////////////////////////////////////////

//Criando os MC vazios para as imagem maiores - depth de 4 //

_root.createEmptyMovieClip("img_gde",4);

with(img_gde){

_x = 200;

_y = 232;

}

////////////////////////////////////////////////////////////////////////////////

//Conectando ao XML

//Criar o objeto

var xmlNoticias:XML = new XML();

//Carregar o arquivo

xmlNoticias.load("menu_xml.xml");

//Ignorar espaços em branco

xmlNoticias.ignoreWhite = true;

//Verificar carregamento do arquivo

xmlNoticias.onLoad = function ()

{ //Begin xmlNoticias

//Obter a quantidade de notícias

qtdNoticias = this.firstChild.childNodes.length

//Randomizar indice

indice = random(qtdNoticias)

//Exibir a primeira noticia

navega( indice )

}//End xmlNoticias

///////// Função para controle da navegação //////////

function navega (indice)

{

//Titulo da noticia

chamada.text = xmlNoticias.firstChild.childNodes[indice].childNodes[0].childNodes[0].nodeValue

//Texto da noticia

texto.text =xmlNoticias.firstChild.childNodes[indice].childNodes[1].childNodes[0].nodeValue

//Foto da noticia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[indice].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

///////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////

//Atribuindo função de botões no menu

bt1_mc.onRelease = function()

{

//Se a posição for maior que o máximo de noticias

chamada.text = xmlNoticias.firstChild.childNodes[0].childNodes[0].childNodes[0].nodeValue

//Texto da notícia

texto.text =xmlNoticias.firstChild.childNodes[0].childNodes[1].childNodes[0].nodeValue

//Foto da notícia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[0].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

bt2_mc.onRelease = function()

{

//Se a posição for maior que o máximo de noticias

chamada.text = xmlNoticias.firstChild.childNodes[1].childNodes[0].childNodes[0].nodeValue

//Texto da noticia

texto.text =xmlNoticias.firstChild.childNodes[1].childNodes[1].childNodes[0].nodeValue

//Foto da noticia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[1].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

bt3_mc.onRelease = function()

{

//Se a posição for maior que o máximo de noticias

chamada.text = xmlNoticias.firstChild.childNodes[2].childNodes[0].childNodes[0].nodeValue

//Texto da noticia

texto.text =xmlNoticias.firstChild.childNodes[2].childNodes[1].childNodes[0].nodeValue

//Foto da noticia

img_gde.loadMovie( "img/" + xmlNoticias.firstChild.childNodes[2].childNodes[2].childNodes[0].nodeValue )

///////////////// ANIMAÇÃO DA FOTO ////////////////////

new Tween (img_gde , "_alpha" , None.easeNone , 0 , 100, 1 , true)

new Tween (img_gde , "_xscale" , Back.easeOut , 1 , 90, 1 , true)

new Tween (img_gde , "_yscale" , Back.easeOut , 1 , 90, 1 , true)

}

Arquivos Gerados:

menu_xml.swf
menu_xml.xml
pasta img(com fotos grandes)

> clique aqui para visualizar o arquivo final

Espero que tenham gostado.

Dúvidas e sugestões é só falar.

Abraços.

Felipe Borges

Site:www.eduborgs.blogspot.com
Email:eduborgs@gmail.com

Radar na Prancheta - Portfolio 2007 no ar

2007-06-06T12:34:00.000-07:00

Caros.

Finalmente subi o meu novo portfolio de 2007, exclusivamente apresentando alguns trabalhos que desenvolvi através da Mídia Click.
Mantendo o mesmo conceito do Portal do Borges, vocês encontrarão os mais diversos tipos de mídias gráficas que foram veiculados nos mais diversos veículos do Brasil.
Não deixem de acessar.

Clique aqui para acessar

Abs... do Borges

Radar na Prancheta: Novo Site de Felipe Borges

2007-05-23T18:18:00.001-07:00

Olá pessoal.

Como prometido no último Post Radar na Prancheta e aproveitando os bons ventos, finalizei mais um projeto pessoal.
As informações estão sendo postadas aqui " Na Prancheta com Borges", também no site artigosetutoriais e ainda o meu portfolio, assim, decidi criar uma interface que reuna todas estas informações em um ambiente só.

Portanto, meus amigos, acho que vale a pena conferir.

Abs.... do Borges

Radar na Prancheta

2007-05-20T17:06:00.000-07:00

Olá pessoal.

É com grande satisfação, o Radar na Prancheta informa que agora,eu, Felipe Borges sou colunista no site artigos e tutoriais e já na minha primeira materéia lanço um tema de grande discução e dúvidas: Flash - Vídeo FLV – Parte 1.
Aproveitando estes novos ventos, estou finalizando o portal do Borges.
Lá teremos os tutoriais postados no Artigos e Tutoriais, nos Foruns MX Studio e Imaster, além de ter as últimas do " Na prancheta com Borges", como ainda: meus trabalhos experimentais, portfolio e a sessão "freela", para empresas que necessitam de um design interativo antenado com as tendências publicitárias e com entendimento em AS.

Portanto meus amigos em breve virá mais notícias.

Abraços... do Borges.

Vídeo SWF em FLV para formato YouTube

2007-05-13T16:56:00.000-07:00

Pessoal.

Boas.

Estava com um Job para produzir um filme Institucional de aproximadamente 3 min. 30 seg para um cliente de Educação, enfocando cursos de curta duração.

Já havia feito outros filmes, mas este em especial, foi completo, com direito a locução em off.

Procurei informações na Net sobre etapas de produção de vídeo em Flash e muitas, que encontrei, estavam incompletas ou erradas.

Então, para que isto não aconteça mais, decidi escrever esta matéria.
Vejam as etapas de produção:

Para fazê-lo utilizei 6 programas e 2 duas interfaces web.

Storyboard.
desenho das etapas de animação e criação do personagem.

Locução fornecida pelo cliente
Fireworks e Illustrator
Ilustração do personagem aprovado, suas animações e cenário

Macromedia Flash 8
Desenvolvimento e animação

Adobe Audition
Edição de áudio

Adobe Premiere Pro
Edição e Fechamento de Vídeo

Amor Convert
Conversão do arquivo SWF em AVI

Riva FLV Encoder
Compilação do arquivo vídeo em FLV

You Tube
Publicação e captação do script para inserção nos sites.

Este programas utilizados, são free ou try 30 dias sem aplicação do logo do software.

Em breve disponibilizarei o vídeo.

Abraços... do Borges

Radar na Prancheta

2007-05-02T05:13:00.000-07:00

Olá Pessoal.

O Radar na Prancheta detectou mais um blog de um amigo Diretor de Arte.

Autor: Fernando Alvarez
Profissão: Diretor de Arte

Eu e o Fernando trabalhamos juntos aproximadamente à uns dois anos.
O brother manda bem em criação e cada vez mais está se especializando em direção de arte de sites e hotsites.
Seu site é uma vitrine para o mercado publicitário, de forma "clean" e direta.
Também divulga alguns trabalhos realizados como sites, hotsites e outros.

Vale a pena visitar esta página...

O Borges Recomenda. Leia agora.

Abs.... do Borges.

removeMovieClip - Parte 2

2007-04-30T05:25:00.000-07:00

Pessoal.

Boas....

Para concluir nosso estudo de removeMovieClip, hje vamos aplicar no uso de setInterval.

O setInterval é uma função que utilizamos para "startar" uma ação ou MovieClip em um determinado tempo.

Então vamos gastar as pontas dos dedos.

1- Crie um MovieClip chamado de bola.
2- Delete do Palco
3- Clique em F11 e com o botão direito abra a janela e clique em Linkage, clicando em "Export forAction Script"

Neste exemplo não teremos objetos no palco, somente um Action Script - "AS".

4- No primeiro frame clique em F9 - abrindo o Editor de "AS".
5- Vamos atachar o Movie Clip no root
_root.attachMovie("bola","bola_mc",1,{_x:200,_y:200})

6- Crie um setInterval para bola_mc1 "novo", com a execução em 2 segundos, lembrando que setInterva trabalha com milésimos de segundos.
F_tempo = setInterval(bola_mc1,2000);

Acima, estamos falando que F_tempo é um setInterval de um MovieClip bola_mc1 que será executado em 2 seg.

Agora vamos aplicar a função para o MC bola_mc1, removendo o bola_mc do root.
function bola_mc1 ()
{
removeMovieClip(bola_mc);
};

Resumindo:

Quando o MovieClip atingir 2 segundos ele vai ler a função de removê-lo do palco.

É isso ae pessoal.

Dúvidas é só falar com o Borges.

Abs... do Borges.

Radar na Prancheta

2007-04-26T18:20:00.001-07:00

Pessoal.

Boas....

Detectei dois Blogs de dois amigos e profissionais atuantes em publicidade.

Diário de um interativo
Autor: Thiago Honório
Profissão: design interativo

Apresenta uma bela experiência no universo de um interativo
O Honório e eu fazemos a dupla de criação em Flash, lá na MídiaClick, com principais atuações em criação e programação em peças publicitárias.
Uma grande pessoa, interativa e antenada as novas tendências, além de ser ótimo ilustrador.

O Borges Recomenda: Leia agora

/////////////////////////////////////////////////////////////////////////////////////

Da meia noite às seis
Autor: Will Ferrari
Profissão: redator nato

A mais nova literatura publicitária de um redator de futuro.
O Will fez, em vários jobs que veicularam no uol, terra, globo, submarino....., dupla comigo na criação de fullbanner, superbanner, dhtml, retangulo......., para os mais diversos clientes como rede de hotéis, faculdade, construtoras.....

O apetite criativo do Will é surpreendente e já estamos desenvolvendo algumas idéias para algumas peças que estarão aqui, na íntegra.
O Borges Recomenda: Leia agora

Abs... do Borges

Radar na Prancheta

2007-04-25T16:03:00.000-07:00

Pessoal.

Boas.

A partir de agora, também em "Na Prancheta com Borges" teremos o "Radar na Prancheta".
Toda vez que a notícia vier com este Título, estarei citando, curtas sobre Propaganda e para começar vamos falar sobre o site outdooronline.

Outdooronline, está trabalhando agora, por segmentos ou como eles chamam, por ruas.
O nosso outdoor foi parar, e não me pergunte porque, na Rua de Portfolios.
Eles também retiraram o botão de ranking, sendo só possível, ver o números de clicks ao passar o mouse sobre o outdoor.

A boa notícia é que, mesmo com a alteração e disposição, num espaço de 20 dias aproximados, o outdoor Na Prancheta com Borges, chega aos seus 65 clicks, um crescimento de 260% sobre a primeira consulta.

Abs...do Borges

removeMovieClip - Parte - 1

2007-04-25T04:58:00.000-07:00

Olá Pessoal.

Hoje vamos iniciar a primeira parte do comportamento MovieClip.
Vou mostrar como remover o MovieClip no "_root" por meio do comando "removeMovieClip".

Então vamos lá.

1- Crie dois frames, um chamado de Interface e outro de AS

2- Em Interface, crie um MovieClip chamado abrir_mc com instância abrir

Aqui já faço a minha primeira observação. O MovieClip é mais prático a manipulação com ações como Botão. O MovieClip será o nosso botão que aplicaremos um comando à ele.

Outra dica é tudo que for action coloque no frame AS, e não nos MCs, assim você terá maior controle e acesso ao código.

3- Em Interface, crie um outro movieclip com nome de aviso, no formato de janela.

4- Dentro de aviso crie 4 layes com nomes:
- ações
- botão fechar
- texto
- fundo

Em ações, no frame 5 coloque o AS
stop();
//Controlar a visibilidade do ScrollBar
if (msg_txt.maxscroll>1) {
sbMsg._visible = 1;
} else {
sbMsg._visible = 0;
}

// aqui temos controle da visibilidade do scroll, serve como exemplo componente de scroll.

No Frame 10 do layer ações coloque:
this.removeMovieClip();
_root.gotoAndStop(1);

Aqui vamos analizar um pouco.
Estamos informando que aqui será removido o MovieClip e retornará ao primeiro frame lá no root.

O MovieClip "x" está com a função?

x_mc.onRelease = function(){
play();
}

O que vai acontecer?
Como no nosso frame 5 estamos com Stop(), ao clicar em "X" o filme vai dar o play até o frame 10 que está com a ação para remover este MovieClip (aviso) e retornará ao frame 1 no root.

Isto foi feito porque temos um efeito de fade no Layer só para ele apecer de forma suave como também para desaparecer.

Após feito isto delete o MovieClip "aviso" do palco, vá até a biblioteca e clique no botão Linkage, ativando o "Export Action Script".

Pronto.

Em root,no layer AS, escreva:
stop();
abrir.onRelease = function(){
_root.attachMovie("aviso","aviso_mc",2,{_x:150,_y:150});
}

//estamos atribuindo a função de click ao botão abrir para atachar o aviso, na posição x:150 e y:150, ou seja só aparece o aviso e se clicar em abrir e se clicar no mc-botão "x" ele sai em fade e remove do root.

Assim pessoal, encerramos o nosso primeiro tutorial sobre removeMovieClip, na sequência mostrarei como fazer com SetInterval.

Dúvidas ou sugestões.... fale com o Borges.

Abs.... do Borges

Classe Tween e Set Interval

2007-04-19T15:26:00.000-07:00

Olá pessoal.

Hoje vamos falar um pouco sobre animação em Flash com AS utilizando o Class Tween.
Existem diversas aplicações para esta classe, na minha opinião, quando ela é bem aplicada em uma peça publicitária você tem ganho no apelo visual.

O lance é, primeiramente, esquecer o timeline,em Action Script, isto não existe.

Bom o que é Class Tween?

Exemplo:

No timeline: para você dar movimento a um objeto, você criaria um movieclip ou graphic.
No primeiro frame você colocaria na posição inicial do objeto e no décimo frame você colocaria na posição final.
Depois atribuia ao timeline Create Motion Tween.
E assim o objeto moveria.

No Action Script:

1- crie um movieclip
2- dê um nome no "Instance Name"
3- crie outro layer chamado de AS
4- F9(abrir o editor de AS)

Agora vamos gastar as pontas dos dedos.

Para trabalhar com Class Tween, você precisa trazê-lo para o seu arquivo flash.
Ele já está na pastas de Classes que vem junto com o Flash, então:

import mx.transitions.Tween;
import mx.transitions.easing.*;

Ótimo. Agora vamos criar uma variável e atribuir valores a ela:

var ball_tween:Tween = new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 2, true);

Criei a variável: ball_tween, que é um Tween.
Chamei o Movieclip que criamos: ball_mc
Falei para ele que eu quero trabalhar sobre o eixo horizontal (_x)
Com movimento Regular e com efeito na entrada.
Partindo da posição Zero(0) e terminando na posição (300)
Com o tempo de 2 segundo
E utilizando o FPS do meu filme: true

Até aqui o seu MovieClip vai andar de 0 a 300, em dois segundos, pelo eixo horizontal, de forma regular.

Para quem entende de AS até agora está tranquilo.
Aí eu pensei:

"Mas quero que ele fique na posição final (300), por três segundos e depois retorne ao valor inicial ou outro valor."

Na ajuda do Flash ele mostra esta opção, somente com o clique, dando a função para ele retornar rewind(); mas não por tempo.

Solução?

Set Interval

E funciona com Class Tween?
Sim meu amigo, funciona uma maravilha.
Então segue o AS completo com a pausa deste tempo:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Tween = new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 2, true);
ball_tween.onMotionFinished = function() {
ball_tween.stop();
var ball2:Number = setInterval(ball2_mc,3000);

function ball2_mc (){
var ball_tween:Tween = new Tween(ball_mc, "_x", Elastic.easeInOut, 300, -100, 4, true);
clearInterval (ball2);
}
};

A partir daí dependa da sua criatividade.
Imagine um banner com entradas e saídas de MovieClips de forma suave, elástica, regular, com alpha....

Só um alerta.
O Class Tween só funciona para Action Script 2, portanto tome cuidado.

Dúvidas, sugestões ..manda para o Borges.

Abs....do Borges

Na Prancheta com Borges está no Outdooronline

2007-04-15T11:08:00.000-07:00

Olá pessoal.

Ontem o "Na Prancheta com Borges" deixou a sua marca no Outdoor Online: http://www.artilheira.com.br/outdoor/
Este site oferece a oportunidade de você ou sua empresa estar em evidência em um Outdoor só que na internet.
Pode ficar tranquilo que lá outdoor é permitido, ou pelo menos até agora o Kassab não o proibiu como está fazendo na cidade de São Paulo.
Mas não quero falar de política e sim deste espaço.

Em um dia de exposição conseguimos 21 clickes em nosso outdoor.
Para a divulgação do "Na Prancheta com Borges", criei um conceito bem clean e direto ao ponto.

Então meu amigo(a), aproveite esta dica e faça você também a exposição do seu site, portfolio, serviços ou produto.

Abs...... do Borges.

Flash - AS no papel?

2007-04-14T06:08:00.000-07:00

Realmente este título é intrigante, AS no papel???

Pois bem, estava desenvolvendo um fullbanner e como de costume antes de abrir o Flash, estava rabiscando algumas idéias no papel.
Ao longo do tempo você começa a mudar a sua perspectiva criativa quando conhece Action Script.
Dizia o profeta Roque, que após aprender Action, o mundo seria diferente..._root seria Deus?
Mas acho que já é ficar bitola em AS.
Voltando ao assunto.
Estava eu e o papel em um duélo do que pode ser feito e o que realmente seria vendido.
Isso gasta tempo... quando olhei no relógio já era meio dia.
Voltei após o almoço e ví no papel aquele monte de rabiscos e ai eu pensei... vou fazer diferente.
Embaixo de cada cena comecei a "rafear" os códigos.... if, else, for, tween, setinterval......"afe".
Era rabisco pra lá e prá cá..... AS no meio....
Mas o que me faz mais falta quando faço estes rabiscos no papel é a falta do "CTRL+Z"...

É ou não é...???

Quando abri o Flash.. foi mais um processo de copy paste em AS do que raciocínio... tudo ficou mais rápido.. mas confesso.... por precaução à Saúde não fiz mais isso... mas foi uma experiência única.

Tente ficar bitola em AS no papel, pelo menos uma vez em um job.... e me diz como foi esta experiência.

abs.... do Borges.

Prancheta????

2007-04-14T05:27:00.000-07:00

Olá pessoal.

Aqui estou em minha primeira matéria para "Na Prancheta com Borges".
Este espaço é uma iniciativa, claro, minha, para debatermos um pouco sobre criação e interatividade.
Eu escolhi este título, pois acredito que por mais que tentamos descartar o papel ele não sai da nossa mesa, seja em formato A4, seja até em Post-it.
Já se dizia que para se ter grandes idéias é necessário,um bar, uma mesa de bar, uma cerveja e um guardanapo.(olha o papel ae).

Melhor me apresentar primeiro.
Sou design Interativo de uma agência de propaganda online.
Tenho 30 anos, sou casado, não tenho filhos mas tenho um cocker brother chamado Thor.
Fiz UNIP, trabalho a 7 anos em agências e tenho cursos de programação em Action.

Em "Na prancheta com Borges", vou falar também sobre criação em Flash, programação em Action, citarei algumas peças que fiz e que estão na praça... ou seja, vamos é mesmo falar de Publicidade para os publicitários.

Podem me mandar sugestões para debatermos.. aceito ... e espero que gostem.

abs..do Borges.