Professional Documents
Culture Documents
Flash MX
Design, Animação e
Programação
Anabela Gonçalves e Magno Urbano
Flash MX
Design, Animação e
Programação
Portugal/2002
Reservados todos os direitos por Centro Atlântico, Lda.
Qualquer reprodução, incluindo fotocópia, só pode ser feita
com autorização expressa dos editores da obra.
geral@centroatlantico.pt
www.centroatlantico.pt
ISBN: 972-8426-53-4
Depósito legal: 181.663/02
Marcas registadas: todos os termos mencionados neste livro conhecidos como sendo marcas registadas de
produtos e serviços, foram apropriadamente capitalizados. A utilização de um termo neste livro não deve
ser encarada como afectando a validade de alguma marca registada de produto ou serviço.
O Editor e os Autores não se responsabilizam por possíveis danos morais ou físicos causados pelas
instruções contidas no livro nem por endereços Internet que não correspondam às Home-Pages
pretendidas.
ÍNDICE
Iª PARTE:
DESIGN E ANIMAÇÃO NO MACROMEDIA FLASH MX
Freehand .........................................................................99
Publish Settings ................................................................101
Opção Formats – Janela Publishing ...............................102
Opção Flash – Janela Publishing ...................................103
Opção HTML – Janela Publishing...................................105
Publish ..............................................................................107
VIEW ...................................................................................108
GoTo .................................................................................108
Zoom In, Zoom Out e Magnification ...................................108
Outlines, Fast, Antialias, Antialias Text ...............................108
Rulers, Grid e Guides ........................................................109
MODIFY ............................................................................... 112
Shape - Soften Fill Edges ................................................. 112
Convert Lines to Fills ......................................................... 114
Expand Fill ........................................................................ 115
Smooth ............................................................................. 115
Straighten .......................................................................... 116
Optimize ........................................................................... 117
Trace Bitmap .................................................................... 118
Transform ..........................................................................121
Arrange .............................................................................122
Align .................................................................................123
Group & Ungroup ..............................................................127
Break Apart .......................................................................127
Distribute to Layers ...........................................................128
IIª PARTE:
A PROGRAMAÇÃO NO MACROMEDIA FLASH MX
1. Workflow
1
Nuno Ricardo é o único Flash 5 Developer registado em Portugal
16 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Distribute to Layers
Se tivermos um grupo de objectos numa layer, e pretendermos fazer
animações independentes para cada um deles, é necessário colocá-los
em layers também elas independentes. Um objecto em cada layer.
Com as variantes
shape distort e
envelope distort, o
designer consegue
libertar a sua
criatividade como
antes não era
possível.
Pixel Snapping
Através da opção Snap to Pixels, e com a visualização a 400% ou
superior, temos acesso a uma grelha que nos permite fazer o alinha-
mento de objectos ao nível do pixel. Desta forma, evitamos efeitos de
antialiasing que podem ser prejudiciais à qualidade dos contornos das
formas.
Máscaras dinâmicas
Agora, podem-se construir dinamicamente máscaras. Desde o desenho
até à activação da máscara, tudo pode ser controlado por Actionscript
dando mais poder ao utilizador sobre esta importante característica do
Flash.
3. Suporte Multimedia
Suporte vídeo
Utilizando o codec Sonrenson Spark embebido dentro do player da ver-
são 6, é possível inserir vídeos dentro de ficheiros SWF.
20 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
4. Texto
Suporte Multilingue
5. Recursos de ajuda
Templates
Não só para ajudar um principiante, mas também para facilitar a criação
repetitiva de filmes com conteúdo semelhante, os Templates, já conhe-
cidos dos utilizadores de outras aplicações, estão também disponíveis
no Flash MX.
Painel Answers
Outra facilidade de ajuda – o Painel Answers, permite o acesso rápido a
dicas e recursos, com actualização via Internet.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 23
Exemplos e tutoriais
Já incluídos nas versões anteriores, estes tornam-se cada vez melho-
res.
6. Publicação e navegação
Desenvolvimento de conteúdo acessível
A acessibilidade dos conteúdos a indivíduos com necessidades espe-
ciais é um tema que tardiamente começou a ser tomado em conta. O
Flash suporta agora ferramentas como os leitores de ecrã. É possível
adicionar ajudas aos filmes para serem interpretadas por essas fer-
ramentas.
Named Anchors
As Named Anchors já são amplamente usadas em HTML, para facilitar
a navegação num site. Agora, também dentro de um filme Flash é pos-
sível utilizar esta ferramenta, de forma a que o utilizador possa navegar
utilizando o botão Back e Forward do browser.
24 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Editor parametrizável
Painel de referência
Se ainda assim persistirem dúvidas sobre o funcionamento de alguma
instrução, basta seleccioná-la e, pressionando SHIFT+F1, aparece no
painel Reference a explicação relativa à instrução.
Debugger melhorado
A detecção de erros de código é agora mais fácil. O debugger foi me-
lhorado, tendo agora novas capacidades como os breakpoints.
Instrução Switch
Anteriormente, a única instrução condicional era o IF, que embora fosse
eficiente, em muitos casos se existissem múltiplas hipóteses a testar
tornava-se pouco prático. Para resolver este problema, surge a instru-
ção SWITCH.
Drawing API
Esta API, dentro do objecto MovieClip, permite-nos desenhar qualquer
forma utilizando apenas Actionscript. É possível, por exemplo, desenhar
gráficos de qualquer tipo (barras, circular, linhas, etc.) com dados que
se carregam dinamicamente de um sistema de back-office.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 29
Componentes
Com os componentes pré-definidos é possível criar formulários com bo-
tões de selecção, caixas drop-down, caixas de selecção múltipla, etc.
9. Links Interessantes
Documentação e Recursos
• www.macromedia.com/software/flash/productinfo/features/index.ht
ml#detailed
• www.macromedia.com/desdev/mx/flash
• www.macromedia.com/exchange
• www.sorenson.com
• www.flashkit.com
• www.flash4all.com
• www.flashthief.com
• www.flashworker.com
• www.actionexchange.com
A não perder
• www.spiritonin.com
• www.spiritonin.com/stuff/capoeiragame.html
• www.electronicorphanage.com/biennale/works/fight.swf
• www.yugop.com
• www.m -designers.com
• www.2advanced.com
• www.cubadust.com
• www.habbohotel.com
• www.wmteam.com
• www.andyfoulds.com.uk
• www.estudio.com
• www.derbauer.de
• www.shocker.de
• www.symmetrylab.com
I.1. A INTERFACE GRÁFICA E OS
FUNDAMENTOS BÁSICOS
1
Existem diversas versões do FLASH Player disponíveis no site da Macromedia, cada qual
adequada a um tipo de browser e/ou sistema operativo (Netscape, Explorer ou Mozilla para
Windows, MacOS ou Linux).
32 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A interface gráfica
Logicamente, a primeira parte a abordar neste livro refere-se à interface
gráfica do Macromedia Flash MX, para que possa conhecer os cantos à
casa, significativamente modificados em relação à versão anterior.
DEFAULT LAYOUT
Começaremos então por escolher o tipo DEFAULT LAYOUT, o qual mo-
dificará a interface para que fique conforme a figura abaixo.
34 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Arrow Tool
Na parte de cima da barra de ferramentas pode ver duas
setas, uma preta e uma branca.
2
Para ter maior coerência essa ferramenta ao nosso ver deveria chamar-se “selection tool”, já que
a ferramenta seguinte e que a complemente chama-se “subselection tool”.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 35
ANTES DEPOIS
Subselection Tool
Se escolher a segunda das duas setas na barra de ferramentas, ou
seja, a Subselection Tool, colocará o programa em modo de selecção
de sub-objectos, o que lhe permitirá seleccionar os elementos compo-
nentes dos objectos em si, como por exemplo, os pontos que formam
um círculo. Veja a figura abaixo.
Line Tool
Logo a seguir na barra de ferramentas, a ferramenta para criação de
linhas (Line Tool), representada pelo ícone de uma linha recta em
diagonal.
Para criar uma linha, seleccione o Line Tool, carregue com o rato na
área de desenho, mova o cursor para outro sítio e liberte o botão do
rato. Se usar o SHIFT enquanto desenha, poderá fazer linhas horizon-
tais, verticais ou a 45º.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 37
Ao abrir a janela vai ver uma caixa nomeada TYPE (tipo) de onde pode
regular os estilos.
38 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SOLID (SÓLIDO)
O primeiro estilo disponível é o SOLID (sólido), onde a linha tem uma
aparência contínua. Este estilo permite apenas regular a espessura
(THICKNESS) e fornece uma caixa com a frase SHARP CORNERS,
que quando marcada produz linhas com cantos em bico.
DASHED (TRACEJADO)
O primeiro estilo disponível a seguir ao SOLID é o DASHED (linha
tracejada), que fornece a seguinte janela para ajuste.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 39
DOTTED (PONTEADO)
Temos então o estilo “dotted” ou ponteado.
RAGGED (IRREGULAR)
O estilo a seguir na caixa dos tipos é o RAGGED.
STIPPLE (PONTILHADO)
Este é o estilo nomeado de STIPPLE (pontilhado).
No DOT SIZE poderá regular o tamanho dos pontos, que do menor para
o maior são: TINY, SMALL, MEDIUM e LARGE.
HATCHED (TRACEJADO)
O estilo seguinte é o HATCHED.
Lasso Tool
De volta à barra de ferramentas do Flash, verá, ao lado do ícone da
recta, o ícone que representa um laço (Lasso Tool). Com esta
ferramenta poderá seleccionar partes internas de um objecto. Não deve
confundir-se com o modo de selecção de sub-objecto. Um sub-objecto é
um ponto que forma um determinado objecto. A ferramenta LASSO
permite seleccionar partes do objecto em si. Digamos que numa recta
qualquer utilizámos o LASSO para seleccionar uma região, conforme
nesta figura.
44 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Pen Tool
A próxima ferramenta da barra TOOLS é a pena de escrita (Pen Tool).
Com ela, poderá criar os pontos (sub-objectos) relativos às curvas ou às
formas que desejar.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 45
Utilize a Arrow Tool e carregue com o rato duas vezes em cima da cur-
va para a seleccionar. Na janela de propriedades da curva, que pode
ser vista na parte central inferior do ecrã, encontrará os parâmetros que
poderão ser modificados.
Pode ver que o Flash não diferencia uma linha apenas de uma forma e
indica tudo como se fora SHAPE (forma). Nessa janela encontrará nas
quatro primeiras caixas superiores da direita os mesmos parâmetros
descritos anteriormente para as linhas, ou seja, a caixa de selecção da
cor da forma, a espessura da sua linha, o estilo da linha e a caixa de
CUSTOM que permite todos aqueles estilos descritos (solid, dashed,
dotted, ragged, stipped e hatched).
46 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
OBSERVAÇÃO
Ao ser criada uma forma ela inclui duas regiões: a linha que
determina a sua forma e a região interna (que pode ou não
ser preenchida com uma cor). Estes elementos são
conhecidos como LINE e FILL respectivamente.
Text Tool
O próximo ícone da barra de ferramentas é uma letra A. Esta
ferramenta é a Text Tool, destinada à criação de textos.
3
O FLASH considera os valores de X (coordenada horizontal) e Y (coordenada vertical) a começar
de zero. X = 0 é a posição mais à esquerda na horizontal e Y = 0 é a posição mais acima na
vertical. Logo, a posição X=0 e Y=0 é o ponto superior esquerdo da janela de desenho.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 47
Digite então qualquer coisa no interior da caixa, algo com várias linhas,
e movimente o quadrado que regula a largura. Veja como se comporta o
texto com os diversos tamanhos de caixa.
4
Caso não esteja a ver toda a janela como na figura, carregue no pequeno triângulo existente no
canto inferior direito da mesma para a maximizar.
48 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Static Text
STATIC TEXT é o tipo de caixa de texto tradicional, na qual poderá
colocar os textos que deseja na sua animação. Uma caixa de texto
ajustada como DYNAMIC TEXT permite ser actualizada durante a
execução da animação, de forma dinâmica. Então, poderá, durante a
execução da animação, controlar e colocar textos dentro da caixa, que
poderão chegar-nos de ficheiros, por exemplo. As caixas ajustadas
como INPUT TEXT têm a finalidade de servir como caixas de entrada
de texto em formulários, por exemplo, cujos valores podem ser lidos por
ActionScript.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 49
ESPAÇAMENTO DE CARACTERES
SUPERSCRIPT: x2 + y2 = z 2
SUBSCRIPT: x1 + x2 = z 1
OPÇÕES DE ROTAÇÃO
OPÇÕES DE FORMATAÇÃO
AUTO KERN
W, H, X e Y
URL
ALVO DA URL
5
Distribuição das letras entre si de forma a tornar um determinado texto visualmente correcto do
ponto de vista gráfico.
56 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Geralmente não é indicado que seleccione esta opção, a não ser que
tenha absoluta certeza de que as fontes são exactamente as mesmas.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 57
TIPO DE LINHA
Dynamic Text
As caixas de texto do tipo DYNAMIC servem para que possa definir
áreas de texto nas suas páginas Flash que serão preenchidas de forma
dinâmica, à medida em que a página surgir. Digamos, por exemplo, que
deseja fazer a leitura do texto de um ficheiro que muda diariamente e
mostra esse conteúdo na sua animação. Isto é possível com o uso das
caixas deste tipo.
BOTÃO HTML
Das duas opções abaixo, faça pelo menos uma: seleccione o botão
HTML para que o texto seja finalizado como HTML respeitando os tags
deste standard, ou no painel ACTIONS ajuste a propriedade “html” do
objecto do tipo TextField para “true”.
dadas pelo tag <B> de HTML que indica “ligar o negrito” e o tag </B>
que indica “desligar o negrito”.
instName.html = true;
txt = “<B>apenas um teste</B>”
Das duas opções abaixo, faça pelo menos uma: seleccione o botão
HTML para que o texto seja finalizado como HTML respeitando os tags
deste padrão ou no painel ACTIONS ajuste a propriedade “html” do
objecto do tipo TextField para “true”.
InstanciaUm.html = “true”;
MOSTRAR BORDA
Input Text
Este tipo de caixa de textos é indicado para a criação de formulários.
São campos que podem conter valores previamente preenchidos mas
que podem ser modificados pelo utilizador. As propriedades deste tipo
de caixa são as mesmas já observadas para as caixas do tipo STATIC e
DYNAMIC.
TIPO DE LINHA
No caso da caixa de texto do tipo INPUT ainda existe mais uma opção
para esta caixa, além das descritas nas caixas de tipo DYNAMIC, que é
PASSWORD. Ao colocar esta opção ligada num formulário fará com
que qualquer texto inserido seja mostrado como uma série de asteris-
cos, como já é de uso tradicional nos campos de password de formu-
lários em HTML.
DICA
62 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Após desenhar a forma também poderá carregar com o rato duas vezes
em cima desta e utilizar a Arrow Tool para ajustar as suas propriedades,
que são iguais às descritas para o caso da linha.
DICA
Verá que, no lado direito da interface do Flash, existe uma janela cha-
mada COLOR MIXER, vista na figura abaixo6 e que contém os parâme-
tros relativos ao gradiente escolhido.
Ao lado da caixa de FILL pode ver outra caixa com a palavra RADIAL,
correspondente ao modo RADIAL GRADIENT. Nela é possível regular
o tipo de gradiente. As outras opções possíveis são: NONE, SOLID,
LINEAR GRADIENT e BITMAP, correspondentes a não preencher um
6
Se a janela no seu programa não estiver com a aparência indicada carregue no pequeno triângulo
no canto inferior direito desta, para a maximizar.
7
Na barra de ferramentas também existem estes dois ícones, o balde e o lápis, e têm exactamente
a mesma função.
64 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
objecto com cor, preencher com uma única cor, colocar um degrade
vertical ou horizontal ou preencher o objecto com uma imagem, respec-
tivamente.
8
Deverá ler o anexo 1 para saber como funciona o sistema de cor dos computadores e também o
que é o sistema hexadecimal.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 65
A última caixa dessa janela é a que pode ser vista com o valor
#57CCA0. Este número corresponde ao valor hexadecimal da cor onde
a cruz está. No caso, o valor corresponde aos níveis RGB de 87, 204 e
160, respectivamente, conforme mostrado na figura acima. Este número
é extremamente útil quando se criam páginas de Internet, porque
quando se faz uma página em HTML 9 é preciso referir este valor para
que o browser produza a cor exacta.
9
HTML = HyperText Markup Language. É o formato no qual as páginas de Internet são escritas.
Equivalem a ficheiros-texto com todos os códigos (formatações) necessários para fazer uma
página de Internet aparecer nos browsers como se pretende.
66 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Gradientes
Outra coisa que poderá fazer com o COLOR MIXER é criar gradientes.
GRADIENTE LINEAR
10
RGB = Red, Green e Blue são as três cores básicas utilizadas em televisão e por consequência,
em computadores. Uma cor neste sistema é definida como tendo um certo valor de R, G e B. Cada
uma destas cores pode variar de 0 a 255, sendo 0 a ausência da cor. O preto equivale a 0,0,0 e o
branco equivale a 255, 255, 255.
11
HSB = Hue Saturation Brightness (tom, nível de cor e brilho). Neste sistema, as cores são
definidas pelo seu brilho, que pode variar de 0 (negro) a 100% (brilho máximo), pelo seu nível de
cor, que varia segundo a mesma escala e pelo seu tom, definido por graus de rotação, onde o
ângulo 0 corresponde ao vermelho, o 120 ao verde e o 240 ao azul. Normalmente este sistema é
denominado de HLS (Hue Luminance Saturation), que é o termo pelo qual normalmente é
conhecido no mundo profissional.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 67
GRADIENTE RADIAL
OBSERVAÇÃO
OBSERVAÇÃO
Pencil Tool
Ao voltar à barra de ferramentas do Flash, vemos o ícone a seguir ao
quadrado. É o lápis (PENCIL TOOL). Ele permite fazer linhas à mão
livre, sem a necessidade de se ter que marcar pontos.
As linhas geradas pelo modo de desenho à mão livre com o lápis são
para o Flash, depois de criadas, exactamente o mesmo tipo de objecto
que uma linha comum. Logo, também possuem uma janela de proprie-
dades, na parte central inferior do ecrã, com os mesmos parâmetros
das linhas comuns; parâmetros estes descritos anteriormente.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 71
Brush Tool
Ao lado do lápis, vemos na barra de ferramentas do
Flash um pincel (BRUSH TOOL). A função do pincel é
a mesma do lápis, ou seja, desenhar à mão livre.
Porém, produz linhas de diâmetro largo.
PAINT FILLS – Este modo de pintura apenas irá colorir as regiões de fill
de um objecto e deixará as suas linhas intactas.
Repare que no primeiro caso tanto as linhas como o fill da figura foram
afectados. Já no segundo caso, apenas as regiões de fill foram afec-
tadas. No terceiro, ele fez a pintura por trás do objecto sem o afectar.
No quarto, apenas a região de fill do objecto foi afectada. No último, o
objecto não foi afectado em nenhum aspecto. Isto explica-se pelo facto
de que iniciamos a pintura na parte externa do objecto. Então, apenas
poderíamos pintar nesta região.
OBSERVAÇÃO
12
É um equipamento composto por uma mesa de desenho e uma caneta especial (geralmente sem
fio), no qual pode desenhar ou comandar o sistema e os seus programas. Os mais modernos são
capazes de responder a 1024 ou mais níveis de pressão ou inclinação da caneta. Modelos
sofisticados inclusive correspondem a verdadeiros monitores de computador, do tipo plano, que
são colocados sobre a mesa, na horizontal, como uma prancha de desenho, e ainda por cima são
sensíveis à pressão. Visite o site do melhor e principal fabricante de tablets , a Wacom
(www.wacom.com).
74 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para realizar uma destas funções basta clicar quando o ícone desejado
surgir e mover o rato para a direcção ou direcções que o ícone indicar.
OBSERVAÇÃO
ENVELOPE
A função ENVELOPE serve para distorcer um determinado objecto e
moldá-lo à forma pretendida, de forma suave. Se seleccionar um
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 77
objecto e escolher esta função, vai ver que diversos pontos surgem à
volta da selecção, como na figura abaixo.
SUBTRACÇÃO DE FORMAS
Pela utilização de algumas regras simples poderá combinar ou subtrair
formas para criar outras novas. Por exemplo, se quer fazer um furo num
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 79
Se quer por exemplo fazer um furo num círculo, desenhe o objecto cor-
respondente ao furo na posição desejada, seleccione-o e apague-o.
UNIÃO DE FORMAS
Para fazer uma união de duas ou mais formas, o princípio é exacta-
mente o mesmo descrito na secção anterior sobre SUBTRACÇÃO DE
FORMAS. Porém, deve desenhar os objectos com a mesma cor do
objecto original. Assim, se tem um objecto original azul com a borda
cinza deve utilizar objectos com estas mesmas cores ao criar as novas
formas. Veja o exemplo abaixo.
13
Que são as mesmas já descritas anteriormente para as linhas, no início deste capítulo.
14
Ponto onde se carregou com o rato dentro do objecto para criar o gradiente.
84 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
OBSERVAÇÃO
Se olhar para a figura anterior vai ver que um objecto colorido com um gradiente
pelo balde de pintura muda de aparência consoante o ponto onde o balde tocou
no momento da criação do gradiente.
Com a função LOCK FILL ligada, o Flash passa a considerar toda a área de
desenho como área de preenchimento para o gradiente, em vez de considerar
cada objecto em particular. Logo, o objecto será preenchido com a cor que lhe
couber conforme a sua posição horizontal e vertical. Veja as figuras abaixo.
Eyedropper Tool
O EYEDROPPER TOOL, cujo ícone é uma pipeta, é o próximo ícone da
barra de ferramentas, cuja função é permitir capturar a cor ou gradiente
de preenchimento de um determinado objecto. Basta seleccioná-lo e
carregar na área de fill de um objecto para fazer a captura.
Eraser Tool
O ERASER TOOL é o próximo ícone na barra de ferramentas. Com ele
é possível apagar regiões dos objectos, sejam linhas ou áreas de pre-
enchimento. Uma vez seleccionada esta ferramenta, surgirão parâme-
tros na janela de options da barra de ferramentas, conforme a figura
abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 87
No ERASE MODE, pode ver que existem diversos modos. São eles:
DICA
Hand Tool
Podemos usar o HAND TOOL para mover a área de desenho. Carregue
neste ícone e em seguida arraste a área de desenho com o rato.
Zoom Tool
O ZOOM TOOL permite fazer zoom, ou seja, tornar maior ou menor a
área de trabalho e permitir a visualização de elementos diminutos.
A sua utilização é simples. Basta escolher uma das duas opções menci-
onadas no parágrafo anterior e carregar na área de desenho. Veja a
figura abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 89
Color Swatches
Voltamos à interface gráfica do Flash, dirigimo-nos agora ao lado direito.
Logo abaixo do COLOR MIXER encontramos a janela COLOR
SWATCHES.
Neste capítulo vamos falar das principais opções dos menus no Flash
MX, não abordando porém aqueles comandos óbvios inerentes a
basicamente todos os programas que correm no Windows ou Mac, uma
vez que estes seguem standards comuns a praticamente todos os
outros programas próprios destes sistemas operativos; estamo-nos a
referir a comandos como FILE OPEN, FILE SAVE, etc.
FILE
O primeiro menu que se vê do lado esquerdo na parte superior, é o
FILE e nele encontramos algumas opções importantes, sobre as quais
devemos falar.
1
Criação de páginas que mostram imagens em sequências ao estilo de um projector de slides.
I.2. OS MENUS 95
NOTA
Open As Library
A seguir, no menu FILE, pode ver a opção OPEN AS LIBRARY. Deve
utilizá-la sempre que pretender abrir uma animação ou objectos que te-
nha previamente criado, para importar para o trabalho que estiver a cri-
ar. Com esta opção, o Flash importa o ficheiro aberto para a biblioteca e
de lá poderá trazer aquilo que lhe interessar para o trabalho actual.
NOTA
Cada trabalho que criar possui automaticamente a sua própria biblioteca, mas,
enquanto estiver a criar pode ter mais de uma biblioteca aberta, se usar o
comando OPEN AS LIBRARY. Por outro lado, o comando IMPORT TO LIBRARY
traz todos os objectos da animação que está a importar para a biblioteca do
trabalho que está a realizar.
I.2. OS MENUS 97
QUICKTIME
Por exemplo, se tiver que importar filmes QuickTime para as suas ani-
mações Flash, primeiro deve certificar-se que tem instalado no seu
computador o QuickTime Player. Caso contrário será impossível ao
Flash importar filmes neste formato. Para fazer download do Player
QuickTime deve ir ao site da Apple (www.apple.com) e carregar no link
correspondente (visto logo na primeira página).
FREEHAND
Publish Settings
Do menu FILE esta opção é a mais importante, no que diz respeito à
produção das animações em Flash. É nela que deverá ajustar todos os
parâmetros que devem ser seguidos para a criação dos ficheiros finais
correspondentes ao trabalho que criar. Quando a seleccionar vai ver a
janela abaixo.
Além disso, pode pedir a produção de uma imagem GIF, JPEG ou PNG
equivalente ao primeiro frame do seu filme.
I.2. OS MENUS 103
VERSION – nesta caixa pode escolher qual a versão de filme Flash que
pretende gerar. Se marcar uma versão anterior à 6 (Flash MX), muitas
das funções no programa serão desligadas e não as poderá utilizar,
uma vez que não seriam possíveis de visualizar numa versão antiga.
104 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
2
BUG em informática é um erro que um software ou hardware possa ter. Debugging é a operação
para detectar e eliminar esses bugs. Geralmente o que se faz nesta etapa é estabelecer pontos de
paragem na animação (BREAK POINTS) para verificar se até aquela etapa está tudo em ordem.
Também são utilizados artifícios especiais (TRACES) para enviar informações a uma janela
especial (OUTPUT). Estes TRACES ajudam a verificar e acompanhar o estado de variáveis do
filme. Ao fazer um TRACE de uma variável X, por exemplo, o FLASH estará a enviar durante todo
o tempo do debugging os valores que esta variável X assume durante todas as etapas da anima-
ção. Então, pode-se verificar se o programa (ActionScript) está correctamente escrito.
I.2. OS MENUS 105
LOW – esta opção faz com que o filme seja carregado em baixa qual-
idade, ideal para serem vistos em máquinas lentas.
Publish
Esta é a próxima opção do menu FILE. Uma vez ajustados os
parâmetros que pretende na opção PUBLISH SETTINGS, é hora de
carregar nesta opção e fazer com que o Flash crie os ficheiros.
VIEW
No menu VIEW vai encontrar alguns comandos interessantes, dos quais
destacamos os mais relevantes.
GoTo
No caso de haver mais de uma cena na sua animação Flash, esta
função irá permitir que se desloque directamente para a cena desejada.
As opções que irá encontrar neste menu são, além dos nomes das
cenas que tiver criado, FIRST, PREVIOUS, NEXT e LAST, que lhe
permitirão ir para a primeira cena, cena anterior, cena posterior e última
cena respectivamente.
OUTLINES faz os objectos serem vistos apenas pelo desenho dos seus
contornos;
I.2. OS MENUS 109
Se accionar o VIEW GRID, vai ver que a sua área de desenho fica com
uma grelha como vista na figura abaixo.
110 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se escolher a opção EDIT GRID vai ver a janela abaixo onde poderá
ajustar as propriedades do grid.
I.2. OS MENUS 111
MODIFY
O menu MODIFY do Flash MX fornece-nos diversas ferramentas para
manipular e transformar os objectos (SHAPES). Enc ontraremos
ferramentas para suavização, simplificação, conversão de imagens para
vectores e muito mais. Vamos a elas.
OBSERVAÇÃO
Expand Fill
Um comando EXPAND FILL está presente dentro do menu MODIFY >
SHAPE e serve para permitir a expansão ou contracção de uma área de
pintura de um objecto. Ao ser accionado mostra a janela abaixo.
OBSERVAÇÃO
Smooth
No menu MODIFY, vai encontrar a função SMOOTH. Com ela poderá
suavizar formas para que fiquem com uma aparência mais arredonda-
da. Isso pode ser útil para corrigir formas muito irregulares.
OBSERVAÇÃO
OBSERVAÇÃO
Para transformar uma letra numa forma e assim poder fazer as operações
existentes para as formas, é preciso seleccioná-las e quebrá-las duas
vezes com o comando MODIFY > BREAK APART.
Straighten
Ainda no menu MODIFY encontramos outra função designada
STRAIGHTEN, que faz exactamente o oposto do SMOOTH, ou seja, tira
a suavização. Linhas outrora curvas e suaves passam a rectas em ân-
gulos agudos.
Optimize
No mesmo menu MODIFY também encontramos o comando OPTIMI-
ZE. Com ele é possível simplificar uma forma existente para algo com
menos pontos e consequentemente mais leve.
Este comando deve ser usado por tentativa e erro, já que fornece resul-
tados consoante a forma submetida à optimização.
Trace Bitmap
Esta é uma das mais importantes funções encontradas no menu
MODIFY. Com ela poderá transformar imagens em formas , que poderá
modificar no Flash. Além do mais, é muito mais conveniente para o
Flash se tiver de lidar com formas e não com imagens.
O que deve notar agora é que cada parte da imagem é vectorial e pode
ser movida, deslocada, animada, mudada de cor ou sofrer qualquer
outro tipo de transformação própria a um objecto que puder ser feita no
Flash. Veja a imagem abaixo.
Transform
Ainda no menu MODIFY, encontramos o comando TRANSFORM, que
fornece muitas das funções que já conhecemos as quais são acciona-
das pela barra de ferramentas.
Arrange
Este é o próximo item encontrado no menu MODIFY. Dentro deste item
do menu encontraremos diversas opções para manipular objectos que
estejam a ser desenhados todos no mesmo layer.
Align
O próximo item encontrado no menu MODIFY é o ALIGN. Com este
item é possível fazer o alinhamento de diversos objectos que se encon-
trem dispostos no mesmo layer ou em layers diferentes.
4
O centro do objecto é onde está o eixo central deste.
I.2. OS MENUS 125
MAKE SAME WIDTH – Faz com que todos os objectos fiquem com a
mesma largura. Toma como base o objecto mais largo. Caso TO
STAGE esteja ligado, então os objectos passam a ter a largura da área
de desenho.
MAKE SAME HEIGHT - Faz com que todos os objectos fiquem com a
mesma altura. Toma como base o objecto mais alto. Caso TO STAGE
esteja ligado, então os objectos passam a ter a altura da área de
desenho.
Break Apart
Se aplicar este comando a um grupo terá a quebra deste grupo e a
transformação de cada elemento na sua forma mais básica, ou seja,
cada objecto volta a ser a sua borda e área de cor (line & fill).
Deve notar que quando faz o primeiro BREAK APART numa palavra,
primeiro obtém a separação de cada letra da palavra, que se torna uma
forma em separado. O segundo BREAK APART transforma tudo em
LINE & FILL. Uma vez que a letra tenha sido transformada na sua forma
128 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
mais básica não mais poderá ser editada com a ferramenta de texto, já
que nesta altura passou a ser um desenho e perdeu a sua propriedade
de ser letra e a consequente capacidade de ser editada.
OBSERVAÇÃO
Distribute to Layers
Esta é uma função também existente no menu MODIFY e que permite
enviar para outro layer novo um objecto que esteja seleccionado num
determinado layer. Assim, se tem por exemplo dois objectos presentes
no mesmo layer, pode seleccionar um deles e escolher DISTRIBUTE
TO LAYERS e fazer com que este objecto passe a figurar num layer no-
vo. Se mais objectos estiverem seleccionados no momento da escolha
desta função, então cada um deles é colocado num layer diferente.
I.3. LAYERS, TIMELINE e ANIMAÇÃO
Layers
O Flash utiliza na sua forma de trabalho o conceito dos objectos
dispostos em layers, como é comum nos melhores softwares de dese-
nho e edição gráfica disponíveis no mercado.
Quando entra no Flash, por defeito é criado o “Layer 1”. Para criar
novos layers basta carregar no ícone no canto esquerdo inferior do
timeline ou ir ao menu INSERT > LAYER.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 131
DICAS
ficam assim...
I.3. LAYERS, TIMELINE E ANIMAÇÃO 135
... ou seja, muito mais leves, pois o Flash fica com menos coisas para
desenhar! Na realidade, o objecto não é modificado, apenas é mostrado
de forma simplificada.
DICA
O Timeline
Como se disse no capítulo anterior, o Flash é um programa que permite
criar elementos gráficos com animação e interacção.
1
O termo “imagens por segundo” também é conhecido como “quadros por segundo”, ou frames , do
inglês. Normalmente usa-se a sigla “fps” para representar esta grandeza, que significa frames per
second.
2
Tudo o que é feito no FLASH tem o nome de “filme”. A área de desenho também é conhecida
como “stage” (palco).
136 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
3
Estes frames intermédios são conhecidos como “in between” e o acto de fazer o cálculo deles é
conhecido como “tweening”.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 137
A Animação frame-a-frame
Pode pensar na primeira animação que irá realizar aquela na qual deter-
mina a posição de todos os objectos em cada um dos frames da anima-
ção. Assim, se tem três frames no total, deve mostrar ao Flash onde
quer cada objecto para que a animação seja feita correctamente.
Então podemos começar por algo simples. Imagine que deseja fazer um
quadrado a girar e diminuir de tamanho sem que mude de lugar.
4
Ao faz er isso estará a acrescentar o objecto à biblioteca (veremos isso mais adiante).
5
Dito no plural pois geralmente um objecto possui duas partes: a linha de contorno e a área de
preenchimento de cor (line & fill).
140 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Nesta janela pode ver o item REGISTRATION que indica onde quer
colocar o ponto de transformação do objecto. Por defeito, é ajustado ao
centro mas pode colocar em qualquer dos nove pontos indicados. Em
relação a este ponto é que todas as transformações serão feitas (esca-
las, translações, rotações, etc.).
Seleccione agora o objecto clicando uma vez com a Arrow Tool em ci-
ma deste e com o botão carregado mova-o para que fique no centro da
área de desenho.
6
ao estilo das animações feitas em vídeo ou película com personagens criadas a partir de massas
de modelar.
144 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Vamos então criar uma animação deste tipo para ver como funciona.
7
Vai ver na próxima secção que é possível criar animações sem ter de criar todos os keyframes .
8
Deve observar que só é possível fazer animações motion tween de símbolos e não de grupos, por
isso tivemos que transformar o círculo, até então apenas um shape, em símbolo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 145
Quando fizer isso vai ver uma janela conforme indicado na figura abai-
xo.
Deve ter observado que o campo TWEEN tem outra opção chamada
SHAPE, a ser vista mais adiante.
Verá que agora a linha do timeline ficou lilás e com uma seta a indicar
uma animação do frame 1 ao 30, conforme figura abaixo.
NOTA IMPORTANTE
Se olhar atentamente para o gráfico acima, verá que não há mais linea-
ridade de movimento ao longo do tempo. Agora o movimento começa
rápido e em seguida desacelera.
9
se não for dada nenhuma ordem para que ele actue de forma diferente.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 151
FRAME(S) ACÇÃO
1 até 5 O fumo começa a sair do tubo de
escape no frame 1 e encerra no 5
6 até 15 A buzina toca até ao frame 15 e
encerra.
Este tipo de animação deve ser usado com cuidado, já que aumenta
muito o tamanho final do filme.
10
conhecidos como nós (nodes), pontos de controlo (control points) ou simplesmente vértices.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 155
Pronto! O que acabou de fazer foi modificar a forma do círculo para uma
“estrela”. Porém, como está a trabalhar no frame 30, o que fez foi
modificar a forma do círculo apenas nesse frame. Se voltar ao frame 1
vai ver que ele ainda tem a mesma forma naquele ponto.
Assim que fizer isto vai ver que o timeline ficou verde no intervalo de 1 a
30 e surgiu uma seta a indicar a presença de uma animação neste
intervalo. Por causa da cor verde sabe-se que se trata de uma anima-
ção de forma. Carregue no rectângulo rosa na área numérica do time-
156 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
line e desloque-o para a direita e esquerda. Vai ver que foi criada uma
suave animação na forma do objecto.
DICA
Shape Hints
Quando faz uma animação de forma, basicamente define dois shapes e
deixa ao Flash a tarefa de animar a metamorfose da maneira que mais
lhe convier. Porém, nem sempre esta é a solução ideal. Por vezes
ocorrem problemas na transformação ou é preciso ter controlo sobre
uma determinada maneira específica de realizar a transformação. É en-
tão que entram em cena os SHAPE HINTS!
Então, se deixar a cargo do Flash, como fizemos, pode ser que tenha
uma animação conforme a sequência de imagens abaixo.
158 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No Shape inicial...
160 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No Shape final
Além do mais de notar que a transformação agora não está mais amas-
sada e tem uma aparência bonita e suave.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 161
Neste layer “GUIDE: AVIÃO” desenhe a curva que deseja utilizar como
caminho. Vá à barra de ferramentas e escolha a pena (PEN) para
desenhar o caminho. Depois disso, posicione o avião da maneira e no
local onde iniciará o movimento.
164 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
NOTA
NOTA
Poderá fazer com que vários objectos sigam o mesmo caminho. Para
isso, basta criar mais layers que fiquem subordinados ao layer do cami-
nho, como indicado abaixo pelo layer “círculo”.
Máscaras
As máscaras são objectos colocados em layers especiais que limitam a
visibilidade de um determinado layer.
Digamos que possui o objecto mostrado na figura abaixo e que ele está
presente na sua animação por diversas vezes.
Poderia criar uma cópia deste objecto eliminando as partes não deseja-
das. Porém, uma segunda cópia do objecto na animação significa au-
I.3. LAYERS, TIMELINE E ANIMAÇÃO 167
NOTA
O objecto das casas com a máscara oval cabe agora dentro do espaço
determinado.
Pode ver pelo campo TYPE que existem diversos tipos de layer, dos
quais já falamos, com a excepção do GUIDE.
LAYER DE SOM
Quando colocar um som, música ou banda sonora nos seus objectos ou
filmes Flash, primeiro terá de importar o referido ficheiro sonoro para a
biblioteca (IMPORT TO LIBRARY) e depois arrastar para um determina-
do layer em branco.
Assim que o fizer, a janela dos layers mostra a forma de onda do som.
172 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
LEFT CHANNEL – faz com que somente o canal esquerdo seja ouvido
(no caso de ser um ficheiro estéreo).
RIGHT CHANNEL – faz com que somente o canal direito seja ouvido
(no caso de ser um ficheiro estéreo).
FADE LEFT TO RIGHT – faz com que o som comece no canal esquer-
do e progressivamente vá passando ao direito onde terminará.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 173
FADE RIGHT TO LEFT – faz com que o som comece no canal direito e
progressivamente vá passando ao esquerdo onde terminará.
FADE OUT – o som começa com o seu volume normal e vai progres-
sivamente diminuindo até zero.
Na parte inferior da janela, no lado direito, pode ver quatro ícones perto
do botão HELP. São eles: uma lupa com sinal de mais, uma lupa com
sinal de menos, um relógio e o desenho de um filme, e permitem ver a
curva mais de perto (ZOOM IN), ver a curva mais de longe (ZOOM
OUT), ver no eixo horizontal os intervalos em segundos e ver os mes-
mos intervalos em frames, respectivamente.
174 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se observar com cuidado verá uma linha em diagonal por cima da for-
ma de onda. Com esta linha poderá desenhar o envelope à onda, para
causar o efeito pretendido.
Mova então o rato até um ponto qualquer desta linha diagonal e arraste
a linha para baixo. Um novo ponto será criado na curva que modificou e
na outra. Crie outros pontos e movimente-os. Crie um padrão como o
visto abaixo.
DICA
EVENT
A opção loops permite-nos dizer quantas vezes vai ser tocado um som
depois de iniciado. Por exemplo, se quiser colocar um loop a servir de
música de fundo deverá escrever um valor muito elevado, para estar
continuamente a tocar.
START
O som ajustado como START também é tocado até ao fim, uma vez
tendo iniciado, porém, não permite a simultaneidade e enquanto estiver
a ser tocado não permite que outro som igual seja tocado.
Quando dizemos isso referimo-nos aos sons iguais. Se, por exemplo,
tivermos o desenho de uma porta e um botão de campainha, a este
botão temos associado o som de uma campainha musical. Quando
carregarmos no botão, ouviremos a melodia. Se durante o PLAY
carregarmos seguidamente no botão, não ouviremos vários sons da
campainha misturados como no EVENT. Somente será possível ouvir
outra vez a melodia quando a primeira tiver terminado. Entretanto, se na
mesma cena tivermos o desenho de um cão a ladrar, este som será
ouvido em conjunto com o da campainha, se assim tiver de ser.
STOP
Esta opção impede que o som seja ouvido. A principal utilidade deste
evento é parar sons que se tenham iniciado com o start ou event. Por
exemplo, um loop que sirva de música de fundo.
STREAM
11
Na minha opinião esta deveria ser a opção por defeito já que é a mais importante!
I.3. LAYERS, TIMELINE E ANIMAÇÃO 177
Outro problema que pode ocorrer pela falta de sincronia é ter o áudio a
acabar muito antes do vídeo, caso a máquina não seja rápida o sufici-
ente para mostrar a animação como idealizada. Por isso, deve colocar
sempre o áudio como STREAM quando precisar de sincronia perfeita.
BANDWIDTH PROFILER
Um outro auxiliar do Flash que poderá utilizar para verificar o “peso” das
suas animações é o BANDWIDTH PROFILER. Este módulo é capaz de
fazer uma análise frame a frame da carga da sua animação. Saiba que
ao carregar a animação via Internet, por exemplo, a carga será feita por
frames na ordem correcta da animação. Assim, se tiver frames ou
conjuntos de frames com uma carga muito grande haverá uma demora
excessiva quando estes frames tiverem de ser carregados. Isto poderá
inclusive reflectir um abrandamento da animação durante o play. O ideal
é que consiga a menor animação possível e que haja uma distribuição
homogénea da carga ao longo dos frames da animação a fim de evitar
que existam frames com muita carga e outros sem carga alguma que
possam interferir no download ou play da animação.
Na figura atrás pode ver que a animação em questão tem três frames,
representados pelos pequenos traços verticais na parte de cima das
colunas. Cada uma dessas colunas representa a carga do filme em
cada um desses frames. A primeira coluna atinge o valor de 8 Kbytes, a
segunda atinge aproximadamente 3 Kbytes e a terceira menos de 1
Kbyte. Na secção esquerda da janela pode ver as informações sobre o
filme: tamanho em pixéis, taxa de fps, tamanho do ficheiro, quantidade
de frames totais da animação e o tempo de carga total do ficheiro (neste
caso, 2,6 segundos).
Sempre que reutiliza um objecto num projecto, o Flash cria uma instân-
cia deste, que equivale apenas a armazenar informações acerca de
onde e como o objecto está a ser utilizado. Logo, há uma economia de
espaço uma vez que não precisa armazenar as definições da forma do
objecto.
Quando cria formas na área de desenho e sabe que não terão movi-
mento, deve criá-las como sendo GRAPHIC. Os gráficos são símbolos
estáticos como logótipos, imagens de fundo ou elementos que não terão
movimento, ou seja, um logótipo estático pode ser um caso de
GRAPHIC mas um boneco a dançar não, já que a imagem do boneco
modifica-se ao longo do tempo. Um símbolo do tipo GRAPHIC pode en-
tretanto ser animado em tamanho, posição, transparência ou cor.
Graphic (gráficos)
Para criar um símbolo do tipo GRAPHIC no Flash MX, basta ir ao menu
INSERT > NEW SYMBOL e, em seguida, desenhar o objecto pretendi-
do. Automaticamente estará a criar uma nova entrada na biblioteca.
Button (botão)
Criar um botão no Flash é um trabalho deveras fácil. Em poucos passos
terá o seu a funcionar. Para que seja possível esta criação basta ape-
nas que tenha em mente a forma como o Flash MX trata este tipo de
objecto e assim fornecer as imagens de que necessitará.
Vai ver que a área de desenho fica em branco. Isto é porque agora está
na área de desenho do botão. Na parte de cima, o timeline muda de
aparência e passa a mostrar os estados do botão.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 187
Desenhe então neste estado a mesma figura acima, porém com a seta
a apontar para o lado direito.
Falta agora definir o campo que diz HIT, sobre o qual ainda não havía-
mos falado.
Neste campo irá indicar ao Flash que área do botão está activa para
clicar, ou seja, se quiser que toda a área do botão esteja activa, então
deverá na área de HIT desenhar um círculo que cubra toda a superfície
deste. Poderá definir a área que desejar. Definimos esta área como
sendo toda a superfície do botão.
Movie Clips
Um movie clip é um símbolo que em si próprio já é um filme, ou seja,
possui movimento próprio.
Brightness
Se seleccionar esta opção, poderá regular o brilho do objecto de –100 a
100%, por meio de uma caixa que surge ao lado do campo COLOR.
Tint
Se ajustar o campo COLOR com a opção TINT, poderá acrescentar
uma cor a ser somada à cor do objecto em si.
100% à cor do objecto original, o que significa que este passa a ter a
nova cor. Se colocar 0%, significa que o objecto mantém a sua cor
original e não sofre efeito algum de TINT.
Alpha
O nome ALPHA vem de ALPHA CHANNEL (canal alfa), que é a
designação mais antiga de que se tem notícia para nomear a informa-
ção de transparência de um material.
Advanced
Esta opção do menu COLOR realmente é a mais completa e combina
várias das opções anteriores numa só interface.
Vai ver que as três primeiras linhas equivalem aos canais de cor RGB e
a última ao canal de transparência. Em cada linha, a primeira caixa
permite regular a intensidade de cada canal, entre -100 e 100%, e a
segunda caixa representa um valor a ser somado a este canal, entre
-255 e 255.
OBSERVAÇÃO
Bibliotecas do Flash
Para alegria de toda a gente, esta nova versão do Flash vem com
diversos objectos reclamados durante anos e que podem ser usados
nos seus projectos. Estes objectos estão separados em diversas
categorias as quais passaremos a explicar a seguir.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 195
BUTTONS
A primeira delas é a biblioteca de botões. Para fazer surgir a janela da
biblioteca com estes itens, vá ao menu WINDOWS > LIBRARY >
BUTTONS. Verá então a seguinte janela:
Arcade Buttons
Vai ver diversas categorias separadas em pastas. A primeira delas é a
ARCADE BUTTONS que disponibiliza o botão tipo máquina de pinball
em diversas cores, como na figura abaixo.
196 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Circle Buttons
Na categoria CIRCLE BUTTONS vai encontrar botões como os vistos
abaixo.
Component Buttons
Na categoria COMPONENT BUTTONS, vai encontrar novamente o
botão do tipo ARCADE, porém, ao trazê-lo para a área de desenhos e
seleccioná-lo, vai ver que a janela de propriedades desta vez mostra
algo completamente diferente, que demonstra uma nova potencialidade
do Flash MX!
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 197
O PUSH BUTTON, por sua vez, permite apenas regular a cor interna.
Key Buttons
Nesta categoria vai encontrar novamente teclas de computador e mais
as setas.
São botões completos que não precisam de nada para funcionar. Basta
colocá-los nas suas páginas e pronto1.
Ovals
Nesta categoria terá botões ovais coloridos como o seguinte, existente
em diversas cores.
Playback
O tão adorado visual “aqua” do MacOS X está presente em botões
existentes nesta categoria.
1
É lógico que depois vai precisar de um pouco de ActionScript para poder ler os valores que o
utilizador ajustar.
200 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Push Buttons
Esta última categoria traz novamente o botão PUSH BUTTON existente
na categoria COMPONENT BUTTONS. Porém, os botões presentes
não permitem regular a cor 2. Estão sim presentes em várias cores pré-
-ajustadas.
SOUNDS
Outra biblioteca que acompanha o Flash MX e que está de acordo com
o objectivo introdutório deste livro é a encontrada em WINDOW >
COMMON LIBRARIES > SOUNDS. Ao escolher esta opção fará surgir a
janela abaixo, que contém diversos sons para que os possa utilizar nas
suas animações.
2
Pelo menos não sem uso de ActionScript.
I.5. COMPONENTES
Neste capítulo vamos falar sobre uma das grandes inovações no Flash,
os COMPONENTES. Estes objectos agora disponibilizados pela Macro-
media são a resposta aos anseios dos utilizadores ao longo dos últimos
anos, reunidos em objectos sofisticados e de relativa facilidade de uso.
Convém saber que estes novos componentes do Flash têm a sua maior
utilidade quando acompanhados do apropriado código em JavaScript,
que é o que realmente os faz funcionar. Neste capítulo abordaremos a
explicação de cada um deles, já que sobre o ActionScript falaremos
mais adiante.
CheckBox
O CheckBox é uma caixa que pode ser marcada ou desmarcada pelo
utilizador. Deve ser utilizado quando pretende restringir as possíveis
respostas dos utilizadores a uma certa questão. Veja o exemplo abaixo.
1
ActionScript é a linguagem de programação utilizada no Flash, que possui centenas de comandos
para permitir virtualmente qualquer tipo de criação.
2
Logicamente neste capítulo apenas vamos demonstrar a funcionalidade de cada objecto. O uso
avançado será abordado na segunda parte deste livro, onde falaremos de ActionScript.
I.5. COMPONENTES 203
RadioButton
O RadioButton tem praticamente a mesma função do CheckBox, porém,
não permite a marcação de mais de um controlo de mesmo tipo. Assim,
se tiver três componentes RadioButton num formulário, apenas um po-
derá estar activo num dado momento.
Ao olhar para o exemplo acima vê que pela pergunta realizada não faz
sentido permitir a marcação de mais de uma opção. Quando for este o
caso usa-se o RadioButton. Outros exemplos são, quando num formu-
lário perguntar se o utilizador tem ou não e-mail, ou alguma outra ques-
tão onde não faça sentido mais de uma resposta.
PushButton
O PushButton é o botão que precisa estar presente em todos os formu-
lários para permitir o envio da informação.
204 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ListBox
Com uma ListBox poderá fazer listas de escolha para os utilizadores.
Por defeito, este componente está ajustado para apenas permitir que o
utilizador faça uma escolha. Porém, a mudança de uma propriedade po-
de permitir múltiplas escolhas.
I.5. COMPONENTES 205
ComboBox
O ComboBox3, ao contrário do ListBox, apenas mostra uma opção à
entrada. No caso abaixo, temos apenas visível a frase “faça uma esco-
lha...”.
3
Conhecido em muitos programas como DROP DOWN MENU.
206 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ScrollPane
Este componente permite criar áreas completas com barras de desloca-
mento4 horizontais e verticais onde poderá colocar imagens, filmes
Flash5 ou textos. Veja a seguir.
4
Barras de deslocamento ou scroll bars são as barras existentes nos programas que nos permitem
deslocar textos ou imagens para os lados.
5
Formato SWF
I.5. COMPONENTES 207
6
Se estas últimas opções não estiverem presentes carregue no botão que diz ADVANCED.
208 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ScrollBar
O ScrollBar é o último campo dos componentes disponíveis no Flash
MX. A função dele é permitir a construção de caixas com barras de
deslocamento. Desta forma, pode-se numa pequena área colocar gran-
des quantidade de texto. A aparência de uma caixa de texto deste tipo
assemelha-se à criada pelo ScrollPane. Veja na figura abaixo.
Para criar uma janela de texto com ScrollBar, faça o seguinte: Primeiro
seleccione a ferramenta de textos. Vá à barra de propriedades e troque
o campo “STATIC TEXT” para “DYNAMIC TEXT”, o campo “SINGLE
LINE” para “MULTILINE” e o campo “<INSTANCE NAME>”, para
“texto”.
210 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Com o rato na área de desenho, crie uma região rectangular para colo-
car o texto que pretende. Coloque nesta área uma quantidade de texto
maior do que a caixa poderia permitir.
Vai ver que o Flash faz aderir imediatamente a barra à caixa de textos,
já ficando esta com o tamanho exacto.
Teste o filme (CONTROL ENTER). Vai ver que tudo está a funcionar
perfeitamente.
7
Isto fará com que saia do modo de edição de textos, que é o que pretendíamos.
8
O Flash, por defeito, cria sempre barras de deslocamento vertical, mas uma vez criada a barra,
pode mudá-la para horizontal na janela de propriedades.
212 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Actions (ActionScript)
A última secção da interface gráfica do Flash sobre a qual ainda falta
falar é a de ACTIONS, que pode ser encontrada na parte central inferior
do ecrã, logo abaixo da área de desenho.
Objectos encapsulados
9
Sim, pode considerar uma página em Flash como sendo uma aplicação já que na sua essência é
exactamente isso.
214 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ficheiros que reúnem todo o seu conteúdo no seu interior (áudio, vídeo,
texto, etc.), ao contrário das páginas normais de Internet em HTML, que
precisam referenciar todos os ficheiros necessários à boa visualização,
já que não têm a capacidade de armazenar nada no seu interior que
não seja texto.
Imagine, por exemplo, que possui no Flash um objecto que é uma lâm-
pada. Esta lâmpada possui uma propriedade chamada “ESTADO”, que
pode ser ajustada com apenas dois valores: 0 ou 1. Se o ESTADO for
colocado em “1” a lâmpada liga e em “0”, desliga.
11
A acção pode ser qualquer coisa que imaginar, por exemplo, o carregar de uma página de
Internet.
I.6. COMPONENTES AVANÇADOS
CALENDAR
O primeiro componente do grupo é o CALENDAR (calendário). É
exactamente o que o nome diz. Um calendário completo a funcionar pa-
ra utilizar nos seus programas e páginas Flash.
216 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
1
JANUARY, FEBRUARY, MARCH, APRIL, MAY, JUNE, JULY, AUGUST, SEPTEMBER,
OCTOBER, NOVEMBER e DECEMBER.
218 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
2
SUN, MON, TUE, WED, THU, FRI e SAT são as abreviaturas dos dias da semana em Inglês:
SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY e SATURDAY, isto é,
DOMINGO, SEGUNDA... respectivamente.
I.6. COMPONENTES AVANÇADOS 219
DRAGGABLEPANE
Este controlo chamado Draggable Pane é, nada mais, nada menos, do
que o de janelas arrastáveis completas e prontas a usar, com um ícone
para minimizar (triângulo no canto superior esquerdo) e outro para fe-
char (o X no canto superior direito).
Caso seja uma imagem que pretende colocar dentro da janela, siga
exactamente o mesmo procedimento, mas após a criação do novo sím -
bolo importe uma imagem da biblioteca ou do disco para este novo
objecto.
3
Detectamos um bug no controlo DraggablePane quando é colocado um texto no interior da janela:
quando se desloca a barra de scroll vertical da janela toda para baixo, o texto aparece fora da
janela na parte de cima. Com imagens isso não acontece.
222 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
DICA
ICONBUTTON
Com este componente poderá criar botões, prontos a usar, e que
permitem a colocação de imagens à face.
Para criar um botão com este componente basta arrastá-lo para a área
de desenho. Em seguida, deve criar um novo símbolo, com uma ima-
gem qualquer (utilizamos uma gaivota), pelo mesmo procedimento utili-
zado no exemplo anterior e dar ao IDENTIFIER deste símbolo o nome
“gaivota”.
MESSAGEBOX
Este componente permite a criação de caixas de mensagem para os
seus programas ou páginas Flash.
4
Dizemos isso pois qualquer um dos COMPONENTS pode ser modificado para assumir a aparên-
cia que desejar, pelo uso de skins (peles), como verá no próximo capítulo.
I.6. COMPONENTES AVANÇADOS 227
No fim, depois dos ajustes acima descritos, poderá ter uma caixa assim.
5
String = sequência de textos, números ou quaisquer outros caracteres, que para o programa são
tratados como texto.
6
Conjunto de linhas de programação que fazem determinada função.
228 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SPLITVIEW
O SplitView é um componente fantástico que permite dividir uma área
em duas outras independentes, tanto na vertical, quanto na horizontal.
Digamos que precisa colocar dois filmes numa área na sua página
Flash, mas o espaço mal é suficiente para a colocação de um. Pode
então usar o SplitView para dividir a área, e em cada parte colocar in-
tegralmente aquilo que pretende.
7
Ou para cima e para baixo, consoante o tipo de SplitView que escolher...
I.6. COMPONENTES AVANÇADOS 229
NOTA
Importe uma imagem com o comando FILE > IMPORT para finalizar
este objecto.
Se colocar o Flash no modo de teste, vai ver que tem a imagem do lado
esquerdo e o texto do lado direito e que, à medida em que desloca a
barra esconde ou mostra a imagem.
NOTA
Tudo o que foi dito até aqui para este componente, pode ser repetido
para o caso da barra divisória horizontal. Basta apenas mudar a proprie-
dade ORIENTATION do componente para HORIZONTAL .
TICKER
A função deste componente é permitir a criação de caixas de texto que
mostram frases a passar na horizontal ou vertical, similares a equipa-
mentos encontrados em aeroportos que ficam a passar mensagens.
Veja a figura abaixo.
8
smoothness = suavidade
9
a caixa permite a colocação de inúmeras frases seguidas, que são mostradas sequencialmente,
independente do tipo de deslocamento, horizontal ou vertical.
238 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
TREE
Este componente permite a criação de “árvores” com informações em
sistema de hierarquia. Poderá por ActionScript, criar, apagar, mover e
ordenar os nós e as suas ramificações. Poderá descobrir qual a ramifi-
cação que foi clicada, e derivar acções correspondentes.
I.6. COMPONENTES AVANÇADOS 239
PROGRESSBAR
A Macromedia finalmente lançou um componente que corresponde a
uma barra de progressão. Todo o controlo da barra é feito via Action-
Script.
BAR CHART
Com este componente poderá criar gráficos em barra, como na figura
abaixo.
I.6. COMPONENTES AVANÇADOS 241
LINE CHART
O próximo componente do pacote Flash CHARTING COMPONENTS é
o LINE CHART. A sua utilidade é permitir a criação de gráficos de li-
244 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Feitos todos esses ajustes, terá transformado o gráfico no que pode ser
visto a seguir.
248 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Pie Chart
O PIE CHART é o próximo componente sobre o qual iremos falar.
10
Escolha o nome conforme o seu apetite... J
I.6. COMPONENTES AVANÇADOS 249
A PROGRAMAÇÃO NO
MACROMEDIA FLASH MX
II.1. INTRODUÇÃO À PROGRAMAÇÃO
ORIENTADA POR OBJECTOS
Esta função necessita de dois parâmetros (t, d). Assim, a partir desta
classe podemos criar instâncias deste objecto em que os parâmetros
variam.
O operador new foi usado para criar duas novas instâncias do objecto
iva, às quais atribuímos os nomes almoco e computador e para onde
passamos os parâmetros que se encontram entre parêntesis.
Timeline principal
root
Escritório Quarto
Class (classe): Tipo de dados que podem ser utilizados para definir um
novo objecto.
Constantes – São elementos imutáveis durante toda a animação.
Constructor - Função utilizada para definir as propriedades e os méto-
dos de uma classe.
Eventos - O evento é a acção que ocorre enquanto a animação está a
decorrer. Os eventos podem ocorrer quando um movie clip carrega, ou
quando o utilizador faz clique sobre um botão.
Function (função): Bloco de código reutilizável cujos argumentos
(parâmetros) podem ser passados e de onde os seus valores podem
ser extraídos.
Identifier (identificador): Nome utilizado para identificar uma variável,
propriedade, objecto, função ou método. O primeiro caracter de um
identificador deve ser uma letra, underscore (_), ou sinal $. Cada ca-
racter subsequente deve ser uma letra, underscore (_), sinal $ ou núme-
ro.
Keywords – Palavras reservadas que possuem uma função pré-definida
no Flash.
Method (método): Função associada a um objecto. Depois da função
associada, pode ser chamada método desse objecto.
Object (objecto): Uma instância de uma classe. Cada instância contém
todas as propriedades e métodos da classe. Instâncias também podem
conter propriedades e métodos adicionais não definidos na classe.
Nome da instância – Nomes únicos que permitem identificar determina-
dos elementos na animação, como movie clips ou variáveis.
Property (propriedade): Características que definem um objecto.
Parâmetros ou argumentos – São contentores que permitem passar va-
lores para dentro de uma função. Por exemplo, o código seguinte passa
o parâmetro cor para a função cores.
Painel Actions
No Flash é utilizado o painel Actions para se escrever os scripts. Este
painel pode ser acedido através do comando W INDOW > ACTIONS ou da
tecla de atalho F9. O painel possui dois modos de edição de scripts, o
Normal e o Expert.
Como alternativa, o painel actions possui o botão (+) que também acede
às categorias e actions do programa, mas através de menus pop-up.
Nota: Neste livro não faremos referência ao modo que deve ser utilizado para a
inserção de uma action, deixando ao critério do leitor essa escolha.
Figura008
IMPRIMIR ACTIONS
No menu pop-up do painel actions seleccione a opção Print. Surgirá a
janela com as opções de impressão. Clique no botão Print.
PAINEL REFERENCE
Este novo painel auxilia o utilizador a compreender cada acção listada
no painel Actions. Existem também alguns exemplos de código, que
podem ser copiados para dentro do painel de Actions.
Eventos
Ao associar uma action a um símbolo surge sempre uma linha adicional
para especificar o evento. O evento é a acção que ocorre enquanto a
animação está a decorrer. No Flash, os eventos são normalmente de
teclado ou de rato e diferem entre movie clips e botões. Cada instância
pode conter mais do que um evento.
268 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No palco crie mais duas layers, uma para os botões e a segunda para
as actions. Ver figura 018.
Figura018
stop();
Figura022 – Aceder a uma página que se encontra na mesma pasta do filme em Flash.
Figura023– Aceder a uma página HTML que se encontra numa pasta diferente do filme em
Flash.
Um link absoluto poderá ser para uma página fora do nosso site. Com o
código seguinte é aberto o endereço http://www.centroatlantico.pt numa
nova página do browser.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 275
Estes filmes por serem mais pequenos, são mais fáceis de organizar e
podemos sempre optar por removê-los da animação principal em qual-
quer altura ou substituí-los quando não estão a ser visualizados pelo uti-
lizador.
Um exemplo clássico será um site que possui como área fixa uma
navegação de botões que pretendemos se mantenha constantemente
visível, enquanto uma segunda área acomodará todas as animações re-
ferentes a cada um destes botões. Ver figura 026.
Qualquer outro filme que seja agora carregado em nível 1 fará automa-
ticamente a remoção do filme existente (clientes.swf ).
Figura035 – Showmenu
282 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SÍMBOLOS
Recapitulando alguns pontos-chave em relação aos símbolos, que se-
rão importantes para compreender a sua integração com as actions em
Flash:
boneco.play()
CAMINHOS ABSOLUTOS
A timeline principal do filme, referida como _root no Flash. Todos os
movie clips são instâncias localizadas na timeline principal e são
dependentes da _root. Logo, para iniciar a animação dum movie cha-
mado modelo no palco teremos:
_root.modelo.play()
CAMINHOS RELATIVOS
No método relativo a referência _parent diz respeito à timeline onde o
movie clip ou botão está inserido; esta pode ser o palco ou outro movie
clip. Numa estrutura do tipo representado na figura042, para aceder ao
palco através do movie clip vestido teremos algo do tipo:
_parent._parent
286 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
starDrag e stopDrag
A capacidade de arrastar movie clips dentro de uma animação é sem
dúvida uma das capacidades mais utilizadas pelos designers do Flash.
Esta operação é desempenhada através da utilização de um método
denominado startDrag.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 291
Uma das formas mais simples para deslocar um movie clip é atribuir o
método directamente na instância no evento onLoad. Esta situação
pode ser interessante quando pretendemos criar um rasto de movies a
seguir o cursor do rato.
Uma das formas de obter este efeito é criar primeiro um botão que
contém o actor a arrastar e de seguida colocar esse botão dentro de um
movie clip que será colocado no palco.
DuplicateMovieClip e RemoveMovieClip
Estes dois métodos permitem duplicar um movie clip e remover movie
clips que tenham sido criados através do método DuplicateMovieClip.
removeMovieClip("sol2");
n++;
novonome = "rasto" + n;
startDrag("rasto", true);
De seguida duplicamos o movie e atribuímos os novos nomes com a
variável novonome e a profundidade n.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 295
Para funcionar o palco deve ter pelo menos duas frames. Acrescente
uma frame com a tecla F5.
Esta segunda frame faz com que o filme entre em loop e duplique novos
movie clips sempre que volta a passar pela primeira keyframe.
GetBytesLoaded e GetBytesTotal
Estes dois métodos são muito utilizados na criação de preloaders para
filmes. Um preload é uma animação muito simples que antecede o filme
298 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Por exemplo, supondo que possuímos um filme que tem apenas uma
cena e precisamos de criar um preload. Este filme possui sons e
imagens bitmap e tem cerca de 200 Kb.
_root.getBytesLoaded() – OBJECTS > MOVIE > MOVIE CLIP > METHODS >
GETB YTESLOADED. Efectua a contagem do número de bytes carregados
do filme.
_root.getBytesTotal – OBJECTS > MOVIE > MOVIE CLIP > METHODS >
GETB YTESTOTAL . Conta o número total de bytes do filme.
Math.round – OBJECT > CORE > MATH > METHODS > ROUND. Método
utilizado para arredondar valores numéricos. Substitui a função Int das
versões anteriores do Flash.
SINTAXE DO ACTIONSCRIPTING
Chavetas { }
São utilizadas para agrupar blocos de código relacionado.
on (release) {
play();
}
Pontos = 0;
Tempo = 0;
Parêntesis ()
Tem diversas funções dentro do código. A principal utilização é agrupar
os parâmetros de uma função.
onClipEvent(enterFrame) {
myCor = new Color(this);
myCor.setRGB(0xffffff);
}
Maiúsculas e minúsculas
O actionscripting não é sensível à capitalização do texto (case-sensi-
tive). Apenas as palavras inerentes à linguagem (keywords) possuem
limitações neste campo.
Keywords
Palavras reservadas que não podem ser atribuídas a nomes de variá-
veis e que possuem uma função determinada pela própria aplicação.
Comentários (//)
Permite adicionar notas ao código. Estas notas são especialmente
importantes quando o código é muito extenso ou quando várias pessoas
partilham o mesmo projecto de Flash.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 303
Variáveis
DATA TYPES
Um data type descreve o tipo de dados que as variáveis podem conter.
Existem dois tipos de data types: primitive e reference.
carro._visible
movie.startDrag(true);
Null: Apenas possui o valor null, que simboliza que a variável está vazia.
SCOPE DA VARIÁVEL
O scope de uma variável é a área em que a variável é conhecida e pode
ser referenciada. As variáveis podem existir dentro de timelines de
instâncias. A variável pode ser local para essa timeline ou pode ser es-
pecificada como variável global e ser utilizada por todas as timelines do
filme. Existem três tipos de scope para as variáveis:
Variáveis locais
As que estão disponíveis apenas dentro do bloco de código onde foram
inseridas.
Variáveis de Timeline
Válidas para qualquer timeline desde que indicadas no código através
dum caminho.
Variáveis Globais
Existem em todas as timelines mesmo que não seja especificado um
caminho até elas.
DECLARAR VARIÁVEIS
Ao declarar uma variável local deve utilizar o comando var dentro do
bloco de código onde esta ficará inserida. Uma variável local não defini-
da, expira no fim do script.
var pontos=0
X=20
_global.time=0
Figura071 – Interface
Figura074 – Resultado
308 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
pontos = pontos+1;
trace(pontos);
OPERADORES
Os operadores permitem combinar, comparar ou modificar valores
numa expressão. Para utilizar correctamente os operadores existem al-
gumas regras que devem ser respeitadas.
pontos= 7 + 3 * 2
pontos= (7 + 3) * 2
O resultado desta forma será 20, pois a soma será realizada antes da
multiplicação por se encontrar entre parêntesis.
Tipos de operadores
Operadores Numéricos
Desempenham diversas operações aritméticas mais comuns tais como:
+ Soma
* Multiplicação
/ Divisão
- Subtracção
% Módulo (resto da divisão)
++ Incremento
-- Decremento
310 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura076 – Soma
Operadores de comparação
Comparam valores de expressões e devolvem um valor booleano (True
/ False). Estes operadores, ao comparar duas strings, avaliam qual a
primeira através da sua ordem alfabética.
Se um dos operandos for uma string e o outro numérico, ambos são
convertidos para numéricos e é efectuada uma comparação numérica.
If (n>=1) {
gotoAndPlay (10);
}
Operadores de string
Efectua a concatenação entre duas ou mais strings.
Figura077– Concatenação
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 311
Operadores lógicos
Estes operadores comparam valores booleanos (true / false) e devol-
vem um outro valor booleano.
&& e
|| ou
! negado
Operadores de igualdade
Determina se dois valores ou identidades são iguais. O valor devolvido
é booleano.
== igualdade
=== estritamente igual
!= diferente de
!== estritamente diferente
Operadores de atribuição
O sinal de = funciona como operador de atribuição, para associar um
valor a uma variável.
login=”administrador”;
= Atribuição
+= Soma e atribuição
-= Subtracção e atribuição
*= Multiplicação e atribuição
312 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
%= Modulo e atribuição
/= Divisão e atribuição
<<= Mover para a esquerda e atribuição
>>= Mover para a direita e atribuição
^= XOR e atribuição
|= OR e atribuição
&= AND e atribuição
CONDIÇÃO IF
Continuamos agora com o exemplo apresentado na figura 071.
Supondo que é necessário testar se o utilizador introduziu ou não um
valor na caixa de texto da cena de entrada. No caso afirmativo, o filme
prossegue para a segunda cena, mas no caso negativo surge uma men-
sagem, a solicitar a introdução do nome de utilizador.
if (utilizador==null){
}
else {
}
gotoAndPlay(“filme”,1);
User=”Benvindo(a), ” + utilizador;
314 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura080
Este operador vai fazer com que seja necessário que ambas as variá-
veis devam estar correctas para o utilizador entrar na página.
Figura082
Figura083- Interface
Figura084
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 317
Figura085
CONDIÇÃO CASE
Numa situação em que seja necessário testar mais de duas opções, a
condição if torna-se insuficiente e confusa. Como alternativa, é possível
usar a condição case nestas situações em que estão envolvidos vários
testes.
Como exemplo, vamos supor que possuímos um site de compras online
e que os utilizadores irão obter preços diferentes consoante a quanti-
dade de produtos que adquirem.
Figura090
320 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Por cada hipótese terá de ser introduzida uma linha que deve sempre
terminar com a action break, ou não voltará a funcionar da próxima vez
que o botão for premido.
A linha de default contempla todas as situações que ficaram fora dos
valores definidos pelo case, ou seja, que não estejam no intervalo 0 a 2
inclusivé.
CICLO FOR
A função principal dos ciclos numa linguagem é repetir determinadas
actions diversas vezes.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 321
De seguida, na categoria ACTIONS > VARIABLES > SET VARIABLE, crie uma
variável de nome n. Vamos envolver a expressão dentro do método
Math.Round para arredondar o valor obtido. Seleccione ACTIONS >
OBJECTS > CORE > MATH > METHODS > ROUND.
Para atribuir o valor à variável, seleccione OBJECTS > CORE > MATH >
METHODS > RANDOM. Este calcula um número aleatório entre 0 e
0,99999... . Para obter números entre 0 e 48 multiplicamos este método
pelo valor 48 e como o valor 0 não nos interessa somamos uma unida-
de ao resultado. Obtemos assim um intervalo de valores entre o 0 e o
48.
n = Math.round(Math.random()*48+1);
Finalmente, para atribuir estes valores a cada uma das caixas de texto,
seleccione no painel ACTIONS > VARIABLES > SET VARIABLE.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 323
Figura095
CICLO WHILE
O ciclo while é mais utilizado em casos em que não sabemos qual o
número de vezes que o loop irá correr.
De volta ao palco
criamos um botão
para topo do menu e
colocamos abaixo
deste uma instância
do movie clip que
contém a caixa de
texto. Atribuímos a
esta instância o
nome opcao1.
Figura099 – Nomear a instância do movie clip no palco
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 325
Figura100 - LoadVariables
opcao1.texto.text = op1;
opcao1._visible = true;
Para o ciclo while iniciamos uma variável chamada i com valor 2, pois o
valor 1 pertence ao movie que já está no palco.
var i = 2;
Função Eval
Função para aceder a variáveis ou propriedades e extrair o seu valor.
Se for utilizada para aceder a objectos e movie clips extrai uma refe-
rência dos mesmos.
produto1=”mel”;
produto2=”açúcar”;
Função Number
Converte o valor entre parêntesis num número e devolve o seu valor.
Number (n)
Função getTimer
Devolve o número de milésimos de segundo que já passaram desde o
início duma animação.
x=GetTimer
Figura105 - GetTimer
Função getVersion
Devolve uma string que contém a versão do Player do Flash, desde que
seja a versão 5 ou posterior.
x=getVersion()
Função boolean
Boolean (expressão)
Função string
String (expressão)
Função escape
Converte um parâmetro numa string e codifica-o num formato de URL
onde os caracteres especiais são convertidos em sequências hexade-
cimais.
escape("parametro")
Função getProperty
Função targetPath
targetPath(this)
Função unescape
Função isFinite
Função isNaN
Função parseFloat
parseFloat("0gatos") devolve 0
Função parseInt
Função que converte uma string num número inteiro. Se a string não for
possível de converter em inteiro a função devolve NaN. Strings come-
çadas por 0x são interpretadas como números hexadecimais.
334 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
parseInt("3.5")
// devolve 3.5
parseInt("chocolate")
// devolve NaN
parseInt("4foo")
// devolve 4
Exemplo hexadecimal:
parseInt("0x3F8")
// devolve 1016
Exemplo binário:
parseInt("1010", 2)
DEFINIR FUNÇÕES
Todas as funções começam com a palavra function e de seguida surge
o nome da função. ACTIONS > USER-DEFINED FUNCTIONS > FUNCTION .
function calcTotal
Figura108 – Interface
Object.name
Objecto.name = “Helena”;
onClipEvent (load) {
myColor = new Color(this);
myColor.setRGB(0xFF66FF);
}
Para este exercício, comece por criar um movie clip na biblioteca que
vai conter uma caixa de texto dinâmico chamada hora_txt.
Figura111
II.6. OBJECTOS 339
Figura112
novoArray=New Array();
novoArray[0] = "Liliana";
novoArray[1] = "Manuela";
novoArray[2] = "Luisa";
novoArray[3] = "Sara";
O mesmo array também pode ser descrito de uma forma mais extensa
do seguinte modo:
novoArray=New Array("Liliana","Manuela","Luisa","Sara");
340 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Math.max(x,y)
Parâmetros:
x e y – Podem ser valores ou expressões numéricas. Os dois valores
são avaliados e o resultado é o maior valor.
Math.max(55,88)
// resultado é 88
II.6. OBJECTOS 341
Math.min(4,77)
// resultado é 4
Parâmetros:
x e y – Podem ser valores ou expressões numéricas. Os dois valores
são avaliados e comparados e o resultado é o menor valor.
Math.PI()
Math.round(55.98)
Math.random()
342 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Math.sqrt(x)
Parâmetros:
x – Número ou expressão numérica maior que 0.
Deve ser sempre usado o construtor new Color() para definir uma nova
instância.
Métodos do objecto
Color.getRGB - Devolve o valor numérico RGB atribuído pelo último
método setRGB.
Color.getTransform – Devolve a informação do último método set-
Transform.
Color.setRGB – Altera o valor hexadecimal da cor de um determinado
objecto.
Color.setTransform – Atribui um valor para alterar as cores a um
objecto.
Figura117 - Interface
alvo_color=new Color(alvo_mc);
movieClip.hitTest(target)
Parâmetros:
A função vai permitir-nos reutilizar código, pois os quatro botões vão ne-
cessitar de testar a sobreposição do movie.
II.6. OBJECTOS 345
Figura122
Como exemplo, vamos criar uma animação para onde um som é car-
regado e controlado através de dois botões. Um botão pára o som e ou-
tro recomeça o som de novo a partir do início.
No botão play vamos inserir o método start para dar início ao som. Nos
parâmetros 0 é o valor em segundos onde o som irá dar início e 1 o nú-
mero de loops que este irá efectuar.
musica.start(secondOffset, loop)
musica.stop("idName");
II.6. OBJECTOS 347
Figura126
System.capabilites.hasAudio
Figura127
Figura128
Iremos criar um menu dinâmico, que vai buscar os valores das suas
opções e links do botão a um ficheiro de texto externo.
dados_lVars=new LoadVars();
dados_lVars.onLoad=carregado;
dados_lVars.load("links.txt");
botao1.botao_txt.text=dados_lVars.txt1;
botao1.link=dados_lVars.link1;
352 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
I=2;
while(eval("dados_lVars.txt"+i)!=null){
eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i);
eval("botao"+i)._y+=40;
eval("botao"+i).botao_txt.text=eval("dados_lVars.txt"+i);
eval("botao"+i).link=eval("dados_lVars.link"+i)
i++;
}
<?xml version="1.0"?>
<!DOCTYPE lista de pessoas>
<pessoas>
<pessoa codigo=”E345”>
<nome>José</nome>
<Idade>54</idade>
</pessoa>
<pessoa codigo=”F546”>
<nome>Maria</nome>
<Idade>32</idade>
</pessoa>
</pessoas>
Os nós são pais (parent) e filhos (child) uns dos outros. Por exemplo,
pessoa é filho do documento, mas é pai de nome e idade.
Como exemplo, vamos criar uma agenda em Flash que acede aos
dados contidos num ficheiro de XML.
Figura135 – Interface
agenda_xml.ignoreWhite = true;
agenda_xml.onLoad = carregado;
agenda_xml.load("teste.xml");
Agora criamos a função para fazer referência que vai ser executada
depois do carregamento.
function carregado() {
agenda = agenda_xml.firstChild;
pessoa = agenda.firstChild;
apresentaDados();
}
function apresentaDados() {
codigo = pessoa.attributes.codigo;
valor = pessoa.firstChild;
nome = valor.firstChild.nodeValue;
valor = valor.nextSibling;
telefone = valor.firstChild.nodeValue;
}
Fig138 – Biblioteca
360 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Checkbox
Permite adicionar caixas de verificação ao documento. As caixas permi-
tem escolhas múltiplas.
Parâmetros:
Change Handler - String de texto que permite indicar a função que
deverá ser executada quando o valor da checkbox é alterado. A função
II.7. COMPONENTES 361
ComboBox
Possibilita adicionar menus drop-down com várias opções. Estes menus
podem ser editáveis ou estáticos. Cada item da caixa tem um valor,
sendo o primeiro equivalente a 0.
Parâmetros:
Change Handler - String de texto que permite indicar a função que
deverá ser executada quando o valor da checkbox é alterado. A função
deve estar definida na mesma timeline da checkbox e o nome da com-
bobox pode ser aceite como parâmetro.
Data – É um array de strings de texto que especificam os valores as-
sociados a cada uma das entradas do menu.
Editable – Determina se a caixa é editável ou não.
Labels – Títulos que surgem para escolha dentro do menu.
Row Count – Número de itens listados no menu.
ListBox
Permite adicionar listas de escolha única ou múltipla. Estas listas podem
possuir scrollbars.
Parâmetros:
Change Handler – String de texto que permite indicar a função que
deverá ser executada quando o valor da checkbox é alterado. A função
deve estar definida na mesma timeline da checkbox. Este parâmetro é
opcional e só é necessário incluir se pretendermos que algo aconteça
quando um item é seleccionado.
Data – É um array de strings de texto que especificam os valores as-
sociados a cada uma das entradas da lista.
Labels – Títulos que surgem para escolha dentro da caixa.
Select Multiple – Especifica se a lista permite ou não escolha múltipla.
Se a opção False for seleccionada, a lista não permite escolhas múlti-
plas; este é o valor por defeito.
PushButton
Adiciona botões simples ao filme. Podem ser associadas actions ao
evento onClick.
Parâmetros:
Click Handler - String de texto que permite indicar a função que deverá
ser executada quando o botão é premido.
Label – Títulos que surgem para escolha dentro da caixa.
II.7. COMPONENTES 363
RadioButton
Permite adicionar botões de escolha única ao documento.
Parâmetros:
Change Handler – String de texto que permite indicar a função que
deverá ser executada quando o valor do radio button é alterado. A fun-
ção deve estar definida na mesma timeline do radio button.
Este parâmetro é opcional e só é necessário incluir se pretendermos
que algo aconteça quando um item é seleccionado.
Data – É um array de strings de texto que especificam os valores as-
sociados a cada uma das entradas da lista.
Group Name – Especifica a que grupo de botões pertence o botão. Vá-
rios botões podem pertencer ao mesmo grupo.
Initial State – Indica se o botão está ou não seleccionado de início.
Label - Texto que aparece ao lado do botão.
Label Placement – Indica se o label aparece à direita ou à esquerda do
botão.
Scrollbar
Permite adicionar um scrollbar vertical ou horizontal ao documento. É a
forma mais simples de adicionar scrollbars a caixas de texto.
Para adicionar um scrollbar a uma caixa de texto, crie uma caixa de
texto do tipo dinâmico ou input. Escolha a opção multiline para poder
escrever em várias linhas.
364 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura145 – Scrollbar
Parâmetros:
Horizontal – Especifica se o scrollbar é horizontal ou vertical.
Target text Field – Especifica o nome da instância do campo de texto
para o scrollbar. Assim que o scrollbar adere a um campo de texto este
campo é preenchido automaticamente.
ScrollPane
Permite adicionar janelas com scrollbars horizontais e verticais para
mostrar movie clips. É especialmente indicado para mostrar muita infor-
mação em pouco espaço de documento.
Parâmetros:
Drag Content – Indica se o utilizador pode arrastar o conteúdo do pai-
nel, ou tem de utilizar as scrollbars.
II.7. COMPONENTES 365
Figura147 – Linkage
Figura148 – ScrollPane
Figura149
Fig150 – Formulário
Figura151
Agora na primeira keyframe do filme criamos a função que vai ficar as-
sociada ao botão.
Fig152 – Resultado
Anexo 1. SISTEMA HEXADECIMAL
Agora pense que o seu contador está a trabalhar na base 16. Ele pode
contar de 0 a 15 antes de ter de increm entar o dígito à esquerda. Como
a contagem na base 10 utiliza “símbolos” que ocupam uma só posição
para representar cada um dos números, então na base 16 também
370 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
As posições agora têm aspas porque não fazem mais sentido no novo
sistema. Servem apenas para que identifique a posição relativa do alga-
ismo de um determinado número.
ANEXO 1. SISTEMA HEXADECIMAL 371
3 3
A = 10. Como está na coluna 3 (16 ) então 10 x 16 = 40.960
2 2
B = 11. Como está na coluna 2 (16 ) então 11 x 16 = 2.816
1 1
C = 12. Como está na coluna 1 (16 ) então 12 x 16 = 192
0 0
D = 13. Como está na coluna 0 (16 ) então 13 x 16 = 13
Foi criada uma paleta com estas 216 cores que ficou com o nome de
“Web Colors”. Às vezes também conhecidas por “Web-Safe Colors”,
“safe colors” ou “Netscape Colors”, e estão disponíveis em programas
profissionais de design gráfico e em editores HTML.
1
Como um bit possui dois estados possíveis, ou seja, 0 ou 1, então 8 bits possuem 256
estados possíveis, uma vez que 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256.
Anexo 3. EXTENSION MANAGER
como instalar as extensões
adicionais ao Flash MX
1
Certificando-se de que não tem o Flash MX aberto.
376 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
2
As extensões existem em versões diferentes para o Flash MX de PC e para o de MAC.
Apesar disso, têm os mesmos nomes.
ANEXO 3. EXTENSION MANAGER 377
Basta agora sair do programa e correr o Flash MX. Vai ver que as
extensões já estão dentro da janela COMPONENTS. Caso não estejam
visíveis logo à primeira vista, experimente seleccioná-las por meio do
“dropdown menu” da própria janela.