16 OUTUBRO 2006 / EDIÇÃO 136

SOLUÇÕES I FLASH
NO CD E DVD

CONTEÚDOS DINÂMICOS –
CONSTRUÇÃO DE UM BLOGUE
A blogosfera já não é novidade, mas não é comum
encontrar blogues elaborados inteiramente com Flash. 2a PARTE

PASSO 17
Na layer area clicavel vamos colocar
um rectângulo. No entanto, como
pretendemos que esse rectângulo não
seja visível, vamos seleccioná-lo e, no
painel Colors, vamos colocar o
preenchimento e respectivo contorno
com Alpha:0.

PASSO 18
Na layer labels vamos ter dois keyframes com as
seguintes etiquetas: “off” e “on”. Seleccionando
o keyframe respectivo, no painel Properties
acedemos ao Frame Label. Note que surgirá uma
pequena bandeira nos keyframes.

PASSO 19 PASSO 20
Na layer actions teremos dois keyframes e colocaremos o Regressar ao blogue (ver passo 11). Na layer noticias, vamos
seguinte código em ambos: colocar a imagem “caixa_notic.png” (ver passo 3) e convertê-
-la para movieclip (ver passo 5). Atribuir o nome de instância
stop(); “noticias_mc” (ver passo 6).

PASSO 21 PASSO 22
Aceder ao movieclip recém-criado (ver passo 7), onde iremos Na layer box teremos a imagem “caixa_notic.png”. Na layer
ter cinco layers, com os seguintes nomes: “box”, “data”, data vamos criar uma caixa de texto Dynamic com o nome de
“titulo”, “texto” e “scrollbar”. instância “data_txt”.
 OUTUBRO 2006 / EDIÇÃO 136 17

PASSO 23 PASSO 24
Aconselha-se colocar as fontes de letra embed (ver passo 12). Na layer titulo
Neste caso, só nos interessará que sejam os caracteres teremos uma caixa
numéricos. de texto Dynamic,
com o nome de
instância de “titulo_
txt”. Faremos o
embed aos
caracteres Latin,
à pontuação e
acrescentaremos
alguns sinais de
acentuação.

PASSO 25 PASSO 26
Na layer texto vamos repetir o passo anterior, mas com o nome Para a layer scrollbar
de instância “texto_txt”. utilizaremos um
componente User
Interface –
UIScrollBar –, uma
vez que só pretendemos fazer scroll de texto. Os componentes
são acessíveis via menu Window > Components.

PASSO 27
No painel Components
encontra-se o separador User
Interface. Vamos colocar um
UIScrollBar no palco.

PASSO 28 PASSO 29
Atribuir nome de instância “noticiaScroll”. Repare que junto às Acedendo aos Parameters vamos colocar como
Properties encontramos um novo separador: Parameters. targetInstanceName o nome de instância da caixa de texto
“texto_txt”.
Note que não
pretendemos
o scroll
horizontal,
pelo que
deve colocar "false".

PASSO 30
Regressemos ao blogue (ver
passo 11). Na layer comentarios,
colocaremos a imagem “caixa_
coment.png”. Converter em
movieclip e atribuir o nome de
instância “comentarios_mc” (ver
passos 5 e 6).
PASSO 31
Aceder ao movieclip “comentarios_mc”, no
qual iremos criar as seguintes layers: “box”,
“texto”, “scrollbar”, “textoStatic”,
“textoInput”, “btns” e “actions”.
Na layer box teremos a imagem “caixa_
coment.png”.
18 OUTUBRO 2006 / EDIÇÃO 136

SOLUÇÕES I FLASH

PASSO 32 PASSO 33
Na layer texto colocaremos uma caixa Vamos acrescentar um componente UIScrollBar aos
de texto Dynamic, em que estarão comentários. Assim, repetiremos o passo 27.
todos os comentários feitos sobre uma Atribuiremos o nome de instância “comentarioScroll”.
determinada notícia. Atribuir o nome
de instância “texto_txt”. Não se
esqueça de fazer o embed à fonte de letra (ver passo 24). Esta
caixa de texto permitirá que se escreva HTML para uma
formatação mais elaborada. Assim, deveremos premir a opção
Render text as HTML.

PASSO 34 PASSO 35
Iremos agora criar um pequeno formulário para permitir
que sejam adicionados comentários. Relembro que, para a
inserção das notícias, criaremos mais tarde um CMS – Content
Management Service.
Na layer textoStatic vamos criar caixas de texto Static com os
títulos dos campos a preencher: “Nome” e “Comentário”.

Na layer textoInput teremos duas caixas de texto Input com os

nomes de instância “nome_txt” e “comentario_txt”.

PASSO 36 PASSO 37
Na layer btns teremos o botão para submeter o novo Na layer texto teremos o texto do botão. Iremos seleccioná-lo e
comentário. Escrever o texto do botão e converter em converter para Graphic. No frame 10 acrescentaremos um
movieclip. Atribuir o nome de instância “inserir_mc”. keyframe (f6).
Entrar no movieclip onde iremos ter três layers: texto, area Seleccione
clicavel e actions. Graphic e, nas
Properties,
aplique um Tint
com a cor
#FF9900 a
100%.

PASSO 38 PASSO 39
Seleccione o keyframe inicial e, nas Properties, seleccione Na layer area clicavel vamos desenhar um rectângulo que se
Motion. sobreponha a todo o texto do botão. Atenção que tanto o
preenchimento como o contorno deverão de estar com
Alpha:0, para que não sejam visíveis (ver passo 17).

PASSO 40
Na layer actions colocaremos somente um stop().
Note que todas as layers deverão percorrer os dez frames
da animação do texto.
 OUTUBRO 2006 / EDIÇÃO 136 19

PASSO 41
Regressar ao movieclip dos comentários. Pretendemos que
as caixas de texto Input tenham o contorno visível mas sem
background. Assim na layer actions vamos colocar o seguinte Evolução do Flash: FutureSplash (1996); Flash versões 1 a 5
código: (1996/2000); Flash versões 6 e 7 (MX e MX2004) (2002/2003);
Flash versão 8 (2005)
nome_txt.border = true;
nome_txt.borderColor = 0x999999;
comentario_txt.border = true; PARABÉNS FLASH
comentario_txt.borderColor = 0x999999;
Encontra-se no mercado um software que permite criar
PASSO 42 animações vectoriais – o FutureSplash Animator.
Tecnologia “de ponta” que foi rapidamente utilizada em
À semelhança do que se fez com as setas, iremos programar websites de empresas de renome, como o MSN da
os eventos de rollOver e rollOut. Mantemo-nos assim na layer Microsoft, o site oficial The Simpsons da FOX e o Disney
actions: Daily Blast da Disney. Este último utilizava também o
Shockwave da Macromedia e, a partir daqui, nasceu uma
ligação que terminaria com o lançamento do Macromedia
var botao:Boolean = false; Flash 1.0 – estamos em 1996.
inserir_mc.onRollOver = function(){ Foi em 1999, altura em que saiu a versão 4, que nos
botao = true; presenteava com campos de input, streaming de MP3
} e variáveis internas, que me cruzei com o Flash.
inserir_mc.onRollOut = function(){ O Actionscript ainda era algo muito prematuro, o qual
botao = false; só assumiu realmente a designação com a versão 5
} no ano seguinte.
inserir_mc.onReleaseOutside = function(){ Hoje, em 2006, o Flash, na sua versão 8, é utilizado à
botao = false; escala mundial. A evolução foi vertiginosa e espera-se que
} assim se mantenha. A Internet já não é nenhuma novidade,
e a atenção redobra-se para todos os dispositivos que
this.onEnterFrame = function(){ permitam um display digital.
if(botao){ Aquela que outrora nasceu como uma ferramenta para
inserir_mc.nextFrame(); animação vectorial é hoje considerada uma plataforma
}else{ para uma “experiência de navegação rica e sem falhas”.
inserir_mc.prevFrame(); Este ano comemoram-se os dez anos do agora Adobe
} Flash. Parabéns e obrigado.
}

Concluímos assim a produção gráfica do nosso blogue, ao qual se acrescentaram pequenos apontamentos de animação nos
botões. Pretendemos manter uma interface limpa e com pouca animação, pois o foco de atenção não se encontra nesse sector.
Espero que o leitor mantenha o ânimo, agora que nos aproximamos da fase crucial.
Na próxima edição iremos criar um documento XML com a estrutura final e preenchido com Dumb Data e respectiva programação
para a sua leitura dentro do Flash. Até lá, bom “Flashing”.

NA PRÓXIMA EDIÇÃO...