16 SETEMBRO 2006 / EDIÇÃO 135

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 1a PARTE

I niciamos nesta edição uma série de artigos que irão inci-

dir todos sobre o mesmo tema: “conteúdos dinâmicos em
Flash”. Já foi referido em números anteriores que os sites
em Flash não têm de ser estáticos em relação ao seu conteú-
do informativo. Apesar de se encontrar algumas lojas on-line,
fóruns ou blogues feitos em Flash, o certo é que a maioria é
construída com recurso a templates. Penso que não será ne-
cessário mencionar o quanto ficamos limitados, em termos
de grafismo e mesmo de programação, com a utilização dos
ditos templates. Para ajudar a combater essa onda criámos
um pequeno blogue, que permitirá apresentar os conceitos
iniciais para a entrada no mundo do Flash dinâmico.
A estrutura inicial do nosso blogue é composta por um ca-
lendário que assinalará os dias que contêm entradas “clicá-
veis”, uma área para visualizar o post e outra área para os
respectivos comentários. Será possível acrescentar comentá-
rios; para esse efeito teremos um formulário.
Para se adicionar posts teremos um backend também cons-
truído em Flash. Toda a informação será armazenada numa
base de dados MySQL, e a linguagem escolhida de comuni-
cação entre a base de dados e o Flash será o PHP.
Iniciamos nesta edição a construção gráfica do blogue.

PASSO 1 PASSO 2
Clicar no ícone para criar
seis layers, às quais
iremos atribuir os
seguintes nomes: “fundo”,
“blog guia”, “calendario”,
“noticias”, “comentarios”, Vamos importar para a biblioteca as imagens a utilizar na
“actions”. construção gráfica do blogue. Clicar em File > Import > Import to
Library... e seleccionar as imagens “blog.jpg”, “caixa_calend.png”,
“caixa_coment.png”, “caixa_notic.png”, “imagemFundo.png” que
se encontram no CD/DVD.

PASSO 3
Seleccione a layer “fundo” e arraste da biblioteca (Ctrl+L ou Cmd+L) a imagem “imagemFundo.png”. Para criar pastas para
organizar a biblioteca bastará clicar no ícone New Folder. Pretende-se que a imagem fique centrada com o palco. Logo,
selecciona-se a imagem no palco e alinha-se utilizando o painel Align.

supei016a019.indd 16 03-08-2006 17:33:22

 SETEMBRO 2006 / EDIÇÃO 135 17

PASSO 4
Seleccione a layer “blog guia” e arraste a imagem “blog.jpg” da biblioteca. Alinha-se ao
centro (ver passo 3). Esta imagem servirá de guia para o que pretendemos criar, logo
não deverá surgir no produto final. Desse modo, vamos indicar que essa layer é uma
guide layer. Dê um duplo clique sobre o ícone da layer e depois seleccione “Guide”.

PASSO 5
Na layer “calendario” vamos
colocar a imagem “caixa_calend.
png”, que iremos converter em
movie clip. Clicar com o botão
direito do rato (Ctrl+clique no
Mac) e Convert to Symbol.
Depois atribuímos um nome
e seleccionamos Movie clip.

PASSO 6 PASSO 7
Através de um duplo
clique iremos aceder
ao movie clip, dentro
do qual criaremos
seis layers com os
seguintes nomes:
Seleccione o recém-criado movie clip e, no painel Properties, “box”, “setas”,
atribua-lhe um instance name, de modo que o seu “dias”, “mês”,
referenciamento seja possível no ActionScript. O nome “ano”, “actions”
de instância será “calendario_mc”. (ver passo 1).

PASSO 8
Na layer “setas” vamos criar uns triângulos que serão os botões para mudar
os meses. Se mantivermos o botão do rato pressionado sobre a ferramenta
Rectangle, surgirá um painel que permite seleccionar a ferramenta PolyStar.
No painel Properties clicamos em Options e, no painel adicional, colocamos
o número de faces pretendidas.

supei016a019.indd 17 03-08-2006 17:33:38

 18 SETEMBRO 2006 / EDIÇÃO 135

SOLUÇÕES I FLASH

PASSO 9
Após desenhar o triângulo, iremos convertê-lo em movie clip (ver passo 5).
Note que só se desenhou um triângulo. Após a conversão em movie clip,
faremos uma cópia do mesmo (Alt+clique). Os nomes de instância
respectivos serão “setaEsq_mc” e “setaDir_mc” (ver passo 6).

PASSO 10
Com duplo clique sobre uma das setas, acedemos ao movie
clip. Iremos criar duas layers: “seta” e “actions”. Na layer
“seta” vamos inserir um KeyFrame (F6) no frame 10.
Seleccionamos o KeyFrame 1 e, no painel Properties,
colocamos “Tween: Shape”. Seleccionamos o KeyFrame10
e seleccionamos a seta.
No painel Properties colocamos o preenchimento com a cor
“0xFF9900”. Na layer “actions”, seleccionamos o frame 10 e
adicionamos frames (F5). Mantendo essa layer seleccionada,
vamos aceder ao painel Actions (F9 ou Alt+F9 no Mac). Note
que deverá surgir “Actions-Frame”. Colocar o código que está
na imagem.

PASSO 11
Clicar em “calendario” para tornar ao movie clip anterior. Na setaEsq_mc.onRollOut = function() {
layer “actions” iremos programar parte do funcionamento das seta = “off”;
setas. Seleccionar o KeyFrame1 e aceder ao painel Actions. };
Note que deverá de surgir “Actions-Frame” (ver passo 10). setaEsq_mc.onReleaseOutside = function() {
seta = “off”;
};
this.onEnterFrame = function() {
switch (seta) {
case “dir” :
setaDir_mc.nextFrame();
setaEsq_mc.prevFrame();
break;
case “esq” :
setaDir_mc.prevFrame();
setaEsq_mc.nextFrame();
Colocar o seguinte código: break;
case “off” :
var seta:String = “off”; setaDir_mc.prevFrame();
setaDir_mc.onRollOver = function() { setaEsq_mc.prevFrame();
seta = “dir”; break;
}; }
setaDir_mc.onRollOut = function() { };
seta = “off”;
};
setaDir_mc.onReleaseOutside = function() {
seta = “off”;
};
setaEsq_mc.onRollOver = function() {
seta = “esq”;
};

supei016a019.indd 18 03-08-2006 19:28:31

 SETEMBRO 2006 / EDIÇÃO 135 19

PASSO 12
Na layer “ano”, vamos criar uma caixa de texto “Dynamic Text”. Seleccionar a ferramenta
Text e criar a caixa no sítio correspondente. No painel Properties colocamos “Dynamic
Text” e atribuímos o nome de instância “ano_txt”. Poder-se-á criar a formatação que se
desejar; no entanto, aconselha-se colocar a fonte de letra “Embed”, para assegurar que
todos os visitantes obtenham uma correcta visualização, qualquer que seja o tipo de
letra seleccionado. Neste caso, só teremos números.

PASSO 13 PASSO 14
Na layer “mes” vamos Na layer “dias” vamos preencher
criar uma nova caixa o calendário. Aqui pretende-se
“Dynamic Text” (ver passo que cada dia seja um movie clip
12). Agora atribuímos o independente. Para criar os movie
nome de instância “mes_ clips e atribuir os respectivos nomes
txt” e na opção “Embed” de instância reveja os passos 5 e 6.
iremos colocar somente Os nomes de instância deverão de ser
as três primeiras letras “dia1_mc” até “dia31_mc”, para facilitar
de cada mês. a programação futura.

PASSO 15 PASSO 16
Dentro de cada um Na layer “numero” teremos
dos movie clip dos no KeyFrame1 somente o
dias, deveremos número, e no KeyFrame2 o
ter quatro layers número e a respectiva linha.
com os nomes
“numero”, “area
clicavel”, “labels”
e “actions”.

O tema dos conteúdos dinâmicos em Flash é interessante, mas obriga a algum estudo e concentração. Espero que o leitor se sinta
motivado para tal. No próximo número, concluiremos a composição gráfica do nosso blogue, após o que nos debruçaremos sobre
a estrutura de um documento XML para ser devidamente “absorvido” pelo Flash. Até lá, bom “Flashing”.

NA PRÓXIMA EDIÇÃO...

supei016a019.indd 19 03-08-2006 19:28:42