Prática 13 – Componentes
1. Objetivos
Aprender como usar componentes
Usar componentes para disparar eventos
Usar componentes para inserir dados dinamicamente.
2. Recursos Necessários
Computador com o programa Macromedia Flash MX ou superior.
3. Conceitos Gerais e Procedimentos
Olhe para os programas e animações presentes na web que você verá vários elementos de interface
comuns a estas aplicações. Você verá similaridades em botões, barras de rolagem, menus dropdown e outros. Estes elementos podem ser encontrados em várias aplicações porque eles são
ferramentas que permitem o usuário interagir de maneira satisfatória e serem reutilizadas.
Na maioria dos ambientes de desenvolvimento, como Visual Studio .NET, os elementos de interface
são pré-configurados, significando que os desenvolvedores podem simplesmente arrastar um
elemento como um botão e colocá-lo na aplicação que está sendo desenvolvida e adicionar uns
códigos para fazer o novo elemento fazer alguma coisa útil.
É claro que os desenvolvedores podem criar seus próprios elementos de interface do zero,
entretanto, muitos destes elementos pré-construídos são não só altamente funcional, mas contém
poderosas capacidades que podem ser facilmente acessadas com relativamente pouca
programação.
O ambiente do Flash vem com alguns elementos de interface pré-construídos, chamados
componentes. Tem botões, caixas de alerta, janelas roláveis, menus, caixas de seleção e mais.
Componentes permitem que você, facilmente e rapidamente, inclua elementos interativos complexos
no seu projeto. Depois que você tem os elementos de interface aonde deseja, você pode usar o
ActionScript para controlar os elementos de várias maneiras.
Nesta lição, vamos usar extensivamente os componentes para criar uma aplicação que tenha uma
interface com uma alta interação com o usuário. Criar esta aplicação do zero, tomaria vários dias.
Usando componentes e ActionScript, entretanto, você pode fazer tudo muito mais rápido.
1
3.1. Atividade 1 – Implementando o componente “flashtone”
Vamos implementar um componente em um filme Flash. Este
componente faz uma animação em resposta ao movimento do
mouse na janela. Quanto mais rápido o movimento, mais caótica
fica a animação.
a) Abra o arquivo “p13_ativ1.fla”. Você verá que ele está em
branco e que na biblioteca tem os componente “flashtone”
e um diretório com os símbolos usados no componente.
b) No Properties Inspector, mude a cor de
fundo para o amarelo “#FFFF66”.
c) Arraste o símbolo “flashtone” da
biblioteca para o palco. Centralize-o na
área principal.
d) Clique nele, em seguida, no Properties
Inspector, você verá uma aba
“Parameters”, selecione-a. Clique no
botão “Launch Component Inspector”.
e) Agora você abriu a janela de edição do componente “flashtone”. Ela é uma
janela redimensionável, e para modificar seu tamanho, basta clicar no canto
inferior direito e puxar para redimensionar de acordo com o que você
deseja.
f)
Todos os valores dos parâmetros devem ser editados para rodar o seu filme da maneira que
você deseja. Em caso de dúvida, clique na interrogação que se encontra no lado direito para
maiores informações de como devem ser preenchidos estes campos.
g) Vamos inicialmente, preencher com valores comuns a todos. Siga os valores seguintes:
2
h) Feche a janela de edição de componentes e salve seu arquivo como
“p13_ativ1_seunome.fla”. Publique o filme e veja o resultado. Legal, né?
i)
Agora mude cores e valores para ver o comportamento do filme. Quando você chegar em um
resultado interessante, salve e publique o seu arquivo novamente.
3.2. Atividade 2 – Modificando o componente “PondRipples”
Este componente gera estruturas geométricas de discos
coloridos. Os discos coloridos se movem como se
estivessem respirando. Isto é causado por uma animação
que roda ininterruptamente que causam o efeito do disco
aumentar e diminuir.
a) Abra o arquivo “p13_ativ2.fla”. Este componente já
está com valores que o deixarão funcionando de
uma maneira legal. O foco desta atividade será
olhar e modificar alguns símbolos que compõe o
componente.
b) Arraste 5 componentes “PondRipples” para o palco em lugares variados. Quando muitos
discos estão expandindo e contraindo o efeito é mais interessante. Publique o arquivo como
.swf, o que acha?
c) Os parâmetros do componente permitem que você ajuste o diâmetro, a espessura do disco, a
cor do disco, a distância entre um disco e outro, e também, quanto os discos irão mover.
Você pode escolher quando os discos irão ser construídos na tela.
3
Agora, modifique as cores e valores de cada um deles, de maneira que um fique maior que outro, ou
fique com cores variadas. Note que o diâmetro e a espessura do disco podem afetar a suavidade da
animação. Se você puser um diâmetro muito grande, então coloque a espessura fina, o componente
será forçado a fazer mais cópias do disco.
d) Publique o arquivo e veja o resultado. Gostou? Então é
hora de pensar em modificações nos símbolos.
Será que é possível, ao invés de fazer a forma circular, fazer uma
sextavada? Na biblioteca, tem um diretório chamado “Component
Elements”. Abra este diretório e o subdiretório “Designer
Elements”.
Ali dentro você encontrará um movie clip chamado “PondShape”.
É lá que está a área do disco. Dê um clique duplo nele para editálo.
Note que as linhas-guias determinam a posição e a área do círculo.
e) Para selecionar o formato da área, basta clicar no pequeno triângulo que fica no canto inferior
direito da ferramenta Rectangle e escolher PolyStar. A borda do disco tem 10px de largura,
então, precisamos fazer um polígono que tenha 10px de borda e que ocupe a área delimitada
pelas linhas-guias. Para isto, preencha no painel Properties os valores de 10 para linha e
sem cor de preenchimento.
f)
Uma vez que o seu polígono esteja desenhado, é preciso converter a linha em
preenchimento. Para isto, vá em Modify> Shape> Convert Lines to Fills.
g) Teste seu filme, ele deverá funcionar com a nova forma.
h) Quer ver o que está por trás disto tudo? No “Scene 1”, clique na
imagem “PondRipple” com o botão direito do mouse. Selecione: Edit in
Place. Abra o Actions Panel que você verá todo o código deste
componente.
4
i)
Salve seu filme como “p13_ativ2_seunome.fla”
3.3. Atividade 3 – Componente de digitação usando html
O componente Typing Text Effect gera o efeito
do texto sendo digitado na tela.
a) Abra o arquivo “p13_ativ3.fla”. Nele você
verá o componente na biblioteca e o
fundo desenhado.
b) O componente requer um campo de texto
dinâmico. Na camada “areaTexto”, crie um
campo de texto que ocupe toda a área clara
central. Você precisa dar ao campo de texto
um nome ao qual você precisa entrar como o
valor no parâmetro “Textfield Target”. Por
hora, entraremos com o nome “areaTexto”.
c) Selecione a camada “Typing Text Effect” e
arraste o componente para o canto superior
esquerdo da área central.
d)
Edite o componente. Em Textfield Target,
coloque “areaTexto”.
e) Você pode adicionar vários textos no parâmetro “Target Sets”. Cique no botão Add Item para
adicionar um novo texto ou clique no texto e então clique no botão Edit Text para editar o
texto. Você deve entrar com HTML para customizar os atributos do texto.
f)
Feitas estas modificações, salve o arquivo como “p13_ativ3_seunome.fla” e publique-o, o que
acha?
5
3.4. Atividade 4 – Acertando o relógio digital
O relógio usa a hora que está na máquina local, não a hora do servidor, de maneira que, não importa
aonde o seu usuário está, o relógio vai usar a hora gravada em seu computador. Você pode
customizar o formato da fonte, o pisca-pisca e as cores.
Você pode mudar a fonte que será usada para os dígitos do relógio, mas o símbolo do texto deve ser
editado diretamente. Encontre o símbolo “clock2 digit” na biblioteca e edite-o. Este movie clip contém
um objeto, um campo de texto. Clique no campo de texto e ajuste a fonte. Este passo assegura que
a fonte desejada seja exportada com o arquivo swf, de maneira que o relógio use sua fonte, mesmo
que o usuário não a tenha. Para melhores resultados, tenha certeza que o campo de texto seja do
tamanho necessário para mostrar o seu horário.
a) Faça o relógio ser de 24h, não mostrar “am/pm” e mude a fonte para uma mais discreta e
menor.
b) Feitas estas modificações, salve o arquivo como “p13_ativ4_seunome.fla” e publique-o.
Atenção: faça uma cópia de todos os arquivos para no diretório determinado pelo professor para
correção.
Até semana que vem!
6