You are on page 1of 379

Centro Atlântico

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.

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO


Colecção: Tecnologias
Autores: Anabela Gonçalves e Magno Urbano

Direcção gráfica: Centro Atlântico


Revisão: Nuno Ricardo e Centro Atlântico
Capa: Paulo Buchinho

© Centro Atlântico, Lda., 2002


Ap. 413 - 4764-901 V. N. Famalicão
Porto - Lisboa
Portugal
Tel. 808 20 22 21

geral@centroatlantico.pt
www.centroatlantico.pt

Fotolitos: Centro Atlântico


Impressão e acabamento: Inova
1ª edição: Junho de 2002

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

NOVAS FUNCIONALIDADES DO FLASH MX ............................... 15


1. Workflow ...............................................................................15
Área de trabalho flexível e intuitiva .........................................15
Melhorias ao nível da timeline ................................................16
Distribute to Layers ...............................................................16
Suporte para versões anteriores do Flash .............................17
Suporte para diversos Sistemas Operativos .........................17
2. Ferramentas para o designer ...............................................18
Free transform tool ................................................................18
Fill Transform tool ..................................................................18
Pixel Snapping ......................................................................19
Gestão e selecção de cores..................................................19
Máscaras dinâmicas .............................................................19
3. Suporte Multimedia ...............................................................19
Suporte vídeo ........................................................................19
Carregamento dinâmico de som e imagens ..........................20
4. Texto .....................................................................................20
Substituição de fontes em falta ..............................................20
Colocação de texto na vertical ...............................................21
Suporte Multilingue ................................................................21
5. Recursos de ajuda ................................................................22
Templates .............................................................................22
Painel Answers .....................................................................22
Exemplos e tutoriais ..............................................................23
6. Publicação e navegação ......................................................23
Desenvolvimento de conteúdo acessível ...............................23
Suporte em ambientes diferenciados ....................................23
Named Anchors ....................................................................23
Compressão SWF melhorada ...............................................24
Empenhamento na minimização do Flash Player ..................24
7. Painel Actions melhorado .....................................................24
Edição do Actionscript mais fácil ...........................................24
Editor parametrizável ............................................................25
Dicas de código (code-hinting) e preenchimento automático 26
6 FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

Painel de referência ..............................................................26


Funcionamento interno melhorado .........................................26
Debugger melhorado ............................................................27
8. Novos comandos Actionscript ...............................................27
SetInterval e ClearInterval ......................................................27
Novo modelo de objectos e eventos ......................................27
Instrução Switch ....................................................................28
Controlo dinâmico do layout do filme ....................................28
Objectos TextField e Button ...................................................28
Drawing API ..........................................................................28
Controlo de som melhorado ..................................................29
Componentes .......................................................................29
9. Links Interessantes ...............................................................30
Documentação e Recursos ...................................................30
A não perder .........................................................................30

I.1. A INTERFACE GRÁFICA E OS


FUNDAMENTOS BÁSICOS ........................................ 31
A interface gráfica ....................................................................32
Default Layout ........................................................................33
Arrow Tool ................................................................................34
Subselection Tool .....................................................................35
Line Tool ...................................................................................36
Solid (sólido) ..........................................................................38
Dashed (tracejado) ................................................................38
Dotted (ponteado) ..................................................................39
Ragged (irregular) ..................................................................39
Stipple (pontilhado) ................................................................40
Hatched (tracejado) ................................................................41
Lasso Tool ................................................................................43
Pen Tool ...................................................................................44
Text Tool ...................................................................................46
Escolha do tipo de texto .........................................................48
Static Text............................................................................48
Espaçamento de caracteres ............................................49
Tipo de letra e tamanho ....................................................49
Posição dos caracteres ...................................................49
Ajuste de cor, negrito e itálico ...........................................50
Direcção do texto e opções de alinhamento .....................50
ÍNDICE 7

Opções de rotação ..........................................................51


Opções de formatação ....................................................54
Auto Kern .........................................................................55
W, H, X e Y .......................................................................55
URL .................................................................................55
Alvo da URL .....................................................................55
O texto pode ser seleccionado? .......................................56
Use device fonts...............................................................56
Tipo de linha .....................................................................57
Dynamic Text .......................................................................57
Botão HTML .....................................................................59
Mostrar borda ..................................................................60
Input Text .............................................................................61
Tipo de linha .....................................................................61
Oval Tool & Rectangle Tool .......................................................61
Gradientes ...............................................................................66
Gradiente linear .....................................................................66
Gradiente radial .....................................................................67
Pencil Tool ................................................................................70
Brush Tool ................................................................................71
Free Transform Tool ..................................................................75
Envelope ................................................................................76
Subtracção de formas ............................................................78
União de formas ....................................................................80
Fill Transform Tool .....................................................................82
Ink Bottle Tool & Paint Bucket Tool ............................................83
Eyedropper Tool .......................................................................86
Eraser Tool ...............................................................................86
Hand Tool .................................................................................88
Zoom Tool ................................................................................88
Color Swatches ........................................................................89

I.2. OS MENUS ........................................................... 93


Os Menus e suas funções .........................................................93
FILE .......................................................................................93
New From Template ............................................................93
Open As Library ..................................................................96
Import & Export Movie .........................................................97
Quicktime .........................................................................97
8 FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

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

I.3. LAYERS, TIMELINE e ANIMAÇÃO ..................... 129


Layers .....................................................................................129
Olho, Cadeado e Quadrado Colorido ......................................132
Olho (show/hide layer)..........................................................133
Cadeado (lock/unlock layer) .................................................133
Quadrado colorido (show layer as outline)............................134
O Timeline..............................................................................135
Keyframes - representação no timeline................................136
ActionScript – representação no timeline ............................137
Labels – representação no timeline .....................................137
A Animação frame-a-frame .....................................................139
A Animação Motion Tween ......................................................144
Ease In & Ease Out (o controlo do movimento) ........................147
ÍNDICE 9

Como é que o Flash interpreta uma animação? ......................150


Animação de formas (shape animation) ..................................153
Shape Hints ............................................................................156
Criação do Shape Hint... ......................................................158
Animação com Motion Guide ..................................................162
Máscaras ................................................................................166
Layer do tipo Guide..............................................................171
Layer de som .......................................................................171
Effect (efeitos sonoros) .....................................................172
Sync (tipo de sincronismo de som)....................................175
Event..............................................................................175
Start ...............................................................................176
Stop ...............................................................................176
Stream ...........................................................................176
Como testar as suas animações .............................................177
Bandwidth Profiler ..........................................................178

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS ........... 181


As suas próprias bibliotecas ..................................................181
Graphics, Button e Movie Clips ...............................................183
Graphic (gráficos) ...................................................................185
Button (botão) .........................................................................186
Movie Clips ............................................................................189
Efeitos de Cor e Transparência ..............................................191
Brightness .........................................................................192
Tint ....................................................................................192
Alpha ................................................................................193
Advanced ..........................................................................193
Bibliotecas do Flash ...............................................................194
Buttons .................................................................................195
Arcade Buttons .................................................................195
Circle Buttons....................................................................196
Component Buttons ...........................................................196
Key Buttons .......................................................................198
Knobs & Faders ................................................................198
Ovals.................................................................................199
Playback ...........................................................................199
Push Buttons .....................................................................200
Sounds ................................................................................200
10 FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

I.5. COMPONENTES ................................................. 201


CheckBox ...............................................................................202
RadioButton ............................................................................203
PushButton..............................................................................203
ListBox ....................................................................................204
ComboBox..............................................................................205
ScrollPane ..............................................................................206
ScrollBar .................................................................................209
Actions (ActionScript) .............................................................213
Objectos encapsulados .......................................................213

I.6. COMPONENTES AVANÇADOS ......................... 215


Flash UI Components Set 2 ....................................................215
Calendar ..............................................................................215
DraggablePane ...................................................................219
IconButton ............................................................................223
MessageBox ........................................................................225
SplitView ..............................................................................228
Ticker ...................................................................................235
Tree .....................................................................................238
ProgressBar ........................................................................ 239
Flash charting components .....................................................240
Bar Chart ................................................................................240
Line Chart ..............................................................................243
Line Chart – Layout Options ..............................................244
Line Chart – Chart Event Handlers ....................................246
Line Chart – Category Labels............................................247
Line chart – data values.....................................................247
Pie Chart ................................................................................248
Pie Chart – Layout options ................................................249
Pie Chart – Pie Colors ......................................................250
ÍNDICE 11

IIª PARTE:
A PROGRAMAÇÃO NO MACROMEDIA FLASH MX

II.1. INTRODUÇÃO À PROGRAMAÇÃO


ORIENTADA POR OBJECTOS ................................. 253
Linguagens Processuais ou Procedimentais ..........................253
Linguagens Orientadas por Objectos......................................253

II.2. CONCEITOS BASE ........................................... 257


Dot sintax versus Slash sintax .................................................257
Terminologias utilizadas no Actionscripting .............................258
Painel Actions ........................................................................260
Inserir uma Action .................................................................261
Alternar entre modos no painel Actions ................................263
Navegar entre scripts num documento ..................................263
Para apagar uma action .......................................................264
Visualizar a numeração para as linhas de código .................265
Imprimir Actions ...................................................................265
Painel Reference .................................................................265
Para visualizar o painel Reference .......................................266
Para alterar a dimensão da fonte no painel Reference .........266
Associar actions na timeline ................................................266
Associar actions a símbolos ................................................267
Eventos ..................................................................................267
Eventos associados a botões ..............................................268
Eventos de movie clips ........................................................268

II.3 INTRODUZIR INTERACTIVIDADE


NUMA ANIMAÇÃO ...................................................... 271
Criar links para páginas HTML ............................................273
Carregar filmes de Flash externos ........................................276
Controlar ficheiros executáveis com o fscommand ..............280
Símbolos ..............................................................................282
Atribuir nomes a instâncias de movie clips ou botões ..........284
Caminhos relativos e absolutos ............................................285
Caminhos absolutos ............................................................285
12 FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

Caminhos relativos ..............................................................285


Controlar instâncias de símbolos ..........................................286
Propriedades dos movie clips .............................................288
Métodos mais utilizados nos movieclips ..............................290
DuplicateMovieClip e RemoveMovieClip ..........................292
LoadMovie e Unload Movie ...............................................295
GetBytesLoaded e GetBytesTotal......................................297

II.4 ESTRUTURAS AVANÇADAS


DE PROGRAMAÇÃO .......................................... 301
Sintaxe do Actionscripting ....................................................301
Variáveis ................................................................................303
Data Types ...........................................................................303
Scope da variável ................................................................305
Variáveis locais .................................................................305
Variáveis de Timeline .......................................................305
Variáveis Globais ..............................................................305
Declarar variáveis ................................................................305
Testar o valor das variáveis ..................................................308
Operadores .........................................................................309
Prioridade dos operadores ...............................................309
Tipos de operadores .........................................................309
Condição If ...........................................................................312
Condição CASE ..................................................................319
Ciclo For ..............................................................................320
Ciclo While ...........................................................................323

II.5. FUNÇÕES .......................................................... 329


Função Number ......................................................................330
Função getTimer ....................................................................330
Função getVersion .................................................................330
Função boolean......................................................................331
Função string ..........................................................................331
Função escape ......................................................................332
Função getProperty ................................................................332
Função targetPath ..................................................................332
Função unescape ...................................................................332
Função isFinite .......................................................................333
ÍNDICE 13

Função isNaN ........................................................................333


Função parseFloat .................................................................333
Função parseInt ......................................................................333
Definir funções .......................................................................334

II.6. OBJECTOS ........................................................ 337


Aceder às propriedades de um objecto ..................................337
Invocar o método de um objecto .............................................338
Objectos da categoria core ....................................................338
Utilizar o objecto date ..........................................................338
Utilizar o objecto array .........................................................339
Utilizar o objecto math > método max ..................................340
Utilizar o objecto math > método min ...................................341
Utilizar o objecto math > método pi ......................................341
Utilizar o objecto math > método round ................................341
Utilizar o objecto math > método random .............................341
Utilizar o objecto math > método sqrt ...................................342
Objectos da categoria movie ..................................................342
Utilizar o objecto color .........................................................342
Utilizar o objecto movieclip > método hittest ........................344
Utilizar o objecto sound .......................................................345
Utilizar o objecto capabilities ...............................................347
Objectos da categoria client/server .........................................349
Utilizar o objecto loadvars ...................................................349
Utilizar o objecto XML .........................................................352

II.7. COMPONENTES................................................ 359


Checkbox ...............................................................................360
ComboBox .............................................................................361
ListBox ...................................................................................362
PushButton .............................................................................362
RadioButton ............................................................................363
Scrollbar .................................................................................363
ScrollPane ..............................................................................364

Anexo 1. SISTEMA HEXADECIMAL.............................................369


Anexo 2. WEB COLORS ................................................................373
Anexo 3. EXTENSION MANAGER: como instalar
as extensões adicionais ao Flash MX ......................375
14 FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO
Novas funcionalidades do Flash MX
Por Nuno Ricardo 1

Este documento pretende dar a conhecer as principais novidades do


Macromedia Flash MX em relação às versões anteriores.
Foi baseado parcialmente em documentos oficiais da Macromedia e na
opinião pessoal do autor desta introdução.

1. Workflow

Área de trabalho flexível


e intuitiva
Os produtos da
Macromedia sempre
tiveram muitas paletas de
trabalho diferentes, com a
possibilidade de serem
organizadas ao gosto do
utilizador, mas eram
frequentes as críticas à dificuldade de gestão da área de trabalho.

Nesta versão do Flash, a melhoria é significativa neste aspecto. Com


outra forma de as paletas se expandiram e se agruparem nos extremos
do ecrã, trabalhar com o Flash deixou de ser stressante.

Outra melhoria muito bem vinda é uma paleta de propriedades ao estilo


do Dreamweaver. As suas opções variam consoante o objecto selec-
cionado, condensando múltiplas paletas numa só, poupando espaço de
trabalho precioso.

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

Melhorias ao nível da timeline


Da versão 4 para a 5 foram introduzidas
alterações na forma como se contro-
lavam as frames e keyframes na time-
line. Estas não foram bem aceites pelos
utilizadores, preferindo muitos a versão
4 à 5 neste aspecto. Na versão MX,
voltou-se atrás no tempo. Trabalhar
com a timeline é quase igual ao que era
na versão 4, indo de encontro ao que
quase todos os utilizadores pediam.

Uma novidade nesta versão MX foi a introdução de pastas de layers.


Estas permitem agrupar layers, como conseguíamos fazer antes para
os símbolos na Library. Torna-se assim mais fácil trabalhar com filmes
complexos a nível de design.

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.

O novo comando Distribute to Layers’ faz isso automaticamente, e ainda


atribui o nome a cada uma das layers criadas, poupando tempo e traba-
lho aos designers.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 17

Suporte para versões anteriores do Flash


Tal como acontecia antes, se utilizarmos num filme novas capacidades
do MX, este filme não poderá ser aberto numa versão anterior do Flash.

No entanto, podemos usar a facilidade de gravar os filmes no formato


da versão 5, por questões de compatibilidade.

Desta forma, não poderemos usar as capacidades novas. O Flash in-


forma quais as actions que são ’proibidas’ assinalando-as a amarelo no
painel Actions.

Suporte para diversos Sistemas Operativos


O Flash MX já suporta Windows XP e Mac OS X, além de todos os
outros sistemas operativos habituais: Mac OS 9.1 (ou posterior), Win-
dows 95, Windows 98 SE, Windows Me, Windows NT4 e Windows
2000.
18 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

2. Ferramentas para o designer

Free transform tool

A nova ferramenta permite, mais facilmente que antes, mudar


o tamanho, rodar e distorcer elementos gráficos.

Com as variantes
shape distort e
envelope distort, o
designer consegue
libertar a sua
criatividade como
antes não era
possível.

Fill Transform tool


Outra ferramenta que se tornou independente é a de transformação de
preenchimentos. Permite-nos modificar os preenchimentos em degrade
ou padrões.

Embora esta ferramenta já


existisse, estava bastante
menos acessível.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 19

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.

Gestão e selecção de cores


Também alvo de algumas críticas, o
Color Mixer foi transformado de for-
ma a facilitar o seu uso.

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

O Flash suporta a importação de vídeos nos formatos AVI, MOV, DV e


MPEG. Depois de inserido, é possível tratar um vídeo como qualquer
outro objecto: Mudar o tamanho, rodar, distorcer, mascarar, e controlar
o seu andamento através de actionscripting.

Carregamento dinâmico de som e imagens


Antes era possível carregar filmes externos, desde que gravados em
formato SWF. Agora, é também possível carregar imagens em formato
JPEG e som em formato MP3, abrindo um novo caminho aos sites que
dependem de actualizações frequentes de conteúdo.

4. Texto

Substituição de fontes em falta


Tal como acontecia em alguns programas de design gráfico, agora
quando se abre um filme num computador que não possui as fontes
necessárias, o Flash avisa de tal facto, e dá a hipótese de criar um ma-
peamento da fonte em falta para outra semelhante.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 21

Colocação de texto na vertical


É possível colocar texto na vertical, não só para criar efeitos gráficos,
mas para escrita em línguas que assim o requeiram, como o Chinês,
Japonês ou Coreano.

Suporte Multilingue

O suporte a caracteres Unico-


de, permite a visualização de
textos em línguas em que antes
não era possível com o Flash.

Permite também uma mais fácil


compatibilidade com aplicações
externas que ‘falem’ Unicode,
tal como com algumas aplica-
ções de gestão de conteúdos.
22 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Suporte em ambientes diferenciados


O desenvolvimento de conteúdo em Flash garante-nos que este vai
estar acessível em diversos meios de comunicação tão diferenciados
como os PC’s com diferentes sistemas operativos, WebTV, Pocket PC,
PDA e outros.

A Macromedia está absolutamente empenhada em tornar cada vez


mais abrangente o Flash Player no que toca a plataformas existentes e
futuras.

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

Compressão SWF melhorada


O Flash MX possui novos algoritmos de compressão de conteúdo, di-
reccionados à optimização de filmes com utilização intensiva de Action-
script.

Empenhamento na minimização do Flash Player


Como é sabido, cada nova versão do Flash obriga a que todos os
clientes da Internet façam o download da nova versão do player. Tendo
consciência disso, a Macromedia empenha-se em minimizar ao máximo
a duração do download.

Nesta versão, embora o player tenha obrigatoriamente crescido, devido


ao suporte vídeo, manteve-se nuns simpáticos 380 Kb. Pouco mais de 1
minuto de download para um modem de 56 Kbps.

7. Painel Actions melhorado

Edição do Actionscript mais fácil


Embora exista o modo Normal e Expert de edição de Actionscript, é no
segundo modo que se conseguem aproveitar todas as capacidades
desta poderosa linguagem. É também em Expert Mode que se sentem
as grandes melhorias ao nível de edição.

Codificação por cores, ajudas sensíveis ao contexto, opções de procura


e substituição, guia hierárquico do código, com suporte Drag-and-Drop,
e um excelente material de consulta fazem o processo de aprendizagem
tornar-se simples e dão preciosas ajudas mesmo a peritos em action-
scripting.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 25

Editor parametrizável

Algumas das ajudas


disponíveis, tais como
a codificação em
cores, a auto-
formatação e mesmo
o conteúdo do painel
Actions, são
parametrizáveis, para
que se adaptem ao
gosto e forma de
trabalho do utilizador.
Dicas de código (code-hinting) e preenchimento automático
Enquanto se está a escrever o código, o Flash detecta o tipo de objecto
que estamos a utilizar, e lista numa caixa drop-down os métodos, propri-
edades e eventos para esse objecto.

É possível, a partir dessa lista, utilizando a tecla TAB, o preenchimento


automático da instrução seleccionada. Aparecem ainda referências aos
parâmetros necessários ao completar da instrução.

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.

Funcionamento interno melhorado


Alguns dos objectos mais utilizados (Number, Boolean, Object, String,
Array e XML) foram melhorados, funcionando cerca de 100 vezes mais
rápido.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 27

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.

8. Novos comandos Actionscript


SetInterval e ClearInterval
Estes comandos servem para estabelecer uma rotina que é executada
periodicamente, durante o filme, em alternativa ao uso de loops em ti-
melines.

Novo modelo de objectos e eventos


Novos objectos, novos eventos associados não só aos botões e movie-
clips, mas a quase todos os objectos, permitem que seja mais fácil
associar código a cliques do rato ou a teclas, ao load e unload de dados
de vários tipos, ao redimensionar da janela do Flash, etc.
28 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Já existente noutras linguagens segue um estilo sintáctico muito seme-


lhante ao Javascript, tal como todo o Actionscript a partir da versão 5.

Controlo dinâmico do layout do filme


Através do novo objecto Stage, é possível aceder e controlar algumas
propriedades do layout do filme, tais como a altura e largura do filme, o
Scale Mode, ou saber quando o filme é redimensionado.

Objectos TextField e Button


Todas as propriedades inerentes às caixas de texto, como o Word
Wraping, o modo password, multiline, alinhamento do texto e o próprio
formato de texto são controláveis dinamicamente por Actionscript atra-
vés dos objectos TextField e TextFormat.

Também o comportamento de um botão, como a ordem de tabulação, o


bloqueamento, e até as actions associadas a este, são controláveis por
Actionscript utilizando o objecto Button.

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

Controlo de som melhorado


O objecto Sound foi expandido, de forma a suportar o carregamento
dinâmico de MP3, e foi melhorado com algumas propriedades como du-
ration e position, que permitem um controlo de som muito mais rico.

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.

Existem também componentes para facilmente se adicionar scrollbars a


caixas de texto.

A área de componentes é completamente personalizável, existindo


algumas empresas que se dedicam à produção de componentes para
diversos fins.

No site www.macromedia.com/exchange é possível encontrar alguns


destes componentes, puxá-los e instalá-los utilizando o Macromedia Ex-
tension Manager, incluído no Flash.
30 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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

O Flash MX é um programa produzido pela empresa Macromedia


(www.macromedia.com ) que permite a produção de páginas para a
Internet e de aplicações para distribuição pela Internet ou por qualquer
outro tipo de media como CD-ROM, DVD-ROM, etc.

O Flash MX permite construir páginas de Internet completas e não


apenas as partes animadas. Permite elaborar sites que contenham
interacções com os utilizadores, de forma animada, com uma interface
gráfica sofisticada, sons e outros elementos multimedia.

Para que seja possível visualizar sites em Flash correctamente, é


preciso que o software que permite a navegação na Internet (browser)
tenha um programa (plug-in) instalado para esse fim. Normalmente, os
principais browsers já vêm configurados correctamente. Segundo a
Macromedia, 98,3% das pessoas que navegam na Internet estão aptas
a ver páginas em Flash.

Caso o seu browser não esteja apto a visualizar páginas em Flash, a


solução é visitar o site da Macromedia, escolher a opção SHORTCUTS
dentro do item DOWNLOADS no menu superior esquerdo e então
escolher a opção que diz Flash PLAYER DOWNLOAD. Verá então que
surgirá o link para download da versão do Flash Player adequada ao
seu browser (automaticamente o site da Macromedia detecta que
browser está a utilizar e mostra-lhe apenas a versão adequada). 1

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

Enquanto que na construção de um site normal para a Internet temos


que escrever uma série de ficheiros em HTML, num site em Flash
temos que elaborar uma série de elementos gráficos, já que normal-
mente um site deste tipo está contido num número sensivelmente
menor de ficheiros. Uma vez pronto, um site em Flash lembra muito a
construção de um programa numa qualquer linguagem de programação,
onde se tem uma aplicação principal que corre e que pode ou não ter
aplicações externas que venha a executar de acordo com as acções do
utilizador.

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.

A primeira diferença que se nota na interface, ao correr o Flash MX, em


comparação com as versões anteriores, é que as suas janelas estão to-
das encaixadas umas nas outras e podem ser destacadas para se tor-
narem independentes e encaixadas novamente no todo.

Outra diferença que verificará é que a interface pode ser configurada


consoante o perfil do utilizador: designer, utilizador genérico (general)
ou programador (developer).

Para proceder à escolha vá ao menu WINDOW > PANEL SETS e verá


sete opções: DEFAULT LAYOUT, três opções de resolução para
DESIGNER e três para DEVELOPER.

Estes ajustes pré-definidos arrumam as diversas janelas de proprieda-


des do Flash de acordo com aquilo que se entende necessário estar vi-
sível ou não para um determinado perfil.

Pode-se entender mais facilmente esta explicação quando se vê que o


Flash possui diversas janelas de propriedades e que nem todas são
necessárias para todos os tipos de utilizador.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 33

No tipo DESIGNER, por exemplo, estão visíveis as seguintes janelas na


interface: TOOLS, TIMELINE, PROPERTIES, INFO, ALIGN,
TRANSFORM, COLOR MIXER, COLOR SWATCHES, COMPONENTS
e ANSWERS. Já no tipo DEVELOPER estão visíveis as janelas TOOLS,
TIMELINE, ACTIONS, REFERENCE, PROPERTIES, COLOR MIXER,
COLOR SWATCHES e ANSWERS. Vemos que esta combinação faz
sentido para ambos os tipos, já que para um programador, por exemplo,
não há a necessidade de ter visível na interface a janela que lhe permi-
tiria fazer transformações ou mudar o alinhamento de objectos.

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

Não se preocupe se não conseguir ler os elementos contidos na


imagem, devido ao seu tamanho reduzido. Usaremos a imagem apenas
como referência e vamos abordar cada parte desta em se-
parado.

Se olharmos para o lado esquerdo da interface do Flash,


veremos a barra de ferramentas (Tools) vista na figura ao
lado.

Arrow Tool
Na parte de cima da barra de ferramentas pode ver duas
setas, uma preta e uma branca.

A primeira (Arrow Tool2), quando accionada, coloca o


programa em modo de selecção de objectos. Neste modo,
poderá seleccionar os objectos criados, como por exemplo,
círculos, quadrados, elipses, etc.

Esta ferramenta também poderá ser utilizada para fazer


modificações nas formas dos objectos criados. Poderá
utilizá-la para fazer modificações nas curvaturas das linhas
que formam os objectos.

Veja as próximas figuras. Desenhamos uma recta horizon-


tal, escolhemos a ferramenta Arrow Tool, e com o cursor do
rato arrastamos um ponto arbitrário no meio da recta, para
cima.

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.

o objecto “círculo” os pontos que o formam...

Se estiver no modo de selecção de sub-objecto poderá seleccionar um


ponto componente da forma de um objecto (vértice) e movê-lo para
outro sítio, e então criar novas formas. Também poderá seleccionar e
mover os “nodes” dos vértices, responsáveis pelo controlo da curvatura
do segmento ao qual este pertencem. Veja a figura a seguir.
36 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Para activar um vértice e poder modificar a sua posição ou node basta


seleccionar a ferramenta Subselection Tool e carregar com o rato em
cima da região onde está o vértice. Caso não saiba onde o vértice está
seleccione com esta mesma ferramenta uma região à volta do ponto
onde pensa existir um vértice. Se de facto existir algum vértice na região
da curva que marcou, estes e os seus nodes ficarão visíveis. Então
poderá arrastá-los para outros sítios e modificar a aparência da forma.

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

Depois de criada a linha, pode modificar os seus parâmetros na janela


de propriedades, encontrada na parte inferior do ecrã. Veja a figura a-
baixo.

Nesta janela poderá mudar a cor da linha ao carregar na caixa colorida


(Stroke Color), a espessura (Stroke Height), na seta para baixo ao
lado do número e o estilo (Stroke Style) se carregar na caixa com a pa-
lavra SOLID (figura acima).

Estão disponíveis diversos estilos de linha, tracejadas, pontilhadas,


sólidas, etc. Também poderá carregar no botão CUSTOM e fazer ajus-
tes mais detalhados.

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

Nas duas caixas a seguir a DASH poderá regular, respectivamente, o


tamanho de cada segmento do tracejado e do espaçamento, o que
significa dizer que se preencher os campos com os valores 8 e 5 terá
segmentos com 8 pixéis de comprimento espaçados 5 pixéis entre si.

DOTTED (PONTEADO)
Temos então o estilo “dotted” ou ponteado.

Na caixa DOT SPACING poderá regular o espaçamento dos pontos.

RAGGED (IRREGULAR)
O estilo a seguir na caixa dos tipos é o RAGGED.

Neste estilo estão disponíveis parâmetros como PATTERN, WAVE


HEIGHT e WAVE LENGTH, que correspondem, respectivamente, ao
padrão, altura e comprimento da irregularidade.

O PATTERN corresponde ao padrão da linha e permite várias escolhas:


SOLID, SIMPLE, RANDOM, DOTTED, RANDOM DOTTED, TRIPLE
DOTTED e RANDOM TRIPLE DOTTED, correspondentes a sólido,
simples, aleatório, ponteado, ponteado aleatório, ponteado triplo e
ponteado triplo aleatório. Não é necessário decorar exactamente o que
cada um destes parâmetros significa, porém vale a pena experimentá-
40 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

-los quando estiver a trabalhar porque modificam significativamente a


aparência final.

No campo WAVE HEIGHT poderá ajustar a amplitude e turbulência da


irregularidade em quatro níveis disponíveis, consoante um menor ou
maior grau de turbulência: FLAT , WAVY, VERY WAVY e WILD.

Também poderá ajustar o comprimento da irregularidade pelo WAVE


LENGTH. São também quatro as opções, a primeira a produzir o menor
comprimento e a última a produzir o maior: VERY SHORT , SHORT,
MEDIUM e LONG.

STIPPLE (PONTILHADO)
Este é o estilo nomeado de STIPPLE (pontilhado).

Na janela deste estilo poderá ver os campos DOT SIZE (tamanho do


ponto), DOT VARIATION (variação do ponto) e DENSITY (densidade).

No DOT SIZE poderá regular o tamanho dos pontos, que do menor para
o maior são: TINY, SMALL, MEDIUM e LARGE.

A seguir poderá regular a variação dos pontos (DOT VARIATION) por


meio de quatro opções: ONE SIZE, SMALL VARIATION, VARIED SI-
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 41

ZES e RANDOM SIZES. A primeira opção produz pontos do mesmo


tamanho. A segunda produz pontos que possuem uma pequena varia-
ção de tamanho. Na terceira temos a produção de pontos de tamanhos
variados e na quarta, pontos de tamanhos aleatórios.

No campo DENSITY poderá regular a densidade dos pontos, ou seja,


se os pontos são produzidos pegados uns aos outros ou não. As op-
ções da mais densa para a menos densa são: VERY DENSE, DENSE,
SPARSE e VERY SPARSE.

HATCHED (TRACEJADO)
O estilo seguinte é o HATCHED.

Na janela deste estilo poderá ver os seguintes campos: THICKNESS


(espessura), SPACE (espaçamento horizontal), JIGGLE (agitação),
ROTATE (rotação), CURVE (curvatura) e LENGTH (comprimento).
42 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Na primeira opção, THICKNESS, é possível ajustar a espessura das


linhas produzidas no padrão. Da mais fina para a mais grossa, as
opções são: HAIRLINE, THIN, MEDIUM e THICK.

No campo SPACE é possível regular o espaçamento entre as linhas


produzidas no padrão. A começar pelo menos espaçado, temos as se-
guintes opções neste campo: VERY CLOSE, CLOSE, DISTANT e VE-
RY DISTANT.

Em JIGGLE podemos ajustar o padrão de distribuição vertical e hori-


zontal das linhas. Da opção menos para a mais caótica as opções são:
NONE, BOUNCE, LOOSE e WILD.

Na caixa ROTATE é possível regular a rotação das linhas. Os valores


dos ângulos de rotação são pré-estabelecidos pelo programa e não
podem ser mudados. Porém, é possível escolher as seguintes opções,
da menos para a mais radical: NONE, SLIGHT, MEDIUM e FREE.

Temos também o campo CURVE, onde é possível ajustar a curvatura


das linhas produzidas. Da menos curva para a mais curva as opções
são: STRAIGHT, LIGHT CURVE, MEDIUM CURVE, VERY CURVED.

Em LENGTH podemos ajustar o comprimento das linhas. Com isso é


possível criar variações verticais de tamanho. As opções são: EQUAL,
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 43

SLIGHT VARIATION, MEDIUM VARIATION e RANDOM, que cor-


respondem respectivamente a linhas com os tamanhos todos iguais,
com tamanhos que variam apenas ligeiramente, com tamanhos que va-
riam de forma moderada e com tamanhos que variam aleatoriamente.

Em todas as janelas de estilo anteriormente citadas, temos também o


quadro que diz ZOOM 4X para permitir a visualização do efeito à linha
de forma mais detalhada. Também há o campo THICKNESS que
permite o ajuste da espessura da linha em pontos. SHARP CORNERS
é outro quadro que, quando marcado, produz linhas com cantos em bi-
co.

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

Feito o LASSO, teríamos seleccionado a região indicada na figura


abaixo.

Esta região seleccionada poderia ser então eliminada, o que


transformaria a recta única original em duas menores independentes,
conforme a próxima figura.

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

O modo de criação dos pontos é simples. Depois de seleccionar a pena,


vá com o rato para a área de desenho e carregue no botão. O Flash
criará o primeiro ponto da curva. Mova então o rato para outro sítio.
Ainda dentro da área de desenho, carregue novamente no botão para
criar o segundo ponto. Sem libertar o botão, mova o rato suavemente.
Verificará que o Flash permite o ajuste da curvatura do segmento. Crie
outros pontos. Se quiser fechar a curva, e transformá-la numa super-
fície, volte com o rato para cima do primeiro ponto criado e verá um pe-
queno círculo surgir ao lado do cursor. Esta é a indicação de que se car-
regar no botão irá fechar a curva.

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

No canto inferior esquerdo encontrará quatro caixas menores nomeadas


W, H, X e Y. Elas indicam respectivamente a largura (Width), altura
(Heigth), posição horizontal (X)3 e posição vertical (Y).

Logo abaixo da caixa de cor da linha existe um ícone com um balde e


logo ao lado uma outra caixa de cor. Para uma forma que seja apenas
uma linha, este balde não faz sentido, mas se estiver a criar uma forma
fechada, então poderá determinar a cor interior da forma, ou seja, a cor
de preenchimento (FILL).

Esta ferramenta se for usada numa linha já existente serve para


acrescentar, apagar e converter pontos.

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

Seleccione-a e mova o rato para a área de desenho. Carregue no botão


do rato e verá surgir uma caixa conforme vemos na página ao lado.

Note que no canto superior direito poderá ver um quadrado. O quadrado


indica que é uma caixa de tamanho fixo. Se tiver uma bola, é uma caixa
de tamanho variável – cresce com o texto que se introduzir. Se arrastar
este elemento poderá regular a largura da caixa de texto. Deve sempre
previamente regular a largura da caixa de texto para forçar o Flash a
formatar o texto numa região horizontal específica.

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.

Na figura seguinte vemos a janela de propriedade da caixa de textos do


tipo STATIC, que pode ser encontrada na parte central inferior do ecrã,
e os seus correspondentes parâmetros 4.

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

A seguir temos uma descrição mais detalhada de cada um dos campos


acima.

ESCOLHA DO TIPO DE TEXTO


No campo de escolha do tipo de texto é possível seleccionar o tipo de
funcionalidade da caixa de textos. As opções possíveis são STATIC
TEXT, DYNAMIC TEXT e INPUT TEXT.

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

Neste campo poderá ajustar o espaçamento entre as letras. Geralmente


este campo está preenchido com o valor zero, que corresponde ao
espaçamento normal das letras. O máximo valor que poderá colocar
neste campo é 60, que corresponde a um maior espaçamento entre as
letras e o menor valor é –60, que corresponde ao menor espaçamento.
Veja a figura abaixo.

TIPO DE LETRA e TAMANHO

Nestes campos poderá ajustar o tipo de letra, dentre as que tiver


instaladas no seu computador, e o tamanho que estas terão. Numa
determinada caixa de texto poderá ter diferentes tipos e tamanhos de
letra.

POSIÇÃO DOS CARACTERES

Nesta caixa poderá ajustar a posição de caracteres em relação às


linhas. As opções são NORMAL, SUPERSCRIPT e SUBSCRIPT. Com
a opção SUPERSCRIPT poderá escrever expoentes de equações, por
exemplo, e com a opção SUBSCRIPT poderá colocar índices nestas
mesmas equações. Logo, o SUPERSCRIPT corresponde à escrita de
caracteres de tamanhos reduzidos acima da linha base do texto, en-
quanto que o SUBSCRIPT equivale a caracteres de tamanhos reduzi-
dos abaixo da linha base. Veja os exemplos seguintes.
50 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

SUPERSCRIPT: x2 + y2 = z 2

SUBSCRIPT: x1 + x2 = z 1

Este campo só pode ser utilizado para as caixas de texto do tipo


STATIC.

AJUSTE DE COR, BOLD e ITÁLICO

Os três campos a seguir são a caixa de ajuste de cor, o B e o I onde


pode colocar o texto em negrito (BOLD) ou itálico (ITALIC). Também
neste caso poderá colocar letras de diversos tipos, tamanhos, cores e
formatos numa mesma caixa de texto.

DIRECÇÃO DO TEXTO e OPÇÕES DE ALINHAMENTO

A seguir, temos a caixa de ajuste da direcção do texto, indicada abaixo


pelo primeiro ícone.

Se carregar neste ícone poderá escolher uma das seguintes opções:


HORIZONTAL, VERTICAL, LEFT TO RIGHT e VERTICAL, RIGHT TO
LEFT.

Na primeira, o texto é escrito normalmente, da esquerda para a direita,


conforme imagem seguinte.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 51

Se escolher VERTICAL, LEFT TO RIGHT (vertical, da esquerda para a


direita), o texto passa a ser mostrado conforme a figura abaixo.

OPÇÕES DE ROTAÇÃO

Se todavia carregar no ícone logo abaixo daquele de ajuste de direcção


de texto, poderá rodar o texto, de forma que a imagem ao lado se torna
igual à seguinte.
52 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Veja na figura abaixo a indicação do ícone de rotação do texto existente


na janela de propriedades da letra.

Se tivesse escolhido na caixa de selecção de direcção do texto (não


confundir com a caixa de rotação do texto) a opção VERTICAL, RIGHT
TO LEFT (vertical, da direita para a esquerda), teria visto o texto ficar
conforme a imagem abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 53

Assim como no caso anterior, se carregar no ícone de rotação do texto


fará com que o texto passe do alinhamento existente na imagem acima
para o visto na imagem abaixo.
54 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Estas opções de formatação de texto são úteis também para escrita em


outras linguagens em que o texto se lê noutras direcções. O suporte a
essas linguagens – como o Coreano, Japonês e outras, foi melhorado
nesta versão do Flash, já que pode utilizar o UNICODE para a interpre-
tação do texto

OPÇÕES DE FORMATAÇÃO

Neste campo poderá ajustar alguns outros parâmetros na formatação


do texto dentro da caixa. Assim que carregar com o rato neste botão ve-
rá a janela abaixo.

Nesta janela poderá regular o INDENT, que corresponde à posição


relativa da primeira letra do parágrafo. Veja nas figuras abaixo um texto
com indentação zero e com uma indentação de valor positivo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 55

Outros parâmetros que podem ser regulados na janela de opções de


formatação são LINE SPAC ING (espaçamento entre as linhas de texto),
LEFT MARGIN (margem esquerda) e RIGHT MARGIN (margem direita).
Estes dois últimos valores referem-se às margens entre a caixa de texto
e o texto em si.

AUTO KERN

Se marcar esta caixa o Flash passa a utilizar as opções de Kerning5


disponíveis no próprio tipo de letra.

W, H, X e Y

Estes quatro parâmetros são os responsáveis pela definição da largura


(width), altura (height), posição horizontal (X) e posição vertical (Y) da
caixa de texto.

URL

Neste campo poderá colocar endereços de Internet para que se tornem


hiperligações (links). Para isto, basta seleccionar a parte do texto que
gostaria de transformar numa hiperligação, e na caixa URL colocar o
endereço de Internet correspondente. Desta forma, quando a sua
animação estiver a ser visualizada na Internet, a palavra que marcou
como link poderá ser clicada e actuará normalmente como todas as
outras hiperligações dos sites.

O endereço de Internet deve ser escrito neste campo na forma tradi-


cional, ou seja, http://www.pagina.com

ALVO DA URL

Esta é uma função avançada de HTML e indica onde a página no


campo URL deverá ser vista. As opções deste campo são “_blank”,

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

“_parent”, “_self” e “_top”. A primeira indica que uma nova janela no


browser deve ser aberta para carregar a URL. A segunda indica que a
página deve ser carregada na janela de maior hierarquia do browser
relativamente à hierarquia da página actual. Se não tiver definido
nenhuma hierarquia, por Java ou JavaScript, então a página é
carregada na janela actual. A terceira opção indica para carregar a
página na janela actual. A última opção indica que a página deve ser
carregada na janela aberta de maior hierarquia. Assim como a outra, se
nenhuma hierarquia tiver sido definida a página é carregada na janela
actual.

O TEXTO PODE SER SELECCIONADO?

Este botão indica se o texto da caixa pode ou não ser seleccionado


quando a animação estiver a ser visionada pelo utilizador, o que indica,
em suma, se permite ou não que o utilizador seleccione o texto com a
intenção de copiá-lo em seguida. Se desmarcar este campo o texto será
visto mas não poderá ser seleccionado e consequentemente não pode-
rá ser copiado.

USE DEVICE FONTS

O Flash, por defeito, inclui no ficheiro final correspondente à sua anima-


ção todas as letras das fontes que utilizou. Logicamente que armazenar
as informações de tais letras faz com que o ficheiro aumente de
tamanho. Felizmente, o Flash apenas armazena a informação relativa a
cada letra e fonte diferente que utilizou. Assim, se utilizar a fonte ARIAL
e escrever a palavra AGUA, e com a Times New Roman escrever a fra-
se DVD VIDEO, isto fará com que sejam armazenadas as letras A, G e
U da fonte ARIAL e as letras D, V, I, E e O da Times New Roman.

Se marcar a opção USE DEVICE FONTS indicará ao Flash para que


este não armazene internamente as informações relativas às letras
utilizadas nas animações e tente utilizar as fontes que existam na
máquina onde estiver a correr, que mais se assemelhem às que utilizou.

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

Como na prática é impossível ter essa certeza absoluta, irá correr o


risco de ver a sua animação completamente “destruída” pelo uso de
uma fonte inadequada (atenção às questões legais no uso de fontes
pagas).

TIPO DE LINHA

Nesta caixa poderá ajustar o estilo da caixa de textos no que se refere à


disposição das linhas. As opções para as caixas de texto do tipo
DYNAMIC são: SINGLE LINE, MULTILINE e MULTILINE NO WRAP. A
primeira indica que a caixa somente terá uma linha na largura da caixa
especificada. Caso o texto seja maior do que a largura disponível então
somente parte deste será mostrado. A opção MULTILINE faz com que a
caixa de textos passe a ter múltiplas linhas; respeitando o tamanho da
caixa. Além disto, o texto é formatado automaticamente em linhas, à
medida em que atinge a borda direita da caixa. A opção MULTILINE NO
WRAP impede que o Flash arrume o texto em linhas à medida em que
este atinge o limite direito da caixa. Cabe a si definir onde deve haver a
mudança de linhas pela colocação de caracteres ENTER nos pontos
desejados.

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.

As propriedades desta caixa assemelham-se às das caixas do tipo


STATIC vistas anteriormente; porém, alguns outros botões e campos
novos surgem, tal como veremos a seguir. Veja a figura seguinte.
58 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

A primeira coisa que observa nas propriedades dessa caixa é o campo


VAR e o botão CHARACTER. No primeiro, é possível definir as variá-
veis que vai utilizar em ActionScript. Pode, por exemplo, criar uma
variável qualquer e armazenar nela valores a utilizar mais adiante. No
botão CHARACTER vai poder definir que letras quer que o Flash arma-
zene internamente no ficheiro final. Se accionar este botão vai ver a ja-
nela a seguir.

A primeira opção NO CHARACTERS indica que nenhuma informação


de fontes irá ser armazenada. ALL CHARACTERS indica que todas as
informações das letras serão armazenadas. ONLY usado em combina-
ção com as quatro caixas seguintes indica que apenas as letras maiús-
culas de A até Z serão armazenadas, apenas as letras minúsculas de a
até z serão armazenadas, apenas os números de 0 a 9 serão armaze-
nados e apenas os sinais de pontuação serão armazenados. A última
caixa abaixo da frase AND THESE CHARACTERS indica algumas
letras e sinais de pontuação que poderá inserir para indicar mais
precisamente ao Flash o que deseja que ele faça. Esta caixa também é
útil para definir os caracteres acentuados da ílngua portuguesa, por
exemplo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 59

BOTÃO HTML

Se seleccionar este botão, indicará ao Flash para preservar as


características básicas de formatação de textos HTML, como tipo de
letra, estilo, cor, tamanho, e hiperligações nas caixas de texto, pela apli-
cação automática dos correspondentes tags em HTML quando a anima-
ção final for exportada para SWF.

Os seguintes tags em HTML são suportados: <A>, <B>, <FONT COLOR> ,


<FONT FACE>, <FONT SIZE>, <I> , <P> e <U>. Também são suportados os
seguintes atributos: LEFTMARGIN, RIGHTMARGIN, ALIGN, INDENT e LEA-
DING.

Poderá preservar as características de formatação e estilo dos textos


HTML pelo uso de variáveis das caixas de texto ou uso do nome da
instância da caixa de texto.

Se o desejar fazer pelo uso das variáveis proceda da seguinte forma:

ü crie uma caixa de texto do tipo DYNAMIC ou INPUT;


ü nomeie o campo VARIABLE dessa caixa na janela de proprie-
dades como “texto” por exemplo.

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”.

Ajuste a variável do campo de texto para um valor que inclua alguns


“tags” de HTML.

Por exemplo, se ajustar a variável “txt” com o valor,

txt = “<B>apenas um teste</B>”

e accionar o botão HTML, então o texto será mostrado em negrito, uma


vez que o accionamento deste botão faz o Flash seguir as instruções
60 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

dadas pelo tag <B> de HTML que indica “ligar o negrito” e o tag </B>
que indica “desligar o negrito”.

Se quiser fazer tudo directamente por ActionScript, então use os seguin-


tes comandos.

instName.html = true;
txt = “<B>apenas um teste</B>”

Se por outro lado quiser preservar as características dos textos HTML


pelo uso do nome da instância da caixa de textos, faça o seguinte:

ü crie uma caixa de texto do tipo DYNAMIC ou INPUT;


ü nomeie o campo VARIABLE dessa caixa na janela de proprie-
dades como “texto”, por exemplo.

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”;

Ajuste a variável do campo de texto, no painel ACTIONS, para um valor


que inclua alguns tags de HTML.

Agora, se a instância da caixa se chamar InstanciaUm, use o comando


abaixo de ActionScript para fazer o Flash finalizar o texto a utilizar os
tags de HTML que inseriu.

InstanciaUm.html = “<B>apenas um teste</B>”

MOSTRAR BORDA

Indica se deseja ou não se quer visível a borda da caixa de textos.


I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 61

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.

Porém, ainda surge um novo campo chamado MAXIMUM CHARAC-


TERS, quando se escolhe a caixa do tipo INPUT. Neste campo poderá
definir o máximo número de letras que a caixa terá a capacidade de
conter. O uso desta variável é indicado para limitar a quantidade de
texto que tenciona deixar que seja preenchida, pelo utilizador num for-
mulário, por exemplo.

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.

Oval Tool & Rectangle Tool


Ao voltar novamente à barra de ferramentas do Flash, encontramos os
dois próximos ícones a seguir ao Text Tool. São eles a oval (OVAL
TOOL) e o rectângulo (RECTANGLE TOOL), representados pelos íco-
nes de um círculo e um quadrado...

O procedimento para criação de uma forma destas é simples. Carregue


com o rato num ponto na área de desenho, movimente o cursor para
outro sítio e liberte o botão.

DICA
62 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Para criar quadrados ou círculos, com as ferramentas


RECTANGLE TOOL e OVAL TOOL, respectivamente,
mantenha o SHIFT carregado no momento da criaçã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

Para criar quadrados ou rectângulos com os cantos


arredondados, carregue duas vezes no ícone
RECTANGLE TOOL antes de criar o objecto.

Porém, estas formas, como são fechadas, permitem agora que se


possa escolher uma cor ou padrão de preenchimento (FILL) interno.
Então, depois de criar a forma deve seleccionar a região de fill e na
janela de propriedades da forma, carregar no balde de preenchimento e
escolher uma cor ou gradiente. Ao carregar no balde vai ver uma janela
igual à vista abaixo.

Poderá então escolher uma cor ou um padrão de gradiente, conforme


poderá ver no pequeno rodapé desta janela.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 63

Seleccione um gradiente qualquer.

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.

Na parte superior esquerda da janela tem duas caixas de selecção de


cor. A primeira delas está ao lado do ícone de um lápis, a indicar que se
trata da cor da linha. A segunda está ao lado do ícone do balde de pre-
enchimento, logo, trata-se da cor de FILL 7.

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.

A seguir a este ícone pode ver outros três.

O primeiro da esquerda coloca o preto no LINE e o branco no FILL. O


do meio faz com que nenhuma cor seja usada no preenchimento. Final-
mente o terceiro ícone troca as cores de LINE e FILL no color mixer.

Na parte à direita do color mixer poderá ver caixas nomeadas de R, G e


B onde será possível regular directamente os valores das três cores
básicas, ou seja, Red, Green e Blue (vermelho, verde e azul)8.

Em ALPHA poderá regular a transparência que a cor criada terá.

Na parte inferior da janela do color mixer pode ver dois quadrados e um


rectângulo vertical. No primeiro é mostrada a cor que foi escolhida no
quadrado do meio. No rectângulo vertical à direita é possível regular o
nível de brilho da cor que estiver a trabalhar.

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.

Na parte superior direita da janela vê o ícone ao lado de um quadrado


com uma seta a apontar para baixo. Aí poderá escolher se quer traba-

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

lhar no formato de cor RGB 10 ou HSB11. Também poderá guardar a cor


numa paleta especial chamada SWATCH, para voltar a usá-la quando
quiser.

Gradientes
Outra coisa que poderá fazer com o COLOR MIXER é criar gradientes.

Existem dois tipos de gradientes no Flash: linear e radial. Melhor do que


explicar o que cada um significa, mostramos duas imagens que repre-
sentam cada um destes dois tipos.

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

Para perceber melhor o efeito, reduzimos o número de cores do gradi-


ente acima para 10, e temos a imagem abaixo.

GRADIENTE RADIAL

Depois de reduzidas as cores da imagem acima para apenas 10, tere-


mos a imagem abaixo.
68 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Se for ao rodapé da caixa COLOR SWATCHES e escolher o gradiente


preto e branco lá existente, vai ver que a janela COLOR MIXER se
modifica. Se então ajustar o campo existente nesta janela para LINEAR,
vai ver a seguinte janela.

No meio da figura acima, repare na barra horizontal com o gradiente.

Esta barra possui um marcador no início, com a cor branca e outro no


fim com a cor preta.

Se mover o rato e posicioná-lo em cima desta barra, vai ver que o


cursor se modifica e surge um sinal de “+”. Isto indica a possibilidade de
acrescentar um novo marcador.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 69

Nesta altura, carregue com o rato para criar um novo marcador no


gradiente.

OBSERVAÇÃO

Se a qualquer momento quiser apagar um marcador


no gradiente, basta arrastá-lo para baixo.

Pode marcar quantos quiser.

Se carregar num marcador poderá regular a sua cor e brilho.

Criado o gradiente com todos os marcadores pretendidos, basta aplicá-


-lo aos objectos com o balde de pintura - PAINT BUCKET TOOL.

OBSERVAÇÃO

A forma na qual o gradiente é aplicado varia de


acordo com a região do objecto onde se carregou no
acto de criação. Poderá posteriormente mudar este
ponto pelo uso da ferramenta FILL TRANSFORM
TOOL da barra de ferramentas.
70 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃ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.

Seleccione esta ferramenta. Ao fazê-lo, notará que na parte inferior da


barra de ferramentas, na área nomeada como OPTIONS, surge o ícone
de selecção do modo do lápis (PENCIL
MODE). Carregue neste ícone e uma
segunda janela será vista. Veja a figura
ao lado.

Imediatamente poderá ver três novas


opções: STRAIGHTEN, SMOOTH e
INK, que possibilitam a criação de
linhas rectas, suaves ou à mão livre. A
diferença é que, apesar dos dois
primeiros modos também permitirem
que se desenhe à mão livre, farão uma transformação na forma final
para corresponder ao modo escolhido.

Digamos, por exemplo, que seleccionou o modo STRAGHTEN. Como


este modo é o que produz linhas com segmentos rectos, mesmo que
desenhe linhas suaves, estas serão transformadas em linhas rectas. A
mesma coisa acontece no modo SMOOTH. Depois de terminar o dese-
nho da linha, o Flash entra em acção e suaviza a linha, para que fique
menos irregular. No modo INK nenhum processamento é feito e a linha
fica exactamente como foi desenhada.

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.

Assim como o lápis, uma vez seleccionado, o pincel


faz aparecer uma janela de OPTIONS, na parte inferi-
or da barra de ferramentas, que pode ser vista na figu-
ra ao lado.

O primeiro ícone de cima é o BRUSH MODE e


fornece-nos diferentes modos para o pincel: PAINT
NORMAL, PAINT FILLS, PAINT BEHIND, PAINT SELECTION e
PAINT INSIDE. Estes modos permitem os tipos de pintura a seguir.

PAINT NORMAL – Este é o modo normal de pintura. À medida em que


desloca o pincel, ele vai pintar todas as regiões por onde passar com a
cor seleccionada.

PAINT FILLS – Este modo de pintura apenas irá colorir as regiões de fill
de um objecto e deixará as suas linhas intactas.

PAINT BEHIND – Se for seleccionado faz com que o brush apenas


desenhe por detrás dos objectos.

PAINT SELECTION – Apenas pinta as regiões de fill dos objectos que


estejam seleccionados.

PAINT INSIDE – Apenas pinta as regiões de fill que sejam as mesmas


correspondentes ao primeiro ponto onde o brush tocou. Isso quer dizer
que, se o brush tiver começado a pintar, por exemplo, na área de fill de
um círculo, não poderá pintar nada que esteja fora desta área.

Na figura seguinte poderá ver os cinco exemplos de modos de brush e o


tipo de efeitos que causam. Em todos os casos, pintamos uma linha ver-
tical, de cima para baixo.
72 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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

Um objecto geralmente é formado pela sua linha exterior


(LINE) e sua região de preenchimento de cor (FILL).

Se escolher a ferramenta de selecção de objectos


(ARROW TOOL) e carregar duas vezes na linha exterior
deste objecto, seleccionará apenas esta linha. Se por
outro lado carregar duas vezes no FILL, seleccionará
ambas as partes do objecto, LINE e FILL.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 73

Logo ao lado do ícone de


BRUSH MODE na janela
OPTIONS da barra de
ferramentas, pode ver um
ícone nomeado USE
PRESSURE. Veja a figura
ao lado. Este ícone só faz
sentido de ser usado se
tiver ligado ao seu
computador um tablet12 que
seja sensível à pressão.

Veja na figura abaixo linhas


criadas com um tablet e com a função USE PRESSURE. As linhas
foram criadas por variação na pressão aplicada à caneta sobre o tablet,
à medida em que o cursor se deslocava para baixo.

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

Na barra de OPTIONS pode ver logo a seguir ao ícone USE


PRESSURE duas caixas de selecção, sendo a primeira nomeada
BRUSH SIZE e a segunda BRUSH SHAPE. Nelas pode ajustar o tama-
nho e a forma do pincel, respectivamente. Veja a figura abaixo.

O cadeado na parte debaixo da janela de options representa o LOCK


FILL, a ser visto mais adiante.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 75

Free Transform Tool


De volta à barra de ferramentas, temos o ícone a seguir ao BRUSH. É o
FREE TRANSFORM TOOL.

Esta ferramenta permite ajustar ou transformar a largura, altura ou


rotação do objecto e também distorcê-lo em ambas as direcções.

Construa um objecto qualquer e com o rato carregue duas vezes na


região de fill deste para o seleccionar. Na barra de ferramentas car-
regue no ícone do FREE TRANSFORM TOOL e vai ver que um quadra-
do com diversos pontos aparece à volta do objecto. Aproxime o cursor
do rato de cada um destes pontos e vai ver que este se transforma em
diversos símbolos para representar as diversas operações que pode
realizar, nomeadamente, ajuste da largura, ajuste da altura, rotação,
distorção horizontal e distorção vertical. Veja na figura abaixo os símbo-
los existentes.
76 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

No modo normal o FREE TRANSFORM TOOL utiliza


o canto esquerdo inferior da selecção como o centro
para as transformações.

Se mantiver o ALT carregado durante o processo,


passa a ser considerado o centro real da selecção.

Com o SHIFT carregado, a escala é feita mantendo-se


as proporções.

Se utilizar o CONTROL e arrastar um dos cantos da


selecção, poderá distorcer o objecto!

Ao seleccionar a ferramenta FREE TRANSFORM TOOL poderá ver


estas opções de distorção, escala e rotação, no menu OPTIONS da
barra de ferramentas. Também verá uma quarta opção, chamada
ENVELOPE a qual descreveremos a seguir.

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.

Estes pontos que surgem estão divididos em duas categorias: os que


formam o envelope em si (pontos quadrados) e aqueles que servem
para ajustar a curvatura (pontos redondos). Um ponto do envelope
possui dois pontos de curvatura. Na figura abaixo mudamos de lugar
alguns dos pontos vistos acima e ajustamos as suas curvaturas, para
que perceba melhor o efeito.
78 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Uma vez que termine a distorção por envelope, e saia do modo de


edição, perde o envelope que acabou de fazer. Ao retornar novamente
ao modo de envelope, verá que a selecção volta a ficar direita.

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

determinado objecto, crie a forma correspondente ao furo no mesmo


layer, exactamente na região que quer furar; tendo o cuidado de criar
este novo objecto com uma cor diferente da utilizada no primeiro. Então,
seleccione esta segunda forma e elimine-a.

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.

outro objecto desenhado por cima


Objecto original para ser o furo...

Este segundo objecto é então seleccionado e apagado. Temos agora o


objecto inicial furado.
80 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃ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.

Primeiro desenhamos o objecto visto na figura abaixo.

Para melhor unir os objectos que serão desenhados em seguida,


utilizamos a Arrow Tool para seleccionar a linha de borda do objecto,
que é apagada em seguida. Assim, ficamos apenas com o rectângulo
interno.

Desenharemos agora por cima deste rectângulo, algumas outras


formas, até obter o resultado seguinte.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 81

Seleccione com o Arrow Tool e elimine todas as linhas de borda das


formas que desenhou por cima da original. Obterá então o resultado
abaixo.

Para voltar a ter a linha de borda, nesta altura, que corresponda ao


contorno do objecto como um todo, seleccione o INK BOTTLE TOOL e
carregue com o rato na região da borda do objecto. Assim, obterá o
objecto da próxima página.
82 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Fill Transform Tool


O próximo ícone na barra de ferramentas é o FILL TRANSFORM
TOOL, que permite a transformação do gradiente utilizado no preenchi-
mento de cor de um determinado objecto.

Crie um objecto e preencha-o com um gradiente. Seleccione a função


FREE TRANSFORM TOOL e carregue na região de fill do objecto. Um
círculo aparecerá à volta do objecto, tendo como centro a região central
do gradiente. Este círculo possui quatro elementos: um quadrado e três
pequenas bolas, que realizam as funções indicadas na figura abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 83

Ink Bottle Tool & Paint Bucket Tool


Os dois próximos ícones na barra de ferramentas são o INK BOTTLE
TOOL e o PAINT BUCKET TOOL.

Com o INK BOTTLE TOOL, cujo ícone é um tinteiro, é possível colorir


as linhas de contorno das formas. Para tal, seleccione-o, ajuste os parâ-
metros nas propriedades visíveis na parte central inferior do ecrã13 e
aplique o tinteiro sobre a linha a colorir.

Já o PAINT BUCKET TOOL, cujo ícone é um balde, permite mudar a


cor de preenchimento de um objecto. No caso de ter sido escolhido um
gradiente para preenchimento, o ponto onde carregar com o balde no
objecto determinará o início do gradiente. Na figura abaixo veja quatro
figuras criadas com o mesmo gradiente onde apenas se variou o ponto
inicial 14.

Ao seleccionar o balde entretanto vai ver que a janela OPTIONS da


barra de ferramentas mostra o ícone de um círculo azul com uma seta
diagonal para baixo. Se carregar neste ícone vai ver que uma pequena
janela surge com várias opções. Veja a seguir.

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

Estas opções causam os seguintes efeitos.

DON´T CLOSE GAPS – Se por acaso a forma que estiver a preencher


tiver alguma falha ou buraco intencional na área de FILL e escolher esta
opção, então o preenchimento de cor ou gradiente é feito e deixa
intactas tanto falhas como áreas de furo.

CLOSE SMALL GAPS – Esta função preenche as áreas de FILL de


objectos mas preenche também as áreas com falhas ou buracos
intencionais. Serve para corrigir áreas de fill que por acaso estejam com
problemas. Só consegue corrigir as áreas de pequena dimensão.

CLOSE MEDIUM GAPS – Esta função é igual à anterior mas consegue


corrigir áreas com falhas e furos de médio tamanho.

CLOSE LARGE GAPS – Esta função é igual à anterior mas consegue


corrigir áreas com falhas e furos de grande tamanho.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 85

OBSERVAÇÃO

Nesta altura devemos falar do cadeado que se encontra na parte inferior


esquerda da janela OPTIONS na barra de ferramentas. Esta ferramenta é o
LOCK FILL e é bastante útil quando estamos a lidar com gradientes.

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.

LOCK FILL DESLIGADO

LOCK FILL LIGADO

Repare que na primeira imagem o mesmo gradiente é aplicado a cada objecto.


Na segunda imagem, cada figura leva a cor do gradiente a que corresponde,
consoante a sua posição horizontal.
86 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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:

ERASE NORMAL – Este é o modo normal. À medida em que desloca o


pincel, ele vai apagar todas as regiões por onde passar.

ERASE FILLS – Neste modo somente as áreas de fill são apagadas. As


linhas de contorno são deixadas intactas.

ERASE LINES – Este é exactamente o inverso do anterior, ou seja, as


linhas de contorno são apagadas e as áreas de fill são deixadas in-
tactas.

ERASE SELECTED FILLS – Apenas apaga as regiões de fill dos objec-


tos que estejam seleccionados.

ERASE INSIDE – Apenas apaga as regiões de fill que sejam as


mesmas correspondentes ao ponto onde o ERASER TOOL tocou pela
primeira vez. Isso quer dizer que, se tiver começado a apagar, por
exemplo, na área de fill de um círculo, não poderá apagar nada que não
corresponda a esta área.

Outra janela que se desdobra do OPTIONS é a ERASER SHAPE. Nela


poderá escolher a forma da borracha, redonda ou quadrada, em diver-
sos tamanhos.

Também está presente o ícone de uma torneira (FAUCET). Com ele


poderá apagar de uma vez, ou linhas ou áreas de fill. Seleccione-o e
experimente carregar numa área destas. De uma vez só a área selec-
cionada desaparece.

DICA

Se quer apagar todos os objectos da área de


desenho de uma só vez, carregue duas vezes no
ícone do ERASER TOOL.
88 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Assim que é seleccionado, mostra na janela de options da barra de


ferramenta duas opções: ENLARGE e REDUCE. Com elas é possível
fazer o aumento ou redução do desenho, respectivamente. Não deve
confundir esta função com aquela para aumentar os objectos de facto.
O ZOOM TOOL apenas aumenta e diminui no ecrã, para facilitar a
visualização dos objectos, e não modifica o tamanho dos objectos.

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.

Nesta janela encontrará várias cores em pequenos quadrados. São


cores pré-ajustadas, prontas a utilizar. Poderá acrescentar as suas
próprias cores (ou swatches) a esta
janela, para tê-las prontas a usar.

Para acrescentar uma cor à janela de


swatches basta criar a cor no COLOR
MIXER e depois escolher a opção ADD
WATCH no menu disponível no ícone
superior direito desta janela.

Caso acrescente um swatch pelo


COLOR MIXER, verá surgir um novo
quadrado com a sua cor na janela
COLOR SWATCHES. Gradientes tam-
bém poderão ser adicionados aos swat-
ches, como pode ver pelos ícones na
parte debaixo da janela.

Se carregar no ícone no canto superior


90 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

direito da janela verá surgir um menu com algumas funções, as quais


explicamos a seguir.

DUPLICATE SWATCH – poderá duplicar um swatch seleccionado se


utilizar esta função.

DELETE SWATCH – poderá eliminar o swatch seleccionado.

ADD COLORS – Interessante esta função... com ela poderá


acrescentar à janela de swatches cores que venham de tabelas de
cores ou de imagens indexadas como GIF´s. É excelente se precisar
trabalhar numa animação que deva ter cores precisamente escolhidas.

REPLACE COLORS – importa cores para o swatch que venham de


tabelas de cores ou de imagens indexadas como GIF´s, exactamente
como a função anterior, porém, a anterior acrescenta as cores importa-
das à janela de swatches, enquanto que esta substitui as que lá esta-
vam pelas que estão a ser importadas.

LOAD DEFAULT COLORS – Faz a janela de swatches voltar ao estado


normal ajustado de fábrica. Porém as cores “default” podem ser muda-
das pelo utilizador como veremos a seguir...

SAVE COLORS – grava num ficheiro as cores que estão na janela de


swatches. Pode mais tarde recuperá-las através das opções ADD
COLORS ou REPLACE COLORS.

SAVE AS DEFAULT – faz o mesmo, porém as cores gravadas passam


a ser as cores “de fábrica”, o que modifica a função LOAD DEFAULT
COLORS, que a partir do uso desta função passa a chamar às cores
gravadas cores “default”.

CLEAR COLORS – elimina todas as cores dos swatches.

WEB 216 – Ajusta os swatches para as famosas 216 cores da Web


Safe Palete. Veja o Anexo 2.

SORT BY COLOR – Ordena os swatches pelas cores.


I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 91

HELP, MAXIMIZE PANEL e CLOSE PANEL são as três últimas opções


do menu que servem para trazer o help na secção correspondente,
maximizar e fechar a janela de SWATCHES, respectivamente.
92 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
I.2. OS MENUS

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.

Os Menus e suas funções

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.

New From Template


A primeira função deste menu que nos chama a atenção é a NEW
FROM TEMPLATE. Ao carregar nela verá a janela a seguir.
94 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Os templates são formatos padronizados para facilitar a sua criação.

Pode ver na coluna da esquerda que a Macromedia dividiu os templates


por categorias: ads, broadcast, menus, mobile devices, photo slide
show, presentation e quiz, que correspondem respectivamente a
formatos para a criação de anúncios ao estilo dos presentes em páginas
de Internet (banners), para desenvolvimento de material para televisão
e vídeo, para a criação de páginas com menus, para a criação de
páginas para dispositivos móveis, para a criação de slideshows1, para
apresentações comerciais e para questionários.

Um dos templates que poderá escolher é o BROADCAST (veja a figura


seguinte), que já fornece a moldura a servir como guia para a produção
de vídeo.

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

A área de trabalho para vídeo ou televisão, ou seja, o tamanho do


frame, é, em PAL, 720 x 576 pixéis e em NTSC, 720 x 486 pixéis.
Porém, quando se está a criar para estes formatos, não se pode
considerar toda a área disponível na imagem para a composição
dos elementos. Isto porque a imagem que se vê nos televisores
está ampliada ligeiramente em relação ao que é transmitido. Assim ,
se um objecto estiver muito perto da borda, não será visto.

Na imagem acima pode ver um rectângulo maior que diz WORK


AREA, mas que indica 720 x 540. Este formato indicado equivale a
ao formato NTSC com pixel quadrado. Na prática, deve criar em
720 x 486 que é o formato mais utilizado. Dentro deste rectângulo
vê outro que diz ACTION SAFE que representa a área onde deve
colocar os objectos e movimento da sua animação. Na verdade,
deve fazer a animação ocupar toda a WORK AREA, mas deve ter
em mente que qualquer coisa fora da ACTION SAFE corre o risco
de não ser vista. Finalmente, vê um terceiro rectângulo que diz
TITLE SAFE. Esta área menor representa o local onde deve
colocar textos e tudo o que precise ser visto ou lido, como
logótipos, etc.

Deve explorar outros templates existentes, como o PhotoSlideShow


para a criação de projecções de imagens sequenciais e os da categoria
QUIZ, para a criação de questionários e sondagens.
96 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Todos os templates vêm acompanhados de um layer com as instruções


para que entenda o funcionamento do referido template e o saiba usar.
Este layer pode ser apagado sem afectar o funcionamento do template.

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

A biblioteca do Flash é uma área onde estão armazenados todos os símbolos


(objectos) criados, além dos ficheiros que forem importados,
como imagens, sons, vídeos e artes vectoriais.

Vista a janela poderá arrastar os objectos lá existentes para a área de trabalho.


Inclusive no Flash é conveniente fazer sempre o menor número possível de
objectos e sempre que possível aproveitar os que já tenha criado para diferentes
partes da mesma animação. Se, por exemplo, pretende colocar três rectângulos,
um de cada cor, crie apenas um e da biblioteca arraste-o para a sua área de
desenho e mude a cor de cada um. Desta forma, na animação final o Flash
armazenará apenas um símbolo, o que tornará o ficheiro menor.

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

Import & Export Movie


Estes comandos do menu FILE importam ou exportam a sua animação
de e para determinados formatos de ficheiro. Pode importar ou exportar
formatos de filme tradicionais como AVI e MOV, ficheiros de som,
imagens, sequências de imagens ou artes vectoriais (FreeHand, Illus-
trator, etc.), etc.

Esta função é bastante útil quando se está a utilizar o Flash em conjunto


com algum software de edição de vídeo como o Adobe Premiere ou de
efeitos visuais como o Combustion ou o After Effects.

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).

Logo em seguida deve ir ao menu FILE > IMPORT e carregar no


ficheiro QuickTime (extensão MOV) para o poder importar.

Surgirá a janela abaixo.

Esta janela contém duas perguntas: a primeira diz EMBED VIDEO IN


MACROMEDIA FLASH DOCUMENT . Se escolher esta opção, o filme
98 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

importado será colocado no interior do ficheiro final da sua animação


Flash. A segunda hipótese diz LINK TO EXTERNAL VIDEO FILE e faz
com que o Flash não acrescente o filme QuickTime ao ficheiro final da
animação. De facto, esta opção apenas faz uma ligação (link) entre o
filme Flash final e o filme QuickTime. Porém, para que o vídeo seja visí-
vel, é preciso que exporte a animação final no formato QuickTime.

Caso escolha a primeira hipótese verá surgir a seguinte janela.

Nesta janela poderá ajustar a qualidade, o intervalo para a criação de


keyframes e o tamanho final do vídeo importado. Logicamente, quanto à
qualidade, quanto maior melhor. O valor definido no campo do intervalo
para a criação de keyframes também é responsável pela qualidade final.
Quanto menor esse número, maior a qualidade.
I.2. OS MENUS 99

A caixa que diz SYNCHRONIZE VIDEO TO MACROMEDIA FLASH


DOCUMENT FRAME RATE sincroniza ou não o vídeo importado à taxa
de frames por segundo (frame rate) da animação Flash onde está a ser
importado.

Logo abaixo uma outra caixa permite ajustar o número de frames de


vídeo a ser codificados por frames da animação Flash (NUMBER OF
VIDEO FRAMES TO ENCODE PER NUMBER OF MACROMEDIA
FLASH FRAMES).

Geralmente, assim que carregar em OK na janela anterior e iniciar o


processo de importação do filme, verá a seguinte janela.

Nela, o Flash está a perguntar se deseja aumentar a quantidade de


frames no seu timeline para o tamanho correspondente à quantidade de
frames do filme após a conversão. Neste caso, 102 frames .

FREEHAND

Mas se for importar um ficheiro FreeHand, deverá ir ao mesmo menu


FILE > IMPORT e seleccionar o ficheiro em formato FreeHand que
deseja importar. Vai ver então a seguinte janela.
100 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

A primeira secção da janela corresponde à função de MAPPING e irá


informar o Flash de que maneira pretende que a importação do ficheiro
seja feita. Em PAGES tem duas opções: SCENES e KEY FRAMES. Na
primeira poderá definir se quer que as páginas do seu trabalho no
FreeHand sejam transformadas em cenas ou keyframes quando for
importada. Na opção LAYERS, poderá definir como quer que os layers
do FreeHand sejam importados. A primeira opção é LAYERS. Se a
escolher, os layers do FreeHand são importados como layers no Flash.
Se escolher a opção KEYFRAMES os layers do FreeHand são importa-
dos cada qual num frame na animação Flash, para o caso de se tratar
de uma animação onde cada frame foi desenhado como sendo um layer
no FreeHand. A terceira hipótese é FLATTEN. Neste caso, todos os
layers do FreeHand são combinados e apenas um layer correspondente
é criado no Flash.

Na secção PAGES da janela poderá definir que páginas do ficheiro


FreeHand pretende importar, todas (ALL) ou um número definido de
páginas, se utilizar os campos FROM e TO.
I.2. OS MENUS 101

Na secção OPTIONS verá três quadros:

INCLUDE INVISIBLE LAYERS, INCLUDE BACKGROUND LAYER e


MAINTAIN TEXT BOXES.

No primeiro poderá definir se quer ou não importar os layers invisíveis


que porventura possam existir no documento FreeHand importado. Na
segunda opção, poderá definir se quer importar o layer de background
da arte no FreeHand. Na última opção, indicará ao Flash se quer manter
os textos criados no FreeHand ainda editáveis no Flash.

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.

Vai ver que a janela acima possui três subdivisões, nomeadamente


FORMATS, FLASH e HTML.
102 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Porém, se marcar todos os quadros disponíveis nesta janela, verá au-


mentar o número de subdivisões.

Porém, de todas estas subdivisões, as mais importantes são as três


primeiras, as quais falaremos a seguir.

OPÇÃO FORMATS – JANELA PUBLISHING

Nesta primeira divisão, deverá marcar os formatos que pretende


produzir. Por defeito, o Flash produz sempre o filme final em SWF e
também a página HTML com os comandos para chamar o filme.

Deverá notar que enquanto está a trabalhar na sua animação em Flash


o ficheiro é guardado no disco no formato FLA. Quando finaliza a ani-
mação e a publica, o ficheiro tem o formato SWF. É exactamente este
formato o que é visualizado pelo Flash Player directamente no browser.

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

Existem também disponíveis dois formatos especiais chamados WIN-


DOWS PROJECTOR e MACINTOSH PROJECTOR nos quais o seu
trabalho é colocado no interior de um programa, no formato de PC ou
MAC. Desta forma, os seus trabalhos podem ser distribuídos e vistos
em máquinas que não possuam o Flash Player, ou colocados em CD-
ROM e DVD.

OPÇÃO FLASH – JANELA PUBLISHING

Na divisão Flash, controlam-se os parâmetros do formato SWF, que é o


usado na esmagadora maioria dos casos. Para um ficheiro SWF ser
visto, é preciso que o computador possua o Flash Player, ou no caso de
ser inserido numa página HTML, o browser precisa do plugin na versão
correcta (ver abaixo); destacamos as seguintes opções:

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

GENERAT E SIZE REPORT – quando marcada esta opção é gerado um


ficheiro de texto no mesmo directório onde estiver a gravar o seu
trabalho, com um resumo de tudo o que foi gerado durante a criação do
filme (publishing).

PROTECT FROM IMPORT - Marque esta opção se quiser impedir que


outros importem os seus filmes para utilizar nos seus trabalhos.

OMIT TRACE ACTIONS – Esta opção funciona em conjunto com a


anterior. Se a ligar impedirá que as operações de trace (veja nota de
rodapé) sejam mostradas na janela de saída (OUTPUT).

DEBUGGING PERMITTED – Se ligar esta opção estará a permitir que


um filme seu possa ser “debugged2” remotamente. Poderá usar esta
opção com a de PASSWORD, para proteger o seu trabalho.

COMPRESS MOVIE – Esta opção apenas está disponível no Flash MX.


Quando ligada faz com que uma compressão seja aplicada ao filme, no
intuito de diminuir o tamanho final do ficheiro. Use esta opção se tiver
muita quantidade de texto ou ActionScript. Se a ligar o filme só poderá
ser visto por aqueles que possuírem o Flash 6 Player instalado.

PASSWORD – coloque uma password nesta caixa para permitir que os


seus filmes possam ser depurados ou importados por outras pessoas.

JPEG QUALITY - caixa para estabelecer o nível de compressão das


imagens finais. Por defeito, todas as imagens importadas para dentro de
um filme no Flash são exportadas em JPEG e tudo o que é ouvido, em
MP3. Quanto maior a compressão menor o tamanho do ficheiro e pior a
qualidade da imagem.

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

AUDIO STREAM MP3, 16 Kbps, Mono – Se carregar no botão SET


poderá ajustar de que forma deseja gerar as “streams” de áudio.

AUDIO EVENT MP3, 16 Kbps, Mono – Se carregar no botão SET


poderá ajustar de que forma deseja gerar os “eventos” de áudio.

OPÇÃO HTML – JANELA PUBLISHING

Nesta janela, poderá regular as opções do ficheiro HTML a ser gerado


para suportar o filme em Flash que está a publicar.

No campo TEMPLATE poderá escolher um formato para publicar o seu


filme, como por exemplo, um formato e alinhamento específico para
algum tipo de PocketPC. A escolha por defeito é Flash ONLY.
106 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Logo a seguir vê o campo DIMENSIONS onde pode regular o tamanho


do filme, caso pretenda publicar um filme me-
nor do que o tamanho que criou 3.

A próxima secção da janela é a PLAYBACK e


possui quatro opções: PAUSED AT START,
DISPLAY MENU, LOOP e DEVICE FONT.

A página HTML que tiver a opção PAUSED


AT START marcada irá carregar o filme Flash
correspondente mas não o irá executar. O
utilizador deverá carregar com o botão da
direita do rato sobre a animação e escolher
PLAY (figura ao lado), ou criar um botão no
filme para executar esta função.

DISPLAY MENU indica se deve ou não ser


mostrado o menu que surge quando o botão
da direita do rato é carregado em cima de
uma animação. Veja a figura ao lado.

LOOP – indica se o filme deve ser repetido


quando chegar ao fim (caso não possua ins-
trução no próprio filme para parar ou fazer outra coisa).

DEVICE FONT – Por defeito, o Flash armazena dentro da própria


animação todos os tipos de letra que estiverem a ser utilizados. Se
marcar esta opção, o Flash passa a não embeber as letras dentro da
animação. O problema é que se estiver a utilizar na sua animação um
tipo de letra que não exista na máquina do utilizador, o Flash será
obrigado a escolher um tipo qualquer de letra, das disponíveis no
sistema onde estiver a correr, para colocar no lugar da letra original.
Esta opção não é aconselhável de se usar pois pode destruir o visual de
3
Como os filmes em Flash são ficheiros vectoriaisl, estes não possuem um tamanho específico e
podem ser desenhados a qualquer escala. Logicamente, quanto maior o filme, mais a máquina es-
tará a trabalhar, para conseguir manter o filme em PLAY na velocidade correcta. Então, como não
é possível delimitar o tamanho do filme pelo próprio filme em si, é preciso delimitá-lo pelo HTML de
onde será executado.
I.2. OS MENUS 107

uma animação, caso a letra seja muito diferente da original. Só a use


caso tenha a certeza absoluta de que isto não vai acontecer. A vanta-
gem é a diminuição do tamanho final do ficheiro SWF.

A próxima opção relevante na janela é a que diz QUALITY. As


seguintes opções estão disponíveis: LOW, AUTO LOW, AUTO HIGH,
MEDIUM e HIGH. A diferença entre elas é o anti-aliasing: low não faz
antialiasing; medium não faz apenas no texto; high faz em todas as for-
mas.

LOW – esta opção faz com que o filme seja carregado em baixa qual-
idade, ideal para serem vistos em máquinas lentas.

AUTO LOW – esta opção faz o filme carregar inicialmente em baixa


qualidade e passar à média ou alta qualidade consoante o potencial da
máquina onde estiver a ser executado.

AUTO HIGH – este comando é idêntico ao anterior, porém o filme é


carregado inicialmente a alta qualidade que será reduzida caso veja que
a máquina não é capaz de visualizar o filme à qualidade indicada.

MEDIUM – o filme é executado em média qualidade independente da


máquina. Se esta for muito lenta o filme pode não conseguir ser mos-
trado como pretendido.

HIGH – Idêntica à anterior, porém o filme é executado em alta qualida-


de.

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.

É aconselhável antes de fazer PUBLISH gravar o ficheiro de trabalho


em alguma directoria, pois, caso contrário, o Flash irá “publicar” o seu
ficheiro numa directoria interna do próprio programa.
108 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Zoom In, Zoom Out e Magnification


As duas primeiras funções são óbvias e permitem que possa aumentar
o nível de zoom da área de trabalho, o que em outras palavras
corresponderia a ver os objectos mais de perto para poder trabalhar
detalhes muito pequenos ou diminuir este nível respectivamente.

MAGNIFICATION permite regular directamente o nível de zoom


adequado mediante a escolha de um dos valores oferecidos. As duas
últimas funções do submenu MAGNIFICATION porém, oferecem as
possibilidades de SHOW FRAME e SHOW ALL. Estas duas equivalem
a ajustar o nível de proximidade no ecrã para que toda a área de
trabalho esteja visível e ajustar este mesmo nível para que toda a área
circundante à área de trabalho esteja visível também - logicamente se
existir algum objecto que seja maior que a área de desenho ou que
esteja fora desta.

Outlines, Fast, Antialias, Antialias Text


Estas quatro funções são responsáveis por mostrar os objectos com
qualidade inferior no ecrã com o propósito de aumentar a velocidade de
operação para o caso de estar a lidar com animações complexas (vere-
mos esta funcionalidade mais adiante).

OUTLINES faz os objectos serem vistos apenas pelo desenho dos seus
contornos;
I.2. OS MENUS 109

FAST mostra os objectos normalmente mas desenha-os em baixa quali-


dade;

ANTIALIAS mostra os objectos com qualidade óptima mas mantém to-


do o texto em baixa qualidade;

ANTIALIAS TEXT é a maior qualidade. Tudo é mostrado em alta quali-


dade.

RULERS, GRID e GUIDES


Estas três funções equivalem a três funcionalidades importantes do
Flash.

RULERS (réguas) – Por defeito, as réguas horizontal e vertical estão vi-


síveis no ecrã. Estas réguas ajudam a que tenha uma ideia do tamanho
do objecto que estiver a criar. Veja a figura abaixo.

GRID (grelha) – O grid é um auxiliar de desenho no qual é activada uma


grelha sobre a área de desenho para lhe ajudar a criar os objectos
enquanto os estiver a desenhar. Dentro deste submenu vai encontrar
três outras funções: VIEW GRID, SNAP TO GRID e EDIT GRID.

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 accionar a função SNAP TO GRID, então à medida em que deslocar


o rato somente poderá criar pontos que estejam contidos nas intersec-
ções das linhas do grid. Mesmo que esteja a desenhar à mão livre, o
Flash estará a interpretar o seu desenho segundo estes pontos do grid.
Veja a figura abaixo.

Repare como todos os pontos formadores dos objectos (vértices) estão


localizados nos pontos do grid.

Se escolher a opção EDIT GRID vai ver a janela abaixo onde poderá
ajustar as propriedades do grid.
I.2. OS MENUS 111

Na primeira caixa, logicamente, poderá escolher a cor do grid. Logo em


seguida pode ver duas caixas: SHOW GRID e SNAP TO GRID, as
quais acabamos de descrever.

Nas duas caixas seguintes, poderá ajustar a distância entre as linhas


horizontais e verticais do grid. Por defeito, estes campos são ajustados
em 18 pixéis.

O último campo, denominado de SNAP ACCURACY, permite ajustar o


grau de precisão do acto de colar os pontos ao grid. As opções são da
maior precisão para a menor: MUST BE CLOSE, NORMAL, CAN BE
DISTANT e ALWAYS SNAP.

GUIDES (guias) – Os guias são outro auxiliar de desenho que


correspondem a linhas horizontais e verticais mostradas por cima da
área de desenho e que o ajudam a se orientar enquanto desenha. Para
criar um guia carregue com o botão da direita do rato em cima de uma
das réguas, mantenha o botão carregado e mova o rato para a área de
desenho.

Depois de criado um guia poderá mudá-lo para outra posição clicando


em cima do guia e arrastando-o para outro sítio.

No menu VIEW > GUIDES, vai encontrar quatro opções:

SHOW GUIDES, LOCK GUIDES, SNAP TO GUIDES e EDIT GUIDES.

Na primeira opção pode tornar os guias visíveis ou não. Na segunda


pode colocar travados os layers para que não possam ser movidos para
outro sítio. Na terceira opção pode fazer com que os guias possam ter
funcionalidade semelhante à do grid, ou seja, qualquer ponto clicado
nas imediações do grid seriam colados a este. A última opção permite
que ajuste a cor do guia e parâmetros semelhantes aos que ajustou no
grid.
112 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Shape - Soften Fill Edges


Este comando chamado SOFTEN FILL EDGES é muito importante para
criar suavizações nos contornos das formas. Uma das maiores utilida-
des para ele é a criação de sombras para objectos.

Crie então uma forma qualquer, por exemplo, um círculo no meio da


área de desenho, e carregue duas vezes na sua área interna para o
seleccionar. Vá ao menu MODIFY > SHAPE > SOFTEN FILL EDGES.

Surgirá então a janela a seguir.

No campo DISTANCE poderá regular o tamanho da suavização, em


NUMBER OF STEPS a quantidade de níveis que esta suavização terá e
em DIRECTION poderá definir a direcção da suavização, para fora
(EXPAND) ou para dentro (INSET) da forma.

Veja então o que acontece com o círculo, quando aplicamos uma


suavização com DISTANCE =20 px, NUMBER OF STEPS = 6 e
DIRECTION = INSET.
I.2. OS MENUS 113

Se observar a borda com mais cuidado verá o seguinte


114 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Repare que pode contar os 6 níveis que definiu para o NUMBER OF


STEPS. Então, como vê, a suavização pode melhorar se aumentarmos
o número de níveis. Se aumentar para 50 níveis, verá a imagem abaixo.

OBSERVAÇÃO

Quanto maior a quantidade de níveis na suavização, melhor


é a qualidade final e MAIOR é o objecto. Por esse motivo,
deve saber dos ear os níveis de acordo com o objectivo final
para não correr o risco de produzir animações gigantescas
que façam o utilizador desistir de as tentar ver.

Convert Lines to Fills


Se precisar converter uma linha de contorno de um objecto qualquer
numa área de pintura (fill), deve utilizar o comando CONVERT LINES
TO FILLS existente no menu MODIFY > SHAPE.
I.2. OS MENUS 115

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.

Nesta janela poderá regular o tamanho da expansão (DISTANCE) e a


direcção (DIRECTION), no sentido de expandir (EXPAND) ou contrair
(INSET ) o shape.

OBSERVAÇÃO

Algumas formas com cantos em bico ou larguras muito


finas não se saem bem durante uma expansão ou
compressã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

Algumas formas com cantos em bico ou larguras muito finas não


se saem bem durante um SMOOTH.
116 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Inserimos algumas letras na área de desenho conforme pode ver pela


imagem abaixo.

Depois de repetidos SMOOTHs as letras ficaram da seguinte forma.

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.

Veja o que aconteceu às letras ABCD depois de accionarmos seguidas


vezes o comando STRAIGHTEN.
I.2. OS MENUS 117

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.

Digamos que tenha transformado uma imagem em vectorial. Porém,


durante a conversão, o objecto final ficou com um número muito grande
de pontos o que o tornou deveras pesado para ser colocado na anima-
ção. Então, pode tentar uma simplificação dos pontos por meio deste
comando.

Assim que accionado o comando, surge a janela a seguir.

Pode ver uma barra deslizante (slider) no meio da janela de


SMOOTHING. Esta barra regula o grau de suavização que o SHAPE
terá durante a optimização. Se a deslocar para a esquerda nenhuma
optimização será feita, e para a direita teremos o grau máximo de opti-
mização.

A seguir vemos um quadro que diz USE MULTIPLE PASSES


(SLOWER). Ao marcá-lo obrigará o Flash a fazer várias optimizações
118 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

até ao resultado final. Esta opção, conforme indicada, faz o processo


demorar bem mais a finalizar.

O último quadro diz SHOW TOTALS MESSAGE e quando marcado


obriga o Flash a mostrar uma janela final com o resumo do que foi feito.

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 este comando faz é analisar a imagem, e de acordo com o


contraste da imagem e com as diferenças de cor tentar descobrir e
isolar cada um dos objectos e criar com isso objectos para representar a
imagem original.

Importe uma imagem qualquer na área de desenho e accione o coman-


do. Verá então a janela a seguir.

A explicação para cada um dos campos vistos na janela acima está a


seguir.
I.2. OS MENUS 119

COLOR THRESHOLD – Neste campo é possível regular o nível de


transição das cores, de 1 a 500. A finalidade deste campo é permitir a
produção de traçados mais perfeitos para os casos de imagens pouco
ou muito contrastadas.

MINIMUM ÁREA – Neste campo poderá ajustar o número de pixéis que


o Flash considerará durante o cálculo, de 1 a 1000. Quanto menor o
número, maior a precisão do traçado e, consequentemente, mais pesa-
do será o objecto final.

CURVE FIT – Neste campo poderá regular a precisão das curvas do


traçado. Várias opções estão disponíveis: PIXELS, VERY TIGHT,
TIGHT , NORMAL, SMOOTH e VERY SMOOTH. A primeira opção
equivale “ao pixel” e corresponde ao nível que fornece a curva mais
precisa segundo a imagem traçada. Daí para a frente, os níveis de pre-
cisão diminuem. Logicamente, quanto mais preciso o traçado melhor o
resultado final e maior o objecto.

CORNER THRESHOLD – Neste caixa poderá regular a quantidade de


esquinas ou bicos nas formas. As opções são: MANY CORNERS,
NORMAL e FEW CORNERS, ou seja, muitos cantos, normal e poucos
cantos, respectivamente.

Digamos então que importa a imagem abaixo e a transforma com os


parâmetros vistos na janela anterior.
120 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Depois de transformada, a imagem fica com a aparência abaixo.

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.

Veja como depois da transformação é fácil seleccionar cada uma das


partes e retirá-la da imagem.

Deve observar entretanto, que depois da transformação a imagem


perdeu a aparência realista e ficou a parecer um tipo de desenho ou
pintura, o que pode ser um efeito interessante. Esta modificação ocor-
I.2. OS MENUS 121

reu porque é inerente à função TRACE BITMAP. Mesmo que os valores


da precisão fossem aumentados, haveria sempre uma degradação na
qualidade final, uma vez que esta função é adequada à transformação
principalmente de desenhos, logótipos, etc.

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.

Ao accionar esta função, vai ver o menu da figura abaixo.

As primeiras seis funções deste menu são nossas conhecidas, disponí-


veis por ícones na barra de ferramentas sobre os quais falamos ante-
riormente.

ROTATE 90º CW e ROTATE 90º CCW permitem rodar um objecto 90


graus no sentido horário ou anti-horário, respectivamente.

FLIP VERTICAL e FLIP HORIZONTAL permitem girar o objecto 180


graus em relação a um eixo imaginário vertical ou horizontal, respectiva-
mente, que passe pelo centro do objecto. Por outras palavras, cor-
responde a espelhar em relação a estes eixos.
122 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

REMOVE TRANSFORM (MODIFY > TRANSFORM > REMOVE


TRANSFORM) serve para remover todas as transformações que tive-
rem sido feitas ao objecto.

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.

BRING TO FRONT – Esta opção permite trazer um objecto para a fren-


te de todos os objectos dentro de um layer.

BRING FORWARD – Se imaginar vários objectos desenhados num


mesmo layer, vai ter de ter em mente que o Flash mantém cada um
num nível diferente, como os degraus de uma escada. Então, se um
objecto está num nível superior, ele aparece desenhado por cima de um
com nível inferior, como se estivessem empilhados uns por cima dos
outros. Assim, cada vez que usar o comando BRING FORWARD, esta-
rá a fazer um objecto subir um nível ou degrau dessa escada.

SEND BACKWARD – Esta função faz exactamente o inverso da an-


terior.

SEND TO BACK – Faz um objecto ir imediatamente para a posição


mais abaixo de todos os outros.
I.2. OS MENUS 123

LOCK – Este comando “trava” um objecto num determinado degrau, e


impede que este seja modificado.

UNLOCK ALL – liberta todos os objectos que estavam travados.

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.

A explicação para cada uma destas opções está a seguir.

A primeira função que precisa conhecer é a última do menu, ou seja, TO


STAGE. Este comando pode estar ou não accionado. Quando acciona-
do ele faz com que o tamanho da área de desenho (stage) seja conside-
rada durante as transformações. Caso contrário, apenas as posições
dos objectos e os seus pontos são considerados.

A seguir explicamos cada comando visto na janela.

LEFT - Alinha todos os objectos seleccionados pelos seus pontos mais


à esquerda. Toma como referência para o alinhamento o objecto que
124 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

mais à esquerda estiver. Caso TO STAGE esteja ligado, então os objec-


tos seleccionados são alinhados à esquerda da área de desenho.

CENTER VERTICAL - Este comando leva em conta o ponto superior do


objecto que estiver mais acima e o ponto inferior do objecto que estiver
mais abaixo. Assim, calcula o ponto médio e alinha os centros verticais4
de cada objecto segundo este ponto. Caso TO STAGE esteja ligado,
então os objectos são alinhados ao centro vertical da área de desenho.

RIGHT – Alinha todos os objectos seleccionados pelos seus pontos


mais à direita. Toma como referência para o alinhamento o objecto que
mais à direita estiver. Caso TO STAGE esteja ligado, então os objectos
seleccionados são alinhados à direita da área de desenho.

TOP - Alinha todos os objectos seleccionados ao topo, tomando como


base o ponto mais superior do objecto que estiver mais acima. Caso TO
STAGE esteja ligado, então os objectos são alinhados ao topo da área
de desenho.

CENTER HORIZONTAL – Este comando leva em conta o ponto mais à


esquerda do objecto mais à esquerda e o ponto mais à direita do
objecto mais à direita para efectuar o cálculo. Calcula o ponto médio e
alinha os centros horizontais de cada objecto segundo este ponto. Caso
TO STAGE esteja ligado, então os objectos são alinhados ao centro ho-
rizontal da área de desenho.

BOTTOM - Alinha todos os objectos seleccionados pelos pontos


inferiores de cada objecto. Caso TO STAGE esteja ligado, então os
objectos são alinhado ao fundo da área de desenho.

DISTRIBUTE WIDTHS - Este comando leva em conta o objecto que


estiver mais à esquerda e o que estiver mais à direita para descobrir a
quantidade de pixéis existente no intervalo. Assim, distribui os centros
horizontais dos outros objectos para que fiquem igualmente espaçados
nesta direcção. Caso TO STAGE esteja ligado, então a largura da área

4
O centro do objecto é onde está o eixo central deste.
I.2. OS MENUS 125

de desenho passa a ser a quantidade de pixéis disponíveis para


espaçar os objectos.

DISTRIBUTES HEIGHTS – Este comando leva em conta o objecto que


estiver mais acima e o que estiver mais abaixo para descobrir a quanti-
dade de pixéis existente no intervalo. Desse modo, distribui os centros
verticais dos outros objectos para que fiquem igualmente espaçados
nesta direcção. Caso TO STAGE esteja ligado, então a altura da área
de desenho passa a ser a quantidade de pixéis disponíveis para espa-
çar os objectos.

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.

Também existe outro menu no Flash onde poderá encontrar os mesmos


comandos de alinhamento sobre os quais acabamos de falar. Basta que
vá ao menu WINDOW e escolha a opção ALIGN, depois do que verá
surgir a janela que colocamos na figura abaixo juntamente com as
explicações de cada ícone.

É até preferível que passe a utilizar o ALIGN disponível pelo acciona-


mento deste comando, uma vez que este contém mais opções dispo-
níveis.
126 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Notamos a presença de alguns outros comandos não presentes no


MODIFY > ALIGN.

DISTRIBUTE TOP – Faz o mesmo que o DISTRIBUTE HEIGHTS, visto


anteriormente, porém considera o ponto mais superior de cada objecto
durante o cálculo. Se TO STAGE estiver ligado então a altura da área
de desenho passa a ser considerada no cálculo.

DISTRIBUTE BOTTOM – Faz o mesmo que o DISTRIBUTE HEIGHTS


visto anteriormente, porém considera o ponto mais inferior de cada
objecto durante o cálculo. Se TO STAGE estiver ligado, então a altura
da área de desenho passa a ser considerada no cálculo.

SAME WIDTH AND HEIGHT – Faz os objectos seleccionados ficarem


com a mesma largura e altura. Se TO STAGE estiver accionado, então
os objectos seleccionados passam a ter a mesma largura e altura da
área de desenho.
I.2. OS MENUS 127

SPACE EVENLY VERTICALLY – Espaça por igual os objectos na ver-


tical.

SPACE EVENLY HORIZONTALLY – Espaça por igual os objectos na


horizontal.

Group & Ungroup


GROUP e UNGROUP são dois itens também presentes no menu
MODIFY. Com estes dois comandos poderá agrupar ou desagrupar
objectos.

Quando cria objectos com as ferramentas de desenho do Flash, deve


lembrar-se que estes geralmente são formados por uma linha que
delimita o seu contorno (LINE) e por uma área interior preenchida por
uma cor ou gradiente (FILL). Se deseja fazer alguma operação de ali-
nhamento, de mudança de ordem de desenho (arrange), etc., primeiro é
preciso agrupar LINE e FILL pelo uso do comando GROUP.

Este comando também é útil quando tem vários objectos criados no


mesmo layer e quer agrupá-los no sentido de os animar mais facil-
mente. Se a qualquer instante os quiser desagrupar, basta utilizar o co-
mando UNGROUP no mesmo ponto no menu MODIFY.

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).

Este comando é essencial para os casos de desejar fazer operações


com letras e formas, como utilizar o formato da letra para fazer um furo
num objecto. Se for este o caso, deverá partir antes as letras em LINE e
FILL com o uso desta função.

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

Quando utiliza letras nas suas animações, o Flash armazena,


no ficheiro final, as informações vectoriais de como desenhar
estas letras, independentemente da quantidade de letras que
desenhar. Assim , se a sua animação contiver 200 letras A, o
Flash armazenará apenas uma informação que lhe permita
desenhar esta letra.

Uma letra partida em LINE e FILL com a função BREAK


APART ocupa mais espaço no ficheiro final da animação, pois o
Flash precisa armazenar todos os pontos da forma para
conseguir desenhar o objecto correctamente.

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

Antes de saber fazer animações no Flash é preciso entender o que é o


timeline e saber lidar com os layers (camadas).

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.

Os layers são como folhas de acetato transparentes, sobrepostas, onde


poderá criar objectos estáticos ou animados. Desta forma, cada layer
fica independente de todos os outros.

Os layers são representados no timeline, conforme a figura abaixo.


130 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Os layers, assim como as folhas de acetato, são montados de baixo


para cima, ou seja, desenhados de baixo para cima. Logo, segundo a
figura acima, os layers são desenhados na ordem 1, 2, 3, 4 e 5. Assim,
um objecto no layer 2 pode cobrir um outro no layer 1, já que é dese-
nhado depois.

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

Também poderá guardar os layers em pastas, dentro da janela do


timeline e assim organizar melhor os seus trabalhos, principalmente
quando estiver a lidar com um número grande de layers. Inclusive pode-
rá ter pastas dentro de pastas! Para criar uma, carregue no terceiro íco-
ne no canto inferior esquerdo do timeline.

Então poderá organizar os seus layers como na figura abaixo.


132 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

DICAS

Para nomear uma pasta ou layer basta carregar duas


vezes sobre o nome daquilo que deseja mudar.

Para colocar um layer dentro de


uma pasta basta arrastá-lo para
lá.

Para abrir ou fechar uma pasta e


ver o que contém, basta carregar
uma vez sobre ela.

Olho, Cadeado e Quadrado Colorido


Se observar cuidadosamente a janela do timeline vai ver que existem
três colunas na parte dos layers:

Uma representada por um olho, outra por um cadeado e a última por


quadrados coloridos.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 133

Pode ver pela figura abaixo, a função de cada um destes ícones.

OLHO (show/hide layer)


Esta coluna representa a visibilidade de um layer. Se contiver uma
bolinha na linha do layer, significa que este está visível. Se um X estiver
presente, é sinal que o layer está invisível.

CADEADO (lock/unlock layer)


Esta coluna representa o bloqueio do layer. Se uma bolinha estiver
presente na linha do layer, significa que o layer está desbloqueado.
Caso um cadeado esteja presente, o layer está bloqueado. Isto significa
que não pode ser seleccionado na janela de desenhos. A função é útil
quando precisamos impedir que um layer seja seleccionado na janela
de desenhos, quando estivermos a trabalhar em animações intrincadas.
134 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

QUADRADO COLORIDO (show layer as outline)


Se está a lidar com animações que possuem uma grande quantidade de
objectos ou objectos de tamanhos grandes e, consequentemente, que
estejam a ocupar muita memória, provavelmente será difícil trabalhar na
área de desenho, já que objectos deste tipo tendem a tornar lenta a
operação, já que requerem grande processamento do Flash, no sentido
de desenhá-los correctamente cada vez que os move. Então, pode
utilizar o quadrado colorido para transformar um objecto deste tipo em
apenas linhas de contorno. Assim, o Flash não vai ter muito o que dese-
nhar e lidar com os objectos na animação torna-se uma tarefa leve. Veja
as figuras abaixo.

Objectos c omo estes...

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

Para aplicar de uma só vez as propriedades referentes


ao olho, cadeado ou outline a todos os layers da
animação, basta carregar no símbolo correspondente no
alto da coluna.

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.

Para criar as animações, é preciso, depois de criar os elementos, definir


os estados em que estarão ao longo do tempo.

Quando vai ao cinema, está, de facto, a ver uma sequência de imagens


paradas. Como estas imagens paradas estão a ser projectadas a uma
velocidade de 24 imagens por segundo 1, tem a impressão de que está a
ver movimentos contínuos como na vida real.

Os filmes 2 em Flash são projectados a taxas que podem variar. Por


defeito, o valor está ajustado a 12 fps (frames por segundo).

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

Agora imagine que deseja construir um círculo e fazê-lo aumentar de


tamanho em dois segundos. Então, se está a trabalhar a 12 fps,
teoricamente deveria criar 24 desenhos do círculo, para causar a ilusão
de que ele aumenta de tamanho. Porém, para facilitar a sua vida, o
Flash permite o uso de keyframes para a criação das animações. Um
keyframe é um “frame chave” que define um estado em particular
do objecto num dado momento no tempo.

KEYFRAMES - representação no timeline


Se pretender criar uma animação do círculo de um tamanho X para Y,
basta definir dois keyframes para representar estes estados, um no
frame em que deseja que a animação comece e outro no frame em que
o círculo encerra a sua animação. Daí para a frente, o Flash encarrega-
-se de calcular os tamanhos intermédios do círculo, de forma a tornar
suave o aumento de tamanho 3.

A representação dos keyframes é feita no timeline e é simbolizada por


uma pequena bolinha ou ponto no frame onde está situado. Na figura
abaixo pode ver que o objecto no Layer1 tem dois keyframes , um no
frame 1 e outro no frame 30.

O timeline é uma das principais partes da interface gráfica do


Flash. É nele que ocorrem todas as acções, interacções e movi-
mentações dos objectos. Os keyframes são a chave para tudo isso
ocorrer.

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

ACTIONSCRIPT – representação no timeline


Um keyframe também pode conter um programa ou algumas instruções
na linguagem ActionScript e quando isso acontece uma pequena letra
“a” é colocada em cima da bolinha do keyframe para representar a
existência de comandos ActionScript no frame.

LABELS – representação no timeline


Existe ainda uma terceira coisa que pode estar presente no timeline: um
LABEL.

Um LABEL é uma “etiqueta” ou nome, que um determinado frame pode


ter. Dar um nome em particular a um frame da animação pode ser
interessante para quando se está a criar programas em ActionScript,
pois pode-se posteriormente referenciar o frame por nomes como “rua”,
“casa”, “final”, etc. e não pelo seu número. Imagine a confusão que é
referenciar dezenas de frames de uma animação pelos números. Ve-
mos por esse motivo que o label é uma funcionalidade deveras podero-
sa. Além do mais, caso precise alterar algo da animação que venha a
mudar os frames antes considerados, teria um trabalho redobrado em
actualizar nos outros pontos da animação todas as referências aos fra-
mes alterados.

Para acrescentar um label a um frame simplesmente posicione o rato


num frame ou região que já exista no timeline e vá à janela de proprie-
dades.
138 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Em seguida carregue no quadro que diz “<Frame Label>” e coloque um


nome qualquer. Assim que o fizer, o timeline passa a mostrar a indica-
ção da existência do label pela colocação de uma pequena bandeira
vermelha com o label no local apropriado.

A seguir então vamos passar a uma primeira simples animação, para


que se familiarize com o uso do timeline e com a criação de keyframes.

O uso da opção ‘Named Anchor’ juntamente com a label, permitirá que


o botão back e forward do browser interajam com o filme. Para utilizar
esta capacidade, é preciso seleccionar o template ‘Flash with Named
Anchors’ na janela HTML do PUBLISH SETTINGS.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 139

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.

Comece então por desenhar um quadrado com a ferramenta RECTAN-


GLE TOOL da barra de ferramentas no meio da área de desenho.
Assim que tiver terminado terá criado o que é tecnicamente definido
pelo Flash com uma forma (shape).

A próxima etapa é transformar esse shape que criou em símbolo4. Para


fazer isso seleccione a Arrow Tool na barra de ferramentas, posicione o
cursor no meio da figura que criou e clique duas vezes para seleccionar
as duas partes que formam o quadrado 5 e vá ao menu INSERT > CON-
VERT TO SYMBOL. Verá então uma janela surgir que deve preencher e
marcar conforme mostrado na figura abaixo.

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.

Esta então fica a ser a posição do quadrado no primeiro frame da ani-


mação.

Mova o rato até ao frame 2 no timeline e clique com o botão da direita.


Surgirá um menu flutuante. Escolha a opção INSERT KEYFRAME, con-
forme mostrado abaixo.

Esta operação vai criar um novo keyframe no frame 2 da animação, que


ficará conforme visto abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 141

Arraste o quadrado semi-transparente rosa que é visto na figura acima


sobre o número indicativo do frame 1 para que fique em cima do frame
2. Veja a figura abaixo.

Repare que existe uma bolinha a marcar o frame 1 e outra a marcar o 2.


É sinal de que existem dois keyframes criados para o objecto neste lay-
er.

Utilize agora a FREE TRANSFORM TOOL da barra de ferramentas e


com ela clique em cima do objecto. Posicione o rato no canto inferior
direito do quadrado até que surja o símbolo representativo de que está
prestes a efectuar uma rotação no objecto, conforme visto a seguir.
142 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Rode o objecto e diminua-o de tamanho até que fique conforme indica-


do na figura a seguir.

Repita o procedimento de criação de keyframe para criar o frame 3 da


animação e novamente transforme o objecto para que fique conforme a
figura abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 143

Então terá uma animação correspondente a 3 frames.

Se arrastar o quadrado rosa indicador do frame actual ao longo dos


frames criados vai poder ver a sua animação. Também poderá ver a
animação a correr em tempo real se colocar o Flash no modo TEST
MOVIE (CONTROL > TEST MOVIE).

As animações frame-a-frame são úteis para o caso de querer criar


animações do tipo stop motion 6 ou de formas orgânicas, como o movi-
mento de pessoas, animais, insectos, etc. Também as poderá utilizar
para criar movimentos mais realistas de objectos como cortinas, tecidos
e outros. Estas animações, apesar de serem as mais simples, são as
mais trabalhosas, pois terá de criar keyframes para todos os frames da

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

animação7. Então, se o seu filme está a correr a uma taxa de 12 fps,


terá de criar 12 imagens para ter 1 segundo de filme.

Os programas que transformam vídeos em Flash, ou que fazem efeitos


para o Flash, geralmente fornecem saídas em ficheiros com tudo colo-
cado frame-a-frame. No caso de um vídeo é até lógico já que o próprio
vídeo em si é composto de imagens diferentes frame a frame.

A Animação Motion Tween


A animação do tipo MOTION TWEEN é justamente aquela que referi-
mos na secção anterior, como sendo a que permite criar animações
sem exigir a criação de todos os keyframes que correspondem ao seu
tempo total. A animação motion tween utiliza o conceito de TWEENING
para criar o movimento entre os keyframes base. Assim, se um objecto
tem no frame 1 o tamanho de 100 e no frame 30 o tamanho de 10, o
programa saberá fazer os cálculos necessários para deduzir o tamanho
do objecto ao longo dos frames. Desse modo, ao assistirmos a tal filme,
veríamos o objecto a diminuir de tamanho de 100 para 10 ao longo de
30 frames.

Vamos então criar uma animação deste tipo para ver como funciona.

Carregue em FILE > NEW para iniciar um novo filme.

Com a ferramenta de criação de ovais na barra de ferramentas crie um


círculo de médio tamanho no centro da área de desenho. Carregue no
ponto preto que simboliza o frame 1 no timeline para seleccionar as
duas partes componentes do círculo. Carregue em INSERT >
CONVERT TO SYMBOL para transformar os objectos em símbolos e
acrescentá-los à biblioteca8 (falaremos sobre bibliotecas mais adiante).

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.

Mova o rato até que fique sobre o frame 30 no timeline e carregue no


botão da direita. No menu que surgir, escolha a opção INSERT KEY-
FRAME. O timeline ficará com a aparência abaixo.

Carregue com o rato em cima da bolinha do keyframe 30, para selec-


cionar o objecto na área de desenho neste frame.

Vá à barra de ferramentas e escolha o FREE TRANSFORM TOOL na


barra de ferramentas, para poder fazer algumas alterações no tamanho
e na aparência do objecto. Se olhar agora para a área de desenho vai
ver que o círculo está seleccionado e que um quadrado preto com pon-
tos está à volta. Veja a seguir.
146 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Posicione o rato no ponto negro superior direito do quadrado e clique


com o rato. Mantendo o botão carregado, mova o ponto para outro sítio,
de forma a aumentar o tamanho do círculo e em seguida liberte o botão.

O que acabou de fazer foi aumentar o tamanho original do círculo.


Porém, como fez isso enquanto estava com o timeline posicionado no
frame 30, então o que fez foi aumentar o tamanho do círculo nesse fra-
me apenas. Verifique a veracidade desta afirmação carregando alterna-
damente nas bolinhas correspondentes ao frame 1 e 30 no timeline.

Se observar o timeline vai ver que na verdade o círculo começa com um


tamanho no frame 1 e o mantém até ao frame 29, quando então, subita-
mente, aumenta de tamanho ao entrar no frame 30. Se era isso o que
pretendia a animação está encerrada. Porém , se a sua intenção era fa-
zer uma animação suave, continue a ler os parágrafos a seguir.

Carregue na bolinha correspondente ao frame 1 (início da animação) e


nas propriedades do objecto visíveis na parte central inferior do ecrã,
mude o campo TWEEN para MOTION. Veja a figura abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 147

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.

Arraste o rectângulo rosa existente na área da numeração dos frames


no timeline para os lados, para ver que a animação agora está suave.

NOTA IMPORTANTE

Cuidado que este tipo de animação só funciona se no


layer em questão estiver um único objecto ou grupo
de objectos, como fizemos neste exemplo. No
entanto, a situação ideal é usar um único símbolo da
Library que será estudada mais tarde.

Ease In & Ease Out (o controlo do movimento)


Repare na figura relativa às propriedades do frame, que existe uma
caixa EASE. Esta variável controla a forma na qual é feita a distribuição
da animação ao longo do intervalo de keyframes . Em termos gerais, a
variável regula a forma como a animação chega ou sai de um determi-
nado keyframe. Tecnicamente são conhecidas pelos nomes de EASE
IN e EASE OUT.
148 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Noutros softwares de animação como o Maya, Alias PowerAnimator,


Combustion, Inferno, 3DS MAX, After Effects, etc., estão disponíveis
maneiras de se regular independentemente estas duas funções, no key-
frame inicial e no final de um determinado segmento. Porém, no Flash,
foi feita uma simplificação. O ajuste é apenas feito no primeiro keyframe
do segmento.

Por defeito, a distribuição de movimento é feita de forma linear, ou seja,


se um shape tem uma posição, tamanho, ângulo de rotação, etc., no
primeiro keyframe e X frames depois tem outra completamente dife-
rente, então o Flash calcula a diferença de propriedades entre os dois
keyframes e divide pelo número de frames, para fazer o movimento li-
near entre os pontos.

Digamos que no frame 1 tem um círculo com um tamanho de 1 e dez


frames depois aumentou para 30. Então, a cada frame da animação o
Flash vai aumentar o tamanho em 3, o que significa...

... no frame 1 o tamanho do círculo = 1


... no frame 2 o tamanho do círculo = 4
... no frame 3 o tamanho do círculo = 7
... no frame 4 o tamanho do círculo = 10
...
... no frame 10 o tamanho do círculo = 30

Logo, o círculo aumenta linearmente ao longo do tempo. Em termos


gráficos de movimento ao longo do tempo teríamos o seguinte.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 149

Se agora posicionar o controlo de EASE todo para cima, na direcção de


EASE = 100 terá modificado o gráfico para o visto abaixo.

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.

Se ajustar o EASE para –100 vai ter exactamente o inverso: o movi-


mento começa devagar e depois acelera, conforme pode observar abai-
xo.
150 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

A vantagem de ser permitido este tipo de ajuste reside no facto de que


às vezes é preciso criar movimentos acelerados e desacelerados, como
o movimento de pêndulos ou de bolas que saltam. É uma função útil
que, se bem entendida, pode ajudar a melhorar a qualidade das anima-
ções produzidas.

Como é que o Flash interpreta uma animação?


Como vimos, o Flash precisa conhecer a posição do objecto em cada
frame para conseguir calcular a animação. Então, ao fornecer key-
frames para os intervalos que deseja animar ou para cada um dos
frames, está a dar meios ao Flash para compor todos os elementos con-
forme planeado ao longo do tempo.

O Flash precisa basicamente utilizar a capacidade de cálculos da


máquina para conseguir mostrar correctamente a animação. Então, ao
fazer uma animação, deve ter em conta a quantidade de exigências que
ela vai ter na máquina onde for correr. Cálculos muito complexos como
objectos de tamanhos gigantes ou muitos objectos com transparências
de uns sobre os outros, vão exigir muita capacidade da máquina e
talvez não consiga ser visto conforme pretende. Teste sempre a sua
animação em máquinas de baixa capacidade.

Quando cria uma animação e a põe a correr, o Flash começa-a sempre


pelo primeiro frame e avança sequencialmente para a frente em
intervalos de um frame9. Então, se vai fazer, por exemplo, um programa
em ActionScript, deve colocar os códigos e comandos em cada um dos
frames que pretende fazer alguma acção. Os programas ou comandos
em ActionScript são dispostos nos frames em que o programador
deseja fazer algo e são separados por objecto, ou seja, cada objecto
carrega consigo o código ActionScript que vai precisar. Desta forma,
cada objecto que carregue consigo linhas de ActionScript dispostas em
frames específicos terá estes códigos executados quando os frames
onde estas linhas estiverem forem visualizados.

9
se não for dada nenhuma ordem para que ele actue de forma diferente.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 151

Digamos, por exemplo, que deseja realizar uma animação de um


carrinho que deita fumo pelo tubo de escape e esteja sempre a buzinar.
O fumo sai do escape, sobe e desaparece nos cinco primeiros frames.
Logo em seguida, a buzina toca e encerra no frame 15. Depois disso, a
animação retorna ao primeiro frame e o processo repete-se.

Então, em termos descritivos, a animação equivaleria à tabela abaixo.

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.

Em termos de timeline essa animação equivaleria à imagem abaixo.

O fumo seria um outro objecto e a sua animação corresponderia a algo


como o visto abaixo.
152 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Cada um dos keyframes acima indicados corresponderia a uma imagem


como as vistas abaixo.

Poderão as suas animações ser compostas por inúmeros objectos,


animados ou não, interactivos ou não, de qualquer tipo, como filmes
dentro de filmes, objectos dentro de objectos, filmes em AVI ou
QuickTime, sons, desenhos, etc. Não há limite teórico para o que pode
fazer a não ser o tamanho que o ficheiro final da animação possa ter e,
este sim , pode representar um empecilho pelo tempo que demorará a
carregar se for via Internet ou requisitos de sistema para poder ser exe-
cutado conforme planeado.

Digamos, por exemplo, que fez uma animação a usar o desenho de


uma paisagem campestre de fundo. Por cima deste desenho cria a
animação de um sol a nascer e a pôr-se. Esta animação tem 200 fra-
I.3. LAYERS, TIMELINE E ANIMAÇÃO 153

mes e é cíclica, ou seja, ao atingir o último frame retorna ao primeiro e


repete-se. Porém, no frame 80 desta animação faz surgir uma ovelha
que cruza a cena em 40 frames. A ovelha é um objecto independente e
possui uma animação própria, de 8 frames , correspondente ao movi-
mento das suas patas como se estivesse a andar. Este movimento tam-
bém é cíclico. Além disso, no frame 1 da ovelha coloca o início do som
correspondente ao balir desta. Desta forma, de cada vez que a
animação da ovelha começar será ouvido o som. Como a ovelha está
presente durante 40 frames da cena inicial, que é o tempo da sua ani-
mação contra o fundo, então automaticamente a sua animação repetir-
-se-á cinco vezes (8 frames x 5 = 40).

Imagine que podia pegar no objecto ovelha com a mão e suspendê-lo


no ar. Veria então a ovelha com as patinhas a andar. Então, poderia
pegar este objecto e animá-lo contra o fundo e teria sempre as patas a
andar independente do outro movimento que fizesse com o objecto. Co-
mo vê, o objecto tem as suas propriedades e animações contidas em si
próprio.

Animação de formas (shape animation)


Além do tipo de animação convencional, no qual é animado algum
parâmetro do objecto, como tamanho, posição, rotação, cor, etc., existe
um outro tipo particular de animação conhecida pelo nome de SHAPE
ANIMATION (animação de forma). Nela, em vez de fazer um objecto
deslocar-se de um ponto a outro ou aumentar de tamanho, fazêmo-lo
mudar de forma.

As animações desse tipo, na realidade, ocorrem por uma animação de


movimento dos pontos (sub-objectos) que formam os objectos.

Este tipo de animação deve ser usado com cuidado, já que aumenta
muito o tamanho final do filme.

Para começar uma animação de forma, inicie um novo filme em branco


(FILE > NEW) e com a ferramenta de criação de ovais crie um círculo
de médio tamanho no centro da área de desenho.
154 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Mova o rato até que fique sobre o frame 30 no timeline e carregue no


botão da direita. No menu que há-de surgir, escolha a opção INSERT
KEYFRAME. O timeline ficará com a aparência abaixo.

Carregue com o rato em cima da bolinha do keyframe 30, para selec-


cionar o objecto na área de desenho onde então modificaremos a apa-
rência deste.

Seleccione o SUBSELECTION TOOL na barra de ferramentas e com o


rato carregue em cima da linha de borda do círculo. Surgirá então uma
forma circular delimitada por uma linha fina azul que tem exactamente
oito pontos à volta. Estes pontos são os que formam o círculo10.

10
conhecidos como nós (nodes), pontos de controlo (control points) ou simplesmente vértices.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 155

Mova então, a utilizar ainda a mesma ferramenta, alguns dos pontos do


círculo até formar uma figura qualquer, como a vista abaixo

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.

Tem então agora duas formas: um círculo no frame 1 e uma “estrela” no


30. É preciso agora fazer esses dois frames tornarem-se uma animação
de forma.

Carregue na bolinha correspondente ao frame 1 (início da animação) e


nas propriedades do objecto visíveis na parte central inferior do ecrã e
mude o campo TWEEN para SHAPE.

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.

No caso da animação de forma também é possível ajustar o EASE IN e


OUT da curva de distribuição de movimento, da mesma forma que foi
descrita na secção anterior.

DICA

Para ser possível aplicar uma animação de forma a


grupos, instâncias ou objectos com imagens, primeiro
terá de “quebrar” estes grupos com a função BREAK
APART (MODIFY > BREAK APART), para que
passem a ser objectos comuns. As letras são
consideradas grupos e devem passar por esse
processo para que possam ser animadas
correctamente.

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!

Vamos a um exemplo. Digamos que criou o objecto da esquerda, na fi-


gura abaixo, e quer fazer uma animação de forma (shape animation) de
modo a transformá-lo no objecto da direita.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 157

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

Se reparar nos frames de 6 a 9, vai ver que houve um problema na


transformação. Parte do shape entra sobre si mesma, criando buracos.
Além do mais, a animação ocorre de forma pouco agradável. O objecto
fica estranho, amassado, durante o processo. A única maneira de
resolver isso é inserir SHAPE HINTS, para mostrar ao Flash de que
forma deve ser feita a transformação.

O SHAPE HINT funciona segundo a seguinte filosofia: vai-se ao


primeiro frame de uma animação de forma e posiciona-se um SHAPE
HINT para indicar uma determinada região de um objecto. Depois, vai-
-se ao frame final da mesma transformação e move-se o SHAPE HINT
para a região final. Desta forma, o Flash saberá que a região marcada
com o SHAPE HINT no primeiro frame é a que deve ser transformada
para a indicada no mesmo SHAPE HINT no frame final.

Os SHAPE HINTS, quando acrescentados, são representados por pe-


quenos círculos coloridos com uma letra no interior. As cores utilizadas
são o amarelo para representar o HINT inicial e o verde para represen-
tar o final. Caso esteja vermelho significa que o HINT em questão está
mal posicionado.

Vamos então à correcção da animação anterior pelo uso de SHAPE


HINTS.

CRIAÇÃO DO SHAPE HINT...


Carregue na bolinha correspondente ao frame 1 da animação para
seleccionar o shape pretendido neste frame. Carregue em MODIFY >
SHAPE > ADD SHAPE HINT para acrescentar o primeiro HINT. Mova-o
até que fique na posição indicada abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 159

No timeline, carregue na bolinha correspondente ao último frame da


animação, para seleccionar o shape neste frame. Posicione o SHAPE
HINT final no ponto indicado na figura abaixo.

Continue a acrescentar mais hints até ficar como na figura abaixo.

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

A ordem pela qual acrescenta os HINTS é importante porque é nesta


ordem que o Flash os vai nomear.

Se agora movimentar a linha de tempo no timeline vai ver que a trans-


formação ocorre sem problemas, como na figura abaixo. Repare que já
não existe o problema da primeira animação, dos furos no shape, pois
ao colocarmos os hints D, E e F, fizemos de forma a indicar a maneira
pela qual as regiões deveriam “andar” na transformação.

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

Na prática, o que aconteceu foi o movimento das regiões conforme indi-


cado a seguir.

Para os pontos A, B e C...


162 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

... e para os pontos D, E e F...

Animação com Motion Guide


MOTION GUIDE é uma possibilidade interes-
sante que o Flash nos oferece para a criação
de animações: fazer com que objectos sigam
caminhos (paths) específicos definidos por
curvas.

Digamos então que tem o objecto ao lado e


que gostaria de o fazer percorrer o caminho
indicado na figura seguinte.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 163

Então, depois de criado e agrupado o avião, vá ao timeline, na área


onde são mostrados os layers, e carregue com o botão da direita em
cima do nome do layer. Escolha a opção que diz ADD MOTION GUIDE.
Surgirá outro layer acima do primeiro, MOTION GUIDE, conforme a
imagem abaixo.

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

Volte então ao timeline e posicione o rato na área em branco correspon-


dente ao frame 30 para cada um dos objectos e carregue com o botão
da direita do rato e escolha a opção INSERT KEYFRAME, para criar
keyframes para os dois objectos neste frame.

O timeline deve ficar como indicado abaixo.

No timeline, carregue na bolinha correspondente ao frame 1 do avião e,


com o botão pressionado, mova o rato na horizontal até ao frame 30.
Solte o botão do rato. Posicione o rato na área seleccionada e carregue
no botão da direita. Escolha a opção CREATE MOTION TWEEN. Isso
vai fazer a animação do avião do frame 1 ao 30. Se movimentar a barra
de tempo no timeline vai notar que agora o avião já percorre o caminho.
Porém, ainda não está orientado segundo o que seria a maneira cor-
recta de movimento.

NOTA

Não há necessidade do frame 30 para o guia do avião para que a animação


funcione correctamente quando finalizada. Porém , é importante que este
frame esteja presente durante a construção da animação, para que possa
visualizar correctamente o caminho. Assim que for finalizar o filme, elimine
os frames desnecessários do guia mantendo apenas o primeiro.

Assim, o timeline ficará com a aparência abaixo.


I.3. LAYERS, TIMELINE E ANIMAÇÃO 165

NOTA

Por acaso, quando finalizado este exemplo, verificou-se que no último


frame o avião virava ao contrário. Se por acaso isso acontecer quando
terminar de fazer o exemplo, basta reposicionar neste último frame o avião
para a posição correcta.

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”.

Então, todos os objectos passam a seguir o caminho...


166 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Então, numa determinada ocasião, gostaria de colocar este objecto


dentro de uma moldura oval, sem que nenhuma parte ficasse para fora.

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

mentar o tamanho do ficheiro final Flash. Então, o que pode fazer é


utilizar uma máscara oval para indicar o que deve ficar visível no objecto
original.

NOTA

Imagine que em cima do desenho coloca uma folha de acetato e pinta


com uma cor sólida as áreas deste objecto que deseja deixar visíveis,
sendo que, as áreas não pintadas passariam a ficar invisíveis.

Veja a figura abaixo.

Repare como a máscara oval limita o quanto


do primeiro rectângulo deve ser mostrado.

Neste caso então, criaria um layer acima do layer do objecto, e aí


desenharia uma máscara oval, para limitar o tamanho do objecto. Finali-
zado o desenho da máscara, basta carregar com o botão da direita em
cima do nome do layer no timeline e escolher a opção MASK.
168 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

O que vai fazer a aparência dos layers assemelhar-se à vista abaixo.


I.3. LAYERS, TIMELINE E ANIMAÇÃO 169

Veja como agora o layer da máscara e do objecto subordinado


mudaram de ícone. Também ambos estão com os cadeados acciona-
dos. Aliás, a máscara só actua no objecto se os cadeados estiverem
neste estado.

O objecto das casas com a máscara oval cabe agora dentro do espaço
determinado.

Se por acaso reduzíssemos a oval da máscara ligeiramente, poderí-


amos obter o seguinte efeito.
170 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Se por acaso animássemos em 15 frames a máscara, de um tamanho


igual a zero a um tamanho igual ao visto acima, teríamos a seguinte se-
quência de imagens.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 171

LAYER DO TIPO GUIDE


Se carregar com o botão da direita em cima do nome de um layer e es-
colher a opção PROPERTIES, vai ver a janela a seguir.

Pode ver pelo campo TYPE que existem diversos tipos de layer, dos
quais já falamos, com a excepção do GUIDE.

Este tipo de layer não é visível na animação final. Só é visto durante a


construção. É exactamente o que o nome diz, um GUIA, para criar as
suas animações, como linhas para orientação ou imagens/objectos que
precise colocar em cena apenas para que o possam orientar durante a
criação da animação.

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

Se carregar em cima dessa forma de onda e for às propriedades verá a


seguinte janela.

Repare que a caixa SOUND mostra o nome do ficheiro.

Effect (efeitos sonoros)


Na caixa EFFECT vê a palavra NONE. As opções nesta caixa são:

LEFT CHANNEL, RIGHT CHANNEL, FADE LEFT TO RIGHT, FADE


RIGHT TO LEFT, FADE IN, FADE OUT e CUSTOM, cujas explicações
se encontram a seguir.

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 IN – o som começa com volume zero e vai progressivamente au-


mentando até ao seu volume normal.

FADE OUT – o som começa com o seu volume normal e vai progres-
sivamente diminuindo até zero.

CUSTOM – Nesta opção poderá editar de que forma o som se com-


portará. Assim que escolher esta opção verá a janela abaixo, chamada
EDIT ENVELOPE, onde poderá determinar o efeito que pretende.

Na janela acima tem o desenho de duas formas de onda. Como o som


utilizado se trata de um ficheiro estéreo, a curva de cima corresponde
ao canal esquerdo de som e a de baixo ao direito.

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

Do lado esquerdo na mesma linha, pode ver dois ícones, um quadrado


e um triângulo, para que possa parar (STOP) ou ouvir (PLAY) o som.

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.

A explicação para o que acontece na figura acima é a seguinte.

CANAL ESQUERDO - O volume começa a zero e sobe até ao máximo,


decaindo em seguida até um valor baixo, onde fica constante até 0,5s e
torna a subir até ao máximo, mantendo-se constante até ao final.

CANAL DIREITO – O volume começa a zero e sobe até ao máximo, de-


caindo em seguida até aproximadamente 70% do máximo, onde per-
manece até ao final.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 175

DICA

Para apagar um ponto criado no envelope


arraste-o para fora da janela!

Sync (tipo de sincronismo de som)


De volta à janela de propriedades do som, pode ver o campo SYNC, o
qual apesar de inicialmente marcado com a opção EVENT, permite tam-
bém escolher START, STOP e STREAM. A explicação para cada opção
é dada a seguir.

EVENT

Esta é a opção escolhida por defeito pelo Flash quando insere um


ficheiro sonoro num layer em branco. O som ajustado desta forma é
tocado assim que o seu primeiro keyframe é mostrado, seja no filme ou
no objecto onde está localizado. Então, por exemplo, se no frame 37 de
uma determinada animação existir um som, quando a animação aí
chegar, o som começa a tocar, independentemente do filme parar ou ir
para outro frame. O som ajustado como EVENT é sempre tocado até ao
fim, uma vez iniciado.

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.

Outra propriedade do som ajustado como EVENT é a permissão da


simultaneidade, o que significa, por exemplo, que se houver um som
associado ao clique de um botão e um utilizador carregar diversas ve-
zes sobre o botão, ouviremos então vários sons do clique, uns por cima
dos outros, misturados.
176 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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

Esta opção é extremamente útil quando se está a lidar com músicas ou


sons que precisem ficar síncronos com as animações 11. Quando possuir
um som associado a um vídeo e esta opção estiver ligada, então o
Flash ao mostrar a sua produção dará sempre prioridade ao áudio em
detrimento do vídeo. Fará tudo para manter a sincronia e mostrar os
frames no momento certo. Como precisa manter o áudio a tocar conti-
nuamente sem intervalos, vai deitar fora frames da animação, caso a
máquina onde esteja a correr não seja capaz de mostrar a animação
como seria preciso. Depois de muito produzir para o mercado audio-
visual chega-se à conclusão de que é menos incómodo ter frames de
vídeo eliminados e o áudio a correr bem, a ver a animação a correr cer-

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

ta e o áudio a engasgar. Quando o vídeo falha ligeiramente, o utilizador


tem a impressão de que algo se passou no próprio computador. Quando
o áudio está a ter problemas, o mesmo utilizador pensa que a animação
foi mal dimensionada e é “pesada” demais para ser vista no seu compu-
tador.

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.

Estes sons são carregados à medida que o filme é carregado. Inicial-


mente são carregados apenas 5 segundos de som, que servem de
‘almofada’ (buffer) para se manterem em memória; à medida que o filme
decorre, o resto do som é carregado. É particularmente útil para músi-
cas de fundo pesadas.

Como testar as suas animações


Para saber se as suas animações estão a funcionar correctamente,
deve sempre testá-las por meio da função TEST MOVIE no menu
CONTROL. Também encontrará por lá o comando TEST SCENE, que
permite apenas o teste de uma das cenas da animação, caso possua
mais de uma.

O TEST MOVIE permite visionar a animação final na forma em que será


vista pelo utilizador, seja pela Internet, seja através de um CD-ROM ou
DVD-ROM que distribuiu.

Enquanto que em HTML tradicional o que conta é o tamanho final do


ficheiro, já que basicamente se trabalham com elementos de tamanho
fixo, no Flash além desta variável deve ter também em consideração o
“peso” que a sua animação pode representar para a máquina em que
for correr. Como tudo o que é gerado em Flash é convertido para
informações vectoriais, é preciso usar maior capacidade da máquina
para poder desenhar todos os elementos correctamente e nos tempos
certos das animações; ainda mais se contiverem músicas ou sons que
178 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

precisem estar síncronos. Logo, todas as animações em Flash reque-


rem em menor ou maior grau poder de processamento da máquina.
Elementos de tamanhos grandes e com efeitos de transparências ou
degradés, por exemplo, irão requisitar mais processamento da máquina.

Se possível teste as suas animações na máquina mais modesta que


tiver por perto. Se ela conseguir mostrar tudo correctamente é um ópti-
mo sinal de que em máquinas mais sofisticadas tudo correrá bem.

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.

Então poderá correr o Bandwidth Profiler para analisar a carga da


animação em cada frame. Para isso, primeiro accione o modo de TEST
MOVIE do Flash, conforme explicado na secção anterior, e então no
menu VIEW escolha BANDWIDTH PROFILER.
I.3. LAYERS, TIMELINE E ANIMAÇÃO 179

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).

No menu DEBUG poderá ajustar a velocidade do MODEM ou LINK,


para que possa ver como a sua animação seria carregada em diferentes
velocidades de download.

A linha vermelha que corta horizontalmente os gráficos na marca dos


400 Bytes indica o máximo de bytes que poderiam ser trazidos por
download para que o frame fosse visto em tempo real. Na prática, isso
significa que se cada frame da animação tivesse no máximo 400 bytes,
então a animação poderia ser puxada da Internet em play normal sem
existir nenhum abrandamento na animação. Qualquer valor acima disso
causaria um abrandamento do play. Logicamente poderá notar isso
pelas informações da coluna da esquerda pois, se a animação tem 3
frames e o Flash está ajustado para PLAY a 12 fps, então o tempo total
de download deveria ser 3/12 segundos. Porém, a janela diz-nos que o
tempo total de carga é de 2,6 segundos.

Por defeito, o Bandwidth Profiler mostra o gráfico de carga pelo modo


STREAMING, ou seja, a distribuição de carga à medida em que é feito o
download do filme. Se for ao menu VIEW e escolher a opção FRAME
BY FRAME GRAPH, verá então a carga por frame. Outra opção neste
menu é SHOW STREAMING. Se a accionar vai ver o Flash simular o
download do filme na velocidade do MODEM escolhida no menu DE-
BUG.

O primeiro frame de qualquer animação, pela própria forma como o


Flash funciona, é geralmente grande. Neste frame são armazenados
todos os objectos e símbolos que estarão presentes no filme.
180 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
I.4. SÍMBOLOS, EFEITOS e
BIBLIOTECAS

Quando cria um objecto, seja ele um gráfico (graphic), botão (button) ou


filme (movie clip) no Flash MX, este é colocado em algo chamado biblio-
teca (library), de onde pode ser recuperado para posterior uso, seja no
mesmo projecto, seja em projecto diferente. O Flash MX mantém uma
biblioteca para cada projecto que fizer e também vem com uma biblio-
teca com diversos objectos prontos a usar.

As suas próprias bibliotecas


Sempre que estiver a criar páginas ou animações em Flash de qualquer
tipo, deve sempre ter por objectivo conseguir um ficheiro com o menor
tamanho possível que corresponda ao seu trabalho, pois ficheiros me-
nores são mais rápidos a correr e a carregar. Se a animação vai ser
vista via Internet mais uma razão para sempre seguir essa regra.

Para conseguir isso, deverá quase que obrigatoriamente criar e reuti-


lizar objectos das bibliotecas. Praticamente, todo o trabalho em Flash
permite o uso repetido de objectos previamente criados no mesmo
projecto. Se vai usar um rectângulo várias vezes num determinado
projecto deve criar um rectângulo na biblioteca e de lá arrastá-lo para
todos os pontos onde o for utilizar. Desta forma optimizará e minimizará
o tamanho dos seus projectos em Flash, tornando-os menores e mais
rápidos.

Assim como o Flash tem bibliotecas de objectos, você também poderá


ter as suas. A vantagem de as ter é poder reutilizar objectos previa-
mente criados nas suas animações em qualquer momento.
182 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Todos os objectos (símbolos) que criar num determinado projecto são


automaticamente colocados numa biblioteca própria referente ao
projecto em que estiver a trabalhar. Assim, ao iniciar um novo projecto,
poderá abrir a biblioteca de um projecto anterior e importar os objectos
desejados.

Se observar no menu FILE, vai ver um item nomeado OPEN AS LIBRA-


RY. Se o utilizar poderá abrir um projecto como uma biblioteca. Faça
isso e verá surgir automaticamente a janela correspondente, de onde
poderá arrastar objectos para o seu projecto actual.

Uma segunda opção no menu FILE é a IMPORT TO LIBRARY, que


importa a biblioteca de um projecto para a biblioteca na qual está a tra-
balhar.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 183

Na prática, basta abrir a biblioteca que pretende e dela arrastar para a


sua biblioteca ou directamente para o seu projecto os objectos deseja-
dos.

Graphics, Button e Movie Clips


Como dissemos, as bibliotecas do Flash MX permitem o armazena-
mento de três tipos de símbolos: graphics, movie clips e buttons (gráfi-
cos, filmes ou botões).

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.

Um símbolo do tipo MOVIE CLIP, por outro lado, já permite animações.


Enquanto que os GRAPHIC possuem apenas um frame, os MOVIE
CLIPS podem ter qualquer quantidade de frames. Então, se imaginar
um MOVIE CLIP como um boneco com as pernas a mexer poderá
animá-lo a deslocar-se ao longo do ecrã sem se preocupar com o movi-
mento das pernas, que já é intrínseco ao próprio objecto em si.

Os símbolos do tipo BUTTON são os botões ou qualquer outro elemen-


to que deva ter a propriedade de poder ser clicado. Quando o rato
encontrar qualquer símbolo deste tipo numa animação automaticamente
mostrará que se trata de um elemento clicável.

A definição do tipo do símbolo é feita no momento da sua criação ou


conversão (INSERT > NEW SYMBOL ou INSERT > CONVERT TO
SYMBOL), conforme visto na janela a seguir.
184 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Depois de criado um símbolo, automaticamente este é armazenado na


biblioteca referente ao projecto em que estiver a trabalhar.

Veja as figuras abaixo.

Deve reparar na imagem acima que existem três entradas adicionais na


biblioteca, nomeadas TWEEN 1, TWEEN 2 e TWEEN 3 que lá aparece-
ram sem a nossa intervenção. Estes símbolos adicionais representam
as animações do objecto “cruz”, já que é um movie clip. Não deve apa-
gar estes símbolos “estranhos” que o Flash for colocando na biblioteca
à medida em que for criando os seus trabalhos, a não ser que saiba
tratar-se de algo não mais utilizado. Se o fizer corre o risco de deitar fo-
ra animações e movimentos de objectos que já havia criado.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 185

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.

Em seguida, vá a WINDOW > LIBRARY, e faça surgir a janela da bibli-


oteca vista abaixo com os objectos que criamos.

Agora arraste da biblioteca para a área de desenho os objectos que


tiver criado. Modifique o tamanho, crie efeitos de distorção, animações,
etc. Vai ver que pode fazer com eles o que quiser, com excepção de
mudar as cores, com o balde de pintura/tinteiro, ou a forma pelo uso das
ferramentas de selecção. Se fizer isto estará a modificar o objecto em
si, e todas as cópias deste passarão a ficar com a nova aparência.

Caso precise mudar a cor de uma instância, a única forma possível é


pelo uso de um efeito, que veremos mais adiante. Porém, o efeito muda
a cor do objecto todo em conjunto, ou seja, se possui um objecto com
186 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

diversas cores, ao aplicar um efeito estará a afectar todas as cores


deste. Se precisar aplicar mudanças diferentes a cada uma das cores,
deve considerar separar as partes do objecto em diferentes símbolos,
que depois poderão ser agrupados pelo comando GROUPS (CONTROL
G) para facilitar a animação ou manipulação deste.

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á.

Um botão no Flash possui três estados: UP, OVER e DOWN.

O estado UP equivale à aparência que o botão tem quando está normal.


Assim que o rato passa por cima deste é assumida a aparência indicada
no estado OVER. O estado DOWN representa a aparência que o botão
tem quando nele carregar.

Carregue em INSERT > NEW SYMBOL para criar um novo símbolo. Na


janela que se seguirá nomeie o objecto como “botão” e ajuste o campo
BEHAVIOR para BUTTON.

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

Repare que a linha vertical está posicionada em UP e uma bolinha em


branco, ou seja, um keyframe em branco (blank keyframe) está a repre-
sentar o estado que se está a criar.

Então, crie um desenho para representar o estado normal do botão. Cri-


amos algo como na figura abaixo.

Carregue na caixa em branco do timeline, na coluna OVER, e clique


com o botão da direita do rato. Escolha a opção INSERT BLANK KEY-
FRAME para começar a desenhar o novo estado do botão.
188 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Desenhe então neste estado a mesma figura acima, porém com a seta
a apontar para o lado direito.

Repita a operação para o campo DOWN, e volte a modificar a seta para


que esta aponte para baixo.

Fica então com três desenhos diferentes, cada um a representar um es-


tado do botão.

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.

O nosso botão tem agora os seguintes estados:

UP OVER DOWN HIT

Criados os estados volte à cena principal da animação, por meio de um


clique na palavra SCENE 1, no canto superior esquerdo da área de de-
senho.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 189

Faça surgir a biblioteca (WINDOW > LIBRARY) e arraste de lá o botão


para a sua área de desenho. Coloque o Flash MX no modo de teste
(CONTROL > TEST MOVIE) e vai ver que o botão funciona perfeita-
mente.

Se quer acrescentar um som ao botão, basta criar um layer novo,


colocar um keyframe em branco na coluna correspondente ao estado
em que quer colocar o som e arrastar o som para a janela de desenhos.
Então, por exemplo, poderá ter um som a ser tocado quando o botão
entrar no estado UP, outro para o estado OVER e um terceiro para o es-
tado DOWN.

Movie Clips
Um movie clip é um símbolo que em si próprio já é um filme, ou seja,
possui movimento próprio.

Digamos que gostaríamos de criar o movimento de uma bola a saltar


conforme a figura abaixo.
190 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Então poderíamos imaginar um movie clip como sendo a bola a saltar


até encerrar o seu movimento, mas sem se deslocar na horizontal. Em
seguida poderia animar o movie clip a deslocar-se na horizontal. Logo,
teria uma composição de movimentos que causaria a ilusão da bola es-
tar a saltar e a deslocar-se horizontalmente. Veja as figuras abaixo.

Dentro da área cor-


respondente ao movie
clip, representada pelo
rectângulo, a esfera
movimenta-se para
cima e para baixo,
simulando o
movimento de saltar
no mesmo lugar.

Arrastamos esse movie


clip da biblioteca para o
nosso projecto e
fazemos uma animação
dele a deslocar-se para
a direita...
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 191

Como a esfera dentro do movie clip movimenta-se a saltar e o próprio


movie clip é deslocado para a direita, então, pela combinação de
movimentos , veremos a esfera a saltar enquanto que se desloca para
a direita...

Efeitos de Cor e Transparência


Existem diversos tipos de efeitos que poderá aplicar num determinado
objecto da biblioteca, assim que o trouxer para a sua animação.

Basicamente, os efeitos relacionam-se com as cores ou com a transpa-


rência do objecto.

Se trouxer um objecto da biblioteca para a sua área de desenho e o


seleccionar, deverá observar o campo COLOR na janela de proprie-
dades, conforme visto na imagem abaixo.

Neste campo, encontrará diversas outras opções além de NONE,


nomeadamente, BRIGHTNESS, TINT, ALPHA e ADVANCED. A seguir,
vamos à explicação de cada uma delas.
192 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Se ajustar o brilho totalmente a 100% fará com que o objecto fique


completamente branco. Se o ajuste for feito a –100% o objecto ficará
completamente negro. Em 0% o objecto tem a aparência normal.

Tint
Se ajustar o campo COLOR com a opção TINT, poderá acrescentar
uma cor a ser somada à cor do objecto em si.

Ao seleccionar esta opção, vê o campo COLOR da janela de proprie-


dades transformar-se conforme imagem abaixo.

Na caixa colorida ao lado da palavra TINT poderá regular a cor a somar


ao objecto, que também poderá ser ajustada pelos três campos RGB na
parte inferior. Ao lado da caixa de cor encontra-se também outra caixa
com o valor 100%. Isto significa que a cor escolhida está a ser somada
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 193

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.

Se escolher ALPHA como opção de efeito, verá a janela de proprieda-


des com a aparência abaixo.

Na caixa ao lado do nome ALPHA, poderá regular o grau de transpa-


rência do objecto. Os valores podem estar entre 0 e 100%, sendo o
primeiro equivalente ao objecto completamente transparente e o segun-
do a completamente opaco.

Advanced
Esta opção do menu COLOR realmente é a mais completa e combina
várias das opções anteriores numa só interface.

Assim que a escolher, vai ver que a janela de propriedades assume a


aparência abaixo.
194 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Se carregar no botão SETTINGS verá então,

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

Logicamente todos os efeitos podem ser animados!

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.

E também os do tipo a seguir.

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

Agora, pelas propriedades, pode ajustar em tempo real a cor do botão e


definir pelo campo label, no lado direito, se quer ou não que o botão
leve uma etiqueta, no caso, dois bonecos a representar dois jogadores
(já que se trata de um botão de pinball).

A subdivisão COMPONENT BUTTONS ainda lhe traz mais três botões,


o KEYBOARD BUTTON, o PILL BUTTON e o PUSH BUTTON, vistos a
seguir.

O KEYBOARD BUTTON permite, nas propriedades, a escolha da letra a


ser colocada na tecla.

O PILL BUTTON permite, nas propriedades, regular a largura, a palavra


a ser colocada em cima, a cor da base do botão e a cor do brilho.
198 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Knobs & Faders


Nesta categoria vai encontrar os tão desejados botões deslizantes e
rotativos para as suas páginas, como os vistos abaixo.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS 199

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.

Também terá nesta categoria botões como os vistos abaixo.

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.

Se olhar para a interface gráfica do Flash MX, a seguir aos SWATCHES


vai ver uma janela de COMPONENTS. Nela encontrará os componen-
tes fornecidos para a criação de interfaces gráficas.
202 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

A utilização destes componentes só é plenamente aproveitada se tiver


subrotinas em ActionScript1 a correr, para ler as propriedades resultan-
tes da interacção dos utilizadores com os componentes e daí derivar
acções que tornem a página mais interessante.

Também com ActionScript é possível criar componentes “on the fly”, ou


seja, apenas pelo uso da linguagem de programação, sem que estes te-
nham que estar presentes graficamente nos filmes Flash.

A seguir veremos então cada um destes componentes e as suas fun-


ções2.

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.

Observe que os CheckButton permitem livre marcação, ou seja, mais de


um quadro pode ser escolhido.

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.

Se observar a figura abaixo e a comparar com a anterior vai entender o


significado disso.

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...”.

Porém, quando o utilizador carrega na caixa, ela desdobra-se e mostra


uma segunda janela com as opções, permitindo assim a escolha.

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

No caso das ComboBox, somente uma escolha é possível.

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.

Para aguçar o seu apetite, enquanto não entramos na secção de


ActionScript, vamos à explicação de como foi feita esta ScrollPane.

Logicamente, a primeira coisa é criar a ScrollPane; o que é feito arras-


tando-se o componente da janela “components” para a área de dese-
nho. Vai ver então a seguinte figura.

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

Crie um novo símbolo (CONTROL F8), e na janela que se seguirá


nomeie-o como “texto”. Ainda nesta janela marque o campo que diz
BEHAVIOR como GRAPHIC; marque o quadro que diz EXPORT FOR
ACTIONSCRIPT e no campo IDENTIFIER coloque também a palavra
“texto”. Carregue em ENTER6.

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

A seguir, escolha a ferramenta de criação de textos, o TEXT TOOL (T),


posicione o rato num ponto na parte média esquerda da área de dese-
nho. Carregue no botão do rato e arraste-o para a direita. Vai ver que
surge uma caixa para escrita. Escreva o texto pretendido.

No canto superior direito da área de desenho carregue no ícone cor-


respondente a uma claquete e escolha a opção Scene 1, para voltar à
cena principal.

De volta à cena principal, seleccione o ScrollPane, para que fique ac-


tivo, e na janela de propriedades mude o campo Scroll Content para o
nome que deu ao identifier do texto, no caso, “texto”.
I.5. COMPONENTES 209

PRONTO! Coloque o Flash no modo de visualização e teste o filme


(CONTROL ENTER), para ver o ScrollPane a funcionar.

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 a caixa aumenta de tamanho e ultrapassa a fronteira da


área de desenho do Flash, como na figura abaixo.

Seleccione a caixa do texto que inseriu. Uma linha azul aparecerá à


volta a indicar a selecção activa. Carregue duas vezes com o rato em
cima dessa caixa marcada a azul, para entrar no modo de edição de
texto.

A caixa azul então muda de cor, ficando negra, e aparece um quadrado


no canto inferior direito. Arraste este quadrado para diminuir o tamanho
da caixa, voltando a colocá-la dentro da área de desenho do Flash.
I.5. COMPONENTES 211

Escolha a ferramenta de selecção de objectos na barra de ferramentas


e volte a seleccionar a caixa de textos 7. Arraste o ScrollBar da janela de
componentes e liberte-o próximo do border onde deseja colocar a barra
de deslocamento, seja esta horizontal ou vertical 8. Deve fazê-lo numa
área próxima ao border, desde que seja no interior da caixa.

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

Caso também desejasse uma barra horizontal, basta repetir o


procedimento indicando o local onde deseja a colocação da barra. A
regra geral é a seguinte: se arrastar um ScrollBar para áreas próximas à
borda esquerda ou direita da caixa de textos, vai ter a criação de uma
barra de deslocamento vertical, e se arrastar para áreas próximas às
bordas inferior ou superior da caixa de textos, então terá barras de des-
locamento horizontal. Se quiser pode ter todas... J
I.5. COMPONENTES 213

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.

ActionScript é a linguagem de programação do Flash. Com ela poderá


fazer praticamente tudo o que puder imaginar. Quase que a totalidade
das páginas em Flash mais sofisticadas precisam fazer uso do Action-
Script para poderem funcionar como planeado. A simples colocação de
um botão na página, que responda aos cliques dos utilizadores com
acções previamente planeadas, faz uso de ActionScript para poder fun-
cionar.

Objectos encapsulados

Para melhor visualizarmos a forma pela qual o Flash trata todos os


objectos, podemos considerar, por exemplo, o caso da colocação de um
botão numa página que responda às acções de clique dos utilizadores.

As páginas construídas em Flash podem ser consideradas como aplica-


ções9, já que na sua essência são exactamente isso. Normalmente são

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.

O Flash com o ActionScript forma um ambiente de programação orien-


tada ao objecto. Por outras palavras, isto significa que qualquer soft-
ware criado por meio do uso desta linguagem é composto por vários
objectos menores independentes que interagem entre si. Pela indepen-
dência de cada objecto e por conterem no seu interior todo o código ne-
cessário ao seu funcionamento, são chamados objectos encapsulados
(encapsulated objects).

Além de ter diversas propriedades, cada objecto é dotado da pos-


sibilidade de reagir a determinados eventos com acções que podem ser
designadas pelos programadores.

Cada um destes eventos dá aos programadores a possibilidade de fazer


interacções e combinações e permite a criação de aplicações sofistica-
das e intrincadas.

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.

Então, o fabricante da lâmpada resolve sofisticar o objecto e cria um


evento chamado “QuandoLigado10”. Permite então que este evento pos-
sa ser associado a uma determinada acção11 a ocorrer todas as vezes
que a propriedade da lâmpada passe de 0 a 1. Então pode associar a
este evento uma acção, como por exemplo, fazer aparecer o cão e
apagar a luz.
10
Usamos esta notação porque aproxima-se mais da forma como vai ver as propriedades e
eventos dos objectos quando com eles se deparar.

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

No site do fabricante do Flash MX, a Macromedia, descobrimos alguns


‘brinquedos’ interessantes que poderá acrescentar ao seu programa e
fazê-lo brilhar!! Os ‘brinquedos’ são alguns componentes adicionais pa-
ra a criação de interfaces gráficas e outros para páginas em geral.

Para instalá-los é preciso utilizar um programa da própria Macromedia,


disponível no site, chamado EXTENSION MANAGER, que é um painel
de controlo, para a instalação de novos componentes ao Flash MX. Veja
no Anexo III como obter o programa, as extensões e como fazer para as
instalar.

Tendo já feito a instalação das extensões, o primeiro grupo de


componentes novos que encontrará no seu Flash MX chama-se Flash
UI COMPONENTS SET 2, que são componentes adicionais à criação
de interfaces gráficas avançadas. O segundo grupo é o Flash CHAR-
TING COMPONENTS, que são controlos para a criação de gráficos nas
suas páginas ou aplicações Flash. Vamos então a partir de agora, à
análise dos componentes.

Flash UI Components Set 2

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

Seleccione o calendário e veja que a janela de propriedades do compo-


nente fica como a imagem abaixo.

Na janela acima, a primeira propriedade chama-se Selection Type e


está preenchida com “SINGLE”. Se carregar duas vezes sobre a palavra
SINGLE vai ver que duas outras escolhas são oferecidas: RANGE e
MULTIPLE. Esta propriedade controla de que forma o calendário funcio-
nará quando estiver na sua página Flash.

Se a propriedade estiver em SINGLE, o utilizador apenas poderá esco-


lher um dia de cada vez no calendário. Em MULTIPLE, será permitido
ao utilizador escolher vários dias e em RANGE uma faixa de dias pode
ser escolhida. Logicamente, saber o que foi escolhido pelo utilizador e
I.6. COMPONENTES AVANÇADOS 217

trabalhar com as hipóteses daí decorrentes só é possível pelo uso de


ActionScript.

Logo a seguir vemos a propriedade MONTHS. Se carregar uma vez em


cima da lista dos nomes dos meses verá a janela abaixo.

Repare que na figura acima existe uma coluna numerada de 0 a 11 e a


seu lado os meses correspondentes 1. Se carregar sobre cada um dos
nomes dos meses pode mudá-los para a língua que desejar. As setas
para cima e para baixo mudam uma determinada linha da tabela (mês)
para cima ou para baixo dentro da tabela. O sinal de mais e de menos
acrescentam e apagam, respectivamente, meses na tabela.

De volta às propriedades do controlo, vai encontrar uma propriedade


chamada DaysOfWeek (dias da semana). Se carregar uma vez sobre a
lista de nomes desta propriedade vai ver a janela a seguir.

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

Tal como no exemplo anterior, nesta janela poderá ajustar os dias da


semana para a língua que quiser. Os números ao lado dos nomes
representam o valor que será retornado pelo ActionScript caso seja
escolhido um dia que corresponda a um dos dias da semana listados na
segunda coluna 2.

A próxima propriedade do controlo chama-se FirstDayOfWeek


(primeiro dia da semana) e está preenchida por defeito com o número
zero, que corresponde a SUN (Sunday = Domingo). Ajuste esta caixa
com o número do primeiro dia da semana que tiver colocado na figura
acima. Se quiser que o primeiro dia da sua semana seja o dia na quarta
linha da tabela, então este campo deve conter o valor 3.

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).

As janelas podem ser arrastadas (pela barra do título). Por meio de um


clique na barra do título é possível trazer para a frente uma janela que
esteja por baixo de outras. Funcionam aproximadamente com a mesma
lógica utilizada nas janelas comuns do Windows ou MacOS. Uma janela
pode conter qualquer tipo de objecto, conforme veremos mais adiante.
Possuem as seguintes propriedades:
220 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Colocamos na propriedade nomeada Pane Title o valor “janela 1”,


conforme pode ver atrás. Esta propriedade representa o título da janela,
que pode ou não ser colocado.

As últimas quatro propriedades da janela são: Has Close Box, Is


Scrolling, Resizable e Has Shader. Elas representam o seguinte:

HAS CLOSE BOX – indica se a janela tem ou não o X no canto superior


direito para permitir que seja fechada pelo utilizador.

IS SCROLLING – indica se a janela tem ou não barras de desloca-


mento (scroll bars) na horizontal e vertical.

RESIZEABLE – indica se o tamanho da janela pode ser modificado pelo


utilizador.

HAS SHADER – indica se a janela tem ou não o botão no canto supe-


rior esquerdo para minimizar.

Se está atento, notou que passamos à frente uma propriedade, a


SCROLL CONTENT . Com essa propriedade, a exemplo do que fez nos
exemplos do ScrollBar e do ScrollPane, vai indicar aquilo a fazer scroll
dentro da janela. De facto, esta propriedade refere-se a um objecto que
poderá conter outros tantos, textos, imagens, sons, vídeos, etc.

Se for um texto, faça o seguinte: Crie um novo símbolo e na janela que


se seguirá nomeie-o como “texto”. Ainda nesta janela marque campo
que diz BEHAVIOR como GRAPHIC, marque o quadro que diz EX-
PORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque também
a palavra “texto”. Carregue em ENTER.
I.6. COMPONENTES AVANÇADOS 221

Siga o mesmo procedimento que utilizou no componente ScrollPane


para criar uma caixa de texto dinâmica.

Na janela do componente DraggablePane, marque o campo


ScrollContent com o que preencheu no campo IDENTIFIER da janela
acima, ou seja, “texto”. Coloque o Flash no modo de teste e verifique
que o texto está perfeitamente dentro da janela, pelo menos teorica-
mente...3

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

O resto é igual, ou seja, vá ao ScrollContent e coloque o nome do


IDENTIFIER que utilizou para a imagem.

DICA

Se fizer um novo símbolo que contenha outros, como botões,


imagens, sons, etc., pode colocar tudo dentro de uma janela, se
referenciar apenas este símbolo principal no ScrollContent.
I.6. COMPONENTES AVANÇADOS 223

Se usar esse princípio, poderá colocar qualquer coisa dentro da janela!

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”.

Carregue no IconButton que está na área de desenho e na janela das


propriedades ajuste o campo que diz ICON para “gaivota”.

Vai ter então, um botão com a imagem da gaivota na face. Voilà!


224 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

As outras propriedades do IconButton são as seguintes.

LABEL – permite a colocação de um título (frase) que fica agregada à


imagem que inserir para a face do botão.

LABEL PLACEMENT – permite escolher em que posição relativa à


imagem deve ficar posicionada o tal LABEL acima. As posições pos-
síveis são: LEFT, RIGHT, TOP e BOTTOM, ou seja, à esquerda, à direi-
ta, acima e abaixo da imagem, respectivamente.

TOGGLE – esta propriedade ajusta a forma de funcionamento do botão.


Normalmente o botão funciona da seguinte forma. Chamemos de
estado A o estado no qual o botão está em repouso e B o estado no
qual ele está quando nele se clica. Assim, o botão que está em A só fica
no estado B enquanto estiver a carregar com o rato sobre ele. Logo que
liberta o botão do rato o botão volta ao estado A.

Porém, a propriedade TOGGLE altera essa forma de funcionamento.


Esta propriedade está ajustada por defeito como FALSE e neste estado
corresponde ao modo de funcionamento normal descrito no parágrafo
anterior. Se alterar esta propriedade para TRUE, fará o botão funcionar
da seguinte forma: inicialmente estaria no estado A e assim que
clicasse sobre ele faria que ele assumisse o estado B, assim permane-
cendo mesmo depois de libertado o botão do rato. Seria preciso outro
clique para o fazer voltar ao estado A e assim sucessivamente.

INITIAL VALUE – O valor normal desta propriedade é FALSE, o que faz


o botão inicialmente ser mostrado em repouso com a aparência (A) e
com a aparência (B) enquanto estiver a carregar sobre ele. Se passar a
propriedade a TRUE, inverterá esta condição.

BACKGROUND – Esta propriedade é surpreendente! Não satisfeitos


em permitir a colocação de uma imagem na face do botão, também
permitiram a colocação de outra imagem para o fundo do botão. O pro-
cedimento para agregar outra imagem a esta propriedade é o mesmo
que foi descrito para o campo ICON.
I.6. COMPONENTES AVANÇADOS 225

MESSAGEBOX
Este componente permite a criação de caixas de mensagem para os
seus programas ou páginas Flash.

Se olhar para a janela de propriedades vai ver a imagem a seguir.

As propriedades vistas nesta caixa significam o seguinte:

TITLE – permite criar um título para a caixa de mensagens. Colocamos


a palavra TÍTULO neste campo.

MESSAGE – indica a mensagem a ser mostrada na caixa. Colocamos a


frase: ESTA É A MENSAGEM neste campo.
226 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

ICON – este campo permite a colocação de um ícone associado à caixa


de mensagem, para melhor a ilustrar. À partida existem quatro ícones
definidos por defeito 4: QUESTION, INFO, WARNING e ERROR, que
são vistos abaixo nesta ordem.

BUTTONS – Inicialmente este campo está preenchido com a palavra


OK, o que significa que a caixa apenas contém um botão com este no-
me, conforme pode ser visto pela imagem no início da explicação deste
componente. Porém, se carregar na palavra OK, verá a janela abaixo
onde poderá criar quantos botões desejar.

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

O procedimento de criação de linhas – neste caso, botões, nesta janela,


é o mesmo visto no Calendar.

CLOSE HANDLER – Neste campo deverá colocar uma string5 que


corresponda à subrotina6 a ser executada quando a caixa se fechar, ou
seja, assim que o utilizador carregar em algum botão e a caixa se fe-
char, automaticamente o Flash executará a subrotina cujo nome estiver
indicado neste campo.

BUTTON WIDTH – neste campo pode ajustar em pixéis a largura dos


botões.

TITLEBAR HEIGHT – e aqui, a altura da barra do título.

VISIBLE – é onde pode ajustar a visibilidade e invisibilidade da caixa de


mensagens por ActionScript. Pode ter dois valores, TRUE ou FALSE. O
primeiro corresponde à caixa visível e o segundo a ela invisível.

Para finalizar este componente, devemos dizer que encontramos um


bug que torna o uso deste componente dentro de uma janela Dragging-
Pane impossível.

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.

Então, ambas as informações estarão no mesmo sítio, divididas por


uma barra que poderá ser deslocada para um lado e para o outro 7 e
assim permitir a visualização das duas partes.

Vamos criar um exemplo para ver como o componente funciona.

Arraste o SplitView da janela COMPONENTS para o meio da área de


desenho, e aumente o seu tamanho para que cubra quase toda a área,
conforme indicado abaixo.

Veja que o componente foi deixado no estado normal de divisória


vertical.

7
Ou para cima e para baixo, consoante o tipo de SplitView que escolher...
I.6. COMPONENTES AVANÇADOS 229

Se carregar no componente vai ver que a janela de propriedades é igual


à da figura abaixo.

Vai ver cinco propriedades no comando as quais descrevemos abaixo.

TOP/LEFT CONTENT – Se estiver a utilizar uma barra divisória vertical,


então esta propriedade refere-se ao nome do objecto que estará na
parte esquerda (LEFT) da divisória. Se estiver a utilizar uma barra divi-
sória horizontal, então este campo refere-se ao nome do objecto exis-
tente na parte de cima (TOP) da divisória.

BOTTOM/RIGHT CONTENT – De forma análoga, esta propriedade


refere-se ao objecto que vai estar na parte de baixo (BOTTOM) ou na
direita (RIGHT) da divisória, consoante esteja a utilizar uma barra divi-
sória horizontal ou vertical, respectivamente. Vai ver que já preenche-
mos este campo como “outro”.

NOTA

“gaivota” é o nome do objecto correspondente à


fotografia do pássaro que estará na metade esquerda da
divisória.

“outro” é o nome do objecto que estará na metade


direita da divisória (neste caso é um texto).
230 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Então, a primeira coisa é criar os dois objectos que ficarão associados a


cada metade do SplitView. Para criar um objecto com uma imagem,
faça INSERT > NEW SYMBOL, e na janela que se seguirá preencha o
nome como “gaivota”. Escolha o tipo GRAPHIC e marque o quadro que
diz EXPORT FOR ACTIONSCRIPT. Veja a imagem abaixo.

Ao fazer isso, o quadro EXPORT IN FIRST FRAME já aparecerá


marcado e o campo IDENTIFIER aparecerá preenchido com “gaivota”.
Deixe-os como estão e carregue em ENTER para criar o novo objecto.

Importe uma imagem com o comando FILE > IMPORT para finalizar
este objecto.

Repita a sequência de comandos acima para criar o objecto “outro”.


Porém, em vez de importar uma imagem, crie uma caixa de texto do
tipo DYNAMIC TEXT e MULTILINE e insira um texto qualquer.

Os parâmetros da caixa e a sua aparência são vistos a seguir.


I.6. COMPONENTES AVANÇADOS 231

Carregue na seta azul no canto inferior esquerdo do timeline (figura


abaixo) para voltar à cena principal.
232 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

De volta à cena principal, seleccione o componente SplitView e


preencha as propriedades TOP / LEFT CONTENT e BOTTOM / RIGHT
CONTENT, com “gaivota” e “outro”, respectivamente.

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.

Se deslocar a barra totalmente para a direita terá a seguinte imagem.


I.6. COMPONENTES AVANÇADOS 233

Da mesma forma, se deslocar a barra totalmente para a esquerda terá a


imagem a seguir.

Se em vez de colocar um texto e uma imagem colocar duas imagens,


passa a ter algo como visto abaixo.
234 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Entretanto, se deslocar a barra totalmente à esquerda verá ...

... e toda à direita ...

O Componente SplitView tem ainda duas propriedades interessantes:


T/L COMPONENTE BEHAVIOR e R/B COMPONENT BEHAVIOR.

Cada uma destas propriedades permite três escolhas: STICK TO BAR ,


STICK TO PANE e RESIZE. Por defeito, estão ajustadas na opção
STICK TO BAR. Se as colocar em STICK TO PANE as imagens pas-
sam a ficar estáticas em relação ao fundo enquanto desloca a barra
I.6. COMPONENTES AVANÇADOS 235

divisória. Na opção RESIZE, o tamanho das imagens é aumentado ou


diminuído para caber na metade que lhes cabe, à medida em que
desloca a barra divisória.

NOTA

Pode mudar o BEHAVIOR de cada metade da janela de


forma independente. Pode, por exemplo, colocar STICK
TO PANE numa metade e RESIZE na outra!

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.

Os parâmetros do componente são os vistos na figura seguinte.


236 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

A seguir vamos a uma descrição detalhada de cada uma das proprie-


dades.

ORIENTATION – permite duas escolhas: HORIZONTAL e VERTICAL e


corresponde ao sentido de deslocamento da frase na caixa.

SCROLL DIRECTION – permite duas escolhas: DECREMENTAL e


INCREMENTAL. Se a orientação da caixa for horizontal, e colocar esta
propriedade como INCREMENTAL, vai ver a frase a deslocar-se da
esquerda para a direita e pode inverter este sentido de deslocamento se
colocar a propriedade como DECREMENTAL. Se a orientação da caixa
for vertical, então a frase irá deslocar-se de cima para baixo ou de baixo
para cima, consoante a propriedade esteja INCREMENTAL ou DECRE-
MENTAL, respectivamente.

SPEED – representa a velocidade com que a frase se move, medida em


pixéis por segundo.

SMOOTHNESS – representa a quantidade de pixéis que a frase se


move a cada ciclo. Este campo tem relação directa com o SPEED. Isto
significa o seguinte: se a velocidade estiver a 10 e o SMOOTHNESS
estiver a 1, então a frase desloca-se a 10 pixéis por segundo. Porém, se
ajustar SMOOTHNESS com o valor 2, a velocidade passa a ser 20
pixéis por segundo, pois a cada deslocamento da frase ela salta 2 pi-
I.6. COMPONENTES AVANÇADOS 237

xéis. Logicamente, quanto menor este número, mais suave é o movi-


mento aos olhos, por isso o campo tem esse nome8.

SPACING – É a quantidade de pixéis entre cada um dos itens a ser


mostrado na caixa9.

STOP ON FOCUS – Se ajustar esse valor como TRUE, de cada vez


que o utilizador passar o rato sobre a caixa, o movimento encerra,
voltando ao normal à saída do cursor. Pode ser útil para quando deseja
colocar links a deslocar-se pela caixa e permitir que possam ser clica-
dos facilmente. Se ajustar como FALSE, o movimento não se altera à
passagem do rato.

SCROLL LOCATION – Permite regular a posição das setas de scroll


(deslocamento) da caixa. As opções disponíveis são: NONE, TOP,
BOTTOM, LEFT e RIGHT, correspondentes a nenhuma seta, setas em
cima, setas em baixo, setas à esquerda e setas à direita, respectiva-
mente. Na figura da caixa, no início desta secção, a caixa está ajustada
com a opção BOTTOM.

FRAME WIDTH – indica a espessura em pixéis da borda da caixa. Se


escrever zero, a caixa fica sem border.

FRAME COLOR – pode nesta caixa regular a cor do border.

HIGHLIGHT COLOR – nesta caixa pode indicar a cor do highlight, ou


seja, quando o cursor do rato passa em cima da caixa com o texto em
movimento, uma caixa colorida ilumina a região do texto imediatamente
abaixo do cursor, para indicar que está seleccionada esta região. Pode-
se então, por meio desta propriedade, regular a cor da iluminação.

DATA PROVIDER – indica o nome de um objecto em ActionScript res-


ponsável pelo fornecimento dos textos a serem mostrados na caixa.

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

DATA ARRAY – Indica uma matriz de elementos a serem mostrados na


caixa. Pode ver na imagem que este campo contém a frase que apare-
ce na primeira imagem a falar do Ticker. Se carregar uma vez com o
rato sobre a região onde está a frase vai ver uma janela onde poderá
inserir todos as frases que deseja mostrar.

HEADER TEXT – O texto que preencher neste campo será mostrado


como sendo o título da caixa.

HEADER LOCATION – Nesta caixa poderá ajustar a posição em que o


título da caixa vai estar. As escolhas possíveis são: NONE, TOP,
BOTTOM, LEFT e RIGHT, que correspondem a nenhuma, em cima, em
baixo, à esquerda e à direita, respectivamente.

HEADER WIDTH – indica a largura do título em pixéis.

HEADER HEIGHT – indica a altura do título em pixéis.

DATA WITDH – indica a largura dos itens na caixa em pixéis. Esta


propriedade faz mais sentido no caso de caixas de deslocamento hori-
zontal, pois irão espaçar as frases na horizontal de forma a não se con-
fundirem.

DATA HEIGHT – esta propriedade indica a altura em pixéis das frases.

Deixamos para o fim os dois últimos componentes do primeiro grupo, o


TREE e o PROGRESS BAR. Não nos estenderemos nas explicações
acerca destes componentes nesta secção, por se tratarem de elemen-
tos que apenas podem funcionar quando programados por ActionScript.

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.

As propriedades deste componente são:

CHANGE HANDLER – Deve colocar neste campo o nome da função


(subrotina) em ActionScript (no mesmo timeline) a ser executada à me-
dida que a barra progride.

DISPLAY GRAPHICS – É uma propriedade que pode ser ajustada para


TRUE ou FALSE. Se for colocada em true, que é o modo por defeito, é
mostrado o desenho da barra a progredir. Se colocado em false, faz o
desenho ficar invisível.
240 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

DISPLAY TEXT – É uma propriedade que indica se deve estar visível


(TRUE) ou não (FALSE) a string a mostrar os Kilobytes.

Flash charting components


Este é o segundo grupo adicional de extensões oferecido pela Macro-
media no seu site. Assim como o primeiro grupo de extensões, este
também requer instalação para que possa ser usado no Flash MX (veja
o Anexo III). Assim que o tiver instalado terá à sua disposição os se-
guintes componentes: BAR CHART, LINE CHART e PIE CHART, os
quais descrevemos a seguir.

BAR CHART
Com este componente poderá criar gráficos em barra, como na figura
abaixo.
I.6. COMPONENTES AVANÇADOS 241

Para conseguir um gráfico similar ao visto acima, preenchemos as


propriedades do componente conforme visto abaixo.

LAYOUT OPTIONS – Se carregar neste campo, vai ver surgir uma


janela, onde poderá ajustar diversas propriedades.

CharTitle – Esta propriedade representa o texto que será o título do


gráfico. No caso “GRÁFICO DE VENDAS”.

XAxisTitle – Neste campo deverá colocar o título correspondente ao


eixo horizontal (X). No caso, “MESES”.

YAxisTitle – Neste campo deverá colocar o título correspondente ao


eixo vertical (Y). No caso, “EUROS”.
242 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Margin – Corresponde ao valor em pixéis da margem, ou seja, em


relação ao tamanho total do controlo, quantos pixéis de margem deseja
estabelecer em todas as direcções.

Se aumentar muito a margem e, consequentemente, diminuir o espaço


interno dentro do controlo, pode ser que o Flash automaticamente ajus-
te a rotação dos textos para tentar encaixar o gráfico dentro do compo-
nente. Veja na figura abaixo o gráfico que foi comprimido na vertical,
com a retirada das linhas de 25 e 75 e a rotação realizada nas strings
dos nomes dos meses.

XlabelMaxHeight – No caso de ter sido rodado o texto colocado ao


longo do eixo horizontal, conforme visto na figura acima, esta
propriedade determina o quanto em pixéis deve ser reservado para a
colocação dos nomes. Por outras palavras, digamos que se os meses
acima tivessem sido escritos por extenso, então, automaticamente não
caberiam no gráfico e teriam sido rodados. Assim sendo, poderíamos
ajustar esse campo, para um valor alto, digamos, 500, e teríamos o
gráfico seguinte...
I.6. COMPONENTES AVANÇADOS 243

... ou poderíamos optar por ajustar a propriedade para um valor peque-


no, como 30 pixéis, por exemplo, e limitar a este valor a quantidade de
pixéis utilizada para mostrar os títulos ao longo do eixo horizontal, con-
forme visto na figura abaixo.

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

nhas, como o visto abaixo que é criado automaticamente no momento


em que insere um componente LINE CHART na sua área de desenho

Ao arrastar um componente destes para a janela de desenho e clicar


nas propriedades, vai ver a janela abaixo.

Line Chart – Layout Options

A primeira propriedade é a LAYOUT OPTIONS e se carregar no campo


da direita nesta linha, vai ver uma surgir uma janela que pode preencher
conforme visto a seguir.
I.6. COMPONENTES AVANÇADOS 245

A primeira opção é a Chart Title e representa o título do gráfico. Vamos


preenchê-la com a frase “RESUMO DE VENDAS”.

A seguir vemos as propriedades Xaxis Title e Yaxis Title , que cor-


respondem ao título a colocar para o eixo horizontal e vertical, respec-
tivamente. Preenchemos estes campos com as frases “valores em
euros” e “meses”, respectivamente.

As opções a seguir são: LineColor e LineWeight que permitem o ajus-


te da cor e da espessura da linha.

Vemos também o campo ShowHighlights, que indica a presença


(TRUE) ou não (FALSE) de pequenos círculos de cor diferente a desta-
car os pontos do gráfico.

Os campos a seguir, MARGIN e XLabelMaxHeight assemelham-se aos


do BAR CHART e têm a mesma funcionalidade explicada anterior-
mente.
246 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Line Chart – Chart Event Handlers

Ao voltar à janela de propriedades do componente, vemos que a próxi-


ma variável a seguir ao LAYOUT OPTIONS chama-se CHART EVENT
HANDLERS. Vai ver ao lado desta frase quatro palavras: PRESS, RE-
LEASE, ROLLOVER e ROLLOUT, que dizem respeito aos quatro even-
tos que os gráficos podem gerar em relação ao comportamento do rato.
Se carregar nestas palavras vai ver a janela a seguir.

Terá de preencher a coluna VALUE com strings que representem o


nome das funções em ActionScript a executar, quando cada um dos
quatro eventos acontecer. Neste caso, os eventos são:

Press (quando o botão do rato for carregado em cima de um ponto do


gráfico), Release (quando o botão do rato for libertado depois de ter
sido carregado em cima de um ponto do gráfico), RollOver (quando o
cursor do rato passar por cima de um ponto do gráfico) e RollOut
(quando o cursor do rato sair de cima de um ponto do gráfico, depois de
ter entrado).
I.6. COMPONENTES AVANÇADOS 247

Line Chart – Category Labels

A seguir, nas propriedades do componente, vemos CATEGORY


LABELS. Vai ver que originalmente este campo está preenchido com A,
B, C, D e E, que representam as colunas indicadas no gráfico. Se carre-
gar nessas letras vai ver a janela a seguir a qual aproveitamos para mo-
dificar e colocar o texto equivalente aos cinco primeiros meses do ano.

Line chart – data values

A próxima propriedade do LINE CHART chama-se DATA VALUES. Por


defeito, quando criar o objecto vai ver que está preenchido com os valo-
res 58, 25, 50, 34 e 80, que correspondem aos valores que os pontos
do gráfico vão ter no eixo vertical. Carregue nestes números e vai ver
uma janela onde poderá regular estes pontos. Nesta etapa deixamos os
valores como estavam.

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

Repare nos highlights à volta dos pontos.

As questões discutidas no BAR CHART referentes à margem e ao com-


portamento do componente à medida que altera os seus valores, tam-
bém são válidas para o LINE CHART.

Pie Chart
O PIE CHART é o próximo componente sobre o qual iremos falar.

Com ele é possível fazer gráficos PIZZA ou TARTE10 conforme visto na


figura abaixo que é criada automaticamente no momento em que insere
um componente PIE CHART na sua área de desenho.

10
Escolha o nome conforme o seu apetite... J
I.6. COMPONENTES AVANÇADOS 249

Ao carregar no componente, depois de o ter arrastado para a sua área


de desenho, vai ver as seguintes propriedades:

Pie Chart – Layout options

A primeira propriedade que vê na janela é a de LAYOUT OPTIONS. Se


carregar no valor contido nesta variável vai ver a janela a seguir.

Os parâmetros vistos nesta janela são:

CHART TITLE - que corresponde ao título do gráfico.

MARGIN – que pode regular a margem interna do componente (ver ex-


plicação dada para o BAR CHART).
250 C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

SHOW LEGEND – variável que pode assumir os valores TRUE ou


FALSE, correspondentes respectivamente ao gráfico ter ou não a legen-
da lateral ao lado direito.

As três próximas propriedades, ou seja, CHART EVENT HANDLERS,


CATEGORY LABELS e DATA VALUES têm um funcionamento igual ao
explicado para o caso do componente LINE CHART.

Pie Chart – Pie Colors

Se carregar nesta propriedade pode regular as cores de cada fatia no


gráfico.
IIª PARTE

A PROGRAMAÇÃO NO

MACROMEDIA FLASH MX
II.1. INTRODUÇÃO À PROGRAMAÇÃO
ORIENTADA POR OBJECTOS

Linguagens Processuais ou Procedimentais


Linguagens como o Pascal, o Fortran ou o C, são consideradas proces-
suais ou procedimentais. Denominam-se desta forma, pois o código é
escrito passo-a-passo. Os programadores que utilizam estas linguagens
podem organizar as instruções a ser processadas em partes de código
mais pequenas chamadas funções (functions) que para o seu funciona-
mento utilizam estruturas de dados (data structures). É importante sali-
entar que as linguagens processuais mantêm as funções e as estruturas
de dados separadas – estas não estão relacionadas de modo algum.

Embora sejam eficientes, as linguagens processuais possuem alguns


inconvenientes, um dos quais é a dificuldade na reutilização do código.
A sua natureza passo-a-passo obriga o programador a compreender
cada linha de código, para conseguir compreender o que o programa
faz. Outra desvantagem das linguagens processuais é o facto de ignora-
rem o relacionamento entre as funções e as estruturas de dados.

LINGUAGENS ORIENTADAS POR OBJECTOS


O conceito de linguagens orientadas por objectos foi introduzido, na
Web, por linguagens tais como o Javascript, VBScript e mais recente-
mente pelo Actionscript do Flash. O Actionscript segue as normas
ECMA-262 Standard, uma especificação escrita pela European
Computer Manufacturers Association, que serve também de base à
linguagem Javascript - daí as semelhanças entre as duas linguagens.
No entanto, existem ainda alguns pontos onde ambas as linguagens di-
ferem.
254 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

No Flash MX as funções e as estruturas de dados estão agrupadas em


classes que podem ser definidas pelo construtor de funções (constructor
function). Um construtor de funções é um conjunto de instruções que
define as propriedades e os métodos de uma classe. É possível criar
múltiplas instâncias de uma classe, cada uma delas denominada por
objecto, para reutilizar através do código.

Por exemplo, para obter informações acerca da taxa de IVA de diversos


artigos, criamos um construtor através da declaração de uma função
(iva) que possui duas propriedades (preco,taxa) e através destas cria-
mos um método (calcTotal) que calcula e devolve o preço do produto
com IVA.

function iva (p, t) {


this.preco = p;
this.taxa = t;
this.calcTotal = function() {return (this.preco *
this.taxa)+ this.preco;};
}

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.

almoco = new iva (5, 0.05);


computador = new iva (1000, 0.17);

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.

A utilização do operador new é similar a arrastar um movie clip da


biblioteca para o palco, ou seja, criar uma nova instância de um símbolo
(objecto).

Nas linguagens orientadas por objectos as classes podem receber


propriedades e métodos umas das outras de acordo com uma ordem
específica. A esta característica denomina-se herança (inheritance).
II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS 255

Uma classe que herda as características de outra classe é designada


de subclasse (subclass). A classe que passa as propriedades e méto-
dos é chamada de superclasse (superclass). Uma classe pode ser sub-
classe e superclasse em simultâneo.
II.2. CONCEITOS BASE

Dot sintax versus Slash sintax


A slash syntax foi utilizada pelo Flash desde a versão 3 até à versão 5.
Na versão 5 do programa, foi feita a transição entre as duas notações,
podendo o utilizador funcionar com ambas em simultâneo, embora a
slash sintax fosse já aconselhada pela Macromedia apenas para abrir
ficheiros de Flash mais antigos. Na versão MX a slash sintax já não
existe pois foi totalmente substituíd a pela dot sintax.

Na slash sintax os caminhos são muito semelhantes aos utilizados em


HTML. O caminho pode ser absoluto, começando pela _root (timeline
do filme principal) ou relativo se começar numa instância e seguindo o
caminho até ao target (movie clip).

Em HTML a ( / ) representa a raiz (_root) e quando se possui um


caminho relativo para, por exemplo, subir um nível na hierarquia este é
representado por ( ../ ). Em Flash a ( / ) simboliza o palco e para atribuir
uma action a um botão que afecte um movie clip chamado bola, no
palco, basta digitar /bola. No caso inverso, se possuir um movie que vai
accionar uma ordem para o palco, então no movie deverá aparecer ape-
nas /

A dot syntax foi introduzida no actionscripting do Flash 5. É o método


preferencial para identificar o caminho para um movie clip ou para uma
variável. Se ainda trabalhar em Flash 5, a slash sintax deve ser evitada
pois foi totalmente substituída pela dot sintax no Flash MX.

A dot sintax é muito semelhante à slash sintax, mas as barras foram


substituídas por pontos. Os caminhos podem ser absolutos e relativos e
existem duas referências especiais, _root e _parent. A _root num ca-
minho absoluto refere-se à timeline principal (raiz), da mesma maneira
258 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

que a ( / ) na slash sintax. A _parent refere-se à timeline onde o filme


(movie clip) está inserido, e é semelhante a utilizar (../ ) numa estrutura
HTML, quando especificada em termos relativos.

O topo da árvore é a timeline principal do filme, referida como root no


Flash. Todos os movie clips são instâncias localizadas na timeline prin-
cipal e são dependentes da root. Existem dois métodos para referenciar
o target path de um movie clip: Absoluto e relativo.

Timeline principal
root

Escritório Quarto

Figura001 - Target Paths

No esquema da figura 001, o caminho absoluto para o movie compu-


tador será: _root.escritório.computador, e o caminho relativo para o
movie clip quarto a partir do movie clip cama será _parent.

Terminologias utilizadas no Actionscripting


Actions – São declarações que instruem a animação a desempenhar
determinada tarefa.
Boolean – É um valor que apenas pode assumir true ou false.
II.2. CONCEITOS BASE 259

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.

function cores (cor) {


cor_preferida = "A minha cor preferida é " + cor;
}
260 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Variable (variável): Identificador que armazena um valor.

Seria possível definir uma classe de tigres utilizando um construtor de


funções. As propriedades destes tigres incluiriam os dentes, tamanho,
apetite e forma. Os métodos incluiriam código para fazer o tigre andar,
comer e caçar.
Depois de definir a classe do tigre através de propriedades e métodos
teríamos o objecto do tigre. Para construir outro tigre deveríamos criar
uma instância da mesma classe, podendo possuir no entanto proprie-
dades e métodos diferentes da primeira.

Cada objecto pode ter as suas propriedades e métodos não definidos


pela classe da qual derivou. Por exemplo, poderia definir uma instância
em que o tigre tem outra cor, mas como seria o único a possuí-la esta
propriedade não seria adicionada na classe.

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.

A diferença entre o modo Normal e o modo Expert está no tipo de ajuda


fornecido ao utilizador. Em modo Normal são exibidos no topo do painel
os parâmetros que são possíveis de utilizar com determinada action.

Figura002 – Painel Actions em Normal Mode


II.2. CONCEITOS BASE 261

No modo Expert o utilizador introduz os scripts da mesma forma mas


também o pode fazer digitando-os directamente no painel; para tal deve
possuir já bons conhecimentos de actionscripting, sendo este modo
aconselhado a utilizadores mais experientes. A área superior do painel
que estava presente em modo Normal desaparece, mas ao digitar os
comandos surge uma janela de auxílio com as keywords do programa.

Figura003 - Painel Actions em Expert Mode

INSERIR UMA ACTION


Pode utilizar vários métodos para aplicar actions a uma frame ou instân-
cia.

Primeiro, seleccione o frame ou instância onde irá aplicar a action e


active o painel actions através do comando W INDOW > ACTIONS ou com
a tecla F9.

No lado esquerdo do painel as actions apresentam-se divididas por


categorias. Para aceder a determinada categoria basta fazer clique uma
vez sobre a mesma e para aplicar a action pretendida deverá fazer
duplo clique sobre a sua designação. O código aparecerá imediata-
mente no lado direito do painel. Algumas actions possuem parâmetros
que podem ser de seguida configurados na área à direita. Ver figura
002.
262 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Figura004 – Botão (+)

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.

Figura005 – Botões do painel Actions

Find – Procurar palavras no código.

Figura006 – Janela Find


II.2. CONCEITOS BASE 263

Para encontrar palavras no código, digite o texto na caixa “Find What” e


active a opção Match Case se pretende procurar as palavras com
maiúsculas e minúsculas exactamente como as escreveu na caixa.

Replace – Procurar e substituir palavras no código.

Figura007 - Janela Replace

Targe t Path - Inserir o caminho relativo ou absoluto para uma instância.

Check sintax – Verifica se a sintaxe do código está correcta.

Autoformat – Formata automaticamente o código de modo a que este


fique com um aspecto conciso e de fácil leitura.

Show Code hint – Mostra uma pequena janela de ajuda enquanto se


digita o código.

ALTERNAR ENTRE MODOS NO PAINEL ACTIONS


Para alterar entre modos de trabalho (Expert e Normal) clique no menu
pop-up do painel Actions e escolha a opção pretendida.

NAVEGAR ENTRE SCRIPTS NUM DOCUMENTO


No topo do painel actions surge em menu pop-up que permite ao
utilizador navegar entre todos os scripts presentes no documento, sem
necessitar de seleccionar as instâncias ou keyframes onde estes estão
aplicados.
264 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura008

Uma outra forma de visualizar as actions presentes num determinado


filme é através do Movie Explorer, que podemos aceder através do
comando W INDOW > MOVIE E XPLORER.

Figura009 – Movie Explorer

PARA APAGAR UMA ACTION


Seleccione a action ou a linha no painel do lado direito.
Faça clique sobre o botão (-).
II.2. CONCEITOS BASE 265

VISUALIZAR A NUMERAÇÃO PARA AS LINHAS DE CÓDIGO


Seleccione a opção VIEW LINE NUMBERS no menu pop-up do painel
actions ou então utilize o atalho Ctrl+Shft+L (Windows) ou Command+
Shift+L (Macintosh). A janela Actions possui ainda o botão View
Options, onde esta opção aparece disponível.

Figura010 – Numeração nas linhas de código

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.

Figura011 – Painel Reference


266 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

PARA VISUALIZAR O PAINEL REFERENCE


Para visualizar o painel Reference, seleccione o comando W INDOW >
REFERENCE.
Se já existir uma linha de código seleccionada no painel Actions pode
fazer clique sobre o ícone reference que aparece no canto superior
direito da janela, que acede directamente ao painel Reference já na
descrição da action seleccionada.

Figura012 – Icon Reference no painel Actions

PARA ALTERAR A DIMENSÃO DA FONTE NO PAINEL


REFERENCE
Seleccione a opção Large, Medium ou Small do menu pop-up do painel
Reference.

ASSOCIAR ACTIONS NA TIMELINE


Ao associar uma action na timeline a acção acontecerá assim que a ani-
mação atingir essa keyframe.
Para associar uma action a uma frame comece por adicionar um novo
layer na animação. Se a action for para uma frame, que não seja a
primeira da animação, deve ser inserida uma blank keyframe na layer
Actions (F7).
De seguida com a keyframe seleccionada, active o painel Actions e
introduza o código pretendido.

Figura013 – Associar actions a um keyframe


II.2. CONCEITOS BASE 267

ASSOCIAR ACTIONS A SÍMBOLOS


Podemos associar actions a frames, timelines de movie clips e botões e
directamente às instâncias dos movies e botões. Algumas actions são
exclusivamente para aplicação em instâncias de movie clips e outras
apenas podem ser associadas a instâncias de botões.

Ao criar um símbolo na biblioteca (library) e arrastar uma cópia para o


palco acabamos de criar uma instância do símbolo. Ao associar as
actions às instâncias em vez de directamente no símbolo, podemos
utilizar várias instâncias do símbolo em que cada uma pode conter o
seu conjunto de actions, reaproveitando recursos no filme.

Para aplicar uma action a um símbolo, basta seleccioná-lo e atribuir a


action que pretendemos.

Figura014 – Símbolo Button na livraria e uma instância no palco

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

EVENTOS ASSOCIADOS A BOTÕES

Figura015 – Eventos associados a uma instância dum botão

Press – Ao premir o botão do rato, mas antes de o soltar.


Release – Quando se solta o botão do rato. Este evento acontece sem-
pre depois do evento Press.
Release Outside – Soltar o rato fora da área hit do botão.
Roll Over – Passar o rato por cima do botão, mas sem possuir o botão
do rato premido.
Roll Out – Retirar o rato de cima do botão, sem o premir.
Drag Over – Passar o rato por cima do símbolo, mantendo o botão do
rato premido. Esta operação é normalmente designada por “arrastar”.
Drag Out – Retirar o rato de cima do botão ou movie, mantendo o botão
premido.
Keypress – Acontece quando o utilizador prime uma determinada tecla.

EVENTOS DE MOVIE CLIPS


Load – Ocorre apenas uma vez, assim que a instância acaba de ser
carregada.
EnterFrame – A acção está constantemente a ser despoletada à veloci-
dade do filme. As acções associadas a este evento acontecem antes de
qualquer action da timeline do movie clip.
II.2. CONCEITOS BASE 269

Unload – A acção é iniciada no primeiro frame, depois do movie clip ser


removido da timeline.
Mouse Down – Ao premir o botão do rato sobre a instância.
Mouse Up – Ao soltar o botão do rato sobre a instância.
Mouse Move – A acção é iniciada sempre que o rato é movido. Deve
utilizar as propriedades _xmouse e _ymouse para determinar a posi-
ção do rato.
Key Down – Acontece assim que uma tecla é premida. Deve ser
utilizada a propriedade Key.getCode para determinar qual foi a última
tecla premida.
Key Up – Ao soltar uma tecla. Utilizar a propriedade Key.getCode para
identificar a última tecla a ser premida.
Data – A acção é iniciada assim que entram dados no movie através da
action LoadVariables ou LoadMovie.

Ao ser especificada através da acção LoadVariables o evento apenas


acontece uma vez, enquanto que através da action LoadMovie o even-
to acontece repetidamente à medida que os dados são recebidos.

Figura016 – Eventos associados a uma instância dum movie clip.


II.3 INTRODUZIR INTERACTIVIDADE
NUMA ANIMAÇÃO

Neste exemplo vamos utilizar actions que controlam o fluxo da anima-


ção. Importamos um vídeo em formato QuickTime que iremos controlar
com alguns botões.

Comece por importar um filme Quicktime para a biblioteca através do


comando FILE > IMPORT. Active a opção Embed video.

Figura017 – Opções na importação de vídeo

No palco crie mais duas layers, uma para os botões e a segunda para
as actions. Ver figura 018.

No menu W INDOW > COMMON LIBRARIES > BUTTONS, seleccione da


categoria Playback um botão para parar o filme, um para retomar a ani-
mação e mais dois para recuar e avançar o filme frame-a-frame.
272 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura018

Seleccione a primeira keyframe da layer actions e active o painel


Actions (F9).
Na categoria actions escolha a opção movie control e a action stop.

stop();

De seguida, seleccione o botão que irá fazer a animação arrancar e es-


colha no painel ACTIONS > MOVIE CONTROL > PLAY.

Para o botão que pára o filme aplique de novo a action Stop.

Figura019 – Action Stop

Repare que nenhuma destas duas actions possui argumentos. Tanto a


action stop como a play actuam sobre a timeline em que estão
inseridas, mas não afectam directamente movie clips presentes dentro
da mesma. Assim, se existissem movies no palco nenhum seria afec-
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 273
tado pelas actions que acabamos de inserir, pois as timelines dos movie
clips são independentes da animação criada no palco.

Restam os botões para fazer o filme recuar ou avançar frame a frame.


Para estes utilizaremos a action goto, mas os parâmetros deverão ser
alterados. Assim, teremos:

Figura020 – Actions do filme

CRIAR LINKS PARA PÁGINAS HTML


Para criar um link para uma página HTML utilizamos a action GetURL. É
possível criar links relativos e absolutos, assim como passar variáveis,
no caso do envio dum formulário, através desta action.
Para criar um link num botão, seleccione o botão e aplique a action Get-
URL que se encontra na categoria ACTIONS > BROWSER NETWORK.

Figura021 – Action getURL


274 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Um link relativo liga o filme de Flash a uma página do nosso site. O


caminho deverá ser escrito usando a mesma notação do HTML.
Para uma página que se encontre na mesma pasta que o HTML que
contém o filme de Flash basta digitar o nome da mesma. Ver figura 022.

Figura022 – Aceder a uma página que se encontra na mesma pasta do filme em Flash.

Se esta se encontrar numa pasta diferente, o caminho deve ser digitado


desde a página HTML que contém o filme de Flash até à página do link.

Para recuar um nível utilizam-se dois pontos. Ver figura 023.

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

Figura024 – Action GetURL

Um link e-mail cria automaticamente uma nova mensagem no programa


de e-mail que estiver instalado no computador do utilizador, e preenche
o endereço de e-mail para onde será enviada a mensagem.
on (release) {
getURL("mailto: geral@centroatl.pt ");
}

Se pretendermos preencher também o assunto basta completar com:


on (release) {
getURL("mailto:geral@centroatl.pt?subject=Opinião");
}

Figura025 – Mensagem criada através do link e-mail


276 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

CARREGAR FILMES DE FLASH EXTERNOS


Num site totalmente em Flash, os filmes podem tornar-se muito exten-
sos e pesados. Nas animações mais complexas começa também a ser
difícil organizar todo o fluxo de trabalho por cenas e muitas vezes é ne-
cessário recorrer à separação do conteúdo em diversos filmes.

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.

Figura026 – Interface principal do filme

Para carregar filmes de Flash sobre outro filme é necessário que a


animação que vai ser carregada esteja já exportada em formato swf.
A animação que carrega os filmes secundários estará no nível inferior.
Cada nível só pode possuir um filme, logo, ao carregar um filme num
nível ocupado, a animação que lá se encontra é automaticamente remo-
vida.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 277

Figura027 - Carregamento de filmes swf

Os filmes secundário herdam do principal as seguintes características:

Velocidade – A velocidade do filme principal sobrepõe-se à das anima-


ções secundárias.
Dimensões – O canto superior esquerdo dos filmes secundários irá
coincidir com a coordenada (0,0) do filme principal. O restante será cor-
tado se estes forem maiores e nunca redimensionado.
Cor de fundo - Os filmes secundários irão possuir fundo transparente.
Para um fundo opaco devemos criar uma layer onde desenhamos um
rectângulo com a cor de preenchimento pretendida.

Para carregar um filme secundário vamos começar por exportá-lo para


o formato .swf através do comando FILE > EXPORT MOVIE. Tivemos o
cuidado de dar a este ficheiro a mesma dimensão do filme principal e de
construir a animação do lado direito para não interferir com a navega-
ção. Ver figura 028.
278 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura028 - Filme secundário

Guardamos este ficheiro na mesma pasta onde se encontra guardado o


filme principal, pois o caminho necessita de ser especificado na altura
do carregamento e é mais fácil se ambos se encontrarem na mesma lo-
calização.

Figura029 - Exportar o filme

De seguida seleccionamos o botão que vai efectuar o carregamento do


filme e no painel Actions escolhemos a opção ACTIONS > BROWSER/
NETWORK > LOAD MOVIE.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 279

Figura030 – Action Load Movie

Na opção URL digitamos o nome do ficheiro exportado anteriormente. O


nível deverá ser superior a 0 pois este é o do filme principal e se o man-
tivermos o filme principal desaparece para dar lugar ao filme secundá-
rio.

Figura031– Filme swf carregado sobre o principal

Qualquer outro filme que seja agora carregado em nível 1 fará automa-
ticamente a remoção do filme existente (clientes.swf ).

No caso de pretendermos remover um determinado filme, basta utilizar


a action UnloadMovie e referi-lo através do nível onde se encontra car-
regado.
280 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura032 – Remover um filme

CONTROLAR FICHEIROS EXECUTÁVEIS COM O


FSCOMMAND
O Flash exporta ficheiros executáveis para a criação de CD-ROMs inte-
ractivos. A action Fscommand permite aceder e alterar algumas carac-
terísticas nos ficheiros executáveis criados pelo Flash.
Para exportar um ficheiro executável seleccione a opção FILE > PUBLISH
SETTINGS e escolha a opção Windows Projector, no caso de pretender
um executável para correr em sistemas Windows ou a opção Macintosh
Projector, para ficheiros que correm em sistemas Apple. Para alterar o
nome que o programa atribui por defeito ao ficheiro inactive a opção
Use default Names.

Figura033 – Exportar um executável


II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 281
Normalmente são aplicadas à primeira keyframe do filme, mas estas
acções também podem ser associadas a botões ou movie clips.
No painel ACTIONS > BROWSER / NETWORK > FSCOMMAND aceda à caixa
Commands for standalone player e escolha uma das seguintes opções:

Figura034 – Comandos para standalone player

Fullscreen – O default é true. Se for igual a true o filme ocupará toda a


área do monitor do utilizador.
Allowscale –A janela do filme ao ser redimensionada, altera também as
proporções dos actores e imagens que fazem parte da animação. Na
opção false isto não acontecerá. O valor default é true.
Showmenu – Por defeito está activo, assim o utilizador ao fazer clique
com o botão direito do rato sobre o filme verá aparecer um menu de
atalho que lhe permite controlar várias opções no filme.

Figura035 – Showmenu
282 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Trapallkeys – Converte todos os eventos de teclado (KeyUp e Key-


Down) em eventos de movie clip (onClipEvent).
Exec – Executa outro ficheiro exe. O caminho para o ficheiro deve ser
especificado na caixa parâmetros.
Quit – Fecha a janela do projector.

Figura036 – Icon de projector

O ficheiro produzido pode ser aberto em qualquer computador, mesmo


que não possua o Player do Flash instalado.

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:

- As instâncias dos movie clips e botões podem possuir nomes.

Figura037- Nomear movies

- As timelines dos movie clips são independentes da timeline do filme


principal, ou seja, um filme pode estar parado, mas os movie clips po-
dem manter as suas animações.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 283
- Uma caixa de texto dinâmico ou input pode possuir nome. No entanto,
devemos ter em atenção uma diferença importante entre nomear a
instância de texto e atribuir-lhe um nome de variável.

Figura038 – Nome da instância de texto

Ao atribuir um nome de instância é possível aceder a métodos e propri-


edades da caixa de texto. Esta opção é portanto mais poderosa que a
atribuição do nome da variável à qual apenas podemos alterar o seu va-
lor.

Figura039 - Nome da variável de texto

Os símbolos podem estar incluídos dentro de outros símbolos, que por


sua vez podem possuir outros símbolos dentro das suas timelines.
A localização destes símbolos é dada por uma hierarquia em forma de
árvore para a qual os nomes das instâncias contribuem para identificar
a sua localização. Esta localização é conhecida por caminho (target
path) do movie clip.

Figura040 – Hierarquia dos símbolos


284 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Para nos referirmos aos métodos de um objecto a forma é análoga à


utilizada para as instâncias. Os métodos possuem argumentos ou parâ-
metros, que são suportes para valores transportados para o método.
Estes argumentos seguem o nome do método entre parêntesis, utilizan-
do a sintaxe nomedométodo (argumentos).

Para utilizar a dot sintax na referência a um método de um objecto, será


preciso primeiro referenciar o nome do objecto (ou o caminho de um
movie clip) seguido de um ponto e de seguida o método.
Para referenciar o método (play) de um movie clip (boneco) utilizando a
dot sintax:

boneco.play()

ATRIBUIR NOMES A INS TÂNCIAS DE MOVIE CLIPS OU


BOTÕES

Para ser possível


fazer referência a
um movie clip ou
botão é necessário
que a instância
possua um nome.
Para atribuir este
nome basta
seleccionar a
instância e no painel
PROPERTIES
preencher o campo
instance name.

Figura041 – Atribuir um nome a um movie clip


II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 285
CAMINHOS RELATIVOS E ABSOLUTOS
Tal como já foi referido no primeiro capítulo desta segunda parte do
livro, existem duas formas de fazer referência ao target path (caminho)
dum movie clip. Através de referências absolutas e relativas.

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()

Ao utilizar este método a action pode ser dada de qualquer timeline no


filme, pois o Flash espera encontrar no palco uma instância com o nome
modelo e apenas actuará sobre esta.

Figura042– Target path absoluto

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

Figura043 – Target path relativo

Ainda no método relativo surge-nos a referência this que simboliza a


timeline em que estamos. Se estivermos na timeline modelo e nos qui-
sermos referir a ela no código bastará escolher a opção this ou deixar o
campo target em branco.

Figura044 – Movie clips dentro de outro movie clip

CONTROLAR INSTÂNCIAS DE SÍMBOLOS


Utilizando a dot sintax e os target paths conseguimos não só associar
actions a instâncias, mas também alterar as suas propriedades e aceder
aos seus métodos.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 287
No exemplo seguinte iremos criar uma simples interface com quatro
botões, para controlar um movie clip (pacman).
Comece por criar o movie clip do pacman com duas frames , para pro-
duzir a animação do abrir e fechar da boca do elemento.

Figura045 – Animação do movie clip pacman

Crie de seguida um botão (seta) para a interface. Deste símbolo aplica-


remos quatro instâncias, que serão rodadas no palco uma para cada di-
recção do movimento do personagem.
Vamos começar por criar a action que rodará o movie na direcção dese-
jada. Para tal, basta-nos controlar a propriedade _rotation.

No palco atribua um nome à instância do pacman e seleccione no painel


ACTIONS > PROPERTIES > _ROTATION .

Para completar o comando


faça clique na linha de
código e complete com o
nome do movie clip, seguido
de um ponto. Ver figura 046.
Para os restantes valores
complete as actions
mudando apenas o valor da
rotação do movie clip.
Figura046 – Valores de rotação para as setas
288 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

PROPRIEDADES DOS MOVIE CLIPS


_alpha – Altera a transparência das instâncias. Assume valores entre 0
e 100, em que o valor 0 simboliza a transparência máxima da instância.

Figura047 – Alpha 100 e alpha 50

_currentframe – Simboliza a frame actual onde a animação da instân-


cia se encontra.
_droptarget – Representa a posição onde a instância é largada no caso
de estar a ser usada a action startdrag.
_focusrect – Determina se um movie clip possui um rectângulo amarelo
à sua volta no caso do utilizador navegar na animação com a tecla TAB.
_framesloaded – A quantidade de frames já carregados da instância.
_height – Altura em pixéis de uma instância.
_name – Nome da instância.
_quality – Qualidade com que é exibida determinado movie clip. Os va-
lores possíveis são:
LOW – Gráficos apresentam-se sem anti-aliasing.
MEDIUM – Gráficos com anti-alising utilizando uma grelha de 2 x 2
pixéis, mas os bitmaps não possuem suavização. Ideal para filmes
sem texto.
HIGH – Boa qualidade. Gráficos com anti-alising utilizando uma
grelha de 4 x 2 pixéis, e os bitmaps são suavizados se a animação
estiver parada. Esta é a qualidade por defeito do Flash.
BEST – Muito boa qualidade. Igual à qualidade high, mas os bit-
maps estão sempre suavizados.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 289

Figura048 – Low quality vs High Quality

_rotation – Valor da rotação de uma instância.

Figura049 - Propriedade Rotation

_soundbuftime – Tempo em segundos antes do filme começar uma


animação stream.
_target – Retorna o valor do target path do movie clip.
_totalframes – Devolve o número total de frames de um movie clip.
_url – Dá o endereço URL do filme SWF de onde o movie clip fez down-
load.
_visible – Visibilidade da instância. Quando o seu valor é false a instân-
cia ficará invisível, no caso de true a instância fica visível. Por defeito, o
valor está configurado para true.
_width – Largura dada em pixéis de uma instância.
_x – Coordenada do centro de um movie clip visualizada na régua
horizontal do Flash. De notar que a coordenada (0,0) no palco é o canto
superior esquerdo, enquanto que dentro de um movie clip é o centro do
mesmo.
290 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

_xmouse – Coordenada do ponteiro do rato no eixo x.


_xscale – Valor em percentagem da largura dum movie clip.
_y – Coordenada do centro de um movie clip visualizada na régua verti-
cal do programa.
_ymouse – Coordenada do ponteiro do rato no eixo y.

Figura050 - _xmouse e _ymouse

_yscale – Valor em percentagem da altura dum movie clip. O valor 100


representa a dimensão do movie clip que se encontra na biblioteca.

Figura051 - _xscale e _yscale

MÉTODOS MAIS UTILIZADOS NOS MOVIECLIPS

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.

Figura052– Método startDrag

A opção Lock mouse to Centre coloca o centro da instância a coincidir


com o ponteiro do rato. Se não especificarmos Target este será inter-
pretado com aquele onde a action está a ser aplicada.

Para restringir o movimento a uma área mais pequena, utilize a opção


Constrain to rectangle.

Figura053 – Constrain to rectangle

No entanto, na maior parte das vezes pretendemos ter o controlo total


sobre a instância e a possibilidade de a posicionar algures no palco.
292 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Para esta situação teremos de aplicar o método stopDrag, mas que


apenas será chamado quando o utilizador soltar o botão 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.

Seleccione o botão dentro do movie e escolha ACTIONS > MOVIE CLIP


CONTROL > STARTDRAG.

Figura054 – Actions para drag and drop do movie clip

O botão que colocamos dentro do movie clip possuirá então a progra-


mação para arrastar e largar a instância, mas em eventos diferentes.
Ver figura 054.

Não é necessário especificar Target pois como o botão está dentro do


movie clip este é automaticamente assumido como o movie que deve
ser arrastado. A instância do movie clip é colocada no palco e estará
pronta a funcionar.

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.

Começamos por nomear o movie clip no palco, através do painel


PROPERTIES.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 293

Figura055 – Nomear o movie clip

De seguida para testar seleccionamos o primeiro keyframe da timeline


no palco e aplicamos a action MOVIE CLIP CONTROL > DUPLICATE
MOVIECLIP.

Nos parâmetros atribuímos o nome do movie a ser duplicado, o nome


do novo movie clip e a profundidade (depth) onde será duplicado. Ape-
nas pode existir um movie clip por profundidade.
Como o duplicado fica sobre o original, usaremos a propriedade _x para
mover o segundo movie para a direita.

Figura056 – Duplicar movies

Para remover movie clips criados através do método Duplicate-


MovieClip, aplicamos o método RemoveMovieClip onde só é necessário
indicar o nome do movie que pretendemos remover.

removeMovieClip("sol2");

Como exemplo vamos criar um simples mouse trail.


294 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura057 – Mouse Trail

Na biblioteca criamos um movie clip para servir de rasto para o ponteiro


do rato. Este movie pode conter uma animação simples.

Colocamos uma instância no palco e atribuímos-lhe um nome. Vamos


chamar-lhe rasto.

Figura058 – Rasto do ponteiro do rato

Na primeira keyframe do palco vamos inserir a programação. Criamos


duas variáveis: n e novonome .
n – Variável de incremento

n++;

novonome – Parte do nome dos movie clips duplicados. Possuirão


nomes do tipo rasto1, rasto2 e assim sucessivamente.

novonome = "rasto" + n;

Começamos por arrastar o movie rastro.

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

Figura058 – Duplicar o movie

Como não queremos mais de seis movies atrás do ponteiro começamos


a remover todos os movies anteriores.

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.

Figura059 – Script completo

LoadMovie e Unload Movie

Estes dois métodos são especialmente importantes quando preten-


demos carregar um filme de Flash externo ou um ficheiro de imagem
jpeg numa determinada localização do filme principal.
Tal como foi referido no capítulo anterior, nas actions LoadMovie e
UnloadMovie um filme carregado sobre a animação principal fica sem-
pre encostado ao canto superior do filme principal. A solução para o
colocar noutra posição do palco é utilizar um movie clip como referência
e carregá-lo para dentro deste.
Imagine por exemplo que na animação principal possui um televisor
com vários botões, cada um deles irá carregar uma animação diferente.
296 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura060 – Filme Principal

Depois de criar as animações secundárias com a dimensão do monitor


do televisor, exportamos cada uma delas para formato swf.
No nosso caso chamamos ao filme secundário exportado
programa1.swf .
No filme principal vamos criar um movie clip na biblioteca com nome
ecrã, mas completamente vazio. Este filme só vai servir de referência
para posicionar o filme que iremos carregar.

Figura061 - Filme secundário

De seguida posicionamos o movie no palco sobre o televisor, tendo em


atenção que quando carregados sobre um movie clip os filmes apare-
cem com o seu canto superior esquerdo posicionado no centro do
movie clip, ou seja na coordenada (0,0). Assim, colocando o centro do
movie clip no canto do televisor, sabemos que coincide com o canto
superior esquerdo do filme que vai ser carregado.

Figura062 – Posicionar o movie clip


II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 297

Agora falta atribuir um nome à instância do ecrã através do painel


PROPERTIES. Vamos chamar-lhe ecrã.
Com um dos botões seleccionados, aplique do painel actions em
OBJECT > MOVIE > MOVIECLIP > METHODS > LOAD MOVIE.

Figura063 – Aplicar o método loadMovie

Em objecto digitamos o nome da instância e nos parâmetros o nome do


movie clip ou imagem jpeg que iremos carregar (este nome deve estar
entre aspas).
Os restantes filmes deverão ser carregados da mesma forma. Ao fazer
clique noutro botão, outro filme é carregado e substitui o filme que se
encontra dentro do movie no momento.

Figura064 – Resultado Final

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

principal enquanto este carrega. Normalmente são aplicados preloaders


a filmes com mais de 50 Kb.

GetBytesLoaded – Número de bytes carregados


GetBytesTotal – Número total de bytes do filme (inclui todas as cenas).

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.

Começamos por criar uma nova cena no filme. Seleccione no menu


INSERT > SCENE.

A cena de preload deve ser a primeira do filme. Para alterar a ordem


das cenas escolha no menu W INDOW a opção SCENE. Arraste a cena do
preload de modo a ser a primeira cena do filme.

Figura065 – Painel Scene

Na primeira cena criamos uma pequena animação e inserimos uma


caixa de texto dinâmico à qual atribuímos o nome percentagem no
painel PROPERTIES e que vai mostrar a percentagem de filme carregado.

Figura066 – Atribuir nome à caixa de texto


II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 299
Criamos também um novo layer para conter a programação do
preloader, e na primeira keyframe desta layer vamos inserir a seguinte
programação.

Figura067 – Actions do primeiro frame do preload

_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.

Dividimos o número de bytes carregados, pelo número total de bytes do


filme e multiplicamos por 100 para obter um valor em percentagem.
Para que o valor seja um número inteiro aplicamos o método
Math.Round a envolver todo o código.

percentagem = percent + "%" - Atribuímos o resultado à caixa de texto


dinâmico “percentagem” e acrescentamos o caracter %.

Figura068 – Caixa de texto dinâmico no palco e em teste


300 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Finalmente testamos o valor da variável “percent” e se este for igual a


100 o filme avança para a próxima cena. Caso contrário prossegue nes-
ta cena. Daí que seja necessário incluir mais uma keyframe com uma
action que obriga a animação a regressar até à frame 1 da cena do pre-
load, senão saltaria antes de tempo para o filme.

Figura069 – Actions do primeiro frame do preload

Para testar o filme seleccione a opção CONTROL > TEST MOVIE e de


seguida na janela de teste, escolha a opção VIEW > SHOW STREAMING.
II.4 ESTRUTURAS AVANÇADAS DE
PROGRAMAÇÃO

SINTAXE DO ACTIONSCRIPTING
Chavetas { }
São utilizadas para agrupar blocos de código relacionado.

on (release) {
play();
}

Ponto e vírgula (;) – Todas as declarações terminam desta forma,


embora o Flash consiga interpretar e completar o script sem a sua
presença, é boa prática utilizá-los. Também pode utilizar o botão auto-
format do painel Actions para acrescentar estes caracteres automatica-
mente, desde que o código não contenha erros de sintaxe.

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.

function empregado (nome, idade){


...
}

Permitem também alterar a ordem de precedência do actionscriptig e


ainda facilitar a leitura do código.
302 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Tem o poder de avaliar uma expressão no lado esquerdo dum ponto na


dot sintax. Por exemplo, no script seguinte os parêntesis permitem
avaliar o new Cor(this) e criar um novo objecto de cor.
onClipEvent(enterFrame) {
(new Cor(this)).setRGB(0xffffff);
}

Caso contrário seria necessário utilizar o seguinte script para determinar


o valor e criar o objecto:

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.

break else instanceof typeof


case for new var
continue function return void
default if switch while
delete in this with

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

Figura070 – Comentários no código

Variáveis

Uma variável é um contentor de informação. Essa informação pode ser


alterada durante a animação, tanto para gravar informação acerca do
utilizador como por exemplo para guardar valores à medida que o filme
muda. Aconselha-se a iniciar o valor duma variável antes de a utilizar.
Os nomes das variáveis não podem ser palavras reservadas ou valores
booleanos como true e false e devem ser nomes únicos no scope (es-
paço) de modo a evitar colisões.

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.

O data type primitive engloba as categorias number, string e boolean,


enquanto os reference data types são object e movieclip. Existem ainda
dois tipo especiais de data types: null e undefined.

O tipo de dados de uma variável afecta o modo como uma variável


muda o seu valor quando associada a um script.
304 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Number: Um número pode ser manipulado utilizando operadores


aritméticos como a adição (+), subtracção (-), multiplicação (*), divisão
(/), modulo (%), incremento (++) e decremento (- -).

String: Uma sequência de caracteres tais como letras, números e


pontuações. Em actionscripting cria-se uma string envolvendo um
determinado valor em aspas. Assim, o seu valor é tratado como caracter
e não como uma variável. O operador + passa a actuar como união en-
tre as duas variáveis.

nome= “Ana” + apelido

Boolean: Um valor que pode ser apenas true ou false.

If (utilizador==true && password==true){



}

Object: Uma colecção de propriedades. Cada propriedade tem um


nome e um valor. O valor pode ser qualquer tipo de dados e os objectos
podem estar contidos dentro de outros.

Por exemplo, para aceder à propriedade da visibilidade de um movie


clip, teremos:

carro._visible

movieclip: Um apontador a um símbolo movie clip que permite controlar


os seus métodos.

movie.startDrag(true);

Null: Apenas possui o valor null, que simboliza que a variável está vazia.

Undefined: Tal como o null apenas possui um valor, o undefined,


significa que ainda não lhe foi atribuído nenhum valor.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 305

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

Para declarar variáveis de timeline, basta utilizar o comando set variable


ou apenas indicar o nome da variável e usar o sinal de igual para atri-
buição do seu valor.

X=20

No caso da declaração de uma variável global o nome desta deve ser


antecedido do identificador _global.
306 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

_global.time=0

No exemplo seguinte possuímos um filme com duas cenas. O utilizador


tem de digitar o seu nome antes de entrar na segunda cena.
Ao fazer clique no botão de entrada o seu nome aparece numa caixa de
texto com uma saudação.
Na primeira frame da primeira cena (entrada) do filme colocamos uma
action Stop() de modo a que o filme permaneça parado até o utilizador
premir o botão de entrada.

Figura071 – Interface

A caixa de texto é do tipo input, para permitir ao utilizador digitar


valores. No painel properties atribuímos um nome à variável, à qual
chamamos “utilizador”.

Figura072 – Atribuir nome à variável


II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 307

Na segunda cena do filme (filme), colocamos também uma action stop(),


logo no início de modo a que o filme fique parado na primeira frame.
Desenhamos uma caixa de texto dinâmico à qual atribuímos um nome
(user).
De seguida seleccionamos o botão da cena entrada e atribuímos as
seguintes actions.

Figura073 – Actions do botão

Foi atribuída à variável user que aparece na cena filme o valor da


variável utilizador da cena entrada, e concatenada com o texto entre as-
pas através do operador +.

Figura074 – Resultado
308 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

TESTAR O VALOR DAS VARIÁVEIS


Para testar o valor duma variável utilize a action Trace (ACTIONS >
MISCELLANEOUS ACTIONS > TRACE ) para abrir uma janela de output
sempre que o filme for testado e mostrar o valor da variável que digitar-
mos entre parêntesis.

pontos = pontos+1;
trace(pontos);

Uma forma alternativa de testar os valores das variáveis é utilizar o


Debugger. Para visualizar o debugger basta testar o filme através do
comando CONTROL > DEBUG MOVIE.
Este comando além de testar o filme abre o painel Debbuger onde basta
seleccionar o separador Variables e escolher o nível do filme ou o movie
clip onde se encontra a variável.

A animação surge sempre parada no início. Para começar basta clicar


sobre o botão play para dar início ao filme.

No separador PROPERTIES é possível ainda observar as propriedades


da _root ou do movie clip que se encontrar seleccionado acima.
O separador variables mostra as variáveis criadas no filme e os seus
valores.

Figura075 – Painel Debugger


II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 309

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.

Prioridade dos operadores


Em qualquer cálculo, o operador de multiplicação (*) e divisão (/)
possuem prioridade sobre a soma (+) e a subtracção (-). No entanto, se
uma determinada operação for envolvida em parêntesis, terá prioridade
sobre as restantes.

pontos= 7 + 3 * 2

O resultado da operação é 13. Primeiro é calculada a multiplicação e só


depois será efectuada a soma.

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.

< Menor que


> Maior que
<= Menor ou igual a
>= Maior ou igual a

If (n>=1) {
gotoAndPlay (10);
}

Operadores de string
Efectua a concatenação entre duas ou mais strings.

“Joana” + “ “ + “Nunes” o resultado é Joana Nunes

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

If (nome==”Cristina” && idade>25) {


gotoAndStop(2);
}

Operadores de igualdade
Determina se dois valores ou identidades são iguais. O valor devolvido
é booleano.

== igualdade
=== estritamente igual
!= diferente de
!== estritamente diferente

O operador === (estritamente igual) é semelhante ao operador de


igualdade, mas não efectua conversão do tipo de dados. Assim, se os
operandos forem de tipos diferentes, o resultado obtido será false.

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

Vamos voltar ao exemplo do pacman que já tínhamos colocado a mudar


de direcção através da propriedade _rotation.

Agora para o movimento vamos acrescentar uma linha para incrementar


o valor da deslocação do movie clip em 10 pixéis, sempre que o utiliza-
dor fizer clique numa seta de direcção. Para tal vamos utilizar os opera-
dores de atribuição.

Figura078 - Operadores de 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.

Começamos por acrescentar na primeira cena uma nova caixa de texto


dinâmico, à qual chamamos mensagem.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 313

De novo no botão apagamos as actions anteriores e vamos à categoria


ACTIONS > CONDITIONS/LOOPS > IF e dentro das aspas digitamos a se-
guinte condição:

if (utilizador==null){
}

De seguida, na categoria ACTIONS > VARIABLES > VAR, vamos igualar a


variável “mensagem” ao texto que irá aparecer se o utilizador não digitar
nada no nome.

var mensagem= "Preencha o nome de utilizador";

De novo na categoria ACTIONS > CONDITIONS/LOOPS > ELSE, iremos


introduzir o código no caso de o utilizador realmente preencher o campo
do nome.

else {
}

Todas as instruções que seguirem a condição else serão executadas só


no caso de preenchimento do campo utilizador.
Como pretendemos que o filme passe para a segunda cena da anima-
ção, teremos a action:

gotoAndPlay(“filme”,1);

Para preencher o campo User com o nome introduzido, basta:

User=”Benvindo(a), ” + utilizador;
314 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura079 – Código do botão de entrada

Vamos elaborar mais um pouco o exercício atrás referido, pois agora o


teste será feito não só ao nome do utilizador, mas também irá verificar
se a password introduzida está correcta. Inserimos mais uma variável
de texto no palco à qual demos o nome de password e atribuímos o tipo
password no painel PROPERTIES.

Figura080

O botão de entrada deverá agora possuir um teste a duas variáveis que


serão unidas pelo operador e (&&).

Este operador vai fazer com que seja necessário que ambas as variá-
veis devam estar correctas para o utilizador entrar na página.

Se em vez do operador (e) && estivesse o operador (ou) || bastava uma


das caixas estar correcta para o utilizador entrar na cena 2.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 315

Figura081 – Programação do botão de entrada

Para completar a programação pretendemos que no caso de erro, para


além da mensagem, os campos sejam limpos e o cursor volte ao campo
utilizador. Isto será feito através da atribuição do valor undefined a ca-
da um dos campos. Para o cursor aparecer a piscar no campo utiliza-
dor, usamos o método setFocus do objecto selection. Assim o código
ficará:

Figura082

A condição IF também pode ser utilizada para testar as propriedades


dos movie clips. Por exemplo, ao testar a propriedade _droptarger
316 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

conseguimos determinar se um movie clip foi largado não sobre outro


movie clip.

No exemplo seguinte vamos simular um site de compras, em que o


utilizador tem de arrastar diversas frutas para dentro de um saco que irá
incrementar uma variável (total).

Figura083- Interface

Para as frutas criamos primeiro um botão (fruta), o qual colocamos de


seguida dentro de um movie clip. Dentro do movie clip o botão possui a
seguinte programação para arrastar o movie.

Figura084
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 317

Depois de colocar as várias instâncias no palco, criamos também um


movie clip (saco) para onde estas serão arrastadas.
Atribuímos nome ao movie clip e iremos agora acrescentar ao movie
clip da fruta o código para testar a posição em que é largado.

Figura085

Seleccionamos a linha 5, e vamos continuar a programação a partir


deste ponto, no painel ACTION > CONDITIONS / LOOPS > IF. Para condição
digitamos:

eval (this._droptarget) == _root.saco;

A função eval é necessária neste caso, para converter o resultado da


expressão this._droptarget, que obtém um valor em slash sintax
(/saco). O eval converte este valor para dot sintax (_level0.saco).
Dentro da condição if fazemos desaparecer o movie arrastado e incre-
mentamos uma unidade à caixa de texto total.

Figura086 – Programação do movie maçã


318 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Vamos agora optimizar o código do filme. Se for necessário aumentar o


número de tipos de fruta na animação, cada novo botão terá a progra-
mação apresentada na figura 086.

Como a programação é exactamente igual para todos os botões, vamos


criar um ficheiro de texto com o código actionscripting.
Abra o bloco de notas e cole o código da figura 086.

Figura087 – Ficheiro de texto

De seguida guarde o ficheiro na mesma pasta do filme, com extensão


.as .

Figura088 – Gravar o ficheiro

Na biblioteca edite o movie clip da laranja e seleccione o botão.

Para aceder ao ficheiro externo basta digitar #INCLUDE DROP.AS. Nas


actions encontra-se em MISCELLANEOS ACTIONS.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 319

A action #include permite aceder a um ficheiro externo de action-


scripting, desde que este tenha sido gravado com a extensão .as . Ver
figura 089.

Figura089 – Action #include

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.

Temos duas caixas de


texto: A “quantidade”
onde introduzimos
previamente o valor 0
e que é do tipo input e
o “preco” que é uma
caixa de texto
dinâmica.

Figura090
320 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Seleccione o botão para cálculo do total e active o painel actions. Na


categoria ACTIONS > CONDITIONS/LOOPS > SWITCH. Dentro dos parênte-
sis coloque o nome da variável que vai ser testada (quantidade). Esta
variável deve ser numérica; logo, para garantir que o Flash a interpreta-
rá deste modo colocamos o seu nome dentro da Função Number.
Na linha seguinte escolha no painel ACTIONS > CONDITIONS/LOOPS >
CASE, onde teremos de prever todos os valores possíveis. Assim, no có-
digo, obtemos:

Figura091 – Script completo

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

No exemplo seguinte iremos criar um pequeno programa, do tipo


totoloto, que gera seis números aleatórios quando o utilizador prime um
botão. No palco estão seis caixas de texto dinâmico, cada uma com os
nomes n1 até n6.

Figura092 - Interface do programa

No botão vamos introduzir um ciclo que gera números aleatórios até um


máximo de seis e preenche as respectivas caixas.

No painel actions seleccione a categoria CONDITIONS / LOOPS > FOR .

Figura093 – Ciclo For

Parâmetros do ciclo For:


Init – O valor onde se irá iniciar o ciclo.
322 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Condition – A condição que será testada antes de cada loop para


saber se é verdadeira ou falsa. O loop terminará quando esta condição
for falsa.
Next – A expressão que será avaliada depois de cada loop. Normal-
mente o incremento ou decremento do valor dado no parâmetro init.

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.

Figura094 – Método 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.

Supondo que pretendemos criar um menu dinâmico, que vai buscar as


opções a um ficheiro de texto externo. Estas opções podem variar, con-
soante o utilizador introduza ou apague no ficheiro de texto as variáveis.

Começamos por criar o ficheiro de texto com quatro variáveis.

Figura096 – Ficheiro de texto

No filme de Flash criamos um botão para as opções do menu e colo-


camos este botão dentro de um movie clip ao qual adicionamos uma
caixa de texto dinâmico.
324 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura097- Botão dentro do movie clip

Atribuímos um nome à instância da caixa de texto e desligamos a opção


selectable.

Figura098 – Nome da instância da caixa de texto

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

No primeiro keyframe do palco iremos carregar as variáveis do ficheiro


de texto e esconder o movie clip opcao1. Depois de seleccionar o key-
frame escolhemos no painel actions a categoria BROWSER / NETWORK >
LOAD VARIABLES.

Figura100 - LoadVariables

Nos parâmetros em URL digitamos o nome do ficheiro de texto, que por


se encontrar na mesma pasta do filme não é necessário indicar um ca-
minho relativo apenas o nome do ficheiro basta.

Location – Escolhemos Target e digitamos o valor _root, ou seja a ti-


meline principal irá receber as variáveis do ficheiro externo.
Acrescentamos uma linha para tornar o movie invisível. Fazemos isto
através da propriedade _visible.

Figura101 – Actions primeira da keyframe do palco

Neste momento já podemos testar o filme e verificar no debbuger se as


variáveis estão a ser carregadas para o filme. Utilizamos o comando
CONTROL > DEBUG M OVIE, premimos o botão play na janela do debugger
e ao seleccionar a opção _level0 e o separador variables, já devem
aparecer os valores que se encontram no ficheiro de texto externo.
326 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura102 – Fazer Debug do filme

De seguida seleccionamos o botão que vai activar o menu e nele vamos


colocar a programação para gerar as opções do menu.
Começamos por atribuir à caixa de texto do primeiro movie, que já está
no palco o valor da primeira variável do ficheiro de texto. Ao mesmo
tempo tornamos este movie visível de novo.

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;

Começamos o ciclo while que irá correr enquanto a condição for


verdadeira. Ou seja, enquanto as opções forem diferentes de null.

while (eval("op"+i) != null)


II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 327

A função Eval utilizada nesta condição permite-nos obter o valor da


variável que queremos preencher, através do cálculo da expressão que
se encontra entre parêntesis.

Figura103- Programação do botão menu

Dentro do ciclo while, duplicamos o movie clip. Na linha 7 deslocamos


os botões adicionando-lhes o valor da altura do movie e multiplicando
pelo i -1 (não esquecer que o primeiro valor de i é 2, dai subtrair-mos
uma unidade).

Finalmente, atribuím os a cada caixa de texto o valor da variável respec-


tiva e incrementamos o i.
Para alterar o conteúdo e o número de opções o utilizador só tem de
editar o ficheiro texto.txt

Figura104 – Menu gerado dinamicamente


II.5. FUNÇÕES

As funções são pedaços de código reutilizável. Quando se utiliza uma


função é possível passar uma série de argumentos para dentro dela e
retornar um valor.

O Flash possui algumas funções que já fazem parte da sua


programação e que podem ser utilizadas sem ser necessário o utilizador
defini-las.

Boolean getVersion parseInt


escape isFinite String
eval isNaN targetPath
getProperty Number unescape
getTimer parseFloat

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”;

resultado = eval (“produto”+n);

Assim, se n=1, o resultado será mel, mas se n=2, o resultado será


açúcar. O Eval avaliou a expressão “produto”+n e ao obter o valor de n
concatenou-o com a palavra produto para extrair o seu valor.

No caso da utilização da propriedade _droptarget a função eval é


utilizada pelo Flash para converter o nome de um movie clip em notação
slash sintax para a notação dot sintax. Ver figura 086.
330 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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()

Figura106 – Função GetVersion

As funções são bastante semelhantes às variáveis, pois estão


associadas à timeline do movie clip onde foram definidas e é necessário
aceder-lhes através de um target path (caminho).
II.5. FUNÇÕES 331

Também é possível definir funções globais através do identificador


_global.

_global.funcao = function (z) {


return (z*5)-1;
}

Função boolean

Converte uma expressão num valor Booleano. O valor retornado depen-


de do tipo de expressão.

Se a expressão é um valor booleano, o valor devolvido é “expression”.


Se a expressão é um número, o valor devolvido é “true”, caso o número
não seja 0. O valor zero devolverá “false”.
Se a expressão é uma string, o método toNumber é invocado para con-
verter a string num valor numérico. Se o resultado for diferente de zero
é retornado true, caso o resultado seja zero, o valor é igual a false.
Se a expressão é undefined o valor devolvido é false.
Se a expressão é um movie clip ou um objecto, o valor devolvido é true.

Boolean (expressão)

Função string

Converte uma expressão numa string.

String (expressão)

Se a expressão é um valor booleano, a string devolvida é true ou false,


consoante o valor booleano apresentado pela expressão.
Se a expressão se tratar de um número, o valor devolvido é uma repre-
sentação em texto do valor numérico que era o resultado da expressão.
Se a expressão é uma string o valor devolvido é expression.
Se a expressão é um movie clip, valor é o target path para o movie clip
em slash Sintax (/).
332 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Se a expressão é undefined o valor devolvido é o de uma string vazia


(“”)

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

Devolve o valor de uma propriedade de um movie clip. O código


seguinte devolve o valor da coordenada y de um movie clip chamado
carro.

carro_y = getProperty(_root.carro, _y)

Função targetPath

Devolve uma string contendo o target path (caminho) do movie clip.


Este caminho é dado utilizando a dot syntax.

targetPath(this)

Função unescape

Função que avalia um parâmetro como string, e descodifica-o de forma-


to URL-encoded para uma string. Efectua o processo inverso da função
Escape. Todas as sequências hexadecimais são convertidas numa
string.
unescape(parametro)
II.5. FUNÇÕES 333

Função isFinite

Avalia uma expressão e devolve o valor true se o resultado for um nú-


mero finito e false se o resultado for infinito.
isFinite(expressão)

Função isNaN

Avalia um parâmetro e devolve o valor true se o resultado não for numé-


rico, indicando que estamos na presença de um erro matemático.
isNaN("carro")
// devolve true

Função parseFloat

Converte uma string num número de vírgula flutuante. Se a string não


começar por um número que possa ser convertido, a função devolve o
valor NaN. Espaços que precedem números inteiros válidos são ignora-
dos.
parseFloat("-5") devolve -5

parseFloat("2.5") devolve 2.5

parseFloat("3.5e6") devolve 3.5e6, ou 3500000

parseFloat("chocolate") devolve NaN

parseFloat(" 5.1") devolve 5.1

parseFloat("3.75relógio") devolve 3.75

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

Espaços em branco que antecedam valores inteiros válidos são ignora-


dos assim como outros caracteres especiais.

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)

// devolve 10 (a representação binária de 1010)

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

Figura107 – Definir uma função


II.5. FUNÇÕES 335

Depois surgem os nomes dos argumentos a ser passados que apa-


recem listados entre parêntesis. Os nomes dos parâmetros são separa-
dos por vírgulas.

function calcTotal (preco, iva)

A seguir basta digitar entre chavetas o código da função.

function calcTotal (preco, iva) {


// o código da função aparece aqui
}

A outra parte especial duma função é a acção return, que notifica a


função para terminar e retornar um certo valor para o código que cha-
mou a função.

function calcTotal (preco, taxa) {


return (preco, iva);
}

Para chamar a função é necessário escrever algo semelhante a:


calcTotal(50, 1.7);

Vamos criar uma pequena função para converter valores de escudos


para euros.
Criamos duas caixas de texto. A caixa para os escudos (escudos) será
do tipo input, enquanto que a que vai apresentar a conversão em euros
(euros) será dinâmica.

Figura108 – Interface

Na primeira keyframe do filme vamos criar a função. Escolha no painel


ACTIONS > USER DEFINED FUNCTIONS > FUNCTION . Defina o nome da
função e o parâmetro que vai ser necessário (escudos).
336 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

De seguida seleccione na mesma categoria a action Return.

Figura109 – Definir a função

Agora basta associar ao botão que vai efectuar o cálculo a chamada da


função:

Ao introduzir um valor o utilizador preenche o parâmetro necessário


para a função efectuar o cálculo. O valor de seguida é devolvido para
dentro da variável euros.

Figura110 – Actions do botão


II.6. OBJECTOS

Os objectos são blocos de código designados para desempenhar deter-


minadas tarefas. Cada objecto possui propriedades que podem ser ma-
nipuladas. Estas propriedades são na realidade variáveis. Para além
das propriedades, os objectos possuem ainda métodos que lhes permi-
tem desempenhar determinada função. A grande vantagem dos objec-
tos é a sua reutilização. As linguagens orientadas por objectos, como o
Actionscript, vêm já com alguns objectos incorporados.

Os objectos no Flash MX estão divididos em quatro categorias:

Objectos nucleares (core) que são também comuns à especificação


ECMA – Array, Boolean, Date, Function, Math, Number, Object e String.

Objectos de Movie que são característicos do Actionscript -


Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selec-
tion, Sound, Stage, System, TextField e TextFormat

Objectos Client / Server que são também específicos do Actionscript e


que permitem comunicar entre cliente e servidor - LoadVars, XML, e
XMLSocket.

Objectos Authoring que permitem configurar o Flash - CustomActions


e Live Preview.

Aceder às propriedades de um objecto


Para aceder às propriedades de um objecto utiliza-se o ponto (.) como
operador. O nome do objecto surge do lado esquerdo separado pelo
ponto e o nome da propriedade que pretendemos aceder.
338 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Object.name

Para associar uma propriedade a um objecto utiliza-se a action Set


Variable.

Objecto.name = “Helena”;

Invocar o método de um objecto


O operador ponto (.) também permite aceder aos métodos de um deter-
minado objecto. No exemplo seguinte chamamos o método setRGB
para o objecto Color.

onClipEvent (load) {
myColor = new Color(this);
myColor.setRGB(0xFF66FF);
}

Objectos da categoria core

UTILIZAR O OBJECTO DATE


Objecto que constrói uma nova data e/ou hora capturada através da
data e hora do computador do utilizador.

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

Coloque uma instância do movie clip no palco e atribua-lhe as seguintes


actions:

Figura112

Criamos uma nova variável e atribuímos-lhe o valor da data corrente


através do objecto OBJECTS > CORE > DATE. Basta agora passar os
parâmetros da data que necessitamos para dentro da caixa de texto do
movie clip, utilizando os métodos getHours, getMinutes e getSeconds.

UTILIZAR O OBJECTO ARRAY


Um array é um objecto cujas propriedades podem ser acedidas através
de um número que determina a sua posição no array. O primeiro ele-
mento de um array é sempre o zero, o seguinte o 1 e assim sucessiva-
mente.

Para definir os valores de um array utiliza-se o operador [ ] no qual se


envolve o número do elemento a que se pretende aceder.
Por exemplo, o seguinte array possui quatro valores, associados a cada
um dos números do array. O array deve ser sempre iniciado com o
construtor new Array().

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

Para atribuir um valor do array basta simplesmente igualar o nome de


uma variável a um dos elementos do array.
n=novoArray[2];

Vamos agora completar o exemplo do relógio acrescentando mais um


movie clip para conter a data completa. Dentro deste movie clip está
outra caixa de texto à qual demos o nome de data_txt. Na primeira key-
frame do filme criamos dois novos arrays.

Figura113 – Criar os arrays

Para a instância do movie clip que irá conter a data, teremos:

Figura114 – Actions da instância

UTILIZAR O OBJECTO MATH > MÉTODO MAX


Devolve o maior valor de dois valores ou resultados de expressões nu-
méricas.

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

UTILIZAR O OBJECTO MATH > MÉTODO MIN


Devolve o menor valor de dois valores ou resultados de expressões nu-
méricas.

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.

UTILIZAR O OBJECTO MATH > MÉ TODO PI


Constante matemática equivalente ao valor do Pi, ou seja,
3.14159265358979... .

Math.PI()

UTILIZAR O OBJECTO MATH > MÉTODO ROUND


Utilizado para arredondar uma expressão numérica ou um valor. O re-
sultado da seguinte expressão numérica é 56.

Math.round(55.98)

UTILIZAR O OBJECTO MATH > MÉTODO RANDOM


Retorna um número aleatório entre 0 e 0.9999...

Math.random()
342 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Criamos um jogo muito simples em que o utilizador introduz um número


(número) e assim que faz clique num botão é gerado um número aleató-
rio entre 0 e 20, que é comparado com o que foi introduzido.

Figura115 – Random e Round

UTILIZAR O OBJECTO MATH > MÉTODO SQRT


Determina a raiz quadrada de um número ou expressão numérica.

Math.sqrt(x)

Parâmetros:
x – Número ou expressão numérica maior que 0.

Figura116 – Raiz quadrada

Objectos da categoria movie

UTILIZAR O OBJECTO COLOR


Com este objecto é possível alterar a cor RGB a um movie clip. Depois
de atribuídos os valores podem ainda ser guardados para reutilizar mais
tarde.
II.6. OBJECTOS 343

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.

Por exemplo, imagine que queremos alterar a cor de um movie clip no


palco através da introdução de valores RGB. Para isso vamos criar três
caixas de texto, para as três cores primárias do modelo RGB.

Figura117 - Interface

Na primeira keyframe do filme iremos criar o construtor new Color().

alvo_color=new Color(alvo_mc);

De seguida, seleccionamos o movie clip e atribuímos os valores das


caixas à instância através do método setRGB.

Figura118 – Aplicar o método setRGB ao movie clip


344 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Os valores devem ser introduzidos pelo utilizador em código hexa-


decimal.

Figura119 – Inserir os valores

UTILIZAR O OBJECTO MOVIECLIP > MÉTODO HITTEST


Vamos usar o método hitTest para detectar quando um movie clip se
encontra sobreposto com outro.

movieClip.hitTest(target)

Parâmetros:

target – O target path da área de colisão com o movie clip.

Continuamos no exemplo do filme pacman. Criamos um novo movie na


biblioteca e colocamos uma instância no palco. Atribuímos um nome à
instância (laranja) e na primeira keyframe do filme vamos criar uma fun-
ção.

Figura120 – Nomear a instância

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

Figura121 – Actions da keyframe

Nos botões basta acrescentar o código para chamar a função sempre


que o movie clip é deslocado. Ver a figura 122.

Figura122

UTILIZAR O OBJECTO SOUND


O objecto Sound permite controlar o som de um filme. Ao utilizar este
objecto sem especificar Target, todos os sons do filme serão contro-
lados. Deve ser utilizado o construtor new Sound() para criar uma nova
instância de som antes de ser possível utilizar os seus métodos.

musica = new Sound();

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.

Começamos por criar na primeira keyframe do filme um construtor para


a nova instância de som. Logo de seguida carregamos um som externo,
ou seja, que não foi importado para a biblioteca do filme.
346 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura123 – Actions da primeira keyframe

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.

Figura124 – Botão Play

musica.start(secondOffset, loop)

secondOffset – Permite começar o som numa determinada posição.


Este valor é opcional e o seu valor deve ser introduzido em segundos.
Loop – Número de loops que o som irá efectuar

Para o botão de paragem do som, teremos de usar o método stop.

Figura125 – Parar o som

musica.stop("idName");
II.6. OBJECTOS 347

idname – O nome do som a ser parado. Este parâmetro é opcional.


Logo, se nenhum som for especificado, todos os sons do filme param.
Se ainda pretendermos uma caixa de texto que indique quantos milési-
mos de segundo do som já foram lidos, basta criar um movie clip no
qual incluímos uma caixa de texto com o nome (caixa) e usar a pro-
priedade position:

Figura126

UTILIZAR O OBJECTO CAPABILITIES


Este objecto permite analisar características do sistema do utilizador,
tais como resolução, cores e capacidades áudio ou vídeo. Para utilizá-lo
é necessário usar também o objecto system .

Por exemplo, para verificar se o sistema tem capacidades áudio:

System.capabilites.hasAudio

Propriedades do objecto capabilities:

System.capabilities.hasAudioEncoder – Mostra os encoders de áudio


suportados.
System.capabilities.hasAccessibility – Indica se o sistema possui os
standards de acessibilidade requeridos.
System.capabilities.hasAudio – Se o sistema possui ou não capacida-
des áudio.
System.capabilities.hasMP3 – Possibilidade de ler ou não MP3.
348 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

System.capabilities.language – Indica a linguagem suportada pelo


FlashPlayer.
System.capabilities.manufacturer – Indica o fabricante do Player do
Flash.
System.capabilities.os – Indica o sistema operativo do computador
que está a correr o Player do Flash.
System.capabilities.pixelAspectRatio – Indica a proporção dos pixéis
do ecrã.
System.capabilities.screenColor – Indica se o monitor é a cores ou a
preto e branco.
System.capabilities.screenDPI – Indica o número de pontos por pole-
gada do ecrã.
System.capabilities.screenResolution.x – Mostra o tamanho horizon-
tal do ecrã.
System.capabilities.screenResolution.y - Mostra o tamanho vertical
do ecrã.
System.capabilities.version – Indica a versão mais antiga suportada
pelo Player do Flash.
System.capabilities.hasVideoEncoder – Mostra os encoders instala-
dos para vídeo.

Figura127

Para exemplificar, no palco desenhamos algumas caixas de texto, às


quais atribuímos propriedades do objecto capabilities. O resultado do
filme depois de testado aparece na figura 128.
II.6. OBJECTOS 349

Figura128

Objectos da categoria client/server

UTILIZAR O OBJECTO LOADVARS


Este objecto é utilizado como alternativa à action LoadVariables, para
transferência de dados entre um servidor e o filme de Flash.
É necessário utilizar o construtor new LoadVars() antes de invocar os
seus métodos.

Métodos do objecto LoadVars:

LoadVars.load – Faz download de variáveis de um URL específico.


LoadVars.getBytesTotal – Devolve o número de bytes carregados
através do método load ou sendAndLoad.
LoadVars.getBytesTotal – Devolve o número total de bytes aos quais
será feito download através do método load ou sendAndLoad.
LoadVars.send – Publica as variáveis de um objecto LoadVars para um
determinado URL.
LoadVars.sendAndLoad – Publica as variáveis de um objecto Load-
Vars e faz download da resposta do servidor para um objecto.
LoadVars.toString – Devolve uma string de URL codificada que con-
tém todas as variáveis enumeradas pelo objecto LoadVars.
350 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Eventos do objecto LoadVars:

LoadVars.onLoad – Invocado quando uma operação de load ou send-


AndLoad é completada.

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.

Figura129 – Ficheiro texto

Começamos por criar um botão na biblioteca, que depois é colocado


dentro de um movie clip, ao qual é acrescentado uma caixa de texto
dinâmico, e dada uma action GetURL em que o link irá ser determinado
através da variável “link”.

Figura130 – Botão dentro do movie com a caixa de texto

Arrastamos uma instância do botão para o palco e atribuímos-lhe o no-


me botão1.
II.6. OBJECTOS 351

Figura131 – Instância do movie no palco

Na primeira keyframe do filme iniciamos as actions criando um cons-


trutor LoadVars ao qual atribuímos o nome dados_lVars.

dados_lVars=new LoadVars();

Na segunda linha aplicamos a função “carregado” (que iremos descre-


ver mais à frente) no evento onLoad, para que seja executada assim
que o filme carrega.

dados_lVars.onLoad=carregado;

Agora é a vez de chamar o ficheiro de texto que contém os dados que


necessitamos para criar o filme.

dados_lVars.load("links.txt");

E vamos criar a função que atribui os valores carregados aos botões,


que são gerados dinamicamente através de um ciclo While.

Atribuímos ao primeiro botão o valor do primeiro texto e do link que lhe


corresponde dentro do ficheiro de texto.

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

Iniciamos a variável i no valor 2, para começar a duplicar os próximos


movie clips.

I=2;

Iniciamos o ciclo while. Enquanto existirem novos textos no ficheiro


externos é duplicado um novo botão e deslocado 40 pixéis na vertical:

while(eval("dados_lVars.txt"+i)!=null){
eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i);
eval("botao"+i)._y+=40;

Finalmente são atribuídos ao botão duplicado o seu texto, o seu link e a


variável i é incrementada em uma unidade, para criar a próxima ins-
tância de botão.

eval("botao"+i).botao_txt.text=eval("dados_lVars.txt"+i);
eval("botao"+i).link=eval("dados_lVars.link"+i)
i++;
}

Figura132 – Script completo

UTILIZAR O OBJECTO XML


Utiliza-se para carregar, manipular e construir documentos de XML.
II.6. OBJECTOS 353

É necessário criar primeiro um construtor new XML() antes de chamar


os métodos do objecto.

Antes de mais, e visto que estamos a tratar de um assunto relativa-


mente recente, vamos falar um pouco da estrutura de um documento
XML, através de um exemplo simples:

<?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>

Neste exemplo, estamos a transmitir as características – nomeada-


mente um código, o nome e a idade - de duas pessoas. Para quem co-
nhece o HTML, decerto já notou as semelhanças.
Qualquer documento XML, começa pela declaração da versão. De se-
guida, a declaração do tipo de documento, que é opcional.

A partir daí, surge a descrição dos dados. A estrutura é sempre a


mesma. Cada bloco de dados está encarcerado entre uma etiqueta de
declaração de início e outra de fim. No exemplo, os dados de cada pes-
soa começam pela declaração <pessoa>, e terminam em </pessoa>.
Dentro de cada pessoa, estão os dados que lhe pertencem.
Se for necessário declarar elementos vazios, usa-se apenas uma eti-
queta: <pessoa/>, que é equivalente a <pessoa></pessoa>.

Desta estrutura resulta uma hierarquia de dados em “árvore” (figura


133).

Cada uma das bifurcações, denomina-se nó (Node no Flash). Aos


segmentos de informação chamam-se textos. Cada um dos nós pode
conter atributos, ou sub-nós especiais – os de texto, que não contêm
354 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

atributos, nem sub-nós. O texto é declarado entre as etiquetas de início


e fim. No exemplo, temos o nome e a idade.

Os atributos são declarados dentro da etiqueta de início. No exemplo, o


código.

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.

Figura133 – Estrutura de um documento XML

Como exemplo, vamos criar uma agenda em Flash que acede aos
dados contidos num ficheiro de XML.

O nosso ficheiro encontra-se na mesma pasta do filme e contém a se-


guinte estrutura.
II.6. OBJECTOS 355

Figura134 – Ficheiro XML

Propriedades do objecto XML que iremos utilizar neste exemplo:

xml.load – Verifica se o ficheiro XML foi carregado.


xml.firstchild – Referência ao primeiro filho do nó especificado.
xml.nextsibling – Refere-se à próxima linha dos filhos do nó especi-
ficado.
xml.nodevalue – Devolve o texto que se encontra dentro de um nó de
texto.

Figura135 – Interface

Na primeira keyframe do filme começ amos por criar o construtor:

agenda_xml = new XML();


356 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Na segunda linha iremos aplicar a propriedade IgnoreWhite para o


Flash ignorar todas as quebras de linha do documento de texto.

agenda_xml.ignoreWhite = true;

De seguida acrescentamos uma linha para uma função de nome


“carregado” correr assim que o ficheiro de XML esteja carregado.

agenda_xml.onLoad = carregado;

A quarta linha carrega o ficheiro. Utilizamos o método Load para esse


efeito.

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();
}

E de seguida a função que vai apresentar os dados:

function apresentaDados() {
codigo = pessoa.attributes.codigo;
valor = pessoa.firstChild;
nome = valor.firstChild.nodeValue;
valor = valor.nextSibling;
telefone = valor.firstChild.nodeValue;
}

Para as actions dos botões, vamos introduzir utilizar a condição if para


determinar se os dados do ficheiro de XML já terminaram ou não.
II.6. OBJECTOS 357

Figura136 – Botões de navegação no documento


II.7. COMPONENTES

Os componentes do Flash MX foram introduzidos para substituir os


Smart Clips que faziam parte da versão anterior do programa. Tratam-
-se de movie clips complexos que já possuem actions associadas, mas
nas quais o utilizador pode alterar parâmetros que lhe permitem adaptar
os componentes a diferentes utilizações em cada filme.

Figura137 – Janela Components

Ao inserir um componente no filme a pasta Flash UI Components é


adicionada à biblioteca do filme, a qual contém o componente arrastado,
a pasta Component Skins e a pasta Core Assets – Developer Only.

Fig138 – Biblioteca
360 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

O painel PROPERTIES mostra a informação para configurar o compo-


nente através da definição dos seus parâmetros. Cada componente é
também por si só uma instância e deve-lhe ser atribuído um nome único
no filme.
Para alterar o aspecto de qualquer um dos componentes, basta alterar
os movie clips que se encontram dentro da pasta Component Skins.

Fig139 – Painel Properties com um componente seleccionado

Os componentes podem ser visualizados tal e qual como aparecerão no


filme publicado se o modo de visualização Live Preview (CONTROL >
LIVE PREVIEW) estiver activado. No entanto, os componentes não estão
operacionais desta forma. Teste-os com o comando CONTROL > TEST MOVIE.

Figura140 – Sem live preview vs Live preview

Existem sete componentes no painel Components.

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

deve estar definida na mesma timeline da checkbox. Este parâmetro é


opcional.
Initial Value - Indica se a caixa está ou não seleccionada de início.
Label - Texto que aparece ao lado da caixa.
Label Placement – Indica se o label aparece à direita ou à esquerda da
caixa.

Figura141 – Opções Checkbox

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.

Figura142 – Opções ComboBox


362 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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.

Figura143 – Opções ListBox

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.

Figura144 – Opções ComboBox

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

Arraste o componente scrollbar para junto da caixa. Se arrastar pelo


centro do componente ele adere automaticamente à caixa.
Teste o filme.

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.

Figura146 – Opções Scrollbar

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

Horizontal Scroll – Determina se a barra horizontal está a ser mostrada


ou não. O valor por defeito é auto, em que apenas é mostrada se for ne-
cessária.

Scroll Content – String de texto que especifica a identificação linkage


do símbolo que irá aparecer no painel. Para atribuir o nome de linkage a
um símbolo, faça clique com o botão direito do rato sobre o movie clip
na biblioteca e escolha a opção Linkage.

Figura147 – Linkage

Vertical Scroll – Determina se a barra vertical está a ser mostrada ou


não. O valor por defeito é auto, em que apenas é mostrada se for ne-
cessária.

Figura148 – ScrollPane

Depois de configurados os componentes necessitam que seja adicio-


nado actionscripting para ficarem a funcionar convenientemente. No
Painel Actions encontramos uma categoria totalmente vocacionada para
os métodos dos componentes.
366 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Figura149

Para exemplo, vamos criar um formulário simples em que o utilizador ao


clicar no botão Enviar passa informações através de componentes.

Fig150 – Formulário

Nomes das instâncias:


Checkbox = participa
Combobox = viagem com três opções:
Maldivas
Istanbul
Cuba
Radio button 1= Meio_av
Radio button 2= Meio_comb

Para capturar os valores de todos os campos criamos uma função na


timeline do filme e associamos essa função ao botão Enviar.
Começamos por nomear a instância do botão e digitamos em Click
Handler o nome da função que será chamada quando o botão for premi-
do.
II.7. COMPONENTES 367

Figura151

Agora na primeira keyframe do filme criamos a função que vai ficar as-
sociada ao botão.

function clicar (enviar) {


}

Começamos por recolher os dados da checkbox. Em ACTIONS > FLASH


UI COMPONENTS > FCHECKBOX > METHODS > GET VALUE

function clicar (enviar) {


trace(participa.getValue());
}

Para recolher os dados do grupo de radio buttons:

function clicar (enviar) {


trace(participa.getValue());
trace(RadioGroup.getValue());
}

Para recolher o nome do label seleccionado na combobox, acrescen-


tamos ainda:

function clicar (enviar) {


trace(participa.getValue());
trace(RadioGroup.getValue());
trace(viagem.getSelectedItem().label);
}

O resultado depois de fazer CONTROL > TEST MOVIE:


368 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Fig152 – Resultado
Anexo 1. SISTEMA HEXADECIMAL

Este sistema de numeração foi inventado para "simplificar" o trabalho de


lidar com números muito grandes.

Nós, humanos, utilizamos um sistema de numeração de base 10,


decorrente do facto de termos dez dedos. No nosso sistema, a posição
de um determinado algarismo é relevante, ao contrário, por exemplo,
dos números romanos onde isto não acontece.

Outra particularidade do nosso sistema de numeração é que cada casa


decimal apenas pode variar de 0 a 9. Quando precisamos representar
números acima da faixa que uma determinada casa decimal pode repre-
sentar, colocamo-la a zero e somamos "um" à casa decimal imediata-
mente à esquerda da que estamos a considerar. Assim, se estamos a
contar a partir de zero e chegamos a 9 teremos de somar "um" ao dígito
imediatamente à esquerda do 9. Como neste caso o 9 também pode ser
visto como 09, então devemos passar o 9 a 0 e o 0 a 1, criando assim o
número 10.

Imagine o contador de quilómetros de um automóvel. Se o colocar a


zero, à medida que o automóvel se desloca, o primeiro dígito da direita
sobe progressivamente de 0 a 9, voltando em seguida a 0, e nesta volta
causando o incremento do dígito imediatamente à sua esquerda, que
passa então de 0 a 1, passando assim a representar o número 10.
Processo similar ocorre quando estes dois dígitos atingirem o valor 99
quando então passarão a 00 e acrescentarão 1 ao dígito da esquerda,
passando a 100.

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

deveremos criar “símbolos” para representar todos os algarismos de 0 a


15. Já temos porém os dez primeiros que podemos pedir emprestados à
base 10, ou seja, 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para os números de 10 a 15
foi decidido utilizar sequencialmente as letras A, B, C, D, E e F.

Como um algarismo dentro de um determinado número pode ter valores


diferentes consoante a sua posição, podemos desmembrar um número
de acordo com a sua posição relativa. Então, por exemplo, o número
5.326 pode ser lido como cinco milhares, três centenas, duas dezenas e
seis unidades. Se pensarmos bem, um milhar é igual a 10 vezes 10
vezes 10. Da mesma forma, uma centena é igual a 10 vezes 10, sendo
logicamente uma dezena igual a 10. Colocando isto de uma maneira
que nos facilite a visualização, temos o resultado abaixo:

POSIÇÃO Valor da coluna Pode ser visto como Ou ...


MILHAR 1000 10 x 10 x 10 3
10
CENTENA 100 10 x 10 2
10
DEZENA 10 10 1
10
UNIDADE 1 1 0
10

Repare que acrescentamos uma terceira coluna com representação em


termos de expoentes dos valores. Pode ver que dependendo da posição
do algarismo dentro do número o seu expoente assume um valor dife-
rente.

Se transportarmos este raciocínio para a base 16, teremos o seguinte


resultado:

POSIÇÃO Valor da coluna Pode ser visto como Ou então...


“MILHAR” 4096 16 x 16 x 16 3
16
“CENTENA” 256 16 x 16 2
16
“DEZENA” 16 16 1
16
“UNIDADE” 1 1 0
16

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

Então, se tivermos, por exemplo, o número 2F, podemos descobrir o


seu valor na base 10, multiplicando-se o valor que o F tem relativa-
mente à sua coluna e somando o valor que o 2 tem na coluna que
0
ocupa. O F vale 15 e está na coluna zero. Então, 15x16 =15 e
1
2x16 =32, logo o número 2F equivale ao nosso número 47.

Por raciocínio análogo, o número ABCD será:

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

Somando tudo, o número ABCD vai equivaler a 43.981 na base 10.


Como se costuma representar a base em baixo do número, então,
ABCD seria escrito ABCD16 e 43981 seria escrito 4398110.

Se o seu problema é converter da base 10 para a base 16, então


deverá dividir em vez de multiplicar.

Tomemos por exemplo o número 4.000. Se fizermos uma primeira


divisão deste número pelo 16 (da base) chegaremos ao valor de 250,
obtendo 0 de resto. Se usarmos o número 250 e o dividirmos
novamente por 16, obteremos 15 e 10 de resto. Veja o diagrama abaixo:
372 C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Se olharmos agora para os números resultantes, de trás para a frente,


teremos os números 15, 10 e 0, que correspondem a F, A e zero, logo,
na base 16, o número 4000 é FA0 16.
Anexo 2. WEB COLORS

Em informática, as cores são representadas por combinações de 3 co-


res básicas: vermelho, verde e azul. As placas de vídeo permitem que
cada uma destas cores possa ter valores que vão de de 0 a 255, sendo
0,0,0 o negro e 255, 255, 255 o branco.

No início do desenvolvimento para a Web, ainda eram muitos os com-


putadores capazes de representar apenas 256 cores diferentes no ecrã.
Utilizavam então as famosas placas de vídeo de 8 bits 1.

Começou-se a notar então que as cores não eram mostradas da mes-


ma forma quando vistas em diferentes computadores, browsers, siste-
mas operativos, etc.

Resolveu-se fazer uma comparação para descobrir quais destas cores


seriam exactamente as mesmas, independentemente do sistema utiliza-
do.

Utilizou-se o Netscape como padrão, para fazer essa comparação, já


que era o browser mais utilizado na altura e o que existia para todos os
principais sistemas operativos de então. Chegou-se à conclusão de que
apenas 216 das 256 cores possíveis pareciam iguais em todos os sis-
temas.

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

Para poder instalar as extensões adicionais no seu Flash MX, a primeira


coisa a fazer é instalar no seu computador o programa Extension Mana-
ger (que tal como as extensões estão disponíveis para download gratui-
to no site da Macromedia).

Corra então o programa de instalação “Ext_Manager_Install_En.exe”


(no MAC, “Ext_Manager_Install_hqx”) no seu computador. Terminada a
instalação corra o programa Extension Manager 1, que por defeito é ar-
mazenado no mesmo directório do Flash. Assim que o fizer verá a ima-
gem abaixo.

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

Vá a FILE > INSTALL EXTENSIONS e escolha primeiro o ficheiro


“MX365880_FUIComponentsSet2.mxp2” que corresponde ao FLASH
MX UI COMPONENTS SET 2 e carregue no botão INSTALL.

Verá a seguir uma janela a perguntar se aceita as condições para a


instalação. Carregue em ACCEPT e as extensões serão instaladas no
seu computador. Repita o procedimento para as extensões FLASH
CHARTING COMPONENTS, cujo ficheiro chama-se “MX377283_Char-
tingComponents.mxp”.

Ao terminar a instalação, o seu EXTENSION MANAGER mostrará na


janela principal uma lista daquilo que acabou de instalar. Veja a figura
abaixo.

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.

You might also like