Você está na página 1de 379

Centro Atlntico

Flash MX
Design, Animao e
Programao
Anabela Gonalves e Magno Urbano
Flash MX
Design, Animao e
Programao
Portugal/2002
Reservados todos os direitos por Centro Atlntico, Lda.
Qualquer reproduo, incluindo fotocpia, s pode ser feita
com autorizao expressa dos editores da obra.
FLASH MX: DESIGN, ANIMAO E PROGRAMAO
Coleco: Tecnologias
Autores: Anabela Gonalves e Magno Urbano
Direco grfica: Centro Atlntico
Reviso: Nuno Ricardo e Centro Atlntico
Capa: Paulo Buchinho
Centro Atlntico, Lda., 2002
Ap. 413 - 4764-901 V. N. Famalico
Porto - Lisboa
Portugal
Tel. 808 20 22 21
geral@centroatlantico.pt
www.centroatlantico.pt
Fotolitos: Centro Atlntico
Impresso e acabamento: Inova
1 edio: Junho de 2002
ISBN: 972-8426-53-4
Depsito legal: 181.663/02
Marcas registadas: todos os termos mencionados neste livro conhecidos como sendo marcas registadas de
produtos e servios, foram apropriadamente capitalizados. A utilizao de um termo neste livro no deve
ser encarada como afectando a validade de alguma marca registada de produto ou servio.
O Editor e os Autores no se responsabilizam por possveis danos morais ou fsicos causados pelas
instrues contidas no livro nem por endereos Internet que no correspondam s Home-Pages
pretendidas.
I PARTE:
DESIGN E ANIMAO NO MACROMEDIA FLASH MX
NOVAS FUNCIONALIDADES DO FLASH MX ............................... 15
1. Workflow............................................................................... 15
rea de trabalho flexvel e intuitiva ......................................... 15
Melhorias ao nvel da timeline................................................ 16
Distribute to Layers ............................................................... 16
Suporte para verses 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
Gesto e seleco de cores.................................................. 19
Mscaras dinmicas ............................................................. 19
3. Suporte Multimedia............................................................... 19
Suporte vdeo ........................................................................ 19
Carregamento dinmico de som e imagens .......................... 20
4. Texto ..................................................................................... 20
Substituio de fontes em falta.............................................. 20
Colocao de texto na vertical ............................................... 21
Suporte Multilingue ................................................................ 21
5. Recursos de ajuda ................................................................ 22
Templates.............................................................................22
Painel Answers ..................................................................... 22
Exemplos e tutoriais .............................................................. 23
6. Publicao e navegao ...................................................... 23
Desenvolvimento de contedo acessvel ............................... 23
Suporte em ambientes diferenciados .................................... 23
Named Anchors.................................................................... 23
Compresso SWF melhorada............................................... 24
Empenhamento na minimizao do Flash Player .................. 24
7. Painel Actions melhorado ..................................................... 24
Edio do Actionscript mais fcil ........................................... 24
Editor parametrizvel ............................................................ 25
Dicas de cdigo (code-hinting) e preenchimento automtico 26
NDICE
FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO
6
Painel de referncia .............................................................. 26
Funcionamento interno melhorado......................................... 26
Debugger melhorado ............................................................ 27
8. Novos comandos Actionscript ............................................... 27
SetInterval e ClearInterval ...................................................... 27
Novo modelo de objectos e eventos ...................................... 27
Instruo Switch .................................................................... 28
Controlo dinmico do layout do filme .................................... 28
Objectos TextField e Button ................................................... 28
Drawing API .......................................................................... 28
Controlo de som melhorado .................................................. 29
Componentes ....................................................................... 29
9. Links Interessantes ............................................................... 30
Documentao e Recursos ................................................... 30
A no perder ......................................................................... 30
I.1. A INTERFACE GRFICA E OS
FUNDAMENTOS BSICOS........................................ 31
A interface grfica .................................................................... 32
Default Layout ........................................................................ 33
Arrow Tool ................................................................................ 34
Subselection Tool ..................................................................... 35
Line Tool ................................................................................... 36
Solid (slido) .......................................................................... 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
Espaamento de caracteres ............................................ 49
Tipo de letra e tamanho.................................................... 49
Posio dos caracteres ................................................... 49
Ajuste de cor, negrito e itlico........................................... 50
Direco do texto e opes de alinhamento..................... 50
7
NDICE
Opes de rotao .......................................................... 51
Opes de formatao .................................................... 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
Boto 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
Subtraco de formas ............................................................ 78
Unio 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 funes ......................................................... 93
FILE....................................................................................... 93
New From Template ............................................................ 93
Open As Library .................................................................. 96
Import & Export Movie ......................................................... 97
Quicktime......................................................................... 97
FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO
8
Freehand ......................................................................... 99
Publish Settings ................................................................ 101
Opo Formats Janela Publishing............................... 102
Opo Flash Janela Publishing ................................... 103
Opo 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 ANIMAO..................... 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 - representao no timeline................................ 136
ActionScript representao no timeline ............................ 137
Labels representao no timeline ..................................... 137
A Animao frame-a-frame ..................................................... 139
A Animao Motion Tween ...................................................... 144
Ease In & Ease Out (o controlo do movimento) ........................ 147
9
NDICE
Como que o Flash interpreta uma animao? ...................... 150
Animao de formas (shape animation) .................................. 153
Shape Hints ............................................................................156
Criao do Shape Hint... ...................................................... 158
Animao com Motion Guide .................................................. 162
Mscaras ................................................................................ 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 animaes ............................................. 177
Bandwidth Profiler .......................................................... 178
I.4. SMBOLOS, EFEITOS E BIBLIOTECAS...........181
As suas prprias bibliotecas .................................................. 181
Graphics, Button e Movie Clips............................................... 183
Graphic (grficos) ................................................................... 185
Button (boto) ......................................................................... 186
Movie Clips ............................................................................189
Efeitos de Cor e Transparncia .............................................. 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
FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO
10
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 AVANADOS ......................... 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
11
II PARTE:
A PROGRAMAO NO MACROMEDIA FLASH MX
II.1. INTRODUO PROGRAMAO
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 numerao para as linhas de cdigo.................265
Imprimir Actions ................................................................... 265
Painel Reference .................................................................265
Para visualizar o painel Reference .......................................266
Para alterar a dimenso da fonte no painel Reference ......... 266
Associar actions na timeline................................................266
Associar actions a smbolos ................................................ 267
Eventos .................................................................................. 267
Eventos associados a botes .............................................. 268
Eventos de movie clips ........................................................ 268
II.3 INTRODUZIR INTERACTIVIDADE
NUMA ANIMAO......................................................271
Criar links para pginas HTML ............................................ 273
Carregar filmes de Flash externos........................................276
Controlar ficheiros executveis com o fscommand .............. 280
Smbolos.............................................................................. 282
Atribuir nomes a instncias de movie clips ou botes .......... 284
Caminhos relativos e absolutos............................................ 285
Caminhos absolutos ............................................................ 285
NDICE
FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO
12
Caminhos relativos .............................................................. 285
Controlar instncias de smbolos.......................................... 286
Propriedades dos movie clips ............................................. 288
Mtodos mais utilizados nos movieclips .............................. 290
DuplicateMovieClip e RemoveMovieClip .......................... 292
LoadMovie e Unload Movie............................................... 295
GetBytesLoaded e GetBytesTotal ...................................... 297
II.4 ESTRUTURAS AVANADAS
DE PROGRAMAO.......................................... 301
Sintaxe do Actionscripting .................................................... 301
Variveis ................................................................................ 303
Data Types........................................................................... 303
Scope da varivel ................................................................ 305
Variveis locais................................................................. 305
Variveis de Timeline....................................................... 305
Variveis Globais.............................................................. 305
Declarar variveis ................................................................ 305
Testar o valor das variveis .................................................. 308
Operadores ......................................................................... 309
Prioridade dos operadores ............................................... 309
Tipos de operadores ......................................................... 309
Condio If ........................................................................... 312
Condio CASE .................................................................. 319
Ciclo For .............................................................................. 320
Ciclo While........................................................................... 323
II.5. FUNES ..........................................................329
Funo Number ...................................................................... 330
Funo getTimer .................................................................... 330
Funo getVersion ................................................................. 330
Funo boolean...................................................................... 331
Funo string.......................................................................... 331
Funo escape ...................................................................... 332
Funo getProperty ................................................................ 332
Funo targetPath .................................................................. 332
Funo unescape ................................................................... 332
Funo isFinite....................................................................... 333
13
Funo isNaN ........................................................................ 333
Funo parseFloat .................................................................333
Funo parseInt ...................................................................... 333
Definir funes ....................................................................... 334
II.6. OBJECTOS........................................................337
Aceder s propriedades de um objecto .................................. 337
Invocar o mtodo de um objecto ............................................. 338
Objectos da categoria core ....................................................338
Utilizar o objecto date .......................................................... 338
Utilizar o objecto array ......................................................... 339
Utilizar o objecto math > mtodo max .................................. 340
Utilizar o objecto math > mtodo min ................................... 341
Utilizar o objecto math > mtodo pi ...................................... 341
Utilizar o objecto math > mtodo round ................................ 341
Utilizar o objecto math > mtodo random.............................341
Utilizar o objecto math > mtodo sqrt ................................... 342
Objectos da categoria movie .................................................. 342
Utilizar o objecto color ......................................................... 342
Utilizar o objecto movieclip > mtodo 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 extenses adicionais ao Flash MX ......................375
NDICE
FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO
14
Novas funcionalidades do Flash MX
Por Nuno Ricardo
1



Este documento pretende dar a conhecer as principais novidades do
Macromedia Flash MX em relao s verses anteriores.
Foi baseado parcialmente em documentos oficiais da Macromedia e na
opinio pessoal do autor desta introduo.

1. Workflow
rea de trabalho flexvel
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 crticas dificuldade de gesto da rea de trabalho.
Nesta verso 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 opes variam consoante o objecto selec-
cionado, condensando mltiplas paletas numa s, poupando espao de
trabalho precioso.

1
Nuno Ricardo o nico Flash 5 Developer registado em Portugal
16 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
Melhorias ao nvel da timeline
Da verso 4 para a 5 foram introduzidas
alteraes na forma como se contro-
lavam as frames e keyframes na time-
line. Estas no foram bem aceites pelos
utilizadores, preferindo muitos a verso
4 5 neste aspecto. Na verso MX,
voltou-se atrs no tempo. Trabalhar
com a timeline quase igual ao que era
na verso 4, indo de encontro ao que
quase todos os utilizadores pediam.
Uma novidade nesta verso MX foi a introduo de pastas de layers.
Estas permitem agrupar layers, como conseguamos fazer antes para
os smbolos na Library. Torna-se assim mais fcil trabalhar com filmes
complexos a nvel de design.

Distribute to Layers
Se tivermos um grupo de objectos numa layer, e pretendermos fazer
animaes independentes para cada um deles, necessrio coloc-los
em layers tambm 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 verses anteriores do Flash
Tal como acontecia antes, se utilizarmos num filme novas capacidades
do MX, este filme no poder ser aberto numa verso anterior do Flash.
No entanto, podemos usar a facilidade de gravar os filmes no formato
da verso 5, por questes de compatibilidade.
Desta forma, no poderemos usar as capacidades novas. O Flash in-
forma quais as actions que so proibidas assinalando-as a amarelo no
painel Actions.



Suporte para diversos Sistemas Operativos
O Flash MX j suporta Windows XP e Mac OS X, alm 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
2. Ferramentas para o designer

Free transform tool

A nova ferramenta permite, mais facilmente que antes, mudar
o tamanho, rodar e distorcer elementos grficos.
Com as variantes
shape distort e
envelope distort, o
designer consegue
libertar a sua
criatividade como
antes no era
possvel.


Fill Transform tool
Outra ferramenta que se tornou independente a de transformao de
preenchimentos. Permite-nos modificar os preenchimentos em degrade
ou padres.
Embora esta ferramenta j
existisse, estava bastante
menos acessvel.



NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 19

Pixel Snapping
Atravs da opo Snap to Pixels, e com a visualizao a 400% ou
superior, temos acesso a uma grelha que nos permite fazer o alinha-
mento de objectos ao nvel do pixel. Desta forma, evitamos efeitos de
antialiasing que podem ser prejudiciais qualidade dos contornos das
formas.

Gesto e seleco de cores
Tambm alvo de algumas crticas, o
Color Mixer foi transformado de for-
ma a facilitar o seu uso.



Mscaras dinmicas
Agora, podem-se construir dinamicamente mscaras. Desde o desenho
at activao da mscara, tudo pode ser controlado por Actionscript
dando mais poder ao utilizador sobre esta importante caracterstica do
Flash.

3. Suporte Multimedia

Suporte vdeo
Utilizando o codec Sonrenson Spark embebido dentro do player da ver-
so 6, possvel inserir vdeos dentro de ficheiros SWF.
20 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
O Flash suporta a importao de vdeos nos formatos AVI, MOV, DV e
MPEG. Depois de inserido, possvel tratar um vdeo como qualquer
outro objecto: Mudar o tamanho, rodar, distorcer, mascarar, e controlar
o seu andamento atravs de actionscripting.

Carregamento dinmico de som e imagens
Antes era possvel carregar filmes externos, desde que gravados em
formato SWF. Agora, tambm possvel carregar imagens em formato
JPEG e som em formato MP3, abrindo um novo caminho aos sites que
dependem de actualizaes frequentes de contedo.

4. Texto

Substituio de fontes em falta
Tal como acontecia em alguns programas de design grfico, agora
quando se abre um filme num computador que no possui as fontes
necessrias, o Flash avisa de tal facto, e d a hiptese de criar um ma-
peamento da fonte em falta para outra semelhante.


NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 21

Colocao de texto na vertical
possvel colocar texto na vertical, no s para criar efeitos grficos,
mas para escrita em lnguas que assim o requeiram, como o Chins,
Japons ou Coreano.


Suporte Multilingue

O suporte a caracteres Unico-
de, permite a visualizao de
textos em lnguas em que antes
no era possvel com o Flash.
Permite tambm uma mais fcil
compatibilidade com aplicaes
externas que falem Unicode,
tal como com algumas aplica-
es de gesto de contedos.
22 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
5. Recursos de ajuda

Templates
No s para ajudar um principiante, mas tambm para facilitar a criao
repetitiva de filmes com contedo semelhante, os Templates, j conhe-
cidos dos utilizadores de outras aplicaes, esto tambm disponveis
no Flash MX.


Painel Answers
Outra facilidade de ajuda o Painel Answers, permite o acesso rpido a
dicas e recursos, com actualizao via Internet.


NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 23

Exemplos e tutoriais
J includos nas verses anteriores, estes tornam-se cada vez melho-
res.

6. Publicao e navegao
Desenvolvimento de contedo acessvel
A acessibilidade dos contedos a indivduos com necessidades espe-
ciais um tema que tardiamente comeou a ser tomado em conta. O
Flash suporta agora ferramentas como os leitores de ecr. possvel
adicionar ajudas aos filmes para serem interpretadas por essas fer-
ramentas.

Suporte em ambientes diferenciados
O desenvolvimento de contedo em Flash garante-nos que este vai
estar acessvel em diversos meios de comunicao to diferenciados
como os PCs 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 so amplamente usadas em HTML, para facilitar
a navegao num site. Agora, tambm dentro de um filme Flash pos-
svel utilizar esta ferramenta, de forma a que o utilizador possa navegar
utilizando o boto Back e Forward do browser.
24 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
Compresso SWF melhorada
O Flash MX possui novos algoritmos de compresso de contedo, di-
reccionados optimizao de filmes com utilizao intensiva de Action-
script.

Empenhamento na minimizao do Flash Player
Como sabido, cada nova verso do Flash obriga a que todos os
clientes da Internet faam o download da nova verso do player. Tendo
conscincia disso, a Macromedia empenha-se em minimizar ao mximo
a durao do download.
Nesta verso, embora o player tenha obrigatoriamente crescido, devido
ao suporte vdeo, manteve-se nuns simpticos 380 Kb. Pouco mais de 1
minuto de download para um modem de 56 Kbps.


7. Painel Actions melhorado

Edio do Actionscript mais fcil
Embora exista o modo Normal e Expert de edio de Actionscript, no
segundo modo que se conseguem aproveitar todas as capacidades
desta poderosa linguagem. tambm em Expert Mode que se sentem
as grandes melhorias ao nvel de edio.
Codificao por cores, ajudas sensveis ao contexto, opes de procura
e substituio, guia hierrquico do cdigo, com suporte Drag-and-Drop,
e um excelente material de consulta fazem o processo de aprendizagem
tornar-se simples e do preciosas ajudas mesmo a peritos em action-
scripting.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 25



Editor parametrizvel

Algumas das ajudas
disponveis, tais como
a codificao em
cores, a auto-
formatao e mesmo
o contedo do painel
Actions, so
parametrizveis, para
que se adaptem ao
gosto e forma de
trabalho do utilizador.

Dicas de cdigo (code-hinting) e preenchimento automtico
Enquanto se est a escrever o cdigo, o Flash detecta o tipo de objecto
que estamos a utilizar, e lista numa caixa drop-down os mtodos, propri-
edades e eventos para esse objecto.
possvel, a partir dessa lista, utilizando a tecla TAB, o preenchimento
automtico da instruo seleccionada. Aparecem ainda referncias aos
parmetros necessrios ao completar da instruo.

Painel de referncia
Se ainda assim persistirem dvidas sobre o funcionamento de alguma
instruo, basta seleccion-la e, pressionando SHIFT+F1, aparece no
painel Reference a explicao relativa instruo.


Funcionamento interno melhorado
Alguns dos objectos mais utilizados (Number, Boolean, Object, String,
Array e XML) foram melhorados, funcionando cerca de 100 vezes mais
rpido.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 27

Debugger melhorado
A deteco de erros de cdigo agora mais fcil. 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 no s aos botes e movie-
clips, mas a quase todos os objectos, permitem que seja mais fcil
associar cdigo a cliques do rato ou a teclas, ao load e unload de dados
de vrios tipos, ao redimensionar da janela do Flash, etc.
28 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
Instruo Switch
Anteriormente, a nica instruo condicional era o IF, que embora fosse
eficiente, em muitos casos se existissem mltiplas hipteses a testar
tornava-se pouco prtico. Para resolver este problema, surge a instru-
o SWITCH.
J existente noutras linguagens segue um estilo sintctico muito seme-
lhante ao Javascript, tal como todo o Actionscript a partir da verso 5.

Controlo dinmico do layout do filme
Atravs do novo objecto Stage, possvel 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 prprio
formato de texto so controlveis dinamicamente por Actionscript atra-
vs dos objectos TextField e TextFormat.
Tambm o comportamento de um boto, como a ordem de tabulao, o
bloqueamento, e at as actions associadas a este, so controlveis por
Actionscript utilizando o objecto Button.

Drawing API
Esta API, dentro do objecto MovieClip, permite-nos desenhar qualquer
forma utilizando apenas Actionscript. possvel, por exemplo, desenhar
grficos 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
dinmico 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 possvel criar formulrios com bo-
tes de seleco, caixas drop-down, caixas de seleco mltipla, etc.
Existem tambm componentes para facilmente se adicionar scrollbars a
caixas de texto.
A rea de componentes completamente personalizvel, existindo
algumas empresas que se dedicam produo de componentes para
diversos fins.
No site www.macromedia.com/exchange possvel encontrar alguns
destes componentes, pux-los e instal-los utilizando o Macromedia Ex-
tension Manager, includo no Flash.







30 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
9. Links Interessantes

Documentao 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 no 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 GRFICA E OS
FUNDAMENTOS BSICOS

O Flash MX um programa produzido pela empresa Macromedia
(www.macromedia.com) que permite a produo de pginas para a
Internet e de aplicaes para distribuio pela Internet ou por qualquer
outro tipo de media como CD-ROM, DVD-ROM, etc.
O Flash MX permite construir pginas de Internet completas e no
apenas as partes animadas. Permite elaborar sites que contenham
interaces com os utilizadores, de forma animada, com uma interface
grfica sofisticada, sons e outros elementos multimedia.
Para que seja possvel visualizar sites em Flash correctamente,
preciso que o software que permite a navegao na Internet (browser)
tenha um programa (plug-in) instalado para esse fim. Normalmente, os
principais browsers j vm configurados correctamente. Segundo a
Macromedia, 98,3% das pessoas que navegam na Internet esto aptas
a ver pginas em Flash.
Caso o seu browser no esteja apto a visualizar pginas em Flash, a
soluo visitar o site da Macromedia, escolher a opo SHORTCUTS
dentro do item DOWNLOADS no menu superior esquerdo e ento
escolher a opo que diz Flash PLAYER DOWNLOAD. Ver ento que
surgir o link para download da verso do Flash Player adequada ao
seu browser (automaticamente o site da Macromedia detecta que
browser est a utilizar e mostra-lhe apenas a verso adequada).
1


1
Existem diversas verses do FLASH Player disponveis 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Enquanto que na construo de um site normal para a Internet temos
que escrever uma srie de ficheiros em HTML, num site em Flash
temos que elaborar uma srie de elementos grficos, j que normal-
mente um site deste tipo est contido num nmero sensivelmente
menor de ficheiros. Uma vez pronto, um site em Flash lembra muito a
construo de um programa numa qualquer linguagem de programao,
onde se tem uma aplicao principal que corre e que pode ou no ter
aplicaes externas que venha a executar de acordo com as aces do
utilizador.
A interface grfica
Logicamente, a primeira parte a abordar neste livro refere-se interface
grfica do Macromedia Flash MX, para que possa conhecer os cantos
casa, significativamente modificados em relao verso anterior.
A primeira diferena que se nota na interface, ao correr o Flash MX, em
comparao com as verses anteriores, que as suas janelas esto to-
das encaixadas umas nas outras e podem ser destacadas para se tor-
narem independentes e encaixadas novamente no todo.
Outra diferena que verificar que a interface pode ser configurada
consoante o perfil do utilizador: designer, utilizador genrico (general)
ou programador (developer).
Para proceder escolha v ao menu WINDOW > PANEL SETS e ver
sete opes: DEFAULT LAYOUT, trs opes de resoluo para
DESIGNER e trs para DEVELOPER.
Estes ajustes pr-definidos arrumam as diversas janelas de proprieda-
des do Flash de acordo com aquilo que se entende necessrio estar vi-
svel ou no para um determinado perfil.
Pode-se entender mais facilmente esta explicao quando se v que o
Flash possui diversas janelas de propriedades e que nem todas so
necessrias para todos os tipos de utilizador.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 33


No tipo DESIGNER, por exemplo, esto visveis as seguintes janelas na
interface: TOOLS, TIMELINE, PROPERTIES, INFO, ALIGN,
TRANSFORM, COLOR MIXER, COLOR SWATCHES, COMPONENTS
e ANSWERS. J no tipo DEVELOPER esto visveis as janelas TOOLS,
TIMELINE, ACTIONS, REFERENCE, PROPERTIES, COLOR MIXER,
COLOR SWATCHES e ANSWERS. Vemos que esta combinao faz
sentido para ambos os tipos, j que para um programador, por exemplo,
no h a necessidade de ter visvel na interface a janela que lhe permi-
tiria fazer transformaes ou mudar o alinhamento de objectos.
DEFAULT LAYOUT
Comearemos ento por escolher o tipo DEFAULT LAYOUT, o qual mo-
dificar a interface para que fique conforme a figura abaixo.

34 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


No se preocupe se no conseguir ler os elementos contidos na
imagem, devido ao seu tamanho reduzido. Usaremos a imagem apenas
como referncia 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 Tool
2
), quando accionada, coloca o
programa em modo de seleco de objectos. Neste modo,
poder seleccionar os objectos criados, como por exemplo,
crculos, quadrados, elipses, etc.
Esta ferramenta tambm poder ser utilizada para fazer
modificaes nas formas dos objectos criados. Poder
utiliz-la para fazer modificaes nas curvaturas das linhas
que formam os objectos.

Veja as prximas figuras. Desenhamos uma recta horizon-
tal, escolhemos a ferramenta Arrow Tool, e com o cursor do
rato arrastamos um ponto arbitrrio no meio da recta, para
cima.


2
Para ter maior coerncia 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 GRFICA EOS FUNDAMENTOS BSICOS 35




Subselection Tool
Se escolher a segunda das duas setas na barra de ferramentas, ou
seja, a Subselection Tool, colocar o programa em modo de seleco
de sub-objectos, o que lhe permitir seleccionar os elementos compo-
nentes dos objectos em si, como por exemplo, os pontos que formam
um crculo. Veja a figura abaixo.

o objecto crculo os pontos que o formam...


Se estiver no modo de seleco de sub-objecto poder seleccionar um
ponto componente da forma de um objecto (vrtice) e mov-lo para
outro stio, e ento criar novas formas. Tambm poder seleccionar e
mover os nodes dos vrtices, responsveis pelo controlo da curvatura
do segmento ao qual este pertencem. Veja a figura a seguir.
ANTES DEPOIS


36 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Para activar um vrtice e poder modificar a sua posio ou node basta
seleccionar a ferramenta Subselection Tool e carregar com o rato em
cima da regio onde est o vrtice. Caso no saiba onde o vrtice est
seleccione com esta mesma ferramenta uma regio volta do ponto
onde pensa existir um vrtice. Se de facto existir algum vrtice na regio
da curva que marcou, estes e os seus nodes ficaro visveis. Ento
poder arrast-los para outros stios e modificar a aparncia da forma.
Line Tool
Logo a seguir na barra de ferramentas, a ferramenta para criao 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 stio e liberte o boto do
rato. Se usar o SHIFT enquanto desenha, poder fazer linhas horizon-
tais, verticais ou a 45.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 37


Depois de criada a linha, pode modificar os seus parmetros 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 nmero e o estilo (Stroke Style) se carregar na caixa com a pa-
lavra SOLID (figura acima).


Esto disponveis diversos estilos de linha, tracejadas, pontilhadas,
slidas, etc. Tambm poder carregar no boto 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


SOLID (SLIDO)
O primeiro estilo disponvel o SOLID (slido), onde a linha tem uma
aparncia contnua. 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 disponvel a seguir ao SOLID o DASHED (linha
tracejada), que fornece a seguinte janela para ajuste.

I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 39


Nas duas caixas a seguir a DASH poder regular, respectivamente, o
tamanho de cada segmento do tracejado e do espaamento, o que
significa dizer que se preencher os campos com os valores 8 e 5 ter
segmentos com 8 pixis de comprimento espaados 5 pixis entre si.
DOTTED (PONTEADO)
Temos ento o estilo dotted ou ponteado.


Na caixa DOT SPACING poder regular o espaamento dos pontos.
RAGGED (IRREGULAR)
O estilo a seguir na caixa dos tipos o RAGGED.
Neste estilo esto disponveis parmetros como PATTERN, WAVE
HEIGHT e WAVE LENGTH, que correspondem, respectivamente, ao
padro, altura e comprimento da irregularidade.
O PATTERN corresponde ao padro da linha e permite vrias escolhas:
SOLID, SIMPLE, RANDOM, DOTTED, RANDOM DOTTED, TRIPLE
DOTTED e RANDOM TRIPLE DOTTED, correspondentes a slido,
simples, aleatrio, ponteado, ponteado aleatrio, ponteado triplo e
ponteado triplo aleatrio. No necessrio decorar exactamente o que
cada um destes parmetros significa, porm vale a pena experiment-
40 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


-los quando estiver a trabalhar porque modificam significativamente a
aparncia final.
No campo WAVE HEIGHT poder ajustar a amplitude e turbulncia da
irregularidade em quatro nveis disponveis, consoante um menor ou
maior grau de turbulncia: FLAT, WAVY, VERY WAVY e WILD.
Tambm poder ajustar o comprimento da irregularidade pelo WAVE
LENGTH. So tambm quatro as opes, 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 (variao do ponto) e DENSITY (densidade).
No DOT SIZE poder regular o tamanho dos pontos, que do menor para
o maior so: TINY, SMALL, MEDIUM e LARGE.
A seguir poder regular a variao dos pontos (DOT VARIATION) por
meio de quatro opes: ONE SIZE, SMALL VARIATION, VARIED SI-
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 41


ZES e RANDOM SIZES. A primeira opo produz pontos do mesmo
tamanho. A segunda produz pontos que possuem uma pequena varia-
o de tamanho. Na terceira temos a produo de pontos de tamanhos
variados e na quarta, pontos de tamanhos aleatrios.
No campo DENSITY poder regular a densidade dos pontos, ou seja,
se os pontos so produzidos pegados uns aos outros ou no. As op-
es da mais densa para a menos densa so: 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 (espaamento horizontal), JIGGLE (agitao),
ROTATE (rotao), CURVE (curvatura) e LENGTH (comprimento).
42 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Na primeira opo, THICKNESS, possvel ajustar a espessura das
linhas produzidas no padro. Da mais fina para a mais grossa, as
opes so: HAIRLINE, THIN, MEDIUM e THICK.
No campo SPACE possvel regular o espaamento entre as linhas
produzidas no padro. A comear pelo menos espaado, temos as se-
guintes opes neste campo: VERY CLOSE, CLOSE, DISTANT e VE-
RY DISTANT.
Em JIGGLE podemos ajustar o padro de distribuio vertical e hori-
zontal das linhas. Da opo menos para a mais catica as opes so:
NONE, BOUNCE, LOOSE e WILD.
Na caixa ROTATE possvel regular a rotao das linhas. Os valores
dos ngulos de rotao so pr-estabelecidos pelo programa e no
podem ser mudados. Porm, possvel escolher as seguintes opes,
da menos para a mais radical: NONE, SLIGHT, MEDIUM e FREE.
Temos tambm o campo CURVE, onde possvel ajustar a curvatura
das linhas produzidas. Da menos curva para a mais curva as opes
so: STRAIGHT, LIGHT CURVE, MEDIUM CURVE, VERY CURVED.
Em LENGTH podemos ajustar o comprimento das linhas. Com isso
possvel criar variaes verticais de tamanho. As opes so: EQUAL,
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 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 tambm o
quadro que diz ZOOM 4X para permitir a visualizao do efeito linha
de forma mais detalhada. Tambm 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 lao (Lasso Tool). Com esta
ferramenta poder seleccionar partes internas de um objecto. No deve
confundir-se com o modo de seleco 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 utilizmos o LASSO para seleccionar uma regio, conforme
nesta figura.

44 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Feito o LASSO, teramos seleccionado a regio indicada na figura
abaixo.

Esta regio seleccionada poderia ser ento eliminada, o que
transformaria a recta nica original em duas menores independentes,
conforme a prxima figura.

Pen Tool
A prxima 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 GRFICA EOS FUNDAMENTOS BSICOS 45


O modo de criao dos pontos simples. Depois de seleccionar a pena,
v com o rato para a rea de desenho e carregue no boto. O Flash
criar o primeiro ponto da curva. Mova ento o rato para outro stio.
Ainda dentro da rea de desenho, carregue novamente no boto para
criar o segundo ponto. Sem libertar o boto, 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-
fcie, volte com o rato para cima do primeiro ponto criado e ver um pe-
queno crculo surgir ao lado do cursor. Esta a indicao de que se car-
regar no boto 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 parmetros que
podero ser modificados.


Pode ver que o Flash no 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 parmetros
descritos anteriormente para as linhas, ou seja, a caixa de seleco 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


No canto inferior esquerdo encontrar quatro caixas menores nomeadas
W, H, X e Y. Elas indicam respectivamente a largura (Width), altura
(Heigth), posio horizontal (X)
3
e posio 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 no faz sentido, mas se estiver a criar uma forma
fechada, ento 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.

OBSERVAO
Ao ser criada uma forma ela inclui duas regies: a linha que
determina a sua forma e a regio interna (que pode ou no
ser preenchida com uma cor). Estes elementos so
conhecidos como LINE e FILL respectivamente.

Text Tool
O prximo cone da barra de ferramentas uma letra A. Esta
ferramenta a Text Tool, destinada criao de textos.

3
O FLASH considera os valores de X (coordenada horizontal) e Y (coordenada vertical) a comear
de zero. X = 0 a posio mais esquerda na horizontal e Y = 0 a posio mais acima na
vertical. Logo, a posio X=0 e Y=0 o ponto superior esquerdo da janela de desenho.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 47


Seleccione-a e mova o rato para a rea de desenho. Carregue no boto
do rato e ver surgir uma caixa conforme vemos na pgina 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 varivel 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 forar o Flash a
formatar o texto numa regio horizontal especfica.
Digite ento qualquer coisa no interior da caixa, algo com vrias 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 parmetros
4
.

4
Caso no esteja a ver toda a janela como na figura, carregue no pequeno tringulo existente no
canto inferior direito da mesma para a maximizar.
48 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




A seguir temos uma descrio mais detalhada de cada um dos campos
acima.
ESCOLHA DO TIPO DE TEXTO
No campo de escolha do tipo de texto possvel seleccionar o tipo de
funcionalidade da caixa de textos. As opes possveis so 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 animao. Uma caixa de texto
ajustada como DYNAMIC TEXT permite ser actualizada durante a
execuo da animao, de forma dinmica. Ento, poder, durante a
execuo da animao, controlar e colocar textos dentro da caixa, que
podero chegar-nos de ficheiros, por exemplo. As caixas ajustadas
como INPUT TEXT tm a finalidade de servir como caixas de entrada
de texto em formulrios, por exemplo, cujos valores podem ser lidos por
ActionScript.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 49


ESPAAMENTO DE CARACTERES
Neste campo poder ajustar o espaamento entre as letras. Geralmente
este campo est preenchido com o valor zero, que corresponde ao
espaamento normal das letras. O mximo valor que poder colocar
neste campo 60, que corresponde a um maior espaamento entre as
letras e o menor valor 60, que corresponde ao menor espaamento.
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 tero. Numa
determinada caixa de texto poder ter diferentes tipos e tamanhos de
letra.
POSIO DOS CARACTERES
Nesta caixa poder ajustar a posio de caracteres em relao s
linhas. As opes so NORMAL, SUPERSCRIPT e SUBSCRIPT. Com
a opo SUPERSCRIPT poder escrever expoentes de equaes, por
exemplo, e com a opo SUBSCRIPT poder colocar ndices nestas
mesmas equaes. 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


SUPERSCRIPT: x
2
+ y
2
= z
2

SUBSCRIPT: x
1
+ x
2
= z
1
Este campo s pode ser utilizado para as caixas de texto do tipo
STATIC.
AJUSTE DE COR, BOLD e ITLICO
Os trs campos a seguir so a caixa de ajuste de cor, o B e o I onde
pode colocar o texto em negrito (BOLD) ou itlico (ITALIC). Tambm
neste caso poder colocar letras de diversos tipos, tamanhos, cores e
formatos numa mesma caixa de texto.
DIRECO DO TEXTO e OPES DE ALINHAMENTO
A seguir, temos a caixa de ajuste da direco do texto, indicada abaixo
pelo primeiro cone.


Se carregar neste cone poder escolher uma das seguintes opes:
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 GRFICA EOS FUNDAMENTOS BSICOS 51




Se escolher VERTICAL, LEFT TO RIGHT (vertical, da esquerda para a
direita), o texto passa a ser mostrado conforme a figura abaixo.

OPES DE ROTAO
Se todavia carregar no cone logo abaixo daquele de ajuste de direco
de texto, poder rodar o texto, de forma que a imagem ao lado se torna
igual seguinte.
52 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Veja na figura abaixo a indicao do cone de rotao do texto existente
na janela de propriedades da letra.

Se tivesse escolhido na caixa de seleco de direco do texto (no
confundir com a caixa de rotao do texto) a opo VERTICAL, RIGHT
TO LEFT (vertical, da direita para a esquerda), teria visto o texto ficar
conforme a imagem abaixo.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 53



Assim como no caso anterior, se carregar no cone de rotao do texto
far com que o texto passe do alinhamento existente na imagem acima
para o visto na imagem abaixo.

54 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Estas opes de formatao de texto so teis tambm para escrita em
outras linguagens em que o texto se l noutras direces. O suporte a
essas linguagens como o Coreano, Japons e outras, foi melhorado
nesta verso do Flash, j que pode utilizar o UNICODE para a interpre-
tao do texto
OPES DE FORMATAO
Neste campo poder ajustar alguns outros parmetros na formatao
do texto dentro da caixa. Assim que carregar com o rato neste boto ve-
r a janela abaixo.


Nesta janela poder regular o INDENT, que corresponde posio
relativa da primeira letra do pargrafo. Veja nas figuras abaixo um texto
com indentao zero e com uma indentao de valor positivo.


I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 55


Outros parmetros que podem ser regulados na janela de opes de
formatao so LINE SPACING (espaamento 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 opes de Kerning
5

disponveis no prprio tipo de letra.
W, H, X e Y
Estes quatro parmetros so os responsveis pela definio da largura
(width), altura (height), posio horizontal (X) e posio vertical (Y) da
caixa de texto.
URL
Neste campo poder colocar endereos de Internet para que se tornem
hiperligaes (links). Para isto, basta seleccionar a parte do texto que
gostaria de transformar numa hiperligao, e na caixa URL colocar o
endereo de Internet correspondente. Desta forma, quando a sua
animao estiver a ser visualizada na Internet, a palavra que marcou
como link poder ser clicada e actuar normalmente como todas as
outras hiperligaes dos sites.
O endereo de Internet deve ser escrito neste campo na forma tradi-
cional, ou seja, http://www.pagina.com
ALVO DA URL
Esta uma funo avanada de HTML e indica onde a pgina no
campo URL dever ser vista. As opes deste campo so _blank,

5
Distribuio das letras entre si de forma a tornar um determinado texto visualmente correcto do
ponto de vista grfico.
56 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


_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
pgina deve ser carregada na janela de maior hierarquia do browser
relativamente hierarquia da pgina actual. Se no tiver definido
nenhuma hierarquia, por Java ou JavaScript, ento a pgina
carregada na janela actual. A terceira opo indica para carregar a
pgina na janela actual. A ltima opo indica que a pgina deve ser
carregada na janela aberta de maior hierarquia. Assim como a outra, se
nenhuma hierarquia tiver sido definida a pgina carregada na janela
actual.
O TEXTO PODE SER SELECCIONADO?
Este boto indica se o texto da caixa pode ou no ser seleccionado
quando a animao estiver a ser visionada pelo utilizador, o que indica,
em suma, se permite ou no que o utilizador seleccione o texto com a
inteno de copi-lo em seguida. Se desmarcar este campo o texto ser
visto mas no poder ser seleccionado e consequentemente no 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 informaes de tais letras faz com que o ficheiro aumente de
tamanho. Felizmente, o Flash apenas armazena a informao 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 opo USE DEVICE FONTS indicar ao Flash para que
este no armazene internamente as informaes relativas s letras
utilizadas nas animaes e tente utilizar as fontes que existam na
mquina onde estiver a correr, que mais se assemelhem s que utilizou.
Geralmente no indicado que seleccione esta opo, a no ser que
tenha absoluta certeza de que as fontes so exactamente as mesmas.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 57


Como na prtica impossvel ter essa certeza absoluta, ir correr o
risco de ver a sua animao completamente destruda pelo uso de
uma fonte inadequada (ateno s questes legais no uso de fontes
pagas).
TIPO DE LINHA
Nesta caixa poder ajustar o estilo da caixa de textos no que se refere
disposio das linhas. As opes para as caixas de texto do tipo
DYNAMIC so: 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 disponvel ento
somente parte deste ser mostrado. A opo MULTILINE faz com que a
caixa de textos passe a ter mltiplas linhas; respeitando o tamanho da
caixa. Alm disto, o texto formatado automaticamente em linhas,
medida em que atinge a borda direita da caixa. A opo 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
mudana de linhas pela colocao 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 pginas Flash que sero preenchidas de forma
dinmica, medida em que a pgina surgir. Digamos, por exemplo, que
deseja fazer a leitura do texto de um ficheiro que muda diariamente e
mostra esse contedo na sua animao. Isto possvel com o uso das
caixas deste tipo.
As propriedades desta caixa assemelham-se s das caixas do tipo
STATIC vistas anteriormente; porm, alguns outros botes e campos
novos surgem, tal como veremos a seguir. Veja a figura seguinte.

58 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


A primeira coisa que observa nas propriedades dessa caixa o campo
VAR e o boto CHARACTER. No primeiro, possvel definir as vari-
veis que vai utilizar em ActionScript. Pode, por exemplo, criar uma
varivel qualquer e armazenar nela valores a utilizar mais adiante. No
boto CHARACTER vai poder definir que letras quer que o Flash arma-
zene internamente no ficheiro final. Se accionar este boto vai ver a ja-
nela a seguir.


A primeira opo NO CHARACTERS indica que nenhuma informao
de fontes ir ser armazenada. ALL CHARACTERS indica que todas as
informaes das letras sero armazenadas. ONLY usado em combina-
o com as quatro caixas seguintes indica que apenas as letras mais-
culas de A at Z sero armazenadas, apenas as letras minsculas de a
at z sero armazenadas, apenas os nmeros de 0 a 9 sero armaze-
nados e apenas os sinais de pontuao sero armazenados. A ltima
caixa abaixo da frase AND THESE CHARACTERS indica algumas
letras e sinais de pontuao que poder inserir para indicar mais
precisamente ao Flash o que deseja que ele faa. Esta caixa tambm
til para definir os caracteres acentuados da l ngua portuguesa, por
exemplo.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 59


BOTO HTML
Se seleccionar este boto, indicar ao Flash para preservar as
caractersticas bsicas de formatao de textos HTML, como tipo de
letra, estilo, cor, tamanho, e hiperligaes nas caixas de texto, pela apli-
cao automtica dos correspondentes tags em HTML quando a anima-
o final for exportada para SWF.
Os seguintes tags em HTML so suportados: <A>, <B>, <FONT COLOR>,
<FONT FACE>, <FONT SIZE>, <I>, <P> e <U>. Tambm so suportados os
seguintes atributos: LEFTMARGIN, RIGHTMARGIN, ALIGN, INDENT e LEA-
DING.
Poder preservar as caractersticas de formatao e estilo dos textos
HTML pelo uso de variveis das caixas de texto ou uso do nome da
instncia da caixa de texto.
Se o desejar fazer pelo uso das variveis 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 opes abaixo, faa pelo menos uma: seleccione o boto
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 varivel do campo de texto para um valor que inclua alguns
tags de HTML.
Por exemplo, se ajustar a varivel txt com o valor,
txt = <B>apenas um teste</B>

e accionar o boto HTML, ento o texto ser mostrado em negrito, uma
vez que o accionamento deste boto faz o Flash seguir as instrues
60 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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, ento use os seguin-
tes comandos.
instName.html = true;
txt = <B>apenas um teste</B>

Se por outro lado quiser preservar as caractersticas dos textos HTML
pelo uso do nome da instncia da caixa de textos, faa 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 opes abaixo, faa pelo menos uma: seleccione o boto
HTML para que o texto seja finalizado como HTML respeitando os tags
deste padro ou no painel ACTIONS ajuste a propriedade html do
objecto do tipo TextField para true.
InstanciaUm.html = true;

Ajuste a varivel do campo de texto, no painel ACTIONS, para um valor
que inclua alguns tags de HTML.
Agora, se a instncia 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 no se quer visvel a borda da caixa de textos.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 61


Input Text
Este tipo de caixa de textos indicado para a criao de formulrios.
So campos que podem conter valores previamente preenchidos mas
que podem ser modificados pelo utilizador. As propriedades deste tipo
de caixa so as mesmas j observadas para as caixas do tipo STATIC e
DYNAMIC.
Porm, ainda surge um novo campo chamado MAXIMUM CHARAC-
TERS, quando se escolhe a caixa do tipo INPUT. Neste campo poder
definir o mximo nmero de letras que a caixa ter a capacidade de
conter. O uso desta varivel indicado para limitar a quantidade de
texto que tenciona deixar que seja preenchida, pelo utilizador num for-
mulrio, por exemplo.
TIPO DE LINHA
No caso da caixa de texto do tipo INPUT ainda existe mais uma opo
para esta caixa, alm das descritas nas caixas de tipo DYNAMIC, que
PASSWORD. Ao colocar esta opo ligada num formulrio far com
que qualquer texto inserido seja mostrado como uma srie de asteris-
cos, como j de uso tradicional nos campos de password de formu-
lrios em HTML.
Oval Tool & Rectangle Tool
Ao voltar novamente barra de ferramentas do Flash, encontramos os
dois prximos cones a seguir ao Text Tool. So eles a oval (OVAL
TOOL) e o rectngulo (RECTANGLE TOOL), representados pelos co-
nes de um crculo e um quadrado...
O procedimento para criao de uma forma destas simples. Carregue
com o rato num ponto na rea de desenho, movimente o cursor para
outro stio e liberte o boto.
DICA
62 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Para criar quadrados ou crculos, com as ferramentas
RECTANGLE TOOL e OVAL TOOL, respectivamente,
mantenha o SHIFT carregado no momento da criao.

Aps desenhar a forma tambm poder carregar com o rato duas vezes
em cima desta e utilizar a Arrow Tool para ajustar as suas propriedades,
que so iguais s descritas para o caso da linha.
DICA
Para criar quadrados ou rectngulos com os cantos
arredondados, carregue duas vezes no cone
RECTANGLE TOOL antes de criar o objecto.

Porm, estas formas, como so fechadas, permitem agora que se
possa escolher uma cor ou padro de preenchimento (FILL) interno.
Ento, depois de criar a forma deve seleccionar a regio 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 ento escolher uma cor ou um padro de gradiente, conforme
poder ver no pequeno rodap desta janela.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 63


Seleccione um gradiente qualquer.
Ver que, no lado direito da interface do Flash, existe uma janela cha-
mada COLOR MIXER, vista na figura abaixo
6
e que contm os parme-
tros relativos ao gradiente escolhido.


Na parte superior esquerda da janela tem duas caixas de seleco de
cor. A primeira delas est ao lado do cone de um lpis, 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 possvel regular
o tipo de gradiente. As outras opes possveis so: NONE, SOLID,
LINEAR GRADIENT e BITMAP, correspondentes a no preencher um

6
Se a janela no seu programa no estiver com a aparncia indicada carregue no pequeno tringulo
no canto inferior direito desta, para a maximizar.
7
Na barra de ferramentas tambm existem estes dois cones, o balde e o lpis, e tm exactamente
a mesma funo.
64 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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



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 possvel regular directamente os valores das trs cores
bsicas, ou seja, Red, Green e Blue (vermelho, verde e azul)
8
.
Em ALPHA poder regular a transparncia que a cor criada ter.
Na parte inferior da janela do color mixer pode ver dois quadrados e um
rectngulo vertical. No primeiro mostrada a cor que foi escolhida no
quadrado do meio. No rectngulo vertical direita possvel regular o
nvel 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 tambm o
que o sistema hexadecimal.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 65




A ltima caixa dessa janela a que pode ser vista com o valor
#57CCA0. Este nmero corresponde ao valor hexadecimal da cor onde
a cruz est. No caso, o valor corresponde aos nveis RGB de 87, 204 e
160, respectivamente, conforme mostrado na figura acima. Este nmero
extremamente til quando se criam pginas de Internet, porque
quando se faz uma pgina 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 pginas de Internet so escritas.
Equivalem a ficheiros-texto com todos os cdigos (formataes) necessrios para fazer uma
pgina de Internet aparecer nos browsers como se pretende.
66 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


lhar no formato de cor RGB
10
ou HSB
11
. Tambm 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 so as trs cores bsicas utilizadas em televiso e por consequncia,
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 ausncia da cor. O preto equivale a 0,0,0 e o
branco equivale a 255, 255, 255.
11
HSB = Hue Saturation Brightness (tom, nvel de cor e brilho). Neste sistema, as cores so
definidas pelo seu brilho, que pode variar de 0 (negro) a 100% (brilho mximo), pelo seu nvel de
cor, que varia segundo a mesma escala e pelo seu tom, definido por graus de rotao, 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 GRFICA EOS FUNDAMENTOS BSICOS 67


Para perceber melhor o efeito, reduzimos o nmero 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 ento 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 incio, 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 GRFICA EOS FUNDAMENTOS BSICOS 69




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

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

OBSERVAO
A forma na qual o gradiente aplicado varia de
acordo com a regio do objecto onde se carregou no
acto de criao. Poder posteriormente mudar este
ponto pelo uso da ferramenta FILL TRANSFORM
TOOL da barra de ferramentas.
70 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Pencil Tool
Ao voltar barra de ferramentas do Flash, vemos o cone a seguir ao
quadrado. o lpis (PENCIL TOOL). Ele permite fazer linhas mo
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 seleco do modo do lpis (PENCIL
MODE). Carregue neste cone e uma
segunda janela ser vista. Veja a figura
ao lado.
Imediatamente poder ver trs novas
opes: STRAIGHTEN, SMOOTH e
INK, que possibilitam a criao de
linhas rectas, suaves ou mo livre. A
diferena que, apesar dos dois
primeiros modos tambm permitirem
que se desenhe mo livre, faro uma transformao 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 sero transformadas em linhas rectas. A
mesma coisa acontece no modo SMOOTH. Depois de terminar o dese-
nho da linha, o Flash entra em aco 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 mo livre com o lpis so
para o Flash, depois de criadas, exactamente o mesmo tipo de objecto
que uma linha comum. Logo, tambm possuem uma janela de proprie-
dades, na parte central inferior do ecr, com os mesmos parmetros
das linhas comuns; parmetros estes descritos anteriormente.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 71


Brush Tool
Ao lado do lpis, vemos na barra de ferramentas do
Flash um pincel (BRUSH TOOL). A funo do pincel
a mesma do lpis, ou seja, desenhar mo livre.
Porm, produz linhas de dimetro largo.
Assim como o lpis, 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 regies por onde passar com a
cor seleccionada.
PAINT FILLS Este modo de pintura apenas ir colorir as regies de fill
de um objecto e deixar as suas linhas intactas.
PAINT BEHIND Se for seleccionado faz com que o brush apenas
desenhe por detrs dos objectos.
PAINT SELECTION Apenas pinta as regies de fill dos objectos que
estejam seleccionados.
PAINT INSIDE Apenas pinta as regies de fill que sejam as mesmas
correspondentes ao primeiro ponto onde o brush tocou. Isso quer dizer
que, se o brush tiver comeado a pintar, por exemplo, na rea de fill de
um crculo, no 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Repare que no primeiro caso tanto as linhas como o fill da figura foram
afectados. J no segundo caso, apenas as regies de fill foram afec-
tadas. No terceiro, ele fez a pintura por trs do objecto sem o afectar.
No quarto, apenas a regio de fill do objecto foi afectada. No ltimo, o
objecto no foi afectado em nenhum aspecto. Isto explica-se pelo facto
de que iniciamos a pintura na parte externa do objecto. Ento, apenas
poderamos pintar nesta regio.

OBSERVAO
Um objecto geralmente formado pela sua linha exterior
(LINE) e sua regio de preenchimento de cor (FILL).
Se escolher a ferramenta de seleco 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 GRFICA EOS FUNDAMENTOS BSICOS 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 tablet
12
que
seja sensvel presso.
Veja na figura abaixo linhas
criadas com um tablet e com a funo USE PRESSURE. As linhas
foram criadas por variao na presso 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 so
capazes de responder a 1024 ou mais nveis de presso ou inclinao da caneta. Modelos
sofisticados inclusive correspondem a verdadeiros monitores de computador, do tipo plano, que
so colocados sobre a mesa, na horizontal, como uma prancha de desenho, e ainda por cima so
sensveis presso. Visite o site do melhor e principal fabricante de tablets, a Wacom
(www.wacom.com).
74 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Na barra de OPTIONS pode ver logo a seguir ao cone USE
PRESSURE duas caixas de seleco, 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 GRFICA EOS FUNDAMENTOS BSICOS 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
rotao do objecto e tambm distorc-lo em ambas as direces.
Construa um objecto qualquer e com o rato carregue duas vezes na
regio 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 smbolos para representar as diversas operaes que pode
realizar, nomeadamente, ajuste da largura, ajuste da altura, rotao,
distoro horizontal e distoro vertical. Veja na figura abaixo os smbo-
los existentes.


76 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Para realizar uma destas funes basta clicar quando o cone desejado
surgir e mover o rato para a direco ou direces que o cone indicar.
OBSERVAO
No modo normal o FREE TRANSFORM TOOL utiliza
o canto esquerdo inferior da seleco como o centro
para as transformaes.
Se mantiver o ALT carregado durante o processo,
passa a ser considerado o centro real da seleco.
Com o SHIFT carregado, a escala feita mantendo-se
as propores.
Se utilizar o CONTROL e arrastar um dos cantos da
seleco, poder distorcer o objecto!

Ao seleccionar a ferramenta FREE TRANSFORM TOOL poder ver
estas opes de distoro, escala e rotao, no menu OPTIONS da
barra de ferramentas. Tambm ver uma quarta opo, chamada
ENVELOPE a qual descreveremos a seguir.

ENVELOPE
A funo ENVELOPE serve para distorcer um determinado objecto e
mold-lo forma pretendida, de forma suave. Se seleccionar um
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 77


objecto e escolher esta funo, vai ver que diversos pontos surgem
volta da seleco, como na figura abaixo.




Estes pontos que surgem esto 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Uma vez que termine a distoro por envelope, e saia do modo de
edio, perde o envelope que acabou de fazer. Ao retornar novamente
ao modo de envelope, ver que a seleco volta a ficar direita.


SUBTRACO DE FORMAS
Pela utilizao 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 GRFICA EOS FUNDAMENTOS BSICOS 79


determinado objecto, crie a forma correspondente ao furo no mesmo
layer, exactamente na regio que quer furar; tendo o cuidado de criar
este novo objecto com uma cor diferente da utilizada no primeiro. Ento,
seleccione esta segunda forma e elimine-a.
Se quer por exemplo fazer um furo num crculo, desenhe o objecto cor-
respondente ao furo na posio desejada, seleccione-o e apague-o.

Objecto original
outro objecto desenhado por cima
para ser o furo...




Este segundo objecto ento seleccionado e apagado. Temos agora o
objecto inicial furado.


80 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


UNIO DE FORMAS
Para fazer uma unio de duas ou mais formas, o princpio exacta-
mente o mesmo descrito na seco anterior sobre SUBTRACO DE
FORMAS. Porm, 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 sero desenhados em seguida,
utilizamos a Arrow Tool para seleccionar a linha de borda do objecto,
que apagada em seguida. Assim, ficamos apenas com o rectngulo
interno.


Desenharemos agora por cima deste rectngulo, algumas outras
formas, at obter o resultado seguinte.
I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 81




Seleccione com o Arrow Tool e elimine todas as linhas de borda das
formas que desenhou por cima da original. Obter ento 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 regio da borda do objecto. Assim, obter o
objecto da prxima pgina.
82 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Fill Transform Tool
O prximo cone na barra de ferramentas o FILL TRANSFORM
TOOL, que permite a transformao do gradiente utilizado no preenchi-
mento de cor de um determinado objecto.
Crie um objecto e preencha-o com um gradiente. Seleccione a funo
FREE TRANSFORM TOOL e carregue na regio de fill do objecto. Um
crculo aparecer volta do objecto, tendo como centro a regio central
do gradiente. Este crculo possui quatro elementos: um quadrado e trs
pequenas bolas, que realizam as funes indicadas na figura abaixo.

I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 83


Ink Bottle Tool & Paint Bucket Tool
Os dois prximos cones na barra de ferramentas so o INK BOTTLE
TOOL e o PAINT BUCKET TOOL.
Com o INK BOTTLE TOOL, cujo cone um tinteiro, possvel colorir
as linhas de contorno das formas. Para tal, seleccione-o, ajuste os par-
metros nas propriedades visveis 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 incio 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 crculo azul com uma seta
diagonal para baixo. Se carregar neste cone vai ver que uma pequena
janela surge com vrias opes. Veja a seguir.

13
Que so as mesmas j descritas anteriormente para as linhas, no incio deste captulo.
14
Ponto onde se carregou com o rato dentro do objecto para criar o gradiente.
84 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Estas opes causam os seguintes efeitos.
DONT CLOSE GAPS Se por acaso a forma que estiver a preencher
tiver alguma falha ou buraco intencional na rea de FILL e escolher esta
opo, ento o preenchimento de cor ou gradiente feito e deixa
intactas tanto falhas como reas de furo.
CLOSE SMALL GAPS Esta funo preenche as reas de FILL de
objectos mas preenche tambm 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 dimenso.
CLOSE MEDIUM GAPS Esta funo igual anterior mas consegue
corrigir reas com falhas e furos de mdio tamanho.
CLOSE LARGE GAPS Esta funo igual anterior mas consegue
corrigir reas com falhas e furos de grande tamanho.


I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 85



OBSERVAO


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 aparncia consoante o ponto onde o balde tocou
no momento da criao do gradiente.
Com a funo 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 posio 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 posio horizontal.




86 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Eyedropper Tool
O EYEDROPPER TOOL, cujo cone uma pipeta, o prximo cone da
barra de ferramentas, cuja funo 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 prximo cone na barra de ferramentas. Com ele
possvel apagar regies dos objectos, sejam linhas ou reas de pre-
enchimento. Uma vez seleccionada esta ferramenta, surgiro parme-
tros na janela de options da barra de ferramentas, conforme a figura
abaixo.


I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 87


No ERASE MODE, pode ver que existem diversos modos. So eles:
ERASE NORMAL Este o modo normal. medida em que desloca o
pincel, ele vai apagar todas as regies por onde passar.
ERASE FILLS Neste modo somente as reas de fill so apagadas. As
linhas de contorno so deixadas intactas.
ERASE LINES Este exactamente o inverso do anterior, ou seja, as
linhas de contorno so apagadas e as reas de fill so deixadas in-
tactas.
ERASE SELECTED FILLS Apenas apaga as regies de fill dos objec-
tos que estejam seleccionados.
ERASE INSIDE Apenas apaga as regies de fill que sejam as
mesmas correspondentes ao ponto onde o ERASER TOOL tocou pela
primeira vez. Isso quer dizer que, se tiver comeado a apagar, por
exemplo, na rea de fill de um crculo, no poder apagar nada que no
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.
Tambm 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 visualizao de elementos diminutos.
Assim que seleccionado, mostra na janela de options da barra de
ferramenta duas opes: ENLARGE e REDUCE. Com elas possvel
fazer o aumento ou reduo do desenho, respectivamente. No deve
confundir esta funo com aquela para aumentar os objectos de facto.
O ZOOM TOOL apenas aumenta e diminui no ecr, para facilitar a
visualizao dos objectos, e no modifica o tamanho dos objectos.
A sua utilizao simples. Basta escolher uma das duas opes menci-
onadas no pargrafo anterior e carregar na rea de desenho. Veja a
figura abaixo.

I.1. A INTERFACE GRFICA EOS FUNDAMENTOS BSICOS 89


Color Swatches
Voltamos interface grfica do Flash, dirigimo-nos agora ao lado direito.
Logo abaixo do COLOR MIXER encontramos a janela COLOR
SWATCHES.

Nesta janela encontrar vrias cores em pequenos quadrados. So
cores pr-ajustadas, prontas a utilizar. Poder acrescentar as suas
prprias 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 opo ADD
WATCH no menu disponvel 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-
bm podero ser adicionados aos swat-
ches, como pode ver pelos cones na
parte debaixo da janela.
Se carregar no cone no canto superior
90 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


direito da janela ver surgir um menu com algumas funes, as quais
explicamos a seguir.
DUPLICATE SWATCH poder duplicar um swatch seleccionado se
utilizar esta funo.
DELETE SWATCH poder eliminar o swatch seleccionado.
ADD COLORS Interessante esta funo... com ela poder
acrescentar janela de swatches cores que venham de tabelas de
cores ou de imagens indexadas como GIFs. excelente se precisar
trabalhar numa animao que deva ter cores precisamente escolhidas.
REPLACE COLORS importa cores para o swatch que venham de
tabelas de cores ou de imagens indexadas como GIFs, exactamente
como a funo anterior, porm, a anterior acrescenta as cores importa-
das janela de swatches, enquanto que esta substitui as que l esta-
vam pelas que esto a ser importadas.
LOAD DEFAULT COLORS Faz a janela de swatches voltar ao estado
normal ajustado de fbrica. Porm as cores default podem ser muda-
das pelo utilizador como veremos a seguir...
SAVE COLORS grava num ficheiro as cores que esto na janela de
swatches. Pode mais tarde recuper-las atravs das opes ADD
COLORS ou REPLACE COLORS.
SAVE AS DEFAULT faz o mesmo, porm as cores gravadas passam
a ser as cores de fbrica, o que modifica a funo LOAD DEFAULT
COLORS, que a partir do uso desta funo 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 GRFICA EOS FUNDAMENTOS BSICOS 91


HELP, MAXIMIZE PANEL e CLOSE PANEL so as trs ltimas opes
do menu que servem para trazer o help na seco correspondente,
maximizar e fechar a janela de SWATCHES, respectivamente.

92 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



I.2. OS MENUS


Neste captulo vamos falar das principais opes dos menus no Flash
MX, no abordando porm 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 prprios destes sistemas operativos; estamo-nos a
referir a comandos como FILE OPEN, FILE SAVE, etc.
Os Menus e suas funes

FILE
O primeiro menu que se v do lado esquerdo na parte superior, o
FILE e nele encontramos algumas opes importantes, sobre as quais
devemos falar.

New From Template
A primeira funo deste menu que nos chama a ateno a NEW
FROM TEMPLATE. Ao carregar nela ver a janela a seguir.
94 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Os templates so formatos padronizados para facilitar a sua criao.
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 criao de anncios ao estilo dos presentes em pginas
de Internet (banners), para desenvolvimento de material para televiso
e vdeo, para a criao de pginas com menus, para a criao de
pginas para dispositivos mveis, para a criao de slideshows
1
, para
apresentaes comerciais e para questionrios.
Um dos templates que poder escolher o BROADCAST (veja a figura
seguinte), que j fornece a moldura a servir como guia para a produo
de vdeo.

1
Criao de pginas que mostram imagens em sequncias ao estilo de um projector de slides.
I.2. OS MENUS 95


NOTA

A rea de trabalho para vdeo ou televiso, ou seja, o tamanho do
frame, , em PAL, 720 x 576 pixis e em NTSC, 720 x 486 pixis.
Porm, quando se est a criar para estes formatos, no se pode
considerar toda a rea disponvel na imagem para a composio
dos elementos. Isto porque a imagem que se v nos televisores
est ampliada ligeiramente em relao ao que transmitido. Assim,
se um objecto estiver muito perto da borda, no ser visto.

Na imagem acima pode ver um rectngulo maior que diz WORK
AREA, mas que indica 720 x 540. Este formato indicado equivale a
ao formato NTSC com pixel quadrado. Na prtica, deve criar em
720 x 486 que o formato mais utilizado. Dentro deste rectngulo
v outro que diz ACTION SAFE que representa a rea onde deve
colocar os objectos e movimento da sua animao. Na verdade,
deve fazer a animao ocupar toda a WORK AREA, mas deve ter
em mente que qualquer coisa fora da ACTION SAFE corre o risco
de no ser vista. Finalmente, v um terceiro rectngulo que diz
TITLE SAFE. Esta rea menor representa o local onde deve
colocar textos e tudo o que precise ser visto ou lido, como
logtipos, etc.


Deve explorar outros templates existentes, como o PhotoSlideShow
para a criao de projeces de imagens sequenciais e os da categoria
QUIZ, para a criao de questionrios e sondagens.
96 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Todos os templates vm acompanhados de um layer com as instrues
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 opo OPEN AS LIBRARY. Deve
utiliz-la sempre que pretender abrir uma animao ou objectos que te-
nha previamente criado, para importar para o trabalho que estiver a cri-
ar. Com esta opo, 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 esto armazenados todos os smbolos
(objectos) criados, alm dos ficheiros que forem importados,
como imagens, sons, vdeos 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 nmero possvel de
objectos e sempre que possvel aproveitar os que j tenha criado para diferentes
partes da mesma animao. Se, por exemplo, pretende colocar trs rectngulos,
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 animao final o Flash
armazenar apenas um smbolo, o que tornar o ficheiro menor.

Cada trabalho que criar possui automaticamente a sua prpria 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 animao 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 animao
de e para determinados formatos de ficheiro. Pode importar ou exportar
formatos de filme tradicionais como AVI e MOV, ficheiros de som,
imagens, sequncias de imagens ou artes vectoriais (FreeHand, Illus-
trator, etc.), etc.
Esta funo bastante til quando se est a utilizar o Flash em conjunto
com algum software de edio de vdeo 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-
maes Flash, primeiro deve certificar-se que tem instalado no seu
computador o QuickTime Player. Caso contrrio ser impossvel 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 pgina).
Logo em seguida deve ir ao menu FILE > IMPORT e carregar no
ficheiro QuickTime (extenso MOV) para o poder importar.
Surgir a janela abaixo.


Esta janela contm duas perguntas: a primeira diz EMBED VIDEO IN
MACROMEDIA FLASH DOCUMENT. Se escolher esta opo, o filme
98 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

importado ser colocado no interior do ficheiro final da sua animao
Flash. A segunda hiptese diz LINK TO EXTERNAL VIDEO FILE e faz
com que o Flash no acrescente o filme QuickTime ao ficheiro final da
animao. De facto, esta opo apenas faz uma ligao (link) entre o
filme Flash final e o filme QuickTime. Porm, para que o vdeo seja vis-
vel, preciso que exporte a animao final no formato QuickTime.
Caso escolha a primeira hiptese ver surgir a seguinte janela.




Nesta janela poder ajustar a qualidade, o intervalo para a criao de
keyframes e o tamanho final do vdeo importado. Logicamente, quanto
qualidade, quanto maior melhor. O valor definido no campo do intervalo
para a criao de keyframes tambm responsvel pela qualidade final.
Quanto menor esse nmero, maior a qualidade.
I.2. OS MENUS 99

A caixa que diz SYNCHRONIZE VIDEO TO MACROMEDIA FLASH
DOCUMENT FRAME RATE sincroniza ou no o vdeo importado taxa
de frames por segundo (frame rate) da animao Flash onde est a ser
importado.
Logo abaixo uma outra caixa permite ajustar o nmero de frames de
vdeo a ser codificados por frames da animao 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 importao 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 aps a converso. 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 ento a seguinte janela.
100 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



A primeira seco da janela corresponde funo de MAPPING e ir
informar o Flash de que maneira pretende que a importao do ficheiro
seja feita. Em PAGES tem duas opes: SCENES e KEY FRAMES. Na
primeira poder definir se quer que as pginas do seu trabalho no
FreeHand sejam transformadas em cenas ou keyframes quando for
importada. Na opo LAYERS, poder definir como quer que os layers
do FreeHand sejam importados. A primeira opo LAYERS. Se a
escolher, os layers do FreeHand so importados como layers no Flash.
Se escolher a opo KEYFRAMES os layers do FreeHand so importa-
dos cada qual num frame na animao Flash, para o caso de se tratar
de uma animao onde cada frame foi desenhado como sendo um layer
no FreeHand. A terceira hiptese FLATTEN. Neste caso, todos os
layers do FreeHand so combinados e apenas um layer correspondente
criado no Flash.
Na seco PAGES da janela poder definir que pginas do ficheiro
FreeHand pretende importar, todas (ALL) ou um nmero definido de
pginas, se utilizar os campos FROM e TO.
I.2. OS MENUS 101

Na seco OPTIONS ver trs quadros:
INCLUDE INVISIBLE LAYERS, INCLUDE BACKGROUND LAYER e
MAINTAIN TEXT BOXES.
No primeiro poder definir se quer ou no importar os layers invisveis
que porventura possam existir no documento FreeHand importado. Na
segunda opo, poder definir se quer importar o layer de background
da arte no FreeHand. Na ltima opo, indicar ao Flash se quer manter
os textos criados no FreeHand ainda editveis no Flash.
Publish Settings
Do menu FILE esta opo a mais importante, no que diz respeito
produo das animaes em Flash. nela que dever ajustar todos os
parmetros que devem ser seguidos para a criao dos ficheiros finais
correspondentes ao trabalho que criar. Quando a seleccionar vai ver a
janela abaixo.


Vai ver que a janela acima possui trs subdivises, nomeadamente
FORMATS, FLASH e HTML.
102 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Porm, se marcar todos os quadros disponveis nesta janela, ver au-
mentar o nmero de subdivises.


Porm, de todas estas subdivises, as mais importantes so as trs
primeiras, as quais falaremos a seguir.
OPO FORMATS JANELA PUBLISHING
Nesta primeira diviso, dever marcar os formatos que pretende
produzir. Por defeito, o Flash produz sempre o filme final em SWF e
tambm a pgina HTML com os comandos para chamar o filme.
Dever notar que enquanto est a trabalhar na sua animao em Flash
o ficheiro guardado no disco no formato FLA. Quando finaliza a ani-
mao e a publica, o ficheiro tem o formato SWF. exactamente este
formato o que visualizado pelo Flash Player directamente no browser.
Alm disso, pode pedir a produo de uma imagem GIF, JPEG ou PNG
equivalente ao primeiro frame do seu filme.
I.2. OS MENUS 103

Existem tambm disponveis 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 distribudos e vistos
em mquinas que no possuam o Flash Player, ou colocados em CD-
ROM e DVD.
OPO FLASH JANELA PUBLISHING
Na diviso Flash, controlam-se os parmetros 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 pgina HTML, o browser precisa do plugin na verso
correcta (ver abaixo); destacamos as seguintes opes:



VERSION nesta caixa pode escolher qual a verso de filme Flash que
pretende gerar. Se marcar uma verso anterior 6 (Flash MX), muitas
das funes no programa sero desligadas e no as poder utilizar,
uma vez que no seriam possveis de visualizar numa verso antiga.
104 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

GENERATE SIZE REPORT quando marcada esta opo gerado um
ficheiro de texto no mesmo directrio onde estiver a gravar o seu
trabalho, com um resumo de tudo o que foi gerado durante a criao do
filme (publishing).
PROTECT FROM IMPORT - Marque esta opo se quiser impedir que
outros importem os seus filmes para utilizar nos seus trabalhos.
OMIT TRACE ACTIONS Esta opo funciona em conjunto com a
anterior. Se a ligar impedir que as operaes de trace (veja nota de
rodap) sejam mostradas na janela de sada (OUTPUT).
DEBUGGING PERMITTED Se ligar esta opo estar a permitir que
um filme seu possa ser debugged
2
remotamente. Poder usar esta
opo com a de PASSWORD, para proteger o seu trabalho.
COMPRESS MOVIE Esta opo apenas est disponvel no Flash MX.
Quando ligada faz com que uma compresso seja aplicada ao filme, no
intuito de diminuir o tamanho final do ficheiro. Use esta opo se tiver
muita quantidade de texto ou ActionScript. Se a ligar o filme s poder
ser visto por aqueles que possurem 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 nvel de compresso das
imagens finais. Por defeito, todas as imagens importadas para dentro de
um filme no Flash so exportadas em JPEG e tudo o que ouvido, em
MP3. Quanto maior a compresso menor o tamanho do ficheiro e pior a
qualidade da imagem.

2
BUG em informtica um erro que um software ou hardware possa ter. Debugging a operao
para detectar e eliminar esses bugs. Geralmente o que se faz nesta etapa estabelecer pontos de
paragem na animao (BREAK POINTS) para verificar se at aquela etapa est tudo em ordem.
Tambm so utilizados artifcios especiais (TRACES) para enviar informaes a uma janela
especial (OUTPUT). Estes TRACES ajudam a verificar e acompanhar o estado de variveis do
filme. Ao fazer um TRACE de uma varivel X, por exemplo, o FLASH estar a enviar durante todo
o tempo do debugging os valores que esta varivel X assume durante todas as etapas da anima-
o. Ento, pode-se verificar se o programa (ActionScript) est correctamente escrito.
I.2. OS MENUS 105

AUDIO STREAM MP3, 16 Kbps, Mono Se carregar no boto SET
poder ajustar de que forma deseja gerar as streams de udio.
AUDIO EVENT MP3, 16 Kbps, Mono Se carregar no boto SET
poder ajustar de que forma deseja gerar os eventos de udio.
OPO HTML JANELA PUBLISHING
Nesta janela, poder regular as opes 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 especfico para
algum tipo de PocketPC. A escolha por defeito Flash ONLY.
106 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

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 prxima seco da janela a PLAYBACK e
possui quatro opes: PAUSED AT START,
DISPLAY MENU, LOOP e DEVICE FONT.
A pgina HTML que tiver a opo PAUSED
AT START marcada ir carregar o filme Flash
correspondente mas no o ir executar. O
utilizador dever carregar com o boto da
direita do rato sobre a animao e escolher
PLAY (figura ao lado), ou criar um boto no
filme para executar esta funo.
DISPLAY MENU indica se deve ou no ser
mostrado o menu que surge quando o boto
da direita do rato carregado em cima de
uma animao. Veja a figura ao lado.
LOOP indica se o filme deve ser repetido
quando chegar ao fim (caso no possua ins-
truo no prprio filme para parar ou fazer outra coisa).
DEVICE FONT Por defeito, o Flash armazena dentro da prpria
animao todos os tipos de letra que estiverem a ser utilizados. Se
marcar esta opo, o Flash passa a no embeber as letras dentro da
animao. O problema que se estiver a utilizar na sua animao um
tipo de letra que no exista na mquina do utilizador, o Flash ser
obrigado a escolher um tipo qualquer de letra, das disponveis no
sistema onde estiver a correr, para colocar no lugar da letra original.
Esta opo no aconselhvel de se usar pois pode destruir o visual de

3
Como os filmes em Flash so ficheiros vectoriaisl, estes no possuem um tamanho especfico e
podem ser desenhados a qualquer escala. Logicamente, quanto maior o filme, mais a mquina es-
tar a trabalhar, para conseguir manter o filme em PLAY na velocidade correcta. Ento, como no
possvel delimitar o tamanho do filme pelo prprio filme em si, preciso delimit-lo pelo HTML de
onde ser executado.
I.2. OS MENUS 107

uma animao, caso a letra seja muito diferente da original. S a use
caso tenha a certeza absoluta de que isto no vai acontecer. A vanta-
gem a diminuio do tamanho final do ficheiro SWF.
A prxima opo relevante na janela a que diz QUALITY. As
seguintes opes esto disponveis: LOW, AUTO LOW, AUTO HIGH,
MEDIUM e HIGH. A diferena entre elas o anti-aliasing: low no faz
antialiasing; medium no faz apenas no texto; high faz em todas as for-
mas.
LOW esta opo faz com que o filme seja carregado em baixa qual-
idade, ideal para serem vistos em mquinas lentas.
AUTO LOW esta opo faz o filme carregar inicialmente em baixa
qualidade e passar mdia ou alta qualidade consoante o potencial da
mquina onde estiver a ser executado.
AUTO HIGH este comando idntico ao anterior, porm o filme
carregado inicialmente a alta qualidade que ser reduzida caso veja que
a mquina no capaz de visualizar o filme qualidade indicada.
MEDIUM o filme executado em mdia qualidade independente da
mquina. Se esta for muito lenta o filme pode no conseguir ser mos-
trado como pretendido.
HIGH Idntica anterior, porm o filme executado em alta qualida-
de.
Publish
Esta a prxima opo do menu FILE. Uma vez ajustados os
parmetros que pretende na opo PUBLISH SETTINGS, hora de
carregar nesta opo e fazer com que o Flash crie os ficheiros.
aconselhvel antes de fazer PUBLISH gravar o ficheiro de trabalho
em alguma directoria, pois, caso contrrio, o Flash ir publicar o seu
ficheiro numa directoria interna do prprio programa.
108 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

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 animao Flash, esta
funo ir permitir que se desloque directamente para a cena desejada.
As opes que ir encontrar neste menu so, alm dos nomes das
cenas que tiver criado, FIRST, PREVIOUS, NEXT e LAST, que lhe
permitiro ir para a primeira cena, cena anterior, cena posterior e ltima
cena respectivamente.
Zoom In, Zoom Out e Magnification
As duas primeiras funes so bvias e permitem que possa aumentar
o nvel 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 nvel respectivamente.
MAGNIFICATION permite regular directamente o nvel de zoom
adequado mediante a escolha de um dos valores oferecidos. As duas
ltimas funes do submenu MAGNIFICATION porm, oferecem as
possibilidades de SHOW FRAME e SHOW ALL. Estas duas equivalem
a ajustar o nvel de proximidade no ecr para que toda a rea de
trabalho esteja visvel e ajustar este mesmo nvel para que toda a rea
circundante rea de trabalho esteja visvel tambm - 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 funes so responsveis por mostrar os objectos com
qualidade inferior no ecr com o propsito de aumentar a velocidade de
operao para o caso de estar a lidar com animaes 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 mantm to-
do o texto em baixa qualidade;
ANTIALIAS TEXT a maior qualidade. Tudo mostrado em alta quali-
dade.
RULERS, GRID e GUIDES
Estas trs funes equivalem a trs funcionalidades importantes do
Flash.
RULERS (rguas) Por defeito, as rguas horizontal e vertical esto vi-
sveis no ecr. Estas rguas 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
trs outras funes: 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Se accionar a funo SNAP TO GRID, ento 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 mo 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 (vrtices) esto
localizados nos pontos do grid.
Se escolher a opo 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 distncia entre as linhas
horizontais e verticais do grid. Por defeito, estes campos so ajustados
em 18 pixis.
O ltimo campo, denominado de SNAP ACCURACY, permite ajustar o
grau de preciso do acto de colar os pontos ao grid. As opes so da
maior preciso para a menor: MUST BE CLOSE, NORMAL, CAN BE
DISTANT e ALWAYS SNAP.
GUIDES (guias) Os guias so 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 boto da direita do rato em cima de uma
das rguas, mantenha o boto carregado e mova o rato para a rea de
desenho.
Depois de criado um guia poder mud-lo para outra posio clicando
em cima do guia e arrastando-o para outro stio.
No menu VIEW > GUIDES, vai encontrar quatro opes:
SHOW GUIDES, LOCK GUIDES, SNAP TO GUIDES e EDIT GUIDES.
Na primeira opo pode tornar os guias visveis ou no. Na segunda
pode colocar travados os layers para que no possam ser movidos para
outro stio. Na terceira opo pode fazer com que os guias possam ter
funcionalidade semelhante do grid, ou seja, qualquer ponto clicado
nas imediaes do grid seriam colados a este. A ltima opo permite
que ajuste a cor do guia e parmetros semelhantes aos que ajustou no
grid.
112 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

MODIFY
O menu MODIFY do Flash MX fornece-nos diversas ferramentas para
manipular e transformar os objectos (SHAPES). Encontraremos
ferramentas para suavizao, simplificao, converso de imagens para
vectores e muito mais. Vamos a elas.
Shape - Soften Fill Edges
Este comando chamado SOFTEN FILL EDGES muito importante para
criar suavizaes nos contornos das formas. Uma das maiores utilida-
des para ele a criao de sombras para objectos.
Crie ento uma forma qualquer, por exemplo, um crculo 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 ento a janela a seguir.


No campo DISTANCE poder regular o tamanho da suavizao, em
NUMBER OF STEPS a quantidade de nveis que esta suavizao ter e
em DIRECTION poder definir a direco da suavizao, para fora
(EXPAND) ou para dentro (INSET) da forma.
Veja ento o que acontece com o crculo, quando aplicamos uma
suavizao 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Repare que pode contar os 6 nveis que definiu para o NUMBER OF
STEPS. Ento, como v, a suavizao pode melhorar se aumentarmos
o nmero de nveis. Se aumentar para 50 nveis, ver a imagem abaixo.



OBSERVAO
Quanto maior a quantidade de nveis na suavizao, melhor
a qualidade final e MAIOR o objecto. Por esse motivo,
deve saber dos ear os nveis de acordo com o objectivo final
para no correr o risco de produzir animaes gigantescas
que faam 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 expanso ou contraco de uma rea de
pintura de um objecto. Ao ser accionado mostra a janela abaixo.


Nesta janela poder regular o tamanho da expanso (DISTANCE) e a
direco (DIRECTION), no sentido de expandir (EXPAND) ou contrair
(INSET) o shape.
OBSERVAO
Algumas formas com cantos em bico ou larguras muito
finas no se saem bem durante uma expanso ou
compresso.

Smooth
No menu MODIFY, vai encontrar a funo SMOOTH. Com ela poder
suavizar formas para que fiquem com uma aparncia mais arredonda-
da. Isso pode ser til para corrigir formas muito irregulares.
OBSERVAO
Algumas formas com cantos em bico ou larguras muito finas no
se saem bem durante um SMOOTH.
116 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Inserimos algumas letras na rea de desenho conforme pode ver pela
imagem abaixo.


Depois de repetidos SMOOTHs as letras ficaram da seguinte forma.


OBSERVAO
Para transformar uma letra numa forma e assim poder fazer as operaes
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 funo designada
STRAIGHTEN, que faz exactamente o oposto do SMOOTH, ou seja, tira
a suavizao. 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 tambm encontramos o comando OPTIMI-
ZE. Com ele possvel simplificar uma forma existente para algo com
menos pontos e consequentemente mais leve.
Digamos que tenha transformado uma imagem em vectorial. Porm,
durante a converso, o objecto final ficou com um nmero muito grande
de pontos o que o tornou deveras pesado para ser colocado na anima-
o. Ento, pode tentar uma simplificao 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 suavizao que o SHAPE
ter durante a optimizao. Se a deslocar para a esquerda nenhuma
optimizao ser feita, e para a direita teremos o grau mximo de opti-
mizao.
A seguir vemos um quadro que diz USE MULTIPLE PASSES
(SLOWER). Ao marc-lo obrigar o Flash a fazer vrias optimizaes
118 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

at ao resultado final. Esta opo, 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 optimizao.
Trace Bitmap
Esta uma das mais importantes funes encontradas no menu
MODIFY. Com ela poder transformar imagens em formas, que poder
modificar no Flash. Alm do mais, muito mais conveniente para o
Flash se tiver de lidar com formas e no com imagens.
O que este comando faz analisar a imagem, e de acordo com o
contraste da imagem e com as diferenas 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 ento a janela a seguir.


A explicao para cada um dos campos vistos na janela acima est a
seguir.
I.2. OS MENUS 119

COLOR THRESHOLD Neste campo possvel regular o nvel de
transio das cores, de 1 a 500. A finalidade deste campo permitir a
produo de traados mais perfeitos para os casos de imagens pouco
ou muito contrastadas.
MINIMUM REA Neste campo poder ajustar o nmero de pixis que
o Flash considerar durante o clculo, de 1 a 1000. Quanto menor o
nmero, maior a preciso do traado e, consequentemente, mais pesa-
do ser o objecto final.
CURVE FIT Neste campo poder regular a preciso das curvas do
traado. Vrias opes esto disponveis: PIXELS, VERY TIGHT,
TIGHT, NORMAL, SMOOTH e VERY SMOOTH. A primeira opo
equivale ao pixel e corresponde ao nvel que fornece a curva mais
precisa segundo a imagem traada. Da para a frente, os nveis de pre-
ciso diminuem. Logicamente, quanto mais preciso o traado melhor o
resultado final e maior o objecto.
CORNER THRESHOLD Neste caixa poder regular a quantidade de
esquinas ou bicos nas formas. As opes so: MANY CORNERS,
NORMAL e FEW CORNERS, ou seja, muitos cantos, normal e poucos
cantos, respectivamente.
Digamos ento que importa a imagem abaixo e a transforma com os
parmetros vistos na janela anterior.

120 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Depois de transformada, a imagem fica com a aparncia 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 transformao prpria a um objecto que puder ser feita no
Flash. Veja a imagem abaixo.

Veja como depois da transformao fcil seleccionar cada uma das
partes e retir-la da imagem.
Deve observar entretanto, que depois da transformao a imagem
perdeu a aparncia realista e ficou a parecer um tipo de desenho ou
pintura, o que pode ser um efeito interessante. Esta modificao ocor-
I.2. OS MENUS 121

reu porque inerente funo TRACE BITMAP. Mesmo que os valores
da preciso fossem aumentados, haveria sempre uma degradao na
qualidade final, uma vez que esta funo adequada transformao
principalmente de desenhos, logtipos, etc.
Transform
Ainda no menu MODIFY, encontramos o comando TRANSFORM, que
fornece muitas das funes que j conhecemos as quais so acciona-
das pela barra de ferramentas.
Ao accionar esta funo, vai ver o menu da figura abaixo.


As primeiras seis funes deste menu so 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 horrio ou anti-horrio, respectivamente.
FLIP VERTICAL e FLIP HORIZONTAL permitem girar o objecto 180
graus em relao a um eixo imaginrio vertical ou horizontal, respectiva-
mente, que passe pelo centro do objecto. Por outras palavras, cor-
responde a espelhar em relao a estes eixos.
122 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

REMOVE TRANSFORM (MODIFY > TRANSFORM > REMOVE
TRANSFORM) serve para remover todas as transformaes que tive-
rem sido feitas ao objecto.
Arrange
Este o prximo item encontrado no menu MODIFY. Dentro deste item
do menu encontraremos diversas opes para manipular objectos que
estejam a ser desenhados todos no mesmo layer.


BRING TO FRONT Esta opo permite trazer um objecto para a fren-
te de todos os objectos dentro de um layer.
BRING FORWARD Se imaginar vrios objectos desenhados num
mesmo layer, vai ter de ter em mente que o Flash mantm cada um
num nvel diferente, como os degraus de uma escada. Ento, se um
objecto est num nvel superior, ele aparece desenhado por cima de um
com nvel 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 nvel ou degrau dessa escada.
SEND BACKWARD Esta funo faz exactamente o inverso da an-
terior.
SEND TO BACK Faz um objecto ir imediatamente para a posio
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 prximo item encontrado no menu MODIFY o ALIGN. Com este
item possvel fazer o alinhamento de diversos objectos que se encon-
trem dispostos no mesmo layer ou em layers diferentes.


A explicao para cada uma destas opes est a seguir.
A primeira funo que precisa conhecer a ltima do menu, ou seja, TO
STAGE. Este comando pode estar ou no accionado. Quando acciona-
do ele faz com que o tamanho da rea de desenho (stage) seja conside-
rada durante as transformaes. Caso contrrio, apenas as posies
dos objectos e os seus pontos so considerados.
A seguir explicamos cada comando visto na janela.
LEFT - Alinha todos os objectos seleccionados pelos seus pontos mais
esquerda. Toma como referncia para o alinhamento o objecto que
124 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

mais esquerda estiver. Caso TO STAGE esteja ligado, ento os objec-
tos seleccionados so 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 mdio e alinha os centros verticais
4

de cada objecto segundo este ponto. Caso TO STAGE esteja ligado,
ento os objectos so alinhados ao centro vertical da rea de desenho.
RIGHT Alinha todos os objectos seleccionados pelos seus pontos
mais direita. Toma como referncia para o alinhamento o objecto que
mais direita estiver. Caso TO STAGE esteja ligado, ento os objectos
seleccionados so 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, ento os objectos so 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 clculo. Calcula o ponto mdio e
alinha os centros horizontais de cada objecto segundo este ponto. Caso
TO STAGE esteja ligado, ento os objectos so 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, ento os
objectos so 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 pixis existente no intervalo. Assim, distribui os centros
horizontais dos outros objectos para que fiquem igualmente espaados
nesta direco. Caso TO STAGE esteja ligado, ento 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 pixis disponveis para
espaar 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 pixis existente no intervalo. Desse modo, distribui os centros
verticais dos outros objectos para que fiquem igualmente espaados
nesta direco. Caso TO STAGE esteja ligado, ento a altura da rea
de desenho passa a ser a quantidade de pixis disponveis 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, ento 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, ento os objectos passam a ter a altura da rea de
desenho.
Tambm 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 opo ALIGN, depois do que ver
surgir a janela que colocamos na figura abaixo juntamente com as
explicaes de cada cone.
at prefervel que passe a utilizar o ALIGN disponvel pelo acciona-
mento deste comando, uma vez que este contm mais opes dispo-
nveis.
126 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Notamos a presena de alguns outros comandos no presentes no
MODIFY > ALIGN.
DISTRIBUTE TOP Faz o mesmo que o DISTRIBUTE HEIGHTS, visto
anteriormente, porm considera o ponto mais superior de cada objecto
durante o clculo. Se TO STAGE estiver ligado ento a altura da rea
de desenho passa a ser considerada no clculo.
DISTRIBUTE BOTTOM Faz o mesmo que o DISTRIBUTE HEIGHTS
visto anteriormente, porm considera o ponto mais inferior de cada
objecto durante o clculo. Se TO STAGE estiver ligado, ento a altura
da rea de desenho passa a ser considerada no clculo.
SAME WIDTH AND HEIGHT Faz os objectos seleccionados ficarem
com a mesma largura e altura. Se TO STAGE estiver accionado, ento
os objectos seleccionados passam a ter a mesma largura e altura da
rea de desenho.
I.2. OS MENUS 127

SPACE EVENLY VERTICALLY Espaa por igual os objectos na ver-
tical.
SPACE EVENLY HORIZONTALLY Espaa por igual os objectos na
horizontal.
Group & Ungroup
GROUP e UNGROUP so dois itens tambm 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 so 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 operao de ali-
nhamento, de mudana de ordem de desenho (arrange), etc., primeiro
preciso agrupar LINE e FILL pelo uso do comando GROUP.
Este comando tambm til quando tem vrios 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
transformao de cada elemento na sua forma mais bsica, 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 operaes
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 funo.
Deve notar que quando faz o primeiro BREAK APART numa palavra,
primeiro obtm a separao 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

mais bsica no 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.

OBSERVAO
Quando utiliza letras nas suas animaes, o Flash armazena,
no ficheiro final, as informaes vectoriais de como desenhar
estas letras, independentemente da quantidade de letras que
desenhar. Assim, se a sua animao contiver 200 letras A, o
Flash armazenar apenas uma informao que lhe permita
desenhar esta letra.
Uma letra partida em LINE e FILL com a funo BREAK
APART ocupa mais espao no ficheiro final da animao, pois o
Flash precisa armazenar todos os pontos da forma para
conseguir desenhar o objecto correctamente.

Distribute to Layers
Esta uma funo tambm 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 funo, ento cada um deles colocado num layer diferente.
I.3. LAYERS, TIMELINE e ANIMAO

Antes de saber fazer animaes 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 edio grfica disponveis no mercado.
Os layers so como folhas de acetato transparentes, sobrepostas, onde
poder criar objectos estticos ou animados. Desta forma, cada layer
fica independente de todos os outros.
Os layers so representados no timeline, conforme a figura abaixo.


130 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Os layers, assim como as folhas de acetato, so montados de baixo
para cima, ou seja, desenhados de baixo para cima. Logo, segundo a
figura acima, os layers so 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 ANIMAO 131

Tambm 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 nmero 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.

Ento poder organizar os seus layers como na figura abaixo.



132 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



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 contm, basta carregar
uma vez sobre ela.

Olho, Cadeado e Quadrado Colorido
Se observar cuidadosamente a janela do timeline vai ver que existem
trs 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 ANIMAO 133

Pode ver pela figura abaixo, a funo 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 visvel. Se um X estiver
presente, sinal que o layer est invisvel.
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 no pode ser seleccionado na janela de desenhos. A funo til
quando precisamos impedir que um layer seja seleccionado na janela
de desenhos, quando estivermos a trabalhar em animaes intrincadas.
134 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


QUADRADO COLORIDO (show layer as outline)
Se est a lidar com animaes que possuem uma grande quantidade de
objectos ou objectos de tamanhos grandes e, consequentemente, que
estejam a ocupar muita memria, provavelmente ser difcil trabalhar na
rea de desenho, j que objectos deste tipo tendem a tornar lenta a
operao, j que requerem grande processamento do Flash, no sentido
de desenh-los correctamente cada vez que os move. Ento, pode
utilizar o quadrado colorido para transformar um objecto deste tipo em
apenas linhas de contorno. Assim, o Flash no vai ter muito o que dese-
nhar e lidar com os objectos na animao torna-se uma tarefa leve. Veja
as figuras abaixo.
Objectos como estes...

ficam assim...

I.3. LAYERS, TIMELINE E ANIMAO 135

... ou seja, muito mais leves, pois o Flash fica com menos coisas para
desenhar! Na realidade, o objecto no 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
animao, basta carregar no smbolo correspondente no
alto da coluna.

O Timeline
Como se disse no captulo anterior, o Flash um programa que permite
criar elementos grficos com animao e interaco.
Para criar as animaes, preciso, depois de criar os elementos, definir
os estados em que estaro ao longo do tempo.
Quando vai ao cinema, est, de facto, a ver uma sequncia de imagens
paradas. Como estas imagens paradas esto a ser projectadas a uma
velocidade de 24 imagens por segundo
1
, tem a impresso de que est a
ver movimentos contnuos como na vida real.
Os filmes
2
em Flash so projectados a taxas que podem variar. Por
defeito, o valor est ajustado a 12 fps (frames por segundo).

1
O termo imagens por segundo tambm conhecido como quadros por segundo, ou frames, do
ingls. 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 tambm conhecida
como stage (palco).
136 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Agora imagine que deseja construir um crculo e faz-lo aumentar de
tamanho em dois segundos. Ento, se est a trabalhar a 12 fps,
teoricamente deveria criar 24 desenhos do crculo, para causar a iluso
de que ele aumenta de tamanho. Porm, para facilitar a sua vida, o
Flash permite o uso de keyframes para a criao das animaes. Um
keyframe um frame chave que define um estado em particular
do objecto num dado momento no tempo.
KEYFRAMES - representao no timeline
Se pretender criar uma animao do crculo de um tamanho X para Y,
basta definir dois keyframes para representar estes estados, um no
frame em que deseja que a animao comece e outro no frame em que
o crculo encerra a sua animao. Da para a frente, o Flash encarrega-
-se de calcular os tamanhos intermdios do crculo, de forma a tornar
suave o aumento de tamanho
3
.
A representao 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 grfica do
Flash. nele que ocorrem todas as aces, interaces e movi-
mentaes dos objectos. Os keyframes so a chave para tudo isso
ocorrer.

3
Estes frames intermdios so conhecidos como in between e o acto de fazer o clculo deles
conhecido como tweening.
I.3. LAYERS, TIMELINE E ANIMAO 137

ACTIONSCRIPT representao no timeline
Um keyframe tambm pode conter um programa ou algumas instrues
na linguagem ActionScript e quando isso acontece uma pequena letra
a colocada em cima da bolinha do keyframe para representar a
existncia de comandos ActionScript no frame.


LABELS representao 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 animao 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 no pelo seu nmero. Imagine a confuso que
referenciar dezenas de frames de uma animao pelos nmeros. Ve-
mos por esse motivo que o label uma funcionalidade deveras podero-
sa. Alm do mais, caso precise alterar algo da animao que venha a
mudar os frames antes considerados, teria um trabalho redobrado em
actualizar nos outros pontos da animao todas as referncias aos fra-
mes alterados.
Para acrescentar um label a um frame simplesmente posicione o rato
num frame ou regio que j exista no timeline e v janela de proprie-
dades.
138 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




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 existncia do label pela colocao de uma pequena bandeira
vermelha com o label no local apropriado.



A seguir ento vamos passar a uma primeira simples animao, para
que se familiarize com o uso do timeline e com a criao de keyframes.
O uso da opo Named Anchor juntamente com a label, permitir que
o boto 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 ANIMAO 139

A Animao frame-a-frame
Pode pensar na primeira animao que ir realizar aquela na qual deter-
mina a posio de todos os objectos em cada um dos frames da anima-
o. Assim, se tem trs frames no total, deve mostrar ao Flash onde
quer cada objecto para que a animao seja feita correctamente.
Ento podemos comear por algo simples. Imagine que deseja fazer um
quadrado a girar e diminuir de tamanho sem que mude de lugar.
Comece ento 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 prxima etapa transformar esse shape que criou em smbolo
4
. 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 ento 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Nesta janela pode ver o item REGISTRATION que indica onde quer
colocar o ponto de transformao do objecto. Por defeito, ajustado ao
centro mas pode colocar em qualquer dos nove pontos indicados. Em
relao a este ponto que todas as transformaes sero feitas (esca-
las, translaes, rotaes, etc.).
Seleccione agora o objecto clicando uma vez com a Arrow Tool em ci-
ma deste e com o boto carregado mova-o para que fique no centro da
rea de desenho.
Esta ento fica a ser a posio do quadrado no primeiro frame da ani-
mao.
Mova o rato at ao frame 2 no timeline e clique com o boto da direita.
Surgir um menu flutuante. Escolha a opo INSERT KEYFRAME, con-
forme mostrado abaixo.


Esta operao vai criar um novo keyframe no frame 2 da animao, que
ficar conforme visto abaixo.
I.3. LAYERS, TIMELINE E ANIMAO 141



Arraste o quadrado semi-transparente rosa que visto na figura acima
sobre o nmero 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 smbolo representativo de que est
prestes a efectuar uma rotao no objecto, conforme visto a seguir.
142 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Rode o objecto e diminua-o de tamanho at que fique conforme indica-
do na figura a seguir.


Repita o procedimento de criao de keyframe para criar o frame 3 da
animao e novamente transforme o objecto para que fique conforme a
figura abaixo.
I.3. LAYERS, TIMELINE E ANIMAO 143



Ento ter uma animao correspondente a 3 frames.


Se arrastar o quadrado rosa indicador do frame actual ao longo dos
frames criados vai poder ver a sua animao. Tambm poder ver a
animao a correr em tempo real se colocar o Flash no modo TEST
MOVIE (CONTROL > TEST MOVIE).
As animaes frame-a-frame so teis para o caso de querer criar
animaes do tipo stop motion
6
ou de formas orgnicas, como o movi-
mento de pessoas, animais, insectos, etc. Tambm as poder utilizar
para criar movimentos mais realistas de objectos como cortinas, tecidos
e outros. Estas animaes, apesar de serem as mais simples, so as
mais trabalhosas, pois ter de criar keyframes para todos os frames da

6
ao estilo das animaes feitas em vdeo ou pelcula com personagens criadas a partir de massas
de modelar.
144 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


animao
7
. Ento, 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 vdeos em Flash, ou que fazem efeitos
para o Flash, geralmente fornecem sadas em ficheiros com tudo colo-
cado frame-a-frame. No caso de um vdeo at lgico j que o prprio
vdeo em si composto de imagens diferentes frame a frame.
A Animao Motion Tween
A animao do tipo MOTION TWEEN justamente aquela que referi-
mos na seco anterior, como sendo a que permite criar animaes
sem exigir a criao de todos os keyframes que correspondem ao seu
tempo total. A animao 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 clculos necessrios para deduzir o tamanho
do objecto ao longo dos frames. Desse modo, ao assistirmos a tal filme,
veramos o objecto a diminuir de tamanho de 100 para 10 ao longo de
30 frames.
Vamos ento criar uma animao deste tipo para ver como funciona.
Carregue em FILE > NEW para iniciar um novo filme.
Com a ferramenta de criao de ovais na barra de ferramentas crie um
crculo de mdio 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 crculo. Carregue em INSERT >
CONVERT TO SYMBOL para transformar os objectos em smbolos e
acrescent-los biblioteca
8
(falaremos sobre bibliotecas mais adiante).

7
Vai ver na prxima seco que possvel criar animaes sem ter de criar todos os keyframes .
8
Deve observar que s possvel fazer animaes motion tween de smbolos e no de grupos, por
isso tivemos que transformar o crculo, at ento apenas um shape, em smbolo.
I.3. LAYERS, TIMELINE E ANIMAO 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
boto da direita. No menu que surgir, escolha a opo INSERT KEY-
FRAME. O timeline ficar com a aparncia 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 alteraes no tamanho
e na aparncia do objecto. Se olhar agora para a rea de desenho vai
ver que o crculo est seleccionado e que um quadrado preto com pon-
tos est volta. Veja a seguir.
146 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Posicione o rato no ponto negro superior direito do quadrado e clique
com o rato. Mantendo o boto carregado, mova o ponto para outro stio,
de forma a aumentar o tamanho do crculo e em seguida liberte o boto.
O que acabou de fazer foi aumentar o tamanho original do crculo.
Porm, como fez isso enquanto estava com o timeline posicionado no
frame 30, ento o que fez foi aumentar o tamanho do crculo nesse fra-
me apenas. Verifique a veracidade desta afirmao carregando alterna-
damente nas bolinhas correspondentes ao frame 1 e 30 no timeline.
Se observar o timeline vai ver que na verdade o crculo comea com um
tamanho no frame 1 e o mantm at ao frame 29, quando ento, subita-
mente, aumenta de tamanho ao entrar no frame 30. Se era isso o que
pretendia a animao est encerrada. Porm, se a sua inteno era fa-
zer uma animao suave, continue a ler os pargrafos a seguir.
Carregue na bolinha correspondente ao frame 1 (incio da animao) e
nas propriedades do objecto visveis na parte central inferior do ecr,
mude o campo TWEEN para MOTION. Veja a figura abaixo.

I.3. LAYERS, TIMELINE E ANIMAO 147

Deve ter observado que o campo TWEEN tem outra opo chamada
SHAPE, a ser vista mais adiante.
Ver que agora a linha do timeline ficou lils e com uma seta a indicar
uma animao do frame 1 ao 30, conforme figura abaixo.


Arraste o rectngulo rosa existente na rea da numerao dos frames
no timeline para os lados, para ver que a animao agora est suave.

NOTA IMPORTANTE
Cuidado que este tipo de animao s funciona se no
layer em questo estiver um nico objecto ou grupo
de objectos, como fizemos neste exemplo. No
entanto, a situao ideal usar um nico smbolo 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 varivel controla a forma na qual feita a distribuio
da animao ao longo do intervalo de keyframes. Em termos gerais, a
varivel regula a forma como a animao chega ou sai de um determi-
nado keyframe. Tecnicamente so conhecidas pelos nomes de EASE
IN e EASE OUT.
148 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Noutros softwares de animao como o Maya, Alias PowerAnimator,
Combustion, Inferno, 3DS MAX, After Effects, etc., esto disponveis
maneiras de se regular independentemente estas duas funes, no key-
frame inicial e no final de um determinado segmento. Porm, no Flash,
foi feita uma simplificao. O ajuste apenas feito no primeiro keyframe
do segmento.
Por defeito, a distribuio de movimento feita de forma linear, ou seja,
se um shape tem uma posio, tamanho, ngulo de rotao, etc., no
primeiro keyframe e X frames depois tem outra completamente dife-
rente, ento o Flash calcula a diferena de propriedades entre os dois
keyframes e divide pelo nmero de frames, para fazer o movimento li-
near entre os pontos.
Digamos que no frame 1 tem um crculo com um tamanho de 1 e dez
frames depois aumentou para 30. Ento, a cada frame da animao o
Flash vai aumentar o tamanho em 3, o que significa...
... no frame 1 o tamanho do crculo = 1
... no frame 2 o tamanho do crculo = 4
... no frame 3 o tamanho do crculo = 7
... no frame 4 o tamanho do crculo = 10
...
... no frame 10 o tamanho do crculo = 30

Logo, o crculo aumenta linearmente ao longo do tempo. Em termos
grficos de movimento ao longo do tempo teramos o seguinte.

I.3. LAYERS, TIMELINE E ANIMAO 149

Se agora posicionar o controlo de EASE todo para cima, na direco de
EASE = 100 ter modificado o grfico para o visto abaixo.


Se olhar atentamente para o grfico acima, ver que no h mais linea-
ridade de movimento ao longo do tempo. Agora o movimento comea
rpido e em seguida desacelera.
Se ajustar o EASE para 100 vai ter exactamente o inverso: o movi-
mento comea devagar e depois acelera, conforme pode observar abai-
xo.

150 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 pndulos ou de bolas que saltam. uma funo til
que, se bem entendida, pode ajudar a melhorar a qualidade das anima-
es produzidas.
Como que o Flash interpreta uma animao?
Como vimos, o Flash precisa conhecer a posio do objecto em cada
frame para conseguir calcular a animao. Ento, 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 clculos da
mquina para conseguir mostrar correctamente a animao. Ento, ao
fazer uma animao, deve ter em conta a quantidade de exigncias que
ela vai ter na mquina onde for correr. Clculos muito complexos como
objectos de tamanhos gigantes ou muitos objectos com transparncias
de uns sobre os outros, vo exigir muita capacidade da mquina e
talvez no consiga ser visto conforme pretende. Teste sempre a sua
animao em mquinas de baixa capacidade.
Quando cria uma animao e a pe a correr, o Flash comea-a sempre
pelo primeiro frame e avana sequencialmente para a frente em
intervalos de um frame
9
. Ento, se vai fazer, por exemplo, um programa
em ActionScript, deve colocar os cdigos e comandos em cada um dos
frames que pretende fazer alguma aco. Os programas ou comandos
em ActionScript so dispostos nos frames em que o programador
deseja fazer algo e so separados por objecto, ou seja, cada objecto
carrega consigo o cdigo ActionScript que vai precisar. Desta forma,
cada objecto que carregue consigo linhas de ActionScript dispostas em
frames especficos ter estes cdigos executados quando os frames
onde estas linhas estiverem forem visualizados.

9
se no for dada nenhuma ordem para que ele actue de forma diferente.
I.3. LAYERS, TIMELINE E ANIMAO 151

Digamos, por exemplo, que deseja realizar uma animao 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
animao retorna ao primeiro frame e o processo repete-se.
Ento, em termos descritivos, a animao equivaleria tabela abaixo.

FRAME(S) ACO
1 at 5 O fumo comea 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 animao equivaleria imagem abaixo.


O fumo seria um outro objecto e a sua animao corresponderia a algo
como o visto abaixo.

152 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Cada um dos keyframes acima indicados corresponderia a uma imagem
como as vistas abaixo.


Podero as suas animaes ser compostas por inmeros objectos,
animados ou no, interactivos ou no, de qualquer tipo, como filmes
dentro de filmes, objectos dentro de objectos, filmes em AVI ou
QuickTime, sons, desenhos, etc. No h limite terico para o que pode
fazer a no ser o tamanho que o ficheiro final da animao 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 animao a usar o desenho de
uma paisagem campestre de fundo. Por cima deste desenho cria a
animao de um sol a nascer e a pr-se. Esta animao tem 200 fra-
I.3. LAYERS, TIMELINE E ANIMAO 153

mes e cclica, ou seja, ao atingir o ltimo frame retorna ao primeiro e
repete-se. Porm, no frame 80 desta animao faz surgir uma ovelha
que cruza a cena em 40 frames. A ovelha um objecto independente e
possui uma animao prpria, de 8 frames, correspondente ao movi-
mento das suas patas como se estivesse a andar. Este movimento tam-
bm cclico. Alm disso, no frame 1 da ovelha coloca o incio do som
correspondente ao balir desta. Desta forma, de cada vez que a
animao da ovelha comear ser ouvido o som. Como a ovelha est
presente durante 40 frames da cena inicial, que o tempo da sua ani-
mao contra o fundo, ento automaticamente a sua animao repetir-
-se- cinco vezes (8 frames x 5 = 40).
Imagine que podia pegar no objecto ovelha com a mo e suspend-lo
no ar. Veria ento a ovelha com as patinhas a andar. Ento, 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 animaes contidas em si
prprio.
Animao de formas (shape animation)
Alm do tipo de animao convencional, no qual animado algum
parmetro do objecto, como tamanho, posio, rotao, cor, etc., existe
um outro tipo particular de animao conhecida pelo nome de SHAPE
ANIMATION (animao de forma). Nela, em vez de fazer um objecto
deslocar-se de um ponto a outro ou aumentar de tamanho, fazmo-lo
mudar de forma.
As animaes desse tipo, na realidade, ocorrem por uma animao de
movimento dos pontos (sub-objectos) que formam os objectos.
Este tipo de animao deve ser usado com cuidado, j que aumenta
muito o tamanho final do filme.
Para comear uma animao de forma, inicie um novo filme em branco
(FILE > NEW) e com a ferramenta de criao de ovais crie um crculo
de mdio tamanho no centro da rea de desenho.
154 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Mova o rato at que fique sobre o frame 30 no timeline e carregue no
boto da direita. No menu que h-de surgir, escolha a opo INSERT
KEYFRAME. O timeline ficar com a aparncia abaixo.


Carregue com o rato em cima da bolinha do keyframe 30, para selec-
cionar o objecto na rea de desenho onde ento modificaremos a apa-
rncia deste.
Seleccione o SUBSELECTION TOOL na barra de ferramentas e com o
rato carregue em cima da linha de borda do crculo. Surgir ento uma
forma circular delimitada por uma linha fina azul que tem exactamente
oito pontos volta. Estes pontos so os que formam o crculo
10
.


10
conhecidos como ns (nodes), pontos de controlo (control points) ou simplesmente vrtices.
I.3. LAYERS, TIMELINE E ANIMAO 155

Mova ento, a utilizar ainda a mesma ferramenta, alguns dos pontos do
crculo at formar uma figura qualquer, como a vista abaixo

Pronto! O que acabou de fazer foi modificar a forma do crculo para uma
estrela. Porm, como est a trabalhar no frame 30, o que fez foi
modificar a forma do crculo apenas nesse frame. Se voltar ao frame 1
vai ver que ele ainda tem a mesma forma naquele ponto.
Tem ento agora duas formas: um crculo no frame 1 e uma estrela no
30. preciso agora fazer esses dois frames tornarem-se uma animao
de forma.
Carregue na bolinha correspondente ao frame 1 (incio da animao) e
nas propriedades do objecto visveis 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 presena de uma animao neste
intervalo. Por causa da cor verde sabe-se que se trata de uma anima-
o de forma. Carregue no rectngulo rosa na rea numrica do time-
156 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


line e desloque-o para a direita e esquerda. Vai ver que foi criada uma
suave animao na forma do objecto.
No caso da animao de forma tambm possvel ajustar o EASE IN e
OUT da curva de distribuio de movimento, da mesma forma que foi
descrita na seco anterior.

DICA
Para ser possvel aplicar uma animao de forma a
grupos, instncias ou objectos com imagens, primeiro
ter de quebrar estes grupos com a funo BREAK
APART (MODIFY > BREAK APART), para que
passem a ser objectos comuns. As letras so
consideradas grupos e devem passar por esse
processo para que possam ser animadas
correctamente.

Shape Hints
Quando faz uma animao de forma, basicamente define dois shapes e
deixa ao Flash a tarefa de animar a metamorfose da maneira que mais
lhe convier. Porm, nem sempre esta a soluo ideal. Por vezes
ocorrem problemas na transformao ou preciso ter controlo sobre
uma determinada maneira especfica de realizar a transformao. en-
to 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 animao de forma (shape animation) de
modo a transform-lo no objecto da direita.
I.3. LAYERS, TIMELINE E ANIMAO 157




Ento, se deixar a cargo do Flash, como fizemos, pode ser que tenha
uma animao conforme a sequncia de imagens abaixo.

158 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Se reparar nos frames de 6 a 9, vai ver que houve um problema na
transformao. Parte do shape entra sobre si mesma, criando buracos.
Alm do mais, a animao ocorre de forma pouco agradvel. 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 transformao.
O SHAPE HINT funciona segundo a seguinte filosofia: vai-se ao
primeiro frame de uma animao de forma e posiciona-se um SHAPE
HINT para indicar uma determinada regio de um objecto. Depois, vai-
-se ao frame final da mesma transformao e move-se o SHAPE HINT
para a regio final. Desta forma, o Flash saber que a regio 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, so representados por pe-
quenos crculos coloridos com uma letra no interior. As cores utilizadas
so o amarelo para representar o HINT inicial e o verde para represen-
tar o final. Caso esteja vermelho significa que o HINT em questo est
mal posicionado.
Vamos ento correco da animao anterior pelo uso de SHAPE
HINTS.
CRIAO DO SHAPE HINT...
Carregue na bolinha correspondente ao frame 1 da animao 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 posio indicada abaixo.

I.3. LAYERS, TIMELINE E ANIMAO 159

No timeline, carregue na bolinha correspondente ao ltimo frame da
animao, 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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-
formao ocorre sem problemas, como na figura abaixo. Repare que j
no existe o problema da primeira animao, dos furos no shape, pois
ao colocarmos os hints D, E e F, fizemos de forma a indicar a maneira
pela qual as regies deveriam andar na transformao.
Alm do mais de notar que a transformao agora no est mais amas-
sada e tem uma aparncia bonita e suave.
I.3. LAYERS, TIMELINE E ANIMAO 161



Na prtica, o que aconteceu foi o movimento das regies conforme indi-
cado a seguir.

Para os pontos A, B e C...
162 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



... e para os pontos D, E e F...

Animao com Motion Guide
MOTION GUIDE uma possibilidade interes-
sante que o Flash nos oferece para a criao
de animaes: fazer com que objectos sigam
caminhos (paths) especficos definidos por
curvas.
Digamos ento que tem o objecto ao lado e
que gostaria de o fazer percorrer o caminho
indicado na figura seguinte.
I.3. LAYERS, TIMELINE E ANIMAO 163



Ento, depois de criado e agrupado o avio, v ao timeline, na rea
onde so mostrados os layers, e carregue com o boto da direita em
cima do nome do layer. Escolha a opo que diz ADD MOTION GUIDE.
Surgir outro layer acima do primeiro, MOTION GUIDE, conforme a
imagem abaixo.


Neste layer GUIDE: AVIO 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 avio da maneira e no
local onde iniciar o movimento.
164 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Volte ento ao timeline e posicione o rato na rea em branco correspon-
dente ao frame 30 para cada um dos objectos e carregue com o boto
da direita do rato e escolha a opo 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 avio e,
com o boto pressionado, mova o rato na horizontal at ao frame 30.
Solte o boto do rato. Posicione o rato na rea seleccionada e carregue
no boto da direita. Escolha a opo CREATE MOTION TWEEN. Isso
vai fazer a animao do avio do frame 1 ao 30. Se movimentar a barra
de tempo no timeline vai notar que agora o avio j percorre o caminho.
Porm, ainda no est orientado segundo o que seria a maneira cor-
recta de movimento.
NOTA
No h necessidade do frame 30 para o guia do avio para que a animao
funcione correctamente quando finalizada. Porm, importante que este
frame esteja presente durante a construo da animao, para que possa
visualizar correctamente o caminho. Assim que for finalizar o filme, elimine
os frames desnecessrios do guia mantendo apenas o primeiro.
Assim, o timeline ficar com a aparncia abaixo.

I.3. LAYERS, TIMELINE E ANIMAO 165


NOTA
Por acaso, quando finalizado este exemplo, verificou-se que no ltimo
frame o avio virava ao contrrio. Se por acaso isso acontecer quando
terminar de fazer o exemplo, basta reposicionar neste ltimo frame o avio
para a posio correcta.

Poder fazer com que vrios objectos sigam o mesmo caminho. Para
isso, basta criar mais layers que fiquem subordinados ao layer do cami-
nho, como indicado abaixo pelo layer crculo.


Ento, todos os objectos passam a seguir o caminho...

166 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Mscaras
As mscaras so 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 animao por diversas vezes.

Ento, numa determinada ocasio, gostaria de colocar este objecto
dentro de uma moldura oval, sem que nenhuma parte ficasse para fora.

Poderia criar uma cpia deste objecto eliminando as partes no deseja-
das. Porm, uma segunda cpia do objecto na animao significa au-
I.3. LAYERS, TIMELINE E ANIMAO 167

mentar o tamanho do ficheiro final Flash. Ento, o que pode fazer
utilizar uma mscara oval para indicar o que deve ficar visvel no objecto
original.

NOTA
Imagine que em cima do desenho coloca uma folha de acetato e pinta
com uma cor slida as reas deste objecto que deseja deixar visveis,
sendo que, as reas no pintadas passariam a ficar invisveis.
Veja a figura abaixo.

Repare como a mscara oval limita o quanto
do primeiro rectngulo deve ser mostrado.


Neste caso ento, criaria um layer acima do layer do objecto, e a
desenharia uma mscara oval, para limitar o tamanho do objecto. Finali-
zado o desenho da mscara, basta carregar com o boto da direita em
cima do nome do layer no timeline e escolher a opo MASK.
168 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




O que vai fazer a aparncia dos layers assemelhar-se vista abaixo.


I.3. LAYERS, TIMELINE E ANIMAO 169

Veja como agora o layer da mscara e do objecto subordinado
mudaram de cone. Tambm ambos esto com os cadeados acciona-
dos. Alis, a mscara s actua no objecto se os cadeados estiverem
neste estado.
O objecto das casas com a mscara oval cabe agora dentro do espao
determinado.

Se por acaso reduzssemos a oval da mscara ligeiramente, poder-
amos obter o seguinte efeito.

170 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Se por acaso animssemos em 15 frames a mscara, de um tamanho
igual a zero a um tamanho igual ao visto acima, teramos a seguinte se-
quncia de imagens.





I.3. LAYERS, TIMELINE E ANIMAO 171

LAYER DO TIPO GUIDE
Se carregar com o boto da direita em cima do nome de um layer e es-
colher a opo PROPERTIES, vai ver a janela a seguir.

Pode ver pelo campo TYPE que existem diversos tipos de layer, dos
quais j falamos, com a excepo do GUIDE.
Este tipo de layer no visvel na animao final. S visto durante a
construo. exactamente o que o nome diz, um GUIA, para criar as
suas animaes, como linhas para orientao ou imagens/objectos que
precise colocar em cena apenas para que o possam orientar durante a
criao da animao.
LAYER DE SOM
Quando colocar um som, msica 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




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 opes nesta caixa so:
LEFT CHANNEL, RIGHT CHANNEL, FADE LEFT TO RIGHT, FADE
RIGHT TO LEFT, FADE IN, FADE OUT e CUSTOM, cujas explicaes
se encontram a seguir.
LEFT CHANNEL faz com que somente o canal esquerdo seja ouvido
(no caso de ser um ficheiro estreo).
RIGHT CHANNEL faz com que somente o canal direito seja ouvido
(no caso de ser um ficheiro estreo).
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 ANIMAO 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 comea com volume zero e vai progressivamente au-
mentando at ao seu volume normal.
FADE OUT o som comea com o seu volume normal e vai progres-
sivamente diminuindo at zero.
CUSTOM Nesta opo poder editar de que forma o som se com-
portar. Assim que escolher esta opo 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 estreo, 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 boto HELP. So eles: uma lupa com sinal de mais, uma lupa com
sinal de menos, um relgio 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Do lado esquerdo na mesma linha, pode ver dois cones, um quadrado
e um tringulo, 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 ento 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 padro como o
visto abaixo.


A explicao para o que acontece na figura acima a seguinte.
CANAL ESQUERDO - O volume comea a zero e sobe at ao mximo,
decaindo em seguida at um valor baixo, onde fica constante at 0,5s e
torna a subir at ao mximo, mantendo-se constante at ao final.
CANAL DIREITO O volume comea a zero e sobe at ao mximo, de-
caindo em seguida at aproximadamente 70% do mximo, onde per-
manece at ao final.
I.3. LAYERS, TIMELINE E ANIMAO 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 opo EVENT, permite tam-
bm escolher START, STOP e STREAM. A explicao para cada opo
dada a seguir.
EVENT
Esta a opo 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. Ento, por exemplo, se no frame 37 de
uma determinada animao existir um som, quando a animao a
chegar, o som comea 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 opo loops permite-nos dizer quantas vezes vai ser tocado um som
depois de iniciado. Por exemplo, se quiser colocar um loop a servir de
msica de fundo dever escrever um valor muito elevado, para estar
continuamente a tocar.
Outra propriedade do som ajustado como EVENT a permisso da
simultaneidade, o que significa, por exemplo, que se houver um som
associado ao clique de um boto e um utilizador carregar diversas ve-
zes sobre o boto, ouviremos ento vrios sons do clique, uns por cima
dos outros, misturados.
176 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


START
O som ajustado como START tambm tocado at ao fim, uma vez
tendo iniciado, porm, no permite a simultaneidade e enquanto estiver
a ser tocado no 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 boto de campainha, a este
boto temos associado o som de uma campainha musical. Quando
carregarmos no boto, ouviremos a melodia. Se durante o PLAY
carregarmos seguidamente no boto, no ouviremos vrios sons da
campainha misturados como no EVENT. Somente ser possvel ouvir
outra vez a melodia quando a primeira tiver terminado. Entretanto, se na
mesma cena tivermos o desenho de um co a ladrar, este som ser
ouvido em conjunto com o da campainha, se assim tiver de ser.
STOP
Esta opo 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 msica de fundo.
STREAM
Esta opo extremamente til quando se est a lidar com msicas ou
sons que precisem ficar sncronos com as animaes
11
. Quando possuir
um som associado a um vdeo e esta opo estiver ligada, ento o
Flash ao mostrar a sua produo dar sempre prioridade ao udio em
detrimento do vdeo. 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 animao, caso a
mquina onde esteja a correr no seja capaz de mostrar a animao
como seria preciso. Depois de muito produzir para o mercado audio-
visual chega-se concluso de que menos incmodo ter frames de
vdeo eliminados e o udio a correr bem, a ver a animao a correr cer-

11
Na minha opinio esta deveria ser a opo por defeito j que a mais importante!
I.3. LAYERS, TIMELINE E ANIMAO 177

ta e o udio a engasgar. Quando o vdeo falha ligeiramente, o utilizador
tem a impresso de que algo se passou no prprio computador. Quando
o udio est a ter problemas, o mesmo utilizador pensa que a animao
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 vdeo, caso a mquina no seja rpida o sufici-
ente para mostrar a animao como idealizada. Por isso, deve colocar
sempre o udio como STREAM quando precisar de sincronia perfeita.
Estes sons so carregados medida que o filme carregado. Inicial-
mente so carregados apenas 5 segundos de som, que servem de
almofada (buffer) para se manterem em memria; medida que o filme
decorre, o resto do som carregado. particularmente til para msi-
cas de fundo pesadas.
Como testar as suas animaes
Para saber se as suas animaes esto a funcionar correctamente,
deve sempre test-las por meio da funo TEST MOVIE no menu
CONTROL. Tambm encontrar por l o comando TEST SCENE, que
permite apenas o teste de uma das cenas da animao, caso possua
mais de uma.
O TEST MOVIE permite visionar a animao final na forma em que ser
vista pelo utilizador, seja pela Internet, seja atravs 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 alm desta varivel deve ter tambm em considerao o
peso que a sua animao pode representar para a mquina em que
for correr. Como tudo o que gerado em Flash convertido para
informaes vectoriais, preciso usar maior capacidade da mquina
para poder desenhar todos os elementos correctamente e nos tempos
certos das animaes; ainda mais se contiverem msicas ou sons que
178 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


precisem estar sncronos. Logo, todas as animaes em Flash reque-
rem em menor ou maior grau poder de processamento da mquina.
Elementos de tamanhos grandes e com efeitos de transparncias ou
degrads, por exemplo, iro requisitar mais processamento da mquina.
Se possvel teste as suas animaes na mquina mais modesta que
tiver por perto. Se ela conseguir mostrar tudo correctamente um pti-
mo sinal de que em mquinas mais sofisticadas tudo correr bem.
BANDWIDTH PROFILER
Um outro auxiliar do Flash que poder utilizar para verificar o peso das
suas animaes o BANDWIDTH PROFILER. Este mdulo capaz de
fazer uma anlise frame a frame da carga da sua animao. Saiba que
ao carregar a animao via Internet, por exemplo, a carga ser feita por
frames na ordem correcta da animao. 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 animao durante o play. O ideal
que consiga a menor animao possvel e que haja uma distribuio
homognea da carga ao longo dos frames da animao a fim de evitar
que existam frames com muita carga e outros sem carga alguma que
possam interferir no download ou play da animao.
Ento poder correr o Bandwidth Profiler para analisar a carga da
animao em cada frame. Para isso, primeiro accione o modo de TEST
MOVIE do Flash, conforme explicado na seco anterior, e ento no
menu VIEW escolha BANDWIDTH PROFILER.

I.3. LAYERS, TIMELINE E ANIMAO 179

Na figura atrs pode ver que a animao em questo tem trs frames,
representados pelos pequenos traos 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 seco esquerda da janela pode ver as informaes sobre o
filme: tamanho em pixis, taxa de fps, tamanho do ficheiro, quantidade
de frames totais da animao 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 animao seria carregada em diferentes
velocidades de download.
A linha vermelha que corta horizontalmente os grficos na marca dos
400 Bytes indica o mximo de bytes que poderiam ser trazidos por
download para que o frame fosse visto em tempo real. Na prtica, isso
significa que se cada frame da animao tivesse no mximo 400 bytes,
ento a animao poderia ser puxada da Internet em play normal sem
existir nenhum abrandamento na animao. Qualquer valor acima disso
causaria um abrandamento do play. Logicamente poder notar isso
pelas informaes da coluna da esquerda pois, se a animao tem 3
frames e o Flash est ajustado para PLAY a 12 fps, ento o tempo total
de download deveria ser 3/12 segundos. Porm, a janela diz-nos que o
tempo total de carga de 2,6 segundos.
Por defeito, o Bandwidth Profiler mostra o grfico de carga pelo modo
STREAMING, ou seja, a distribuio de carga medida em que feito o
download do filme. Se for ao menu VIEW e escolher a opo FRAME
BY FRAME GRAPH, ver ento a carga por frame. Outra opo 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 animao, pela prpria forma como o
Flash funciona, geralmente grande. Neste frame so armazenados
todos os objectos e smbolos que estaro presentes no filme.
180 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




I.4. SMBOLOS, EFEITOS e
BIBLIOTECAS

Quando cria um objecto, seja ele um grfico (graphic), boto (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 mantm uma
biblioteca para cada projecto que fizer e tambm vem com uma biblio-
teca com diversos objectos prontos a usar.
As suas prprias bibliotecas
Sempre que estiver a criar pginas ou animaes em Flash de qualquer
tipo, deve sempre ter por objectivo conseguir um ficheiro com o menor
tamanho possvel que corresponda ao seu trabalho, pois ficheiros me-
nores so mais rpidos a correr e a carregar. Se a animao vai ser
vista via Internet mais uma razo 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 rectngulo vrias vezes num determinado
projecto deve criar um rectngulo 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
rpidos.
Assim como o Flash tem bibliotecas de objectos, voc tambm poder
ter as suas. A vantagem de as ter poder reutilizar objectos previa-
mente criados nas suas animaes em qualquer momento.
182 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Sempre que reutiliza um objecto num projecto, o Flash cria uma instn-
cia deste, que equivale apenas a armazenar informaes acerca de
onde e como o objecto est a ser utilizado. Logo, h uma economia de
espao uma vez que no precisa armazenar as definies da forma do
objecto.
Todos os objectos (smbolos) que criar num determinado projecto so
automaticamente colocados numa biblioteca prpria 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. Faa
isso e ver surgir automaticamente a janela correspondente, de onde
poder arrastar objectos para o seu projecto actual.


Uma segunda opo 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. SMBOLOS, EFEITOS E BIBLIOTECAS 183


Na prtica, 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 trs tipos de smbolos: graphics, movie clips e buttons (grfi-
cos, filmes ou botes).
Quando cria formas na rea de desenho e sabe que no tero movi-
mento, deve cri-las como sendo GRAPHIC. Os grficos so smbolos
estticos como logtipos, imagens de fundo ou elementos que no tero
movimento, ou seja, um logtipo esttico pode ser um caso de
GRAPHIC mas um boneco a danar no, j que a imagem do boneco
modifica-se ao longo do tempo. Um smbolo do tipo GRAPHIC pode en-
tretanto ser animado em tamanho, posio, transparncia ou cor.
Um smbolo do tipo MOVIE CLIP, por outro lado, j permite animaes.
Enquanto que os GRAPHIC possuem apenas um frame, os MOVIE
CLIPS podem ter qualquer quantidade de frames. Ento, 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 intrnseco ao prprio objecto em si.
Os smbolos do tipo BUTTON so os botes ou qualquer outro elemen-
to que deva ter a propriedade de poder ser clicado. Quando o rato
encontrar qualquer smbolo deste tipo numa animao automaticamente
mostrar que se trata de um elemento clicvel.
A definio do tipo do smbolo feita no momento da sua criao ou
converso (INSERT > NEW SYMBOL ou INSERT > CONVERT TO
SYMBOL), conforme visto na janela a seguir.
184 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Depois de criado um smbolo, automaticamente este armazenado na
biblioteca referente ao projecto em que estiver a trabalhar.
Veja as figuras abaixo.


Deve reparar na imagem acima que existem trs entradas adicionais na
biblioteca, nomeadas TWEEN 1, TWEEN 2 e TWEEN 3 que l aparece-
ram sem a nossa interveno. Estes smbolos adicionais representam
as animaes do objecto cruz, j que um movie clip. No deve apa-
gar estes smbolos estranhos que o Flash for colocando na biblioteca
medida em que for criando os seus trabalhos, a no ser que saiba
tratar-se de algo no mais utilizado. Se o fizer corre o risco de deitar fo-
ra animaes e movimentos de objectos que j havia criado.
I.4. SMBOLOS, EFEITOS E BIBLIOTECAS 185


Graphic (grficos)
Para criar um smbolo 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 faa 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 distoro, animaes,
etc. Vai ver que pode fazer com eles o que quiser, com excepo de
mudar as cores, com o balde de pintura/tinteiro, ou a forma pelo uso das
ferramentas de seleco. Se fizer isto estar a modificar o objecto em
si, e todas as cpias deste passaro a ficar com a nova aparncia.
Caso precise mudar a cor de uma instncia, a nica forma possvel
pelo uso de um efeito, que veremos mais adiante. Porm, o efeito muda
a cor do objecto todo em conjunto, ou seja, se possui um objecto com
186 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


diversas cores, ao aplicar um efeito estar a afectar todas as cores
deste. Se precisar aplicar mudanas diferentes a cada uma das cores,
deve considerar separar as partes do objecto em diferentes smbolos,
que depois podero ser agrupados pelo comando GROUPS (CONTROL
G) para facilitar a animao ou manipulao deste.
Button (boto)
Criar um boto no Flash um trabalho deveras fcil. Em poucos passos
ter o seu a funcionar. Para que seja possvel esta criao 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 boto no Flash possui trs estados: UP, OVER e DOWN.
O estado UP equivale aparncia que o boto tem quando est normal.
Assim que o rato passa por cima deste assumida a aparncia indicada
no estado OVER. O estado DOWN representa a aparncia que o boto
tem quando nele carregar.
Carregue em INSERT > NEW SYMBOL para criar um novo smbolo. Na
janela que se seguir nomeie o objecto como boto 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 boto. Na parte de cima, o timeline muda de
aparncia e passa a mostrar os estados do boto.
I.4. SMBOLOS, 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.
Ento, crie um desenho para representar o estado normal do boto. Cri-
amos algo como na figura abaixo.


Carregue na caixa em branco do timeline, na coluna OVER, e clique
com o boto da direita do rato. Escolha a opo INSERT BLANK KEY-
FRAME para comear a desenhar o novo estado do boto.
188 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Desenhe ento neste estado a mesma figura acima, porm com a seta
a apontar para o lado direito.
Repita a operao para o campo DOWN, e volte a modificar a seta para
que esta aponte para baixo.
Fica ento com trs desenhos diferentes, cada um a representar um es-
tado do boto.
Falta agora definir o campo que diz HIT, sobre o qual ainda no hava-
mos falado.
Neste campo ir indicar ao Flash que rea do boto est activa para
clicar, ou seja, se quiser que toda a rea do boto esteja activa, ento
dever na rea de HIT desenhar um crculo que cubra toda a superfcie
deste. Poder definir a rea que desejar. Definimos esta rea como
sendo toda a superfcie do boto.
O nosso boto tem agora os seguintes estados:
UP OVER DOWN HIT


Criados os estados volte cena principal da animao, por meio de um
clique na palavra SCENE 1, no canto superior esquerdo da rea de de-
senho.


I.4. SMBOLOS, EFEITOS E BIBLIOTECAS 189


Faa surgir a biblioteca (WINDOW > LIBRARY) e arraste de l o boto
para a sua rea de desenho. Coloque o Flash MX no modo de teste
(CONTROL > TEST MOVIE) e vai ver que o boto funciona perfeita-
mente.
Se quer acrescentar um som ao boto, 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.
Ento, por exemplo, poder ter um som a ser tocado quando o boto
entrar no estado UP, outro para o estado OVER e um terceiro para o es-
tado DOWN.


Movie Clips
Um movie clip um smbolo que em si prprio j um filme, ou seja,
possui movimento prprio.
Digamos que gostaramos de criar o movimento de uma bola a saltar
conforme a figura abaixo.
190 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Ento poderamos 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 composio de movimentos que causaria a iluso 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
rectngulo, 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 animao
dele a deslocar-se para
a direita...


I.4. SMBOLOS, EFEITOS E BIBLIOTECAS 191



Como a esfera dentro do movie clip movimenta-se a saltar e o prprio
movie clip deslocado para a direita, ento, pela combinao de
movimentos , veremos a esfera a saltar enquanto que se desloca para
a direita...

Efeitos de Cor e Transparncia
Existem diversos tipos de efeitos que poder aplicar num determinado
objecto da biblioteca, assim que o trouxer para a sua animao.
Basicamente, os efeitos relacionam-se com as cores ou com a transpa-
rncia 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 opes alm de NONE,
nomeadamente, BRIGHTNESS, TINT, ALPHA e ADVANCED. A seguir,
vamos explicao de cada uma delas.
192 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Brightness
Se seleccionar esta opo, 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 aparncia normal.
Tint
Se ajustar o campo COLOR com a opo TINT, poder acrescentar
uma cor a ser somada cor do objecto em si.
Ao seleccionar esta opo, 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 tambm poder ser ajustada pelos trs campos RGB na
parte inferior. Ao lado da caixa de cor encontra-se tambm outra caixa
com o valor 100%. Isto significa que a cor escolhida est a ser somada
I.4. SMBOLOS, 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 mantm a sua cor
original e no sofre efeito algum de TINT.
Alpha
O nome ALPHA vem de ALPHA CHANNEL (canal alfa), que a
designao mais antiga de que se tem notcia para nomear a informa-
o de transparncia de um material.
Se escolher ALPHA como opo de efeito, ver a janela de proprieda-
des com a aparncia abaixo.


Na caixa ao lado do nome ALPHA, poder regular o grau de transpa-
rncia 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 opo do menu COLOR realmente a mais completa e combina
vrias das opes anteriores numa s interface.
Assim que a escolher, vai ver que a janela de propriedades assume a
aparncia abaixo.

194 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Se carregar no boto SETTINGS ver ento,


Vai ver que as trs primeiras linhas equivalem aos canais de cor RGB e
a ltima ao canal de transparncia. 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.
OBSERVAO
Logicamente todos os efeitos podem ser animados!

Bibliotecas do Flash
Para alegria de toda a gente, esta nova verso do Flash vem com
diversos objectos reclamados durante anos e que podem ser usados
nos seus projectos. Estes objectos esto separados em diversas
categorias as quais passaremos a explicar a seguir.
I.4. SMBOLOS, EFEITOS E BIBLIOTECAS 195


BUTTONS
A primeira delas a biblioteca de botes. Para fazer surgir a janela da
biblioteca com estes itens, v ao menu WINDOWS > LIBRARY >
BUTTONS. Ver ento a seguinte janela:


Arcade Buttons
Vai ver diversas categorias separadas em pastas. A primeira delas a
ARCADE BUTTONS que disponibiliza o boto tipo mquina de pinball
em diversas cores, como na figura abaixo.

196 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Circle Buttons
Na categoria CIRCLE BUTTONS vai encontrar botes como os vistos
abaixo.


E tambm os do tipo a seguir.


Component Buttons
Na categoria COMPONENT BUTTONS, vai encontrar novamente o
boto do tipo ARCADE, porm, 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. SMBOLOS, EFEITOS E BIBLIOTECAS 197


Agora, pelas propriedades, pode ajustar em tempo real a cor do boto e
definir pelo campo label, no lado direito, se quer ou no que o boto
leve uma etiqueta, no caso, dois bonecos a representar dois jogadores
(j que se trata de um boto de pinball).


A subdiviso COMPONENT BUTTONS ainda lhe traz mais trs botes,
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 boto e a cor do brilho.
198 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 to desejados botes deslizantes e
rotativos para as suas pginas, como os vistos abaixo.


I.4. SMBOLOS, EFEITOS E BIBLIOTECAS 199


So botes completos que no precisam de nada para funcionar. Basta
coloc-los nas suas pginas e pronto
1
.
Ovals
Nesta categoria ter botes ovais coloridos como o seguinte, existente
em diversas cores.

Playback
O to adorado visual aqua do MacOS X est presente em botes
existentes nesta categoria.


Tambm ter nesta categoria botes como os vistos abaixo.


1
lgico que depois vai precisar de um pouco de ActionScript para poder ler os valores que o
utilizador ajustar.
200 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Push Buttons
Esta ltima categoria traz novamente o boto PUSH BUTTON existente
na categoria COMPONENT BUTTONS. Porm, os botes presentes
no permitem regular a cor
2
. Esto sim presentes em vrias cores pr-
-ajustadas.
SOUNDS
Outra biblioteca que acompanha o Flash MX e que est de acordo com
o objectivo introdutrio deste livro a encontrada em WINDOW >
COMMON LIBRARIES > SOUNDS. Ao escolher esta opo far surgir a
janela abaixo, que contm diversos sons para que os possa utilizar nas
suas animaes.



2
Pelo menos no sem uso de ActionScript.
I.5. COMPONENTES

Neste captulo vamos falar sobre uma das grandes inovaes no Flash,
os COMPONENTES. Estes objectos agora disponibilizados pela Macro-
media so a resposta aos anseios dos utilizadores ao longo dos ltimos
anos, reunidos em objectos sofisticados e de relativa facilidade de uso.
Convm saber que estes novos componentes do Flash tm a sua maior
utilidade quando acompanhados do apropriado cdigo em JavaScript,
que o que realmente os faz funcionar. Neste captulo abordaremos a
explicao de cada um deles, j que sobre o ActionScript falaremos
mais adiante.
Se olhar para a interface grfica do Flash MX, a seguir aos SWATCHES
vai ver uma janela de COMPONENTS. Nela encontrar os componen-
tes fornecidos para a criao de interfaces grficas.


202 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


A utilizao destes componentes s plenamente aproveitada se tiver
subrotinas em ActionScript
1
a correr, para ler as propriedades resultan-
tes da interaco dos utilizadores com os componentes e da derivar
aces que tornem a pgina mais interessante.
Tambm com ActionScript possvel criar componentes on the fly, ou
seja, apenas pelo uso da linguagem de programao, sem que estes te-
nham que estar presentes graficamente nos filmes Flash.
A seguir veremos ento cada um destes componentes e as suas fun-
es
2
.
CheckBox
O CheckBox uma caixa que pode ser marcada ou desmarcada pelo
utilizador. Deve ser utilizado quando pretende restringir as possveis
respostas dos utilizadores a uma certa questo. Veja o exemplo abaixo.


Observe que os CheckButton permitem livre marcao, ou seja, mais de
um quadro pode ser escolhido.

1
ActionScript a linguagem de programao utilizada no Flash, que possui centenas de comandos
para permitir virtualmente qualquer tipo de criao.
2
Logicamente neste captulo apenas vamos demonstrar a funcionalidade de cada objecto. O uso
avanado ser abordado na segunda parte deste livro, onde falaremos de ActionScript.
I.5. COMPONENTES 203

RadioButton
O RadioButton tem praticamente a mesma funo do CheckBox, porm,
no permite a marcao de mais de um controlo de mesmo tipo. Assim,
se tiver trs componentes RadioButton num formulrio, 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 no faz
sentido permitir a marcao de mais de uma opo. Quando for este o
caso usa-se o RadioButton. Outros exemplos so, quando num formu-
lrio perguntar se o utilizador tem ou no e-mail, ou alguma outra ques-
to onde no faa sentido mais de uma resposta.
PushButton
O PushButton o boto que precisa estar presente em todos os formu-
lrios para permitir o envio da informao.
204 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




ListBox
Com uma ListBox poder fazer listas de escolha para os utilizadores.
Por defeito, este componente est ajustado para apenas permitir que o
utilizador faa uma escolha. Porm, a mudana de uma propriedade po-
de permitir mltiplas escolhas.

I.5. COMPONENTES 205

ComboBox
O ComboBox
3
, ao contrrio do ListBox, apenas mostra uma opo
entrada. No caso abaixo, temos apenas visvel a frase faa uma esco-
lha....

Porm, quando o utilizador carrega na caixa, ela desdobra-se e mostra
uma segunda janela com as opes, permitindo assim a escolha.



3
Conhecido em muitos programas como DROP DOWN MENU.
206 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


No caso das ComboBox, somente uma escolha possvel.
ScrollPane
Este componente permite criar reas completas com barras de desloca-
mento
4
horizontais e verticais onde poder colocar imagens, filmes
Flash
5
ou textos. Veja a seguir.


Para aguar o seu apetite, enquanto no entramos na seco de
ActionScript, vamos explicao 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 ento a seguinte figura.

4
Barras de deslocamento ou scroll bars so 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 smbolo (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 tambm a palavra
texto. Carregue em ENTER
6
.


6
Se estas ltimas opes no estiverem presentes carregue no boto que diz ADVANCED.
208 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


A seguir, escolha a ferramenta de criao de textos, o TEXT TOOL (T),
posicione o rato num ponto na parte mdia esquerda da rea de dese-
nho. Carregue no boto 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 opo 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 visualizao e teste o filme
(CONTROL ENTER), para ver o ScrollPane a funcionar.
ScrollBar
O ScrollBar o ltimo campo dos componentes disponveis no Flash
MX. A funo dele permitir a construo de caixas com barras de
deslocamento. Desta forma, pode-se numa pequena rea colocar gran-
des quantidade de texto. A aparncia de uma caixa de texto deste tipo
assemelha-se criada pelo ScrollPane. Veja na figura abaixo.


Para criar uma janela de texto com ScrollBar, faa 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Com o rato na rea de desenho, crie uma regio 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 seleco activa. Carregue duas vezes com o rato em
cima dessa caixa marcada a azul, para entrar no modo de edio de
texto.
A caixa azul ento 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 seleco 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 prximo do border onde deseja colocar a barra
de deslocamento, seja esta horizontal ou vertical
8
. Deve faz-lo numa
rea prxima 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 edio de textos, que o que pretendamos.

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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Caso tambm desejasse uma barra horizontal, basta repetir o
procedimento indicando o local onde deseja a colocao da barra. A
regra geral a seguinte: se arrastar um ScrollBar para reas prximas
borda esquerda ou direita da caixa de textos, vai ter a criao de uma
barra de deslocamento vertical, e se arrastar para reas prximas s
bordas inferior ou superior da caixa de textos, ento ter barras de des-
locamento horizontal. Se quiser pode ter todas... J

I.5. COMPONENTES 213

Actions (ActionScript)
A ltima seco da interface grfica 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 programao do Flash. Com ela poder
fazer praticamente tudo o que puder imaginar. Quase que a totalidade
das pginas em Flash mais sofisticadas precisam fazer uso do Action-
Script para poderem funcionar como planeado. A simples colocao de
um boto na pgina, que responda aos cliques dos utilizadores com
aces 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 colocao de um
boto numa pgina que responda s aces de clique dos utilizadores.
As pginas construdas em Flash podem ser consideradas como aplica-
es
9
, j que na sua essncia so exactamente isso. Normalmente so

9
Sim, pode considerar uma pgina em Flash como sendo uma aplicao j que na sua essncia
exactamente isso.
214 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


ficheiros que renem todo o seu contedo no seu interior (udio, vdeo,
texto, etc.), ao contrrio das pginas normais de Internet em HTML, que
precisam referenciar todos os ficheiros necessrios boa visualizao,
j que no tm a capacidade de armazenar nada no seu interior que
no seja texto.
O Flash com o ActionScript forma um ambiente de programao orien-
tada ao objecto. Por outras palavras, isto significa que qualquer soft-
ware criado por meio do uso desta linguagem composto por vrios
objectos menores independentes que interagem entre si. Pela indepen-
dncia de cada objecto e por conterem no seu interior todo o cdigo ne-
cessrio ao seu funcionamento, so chamados objectos encapsulados
(encapsulated objects).
Alm de ter diversas propriedades, cada objecto dotado da pos-
sibilidade de reagir a determinados eventos com aces que podem ser
designadas pelos programadores.
Cada um destes eventos d aos programadores a possibilidade de fazer
interaces e combinaes e permite a criao de aplicaes sofistica-
das e intrincadas.
Imagine, por exemplo, que possui no Flash um objecto que uma lm-
pada. Esta lmpada possui uma propriedade chamada ESTADO, que
pode ser ajustada com apenas dois valores: 0 ou 1. Se o ESTADO for
colocado em 1 a lmpada liga e em 0, desliga.
Ento, o fabricante da lmpada resolve sofisticar o objecto e cria um
evento chamado QuandoLigado
10
. Permite ento que este evento pos-
sa ser associado a uma determinada aco
11
a ocorrer todas as vezes
que a propriedade da lmpada passe de 0 a 1. Ento pode associar a
este evento uma aco, como por exemplo, fazer aparecer o co e
apagar a luz.

10
Usamos esta notao porque aproxima-se mais da forma como vai ver as propriedades e
eventos dos objectos quando com eles se deparar.

11
A aco pode ser qualquer coisa que imaginar, por exemplo, o carregar de uma pgina de
Internet.
I.6. COMPONENTES AVANADOS


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 so alguns componentes adicionais pa-
ra a criao de interfaces grficas e outros para pginas em geral.
Para instal-los preciso utilizar um programa da prpria Macromedia,
disponvel no site, chamado EXTENSION MANAGER, que um painel
de controlo, para a instalao de novos componentes ao Flash MX. Veja
no Anexo III como obter o programa, as extenses e como fazer para as
instalar.
Tendo j feito a instalao das extenses, o primeiro grupo de
componentes novos que encontrar no seu Flash MX chama-se Flash
UI COMPONENTS SET 2, que so componentes adicionais criao
de interfaces grficas avanadas. O segundo grupo o Flash CHAR-
TING COMPONENTS, que so controlos para a criao de grficos nas
suas pginas ou aplicaes Flash. Vamos ento a partir de agora,
anlise dos componentes.
Flash UI Components Set 2
CALENDAR
O primeiro componente do grupo o CALENDAR (calendrio).
exactamente o que o nome diz. Um calendrio completo a funcionar pa-
ra utilizar nos seus programas e pginas Flash.
216 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Seleccione o calendrio 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 so oferecidas: RANGE e
MULTIPLE. Esta propriedade controla de que forma o calendrio funcio-
nar quando estiver na sua pgina Flash.
Se a propriedade estiver em SINGLE, o utilizador apenas poder esco-
lher um dia de cada vez no calendrio. Em MULTIPLE, ser permitido
ao utilizador escolher vrios dias e em RANGE uma faixa de dias pode
ser escolhida. Logicamente, saber o que foi escolhido pelo utilizador e
I.6. COMPONENTES AVANADOS 217

trabalhar com as hipteses da decorrentes s possvel 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 lngua que desejar. As setas
para cima e para baixo mudam uma determinada linha da tabela (ms)
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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




Tal como no exemplo anterior, nesta janela poder ajustar os dias da
semana para a lngua que quiser. Os nmeros 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 prxima propriedade do controlo chama-se FirstDayOfWeek
(primeiro dia da semana) e est preenchida por defeito com o nmero
zero, que corresponde a SUN (Sunday = Domingo). Ajuste esta caixa
com o nmero 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, ento este campo deve conter o valor 3.

2
SUN, MON, TUE, WED, THU, FRI e SAT so as abreviaturas dos dias da semana em Ingls:
SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY e SATURDAY, isto ,
DOMINGO, SEGUNDA... respectivamente.
I.6. COMPONENTES AVANADOS 219

DRAGGABLEPANE
Este controlo chamado Draggable Pane , nada mais, nada menos, do
que o de janelas arrastveis completas e prontas a usar, com um cone
para minimizar (tringulo no canto superior esquerdo) e outro para fe-
char (o X no canto superior direito).


As janelas podem ser arrastadas (pela barra do ttulo). Por meio de um
clique na barra do ttulo possvel trazer para a frente uma janela que
esteja por baixo de outras. Funcionam aproximadamente com a mesma
lgica 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Colocamos na propriedade nomeada Pane Title o valor janela 1,
conforme pode ver atrs. Esta propriedade representa o ttulo da janela,
que pode ou no ser colocado.

As ltimas quatro propriedades da janela so: Has Close Box, Is
Scrolling, Resizable e Has Shader. Elas representam o seguinte:
HAS CLOSE BOX indica se a janela tem ou no o X no canto superior
direito para permitir que seja fechada pelo utilizador.
IS SCROLLING indica se a janela tem ou no 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 no o boto 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, vdeos, etc.
Se for um texto, faa o seguinte: Crie um novo smbolo 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 tambm
a palavra texto. Carregue em ENTER.
I.6. COMPONENTES AVANADOS 221



Siga o mesmo procedimento que utilizou no componente ScrollPane
para criar uma caixa de texto dinmica.
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 aps a criao do novo sm-
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 no acontece.
222 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


O resto igual, ou seja, v ao ScrollContent e coloque o nome do
IDENTIFIER que utilizou para a imagem.


DICA
Se fizer um novo smbolo que contenha outros, como botes,
imagens, sons, etc., pode colocar tudo dentro de uma janela, se
referenciar apenas este smbolo principal no ScrollContent.


I.6. COMPONENTES AVANADOS 223

Se usar esse princpio, poder colocar qualquer coisa dentro da janela!
ICONBUTTON
Com este componente poder criar botes, prontos a usar, e que
permitem a colocao de imagens face.
Para criar um boto com este componente basta arrast-lo para a rea
de desenho. Em seguida, deve criar um novo smbolo, com uma ima-
gem qualquer (utilizamos uma gaivota), pelo mesmo procedimento utili-
zado no exemplo anterior e dar ao IDENTIFIER deste smbolo 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 ento, um boto com a imagem da gaivota na face. Voil!

224 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


As outras propriedades do IconButton so as seguintes.
LABEL permite a colocao de um ttulo (frase) que fica agregada
imagem que inserir para a face do boto.
LABEL PLACEMENT permite escolher em que posio relativa
imagem deve ficar posicionada o tal LABEL acima. As posies pos-
sveis so: 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 boto.
Normalmente o boto funciona da seguinte forma. Chamemos de
estado A o estado no qual o boto est em repouso e B o estado no
qual ele est quando nele se clica. Assim, o boto que est em A s fica
no estado B enquanto estiver a carregar com o rato sobre ele. Logo que
liberta o boto do rato o boto volta ao estado A.
Porm, 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 pargrafo
anterior. Se alterar esta propriedade para TRUE, far o boto 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 boto 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 boto inicialmente ser mostrado em repouso com a aparncia (A) e
com a aparncia (B) enquanto estiver a carregar sobre ele. Se passar a
propriedade a TRUE, inverter esta condio.
BACKGROUND Esta propriedade surpreendente! No satisfeitos
em permitir a colocao de uma imagem na face do boto, tambm
permitiram a colocao de outra imagem para o fundo do boto. O pro-
cedimento para agregar outra imagem a esta propriedade o mesmo
que foi descrito para o campo ICON.
I.6. COMPONENTES AVANADOS 225

MESSAGEBOX
Este componente permite a criao de caixas de mensagem para os
seus programas ou pginas 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 ttulo para a caixa de mensagens. Colocamos
a palavra TTULO neste campo.
MESSAGE indica a mensagem a ser mostrada na caixa. Colocamos a
frase: ESTA A MENSAGEM neste campo.
226 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


ICON este campo permite a colocao 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
so vistos abaixo nesta ordem.


BUTTONS Inicialmente este campo est preenchido com a palavra
OK, o que significa que a caixa apenas contm um boto com este no-
me, conforme pode ser visto pela imagem no incio da explicao deste
componente. Porm, se carregar na palavra OK, ver a janela abaixo
onde poder criar quantos botes desejar.


4
Dizemos isso pois qualquer um dos COMPONENTS pode ser modificado para assumir a aparn-
cia que desejar, pelo uso de skins (peles), como ver no prximo captulo.
I.6. COMPONENTES AVANADOS 227

O procedimento de criao de linhas neste caso, botes, nesta janela,
o mesmo visto no Calendar.
CLOSE HANDLER Neste campo dever colocar uma string
5
que
corresponda subrotina
6
a ser executada quando a caixa se fechar, ou
seja, assim que o utilizador carregar em algum boto 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 pixis a largura dos
botes.
TITLEBAR HEIGHT e aqui, a altura da barra do ttulo.
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 visvel e o segundo a ela invisvel.
Para finalizar este componente, devemos dizer que encontramos um
bug que torna o uso deste componente dentro de uma janela Dragging-
Pane impossvel.
No fim, depois dos ajustes acima descritos, poder ter uma caixa assim.


5
String = sequncia de textos, nmeros ou quaisquer outros caracteres, que para o programa so
tratados como texto.
6
Conjunto de linhas de programao que fazem determinada funo.
228 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


SPLITVIEW
O SplitView um componente fantstico 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 pgina
Flash, mas o espao mal suficiente para a colocao de um. Pode
ento usar o SplitView para dividir a rea, e em cada parte colocar in-
tegralmente aquilo que pretende.
Ento, ambas as informaes estaro no mesmo stio, divididas por
uma barra que poder ser deslocada para um lado e para o outro
7
e
assim permitir a visualizao 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 divisria
vertical.

7
Ou para cima e para baixo, consoante o tipo de SplitView que escolher...
I.6. COMPONENTES AVANADOS 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 divisria vertical,
ento esta propriedade refere-se ao nome do objecto que estar na
parte esquerda (LEFT) da divisria. Se estiver a utilizar uma barra divi-
sria horizontal, ento este campo refere-se ao nome do objecto exis-
tente na parte de cima (TOP) da divisria.
BOTTOM/RIGHT CONTENT De forma anloga, esta propriedade
refere-se ao objecto que vai estar na parte de baixo (BOTTOM) ou na
direita (RIGHT) da divisria, consoante esteja a utilizar uma barra divi-
sria horizontal ou vertical, respectivamente. Vai ver que j preenche-
mos este campo como outro.

NOTA
gaivota o nome do objecto correspondente
fotografia do pssaro que estar na metade esquerda da
divisria.
outro o nome do objecto que estar na metade
direita da divisria (neste caso um texto).

230 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Ento, a primeira coisa criar os dois objectos que ficaro associados a
cada metade do SplitView. Para criar um objecto com uma imagem,
faa 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 esto e carregue em ENTER para criar o novo objecto.
Importe uma imagem com o comando FILE > IMPORT para finalizar
este objecto.
Repita a sequncia de comandos acima para criar o objecto outro.
Porm, em vez de importar uma imagem, crie uma caixa de texto do
tipo DYNAMIC TEXT e MULTILINE e insira um texto qualquer.
Os parmetros da caixa e a sua aparncia so vistos a seguir.
I.6. COMPONENTES AVANADOS 231




Carregue na seta azul no canto inferior esquerdo do timeline (figura
abaixo) para voltar cena principal.

232 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 AVANADOS 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 trs escolhas: STICK TO BAR,
STICK TO PANE e RESIZE. Por defeito, esto ajustadas na opo
STICK TO BAR. Se as colocar em STICK TO PANE as imagens pas-
sam a ficar estticas em relao ao fundo enquanto desloca a barra
I.6. COMPONENTES AVANADOS 235

divisria. Na opo RESIZE, o tamanho das imagens aumentado ou
diminudo para caber na metade que lhes cabe, medida em que
desloca a barra divisria.

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 divisria horizontal. Basta apenas mudar a proprie-
dade ORIENTATION do componente para HORIZONTAL.

TICKER
A funo deste componente permitir a criao 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 parmetros do componente so os vistos na figura seguinte.
236 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO




A seguir vamos a uma descrio 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 orientao 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 orientao da caixa
for vertical, ento 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
pixis por segundo.
SMOOTHNESS representa a quantidade de pixis que a frase se
move a cada ciclo. Este campo tem relao directa com o SPEED. Isto
significa o seguinte: se a velocidade estiver a 10 e o SMOOTHNESS
estiver a 1, ento a frase desloca-se a 10 pixis por segundo. Porm, se
ajustar SMOOTHNESS com o valor 2, a velocidade passa a ser 20
pixis por segundo, pois a cada deslocamento da frase ela salta 2 pi-
I.6. COMPONENTES AVANADOS 237

xis. Logicamente, quanto menor este nmero, mais suave o movi-
mento aos olhos, por isso o campo tem esse nome
8
.
SPACING a quantidade de pixis entre cada um dos itens a ser
mostrado na caixa
9
.
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 sada 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 no se altera
passagem do rato.
SCROLL LOCATION Permite regular a posio das setas de scroll
(deslocamento) da caixa. As opes disponveis so: 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 incio desta seco, a caixa est ajustada
com a opo BOTTOM.
FRAME WIDTH indica a espessura em pixis 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 regio do texto imediatamente
abaixo do cursor, para indicar que est seleccionada esta regio. Pode-
se ento, por meio desta propriedade, regular a cor da iluminao.
DATA PROVIDER indica o nome de um objecto em ActionScript res-
ponsvel pelo fornecimento dos textos a serem mostrados na caixa.

8
smoothness = suavidade

9
a caixa permite a colocao de inmeras frases seguidas, que so mostradas sequencialmente,
independente do tipo de deslocamento, horizontal ou vertical.
238 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


DATA ARRAY Indica uma matriz de elementos a serem mostrados na
caixa. Pode ver na imagem que este campo contm a frase que apare-
ce na primeira imagem a falar do Ticker. Se carregar uma vez com o
rato sobre a regio 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 ttulo da caixa.
HEADER LOCATION Nesta caixa poder ajustar a posio em que o
ttulo da caixa vai estar. As escolhas possveis so: NONE, TOP,
BOTTOM, LEFT e RIGHT, que correspondem a nenhuma, em cima, em
baixo, esquerda e direita, respectivamente.
HEADER WIDTH indica a largura do ttulo em pixis.
HEADER HEIGHT indica a altura do ttulo em pixis.
DATA WITDH indica a largura dos itens na caixa em pixis. Esta
propriedade faz mais sentido no caso de caixas de deslocamento hori-
zontal, pois iro espaar as frases na horizontal de forma a no se con-
fundirem.
DATA HEIGHT esta propriedade indica a altura em pixis das frases.
Deixamos para o fim os dois ltimos componentes do primeiro grupo, o
TREE e o PROGRESS BAR. No nos estenderemos nas explicaes
acerca destes componentes nesta seco, por se tratarem de elemen-
tos que apenas podem funcionar quando programados por ActionScript.
TREE
Este componente permite a criao de rvores com informaes em
sistema de hierarquia. Poder por ActionScript, criar, apagar, mover e
ordenar os ns e as suas ramificaes. Poder descobrir qual a ramifi-
cao que foi clicada, e derivar aces correspondentes.
I.6. COMPONENTES AVANADOS 239



PROGRESSBAR
A Macromedia finalmente lanou um componente que corresponde a
uma barra de progresso. Todo o controlo da barra feito via Action-
Script.


As propriedades deste componente so:
CHANGE HANDLER Deve colocar neste campo o nome da funo
(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 invisvel.
240 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


DISPLAY TEXT uma propriedade que indica se deve estar visvel
(TRUE) ou no (FALSE) a string a mostrar os Kilobytes.


Flash charting components
Este o segundo grupo adicional de extenses oferecido pela Macro-
media no seu site. Assim como o primeiro grupo de extenses, este
tambm requer instalao para que possa ser usado no Flash MX (veja
o Anexo III). Assim que o tiver instalado ter sua disposio os se-
guintes componentes: BAR CHART, LINE CHART e PIE CHART, os
quais descrevemos a seguir.
BAR CHART
Com este componente poder criar grficos em barra, como na figura
abaixo.

I.6. COMPONENTES AVANADOS 241

Para conseguir um grfico 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 ttulo do
grfico. No caso GRFICO DE VENDAS.
XAxisTitle Neste campo dever colocar o ttulo correspondente ao
eixo horizontal (X). No caso, MESES.
YAxisTitle Neste campo dever colocar o ttulo correspondente ao
eixo vertical (Y). No caso, EUROS.
242 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Margin Corresponde ao valor em pixis da margem, ou seja, em
relao ao tamanho total do controlo, quantos pixis de margem deseja
estabelecer em todas as direces.
Se aumentar muito a margem e, consequentemente, diminuir o espao
interno dentro do controlo, pode ser que o Flash automaticamente ajus-
te a rotao dos textos para tentar encaixar o grfico dentro do compo-
nente. Veja na figura abaixo o grfico que foi comprimido na vertical,
com a retirada das linhas de 25 e 75 e a rotao 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 pixis deve ser reservado para a
colocao dos nomes. Por outras palavras, digamos que se os meses
acima tivessem sido escritos por extenso, ento, automaticamente no
caberiam no grfico e teriam sido rodados. Assim sendo, poderamos
ajustar esse campo, para um valor alto, digamos, 500, e teramos o
grfico seguinte...
I.6. COMPONENTES AVANADOS 243


... ou poderamos optar por ajustar a propriedade para um valor peque-
no, como 30 pixis, por exemplo, e limitar a este valor a quantidade de
pixis utilizada para mostrar os ttulos ao longo do eixo horizontal, con-
forme visto na figura abaixo.


LINE CHART
O prximo componente do pacote Flash CHARTING COMPONENTS
o LINE CHART. A sua utilidade permitir a criao de grficos de li-
244 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


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 AVANADOS 245




A primeira opo a Chart Title e representa o ttulo do grfico. Vamos
preench-la com a frase RESUMO DE VENDAS.
A seguir vemos as propriedades Xaxis Title e Yaxis Title, que cor-
respondem ao ttulo a colocar para o eixo horizontal e vertical, respec-
tivamente. Preenchemos estes campos com as frases valores em
euros e meses, respectivamente.
As opes a seguir so: LineColor e LineWeight que permitem o ajus-
te da cor e da espessura da linha.
Vemos tambm o campo ShowHighlights, que indica a presena
(TRUE) ou no (FALSE) de pequenos crculos de cor diferente a desta-
car os pontos do grfico.
Os campos a seguir, MARGIN e XLabelMaxHeight assemelham-se aos
do BAR CHART e tm a mesma funcionalidade explicada anterior-
mente.
246 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Line Chart Chart Event Handlers
Ao voltar janela de propriedades do componente, vemos que a prxi-
ma varivel 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 grficos podem gerar em relao 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 funes em ActionScript a executar, quando cada um dos
quatro eventos acontecer. Neste caso, os eventos so:
Press (quando o boto do rato for carregado em cima de um ponto do
grfico), Release (quando o boto do rato for libertado depois de ter
sido carregado em cima de um ponto do grfico), RollOver (quando o
cursor do rato passar por cima de um ponto do grfico) e RollOut
(quando o cursor do rato sair de cima de um ponto do grfico, depois de
ter entrado).
I.6. COMPONENTES AVANADOS 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 grfico. 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 prxima 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 grfico vo ter no eixo vertical. Carregue nestes nmeros e vai ver
uma janela onde poder regular estes pontos. Nesta etapa deixamos os
valores como estavam.
Feitos todos esses ajustes, ter transformado o grfico no que pode ser
visto a seguir.
248 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Repare nos highlights volta dos pontos.
As questes discutidas no BAR CHART referentes margem e ao com-
portamento do componente medida que altera os seus valores, tam-
bm so vlidas para o LINE CHART.
Pie Chart
O PIE CHART o prximo componente sobre o qual iremos falar.
Com ele possvel fazer grficos PIZZA ou TARTE
10
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 AVANADOS 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 varivel vai ver a janela a seguir.


Os parmetros vistos nesta janela so:
CHART TITLE - que corresponde ao ttulo do grfico.
MARGIN que pode regular a margem interna do componente (ver ex-
plicao dada para o BAR CHART).
250 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


SHOW LEGEND varivel que pode assumir os valores TRUE ou
FALSE, correspondentes respectivamente ao grfico ter ou no a legen-
da lateral ao lado direito.
As trs prximas propriedades, ou seja, CHART EVENT HANDLERS,
CATEGORY LABELS e DATA VALUES tm 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
grfico.
II PARTE

A PROGRAMAO NO
MACROMEDIA FLASH MX
II.1. INTRODUO PROGRAMAO
ORIENTADA POR OBJECTOS

Linguagens Processuais ou Procedimentais
Linguagens como o Pascal, o Fortran ou o C, so consideradas proces-
suais ou procedimentais. Denominam-se desta forma, pois o cdigo
escrito passo-a-passo. Os programadores que utilizam estas linguagens
podem organizar as instrues a ser processadas em partes de cdigo
mais pequenas chamadas funes (functions) que para o seu funciona-
mento utilizam estruturas de dados (data structures). importante sali-
entar que as linguagens processuais mantm as funes e as estruturas
de dados separadas estas no esto relacionadas de modo algum.

Embora sejam eficientes, as linguagens processuais possuem alguns
inconvenientes, um dos quais a dificuldade na reutilizao do cdigo.
A sua natureza passo-a-passo obriga o programador a compreender
cada linha de cdigo, para conseguir compreender o que o programa
faz. Outra desvantagem das linguagens processuais o facto de ignora-
rem o relacionamento entre as funes 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 especificao escrita pela European
Computer Manufacturers Association, que serve tambm de base
linguagem Javascript - da as semelhanas entre as duas linguagens.
No entanto, existem ainda alguns pontos onde ambas as linguagens di-
ferem.

254 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

No Flash MX as funes e as estruturas de dados esto agrupadas em
classes que podem ser definidas pelo construtor de funes (constructor
function). Um construtor de funes um conjunto de instrues que
define as propriedades e os mtodos de uma classe. possvel criar
mltiplas instncias de uma classe, cada uma delas denominada por
objecto, para reutilizar atravs do cdigo.

Por exemplo, para obter informaes acerca da taxa de IVA de diversos
artigos, criamos um construtor atravs da declarao de uma funo
(iva) que possui duas propriedades (preco,taxa) e atravs destas cria-
mos um mtodo (calcTotal) que calcula e devolve o preo 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 funo necessita de dois parmetros (t, d). Assim, a partir desta
classe podemos criar instncias deste objecto em que os parmetros
variam.

almoco = new iva (5, 0.05);
computador = new iva (1000, 0.17);


O operador new foi usado para criar duas novas instncias do objecto
iva, s quais atribumos os nomes almoco e computador e para onde
passamos os parmetros que se encontram entre parntesis.

A utilizao do operador new similar a arrastar um movie clip da
biblioteca para o palco, ou seja, criar uma nova instncia de um smbolo
(objecto).

Nas linguagens orientadas por objectos as classes podem receber
propriedades e mtodos umas das outras de acordo com uma ordem
especfica. A esta caracterstica denomina-se herana (inheritance).
II.1. INTRODUO PROGRAMAO ORIENTADA POR OBJECTOS 255

Uma classe que herda as caractersticas de outra classe designada
de subclasse (subclass). A classe que passa as propriedades e mto-
dos chamada de superclasse (superclass). Uma classe pode ser sub-
classe e superclasse em simultneo.

II.2. CONCEITOS BASE

Dot sintax versus Slash sintax
A slash syntax foi utilizada pelo Flash desde a verso 3 at verso 5.
Na verso 5 do programa, foi feita a transio entre as duas notaes,
podendo o utilizador funcionar com ambas em simultneo, embora a
slash sintax fosse j aconselhada pela Macromedia apenas para abrir
ficheiros de Flash mais antigos. Na verso MX a slash sintax j no
existe pois foi totalmente substituda pela dot sintax.

Na slash sintax os caminhos so muito semelhantes aos utilizados em
HTML. O caminho pode ser absoluto, comeando pela _root (timeline
do filme principal) ou relativo se comear numa instncia 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 nvel na hierarquia este
representado por ( ../ ). Em Flash a ( / ) simboliza o palco e para atribuir
uma action a um boto 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, ento no movie dever aparecer ape-
nas /

A dot syntax foi introduzida no actionscripting do Flash 5. o mtodo
preferencial para identificar o caminho para um movie clip ou para uma
varivel. Se ainda trabalhar em Flash 5, a slash sintax deve ser evitada
pois foi totalmente substituda pela dot sintax no Flash MX.

A dot sintax muito semelhante slash sintax, mas as barras foram
substitudas por pontos. Os caminhos podem ser absolutos e relativos e
existem duas referncias especiais, _root e _parent. A _root num ca-
minho absoluto refere-se timeline principal (raiz), da mesma maneira
258 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

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 so instncias localizadas na timeline prin-
cipal e so dependentes da root. Existem dois mtodos para referenciar
o target path de um movie clip: Absoluto e relativo.

Timeline principal
root
Escritrio Quarto

Figura001 - Target Paths


No esquema da figura 001, o caminho absoluto para o movie compu-
tador ser: _root.escritrio.computador, e o caminho relativo para o
movie clip quarto a partir do movie clip cama ser _parent.
Terminologias utilizadas no Actionscripting
Actions So declaraes que instruem a animao 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 So elementos imutveis durante toda a animao.
Constructor - Funo utilizada para definir as propriedades e os mto-
dos de uma classe.
Eventos - O evento a aco que ocorre enquanto a animao est a
decorrer. Os eventos podem ocorrer quando um movie clip carrega, ou
quando o utilizador faz clique sobre um boto.
Function (funo): Bloco de cdigo reutilizvel cujos argumentos
(parmetros) podem ser passados e de onde os seus valores podem
ser extrados.
Identifier (identificador): Nome utilizado para identificar uma varivel,
propriedade, objecto, funo ou mtodo. O primeiro caracter de um
identificador deve ser uma letra, underscore (_), ou sinal $. Cada ca-
racter subsequente deve ser uma letra, underscore (_), sinal $ ou nme-
ro.
Keywords Palavras reservadas que possuem uma funo pr-definida
no Flash.
Method (mtodo): Funo associada a um objecto. Depois da funo
associada, pode ser chamada mtodo desse objecto.
Object (objecto): Uma instncia de uma classe. Cada instncia contm
todas as propriedades e mtodos da classe. Instncias tambm podem
conter propriedades e mtodos adicionais no definidos na classe.
Nome da instncia Nomes nicos que permitem identificar determina-
dos elementos na animao, como movie clips ou variveis.
Property (propriedade): Caractersticas que definem um objecto.
Parmetros ou argumentos So contentores que permitem passar va-
lores para dentro de uma funo. Por exemplo, o cdigo seguinte passa
o parmetro cor para a funo cores.

function cores (cor) {
cor_preferida = "A minha cor preferida " + cor;
}

260 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Variable (varivel): Identificador que armazena um valor.

Seria possvel definir uma classe de tigres utilizando um construtor de
funes. As propriedades destes tigres incluiriam os dentes, tamanho,
apetite e forma. Os mtodos incluiriam cdigo para fazer o tigre andar,
comer e caar.
Depois de definir a classe do tigre atravs de propriedades e mtodos
teramos o objecto do tigre. Para construir outro tigre deveramos criar
uma instncia da mesma classe, podendo possuir no entanto proprie-
dades e mtodos diferentes da primeira.

Cada objecto pode ter as suas propriedades e mtodos no definidos
pela classe da qual derivou. Por exemplo, poderia definir uma instncia
em que o tigre tem outra cor, mas como seria o nico a possu-la esta
propriedade no seria adicionada na classe.
Painel Actions
No Flash utilizado o painel Actions para se escrever os scripts. Este
painel pode ser acedido atravs do comando WINDOW > ACTIONS ou da
tecla de atalho F9. O painel possui dois modos de edio de scripts, o
Normal e o Expert.

A diferena entre o modo Normal e o modo Expert est no tipo de ajuda
fornecido ao utilizador. Em modo Normal so exibidos no topo do painel
os parmetros que so possveis 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
tambm 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 auxlio com as keywords do programa.



Figura003 - Painel Actions em Expert Mode

INSERIR UMA ACTION
Pode utilizar vrios mtodos para aplicar actions a uma frame ou instn-
cia.

Primeiro, seleccione o frame ou instncia onde ir aplicar a action e
active o painel actions atravs do comando WINDOW > 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 designao. O cdigo aparecer imediata-
mente no lado direito do painel. Algumas actions possuem parmetros
que podem ser de seguida configurados na rea direita. Ver figura
002.

262 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Como alternativa, o painel actions possui o boto (+) que tambm acede
s categorias e actions do programa, mas atravs de menus pop-up.


Figura004 Boto (+)


Nota: Neste livro no faremos referncia ao modo que deve ser utilizado para a
insero de uma action, deixando ao critrio do leitor essa escolha.



Figura005 Botes do painel Actions



Find Procurar palavras no cdigo.


Figura006 Janela Find

II.2. CONCEITOS BASE 263

Para encontrar palavras no cdigo, digite o texto na caixa Find What e
active a opo Match Case se pretende procurar as palavras com
maisculas e minsculas exactamente como as escreveu na caixa.

Replace Procurar e substituir palavras no cdigo.


Figura007 - Janela Replace


Target Path - Inserir o caminho relativo ou absoluto para uma instncia.

Check sintax Verifica se a sintaxe do cdigo est correcta.

Autoformat Formata automaticamente o cdigo de modo a que este
fique com um aspecto conciso e de fcil leitura.

Show Code hint Mostra uma pequena janela de ajuda enquanto se
digita o cdigo.

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 opo 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 instncias ou keyframes onde estes esto
aplicados.
264 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Figura008



Uma outra forma de visualizar as actions presentes num determinado
filme atravs do Movie Explorer, que podemos aceder atravs do
comando WINDOW > MOVIE EXPLORER.


Figura009 Movie Explorer

PARA APAGAR UMA ACTION
Seleccione a action ou a linha no painel do lado direito.
Faa clique sobre o boto (-).

II.2. CONCEITOS BASE 265

VISUALIZAR A NUMERAO PARA AS LINHAS DE CDIGO
Seleccione a opo VIEW LINE NUMBERS no menu pop-up do painel
actions ou ento utilize o atalho Ctrl+Shft+L (Windows) ou Command+
Shift+L (Macintosh). A janela Actions possui ainda o boto View
Options, onde esta opo aparece disponvel.


Figura010 Numerao nas linhas de cdigo

IMPRIMIR ACTIONS
No menu pop-up do painel actions seleccione a opo Print. Surgir a
janela com as opes de impresso. Clique no boto Print.
PAINEL REFERENCE
Este novo painel auxilia o utilizador a compreender cada aco listada
no painel Actions. Existem tambm alguns exemplos de cdigo, que
podem ser copiados para dentro do painel de Actions.


Figura011 Painel Reference
266 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

PARA VISUALIZAR O PAINEL REFERENCE
Para visualizar o painel Reference, seleccione o comando WINDOW >
REFERENCE.
Se j existir uma linha de cdigo 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
descrio da action seleccionada.


Figura012 Icon Reference no painel Actions

PARA ALTERAR A DIMENSO DA FONTE NO PAINEL
REFERENCE
Seleccione a opo Large, Medium ou Small do menu pop-up do painel
Reference.
ASSOCIAR ACTIONS NA TIMELINE
Ao associar uma action na timeline a aco acontecer assim que a ani-
mao atingir essa keyframe.
Para associar uma action a uma frame comece por adicionar um novo
layer na animao. Se a action for para uma frame, que no seja a
primeira da animao, deve ser inserida uma blank keyframe na layer
Actions (F7).
De seguida com a keyframe seleccionada, active o painel Actions e
introduza o cdigo pretendido.


Figura013 Associar actions a um keyframe
II.2. CONCEITOS BASE 267

ASSOCIAR ACTIONS A SMBOLOS
Podemos associar actions a frames, timelines de movie clips e botes e
directamente s instncias dos movies e botes. Algumas actions so
exclusivamente para aplicao em instncias de movie clips e outras
apenas podem ser associadas a instncias de botes.

Ao criar um smbolo na biblioteca (library) e arrastar uma cpia para o
palco acabamos de criar uma instncia do smbolo. Ao associar as
actions s instncias em vez de directamente no smbolo, podemos
utilizar vrias instncias do smbolo em que cada uma pode conter o
seu conjunto de actions, reaproveitando recursos no filme.

Para aplicar uma action a um smbolo, basta seleccion-lo e atribuir a
action que pretendemos.


Figura014 Smbolo Button na livraria e uma instncia no palco

Eventos
Ao associar uma action a um smbolo surge sempre uma linha adicional
para especificar o evento. O evento a aco que ocorre enquanto a
animao est a decorrer. No Flash, os eventos so normalmente de
teclado ou de rato e diferem entre movie clips e botes. Cada instncia
pode conter mais do que um evento.
268 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

EVENTOS ASSOCIADOS A BOTES

Figura015 Eventos associados a uma instncia dum boto

Press Ao premir o boto do rato, mas antes de o soltar.
Release Quando se solta o boto do rato. Este evento acontece sem-
pre depois do evento Press.
Release Outside Soltar o rato fora da rea hit do boto.
Roll Over Passar o rato por cima do boto, mas sem possuir o boto
do rato premido.
Roll Out Retirar o rato de cima do boto, sem o premir.
Drag Over Passar o rato por cima do smbolo, mantendo o boto do
rato premido. Esta operao normalmente designada por arrastar.
Drag Out Retirar o rato de cima do boto ou movie, mantendo o boto
premido.
Keypress Acontece quando o utilizador prime uma determinada tecla.

EVENTOS DE MOVIE CLIPS
Load Ocorre apenas uma vez, assim que a instncia acaba de ser
carregada.
EnterFrame A aco est constantemente a ser despoletada veloci-
dade do filme. As aces associadas a este evento acontecem antes de
qualquer action da timeline do movie clip.
II.2. CONCEITOS BASE 269

Unload A aco iniciada no primeiro frame, depois do movie clip ser
removido da timeline.
Mouse Down Ao premir o boto do rato sobre a instncia.
Mouse Up Ao soltar o boto do rato sobre a instncia.
Mouse Move A aco 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 aco iniciada assim que entram dados no movie atravs da
action LoadVariables ou LoadMovie.

Ao ser especificada atravs da aco LoadVariables o evento apenas
acontece uma vez, enquanto que atravs da action LoadMovie o even-
to acontece repetidamente medida que os dados so recebidos.


Figura016 Eventos associados a uma instncia dum movie clip.

II.3 INTRODUZIR INTERACTIVIDADE
NUMA ANIMAO


Neste exemplo vamos utilizar actions que controlam o fluxo da anima-
o. Importamos um vdeo em formato QuickTime que iremos controlar
com alguns botes.

Comece por importar um filme Quicktime para a biblioteca atravs do
comando FILE > IMPORT. Active a opo Embed video.


Figura017 Opes na importao de vdeo


No palco crie mais duas layers, uma para os botes e a segunda para
as actions. Ver figura 018.

No menu WINDOW > COMMON LIBRARIES > BUTTONS, seleccione da
categoria Playback um boto para parar o filme, um para retomar a ani-
mao e mais dois para recuar e avanar o filme frame-a-frame.

272 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura018

Seleccione a primeira keyframe da layer actions e active o painel
Actions (F9).
Na categoria actions escolha a opo movie control e a action stop.

stop();


De seguida, seleccione o boto que ir fazer a animao arrancar e es-
colha no painel ACTIONS > MOVIE CONTROL > PLAY.


Para o boto que pra 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 esto
inseridas, mas no afectam directamente movie clips presentes dentro
da mesma. Assim, se existissem movies no palco nenhum seria afec-
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 273

tado pelas actions que acabamos de inserir, pois as timelines dos movie
clips so independentes da animao criada no palco.

Restam os botes para fazer o filme recuar ou avanar frame a frame.
Para estes utilizaremos a action goto, mas os parmetros devero ser
alterados. Assim, teremos:


Figura020 Actions do filme


CRIAR LINKS PARA PGINAS HTML
Para criar um link para uma pgina HTML utilizamos a action GetURL.
possvel criar links relativos e absolutos, assim como passar variveis,
no caso do envio dum formulrio, atravs desta action.
Para criar um link num boto, seleccione o boto e aplique a action Get-
URL que se encontra na categoria ACTIONS > BROWSER NETWORK.


Figura021 Action getURL
274 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Um link relativo liga o filme de Flash a uma pgina do nosso site. O
caminho dever ser escrito usando a mesma notao do HTML.
Para uma pgina que se encontre na mesma pasta que o HTML que
contm o filme de Flash basta digitar o nome da mesma. Ver figura 022.



Figura022 Aceder a uma pgina que se encontra na mesma pasta do filme em Flash.


Se esta se encontrar numa pasta diferente, o caminho deve ser digitado
desde a pgina HTML que contm o filme de Flash at pgina do link.

Para recuar um nvel utilizam-se dois pontos. Ver figura 023.


Figura023 Aceder a uma pgina HTML que se encontra numa pasta diferente do filme em
Flash.


Um link absoluto poder ser para uma pgina fora do nosso site. Com o
cdigo seguinte aberto o endereo http://www.centroatlantico.pt numa
nova pgina do browser.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 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 endereo de e-mail para onde ser enviada a mensagem.
on (release) {
getURL("mailto: geral@centroatl.pt ");
}

Se pretendermos preencher tambm o assunto basta completar com:
on (release) {
getURL("mailto:geral@centroatl.pt?subject=Opinio");
}


Figura025 Mensagem criada atravs do link e-mail
276 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

CARREGAR FILMES DE FLASH EXTERNOS
Num site totalmente em Flash, os filmes podem tornar-se muito exten-
sos e pesados. Nas animaes mais complexas comea tambm a ser
difcil organizar todo o fluxo de trabalho por cenas e muitas vezes ne-
cessrio recorrer separao do contedo em diversos filmes.

Estes filmes por serem mais pequenos, so mais fceis de organizar e
podemos sempre optar por remov-los da animao principal em qual-
quer altura ou substitu-los quando no esto a ser visualizados pelo uti-
lizador.

Um exemplo clssico ser um site que possui como rea fixa uma
navegao de botes que pretendemos se mantenha constantemente
visvel, enquanto uma segunda rea acomodar todas as animaes re-
ferentes a cada um destes botes. Ver figura 026.


Figura026 Interface principal do filme



Para carregar filmes de Flash sobre outro filme necessrio que a
animao que vai ser carregada esteja j exportada em formato swf.
A animao que carrega os filmes secundrios estar no nvel inferior.
Cada nvel s pode possuir um filme, logo, ao carregar um filme num
nvel ocupado, a animao que l se encontra automaticamente remo-
vida.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 277


Figura027 - Carregamento de filmes swf


Os filmes secundrio herdam do principal as seguintes caractersticas:

Velocidade A velocidade do filme principal sobrepe-se das anima-
es secundrias.
Dimenses O canto superior esquerdo dos filmes secundrios 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 secundrios iro possuir fundo transparente.
Para um fundo opaco devemos criar uma layer onde desenhamos um
rectngulo com a cor de preenchimento pretendida.

Para carregar um filme secundrio vamos comear por export-lo para
o formato .swf atravs do comando FILE > EXPORT MOVIE. Tivemos o
cuidado de dar a este ficheiro a mesma dimenso do filme principal e de
construir a animao do lado direito para no interferir com a navega-
o. Ver figura 028.

278 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura028 - Filme secundrio


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 fcil se ambos se encontrarem na mesma lo-
calizao.



Figura029 - Exportar o filme


De seguida seleccionamos o boto que vai efectuar o carregamento do
filme e no painel Actions escolhemos a opo ACTIONS > BROWSER/
NETWORK > LOAD MOVIE.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 279


Figura030 Action Load Movie


Na opo URL digitamos o nome do ficheiro exportado anteriormente. O
nvel 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 nvel 1 far automa-
ticamente a remoo do filme existente (clientes.swf ).

No caso de pretendermos remover um determinado filme, basta utilizar
a action UnloadMovie e referi-lo atravs do nvel onde se encontra car-
regado.
280 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura032 Remover um filme
CONTROLAR FICHEIROS EXECUTVEIS COM O
FSCOMMAND
O Flash exporta ficheiros executveis para a criao de CD-ROMs inte-
ractivos. A action Fscommand permite aceder e alterar algumas carac-
tersticas nos ficheiros executveis criados pelo Flash.
Para exportar um ficheiro executvel seleccione a opo FILE > PUBLISH
SETTINGS e escolha a opo Windows Projector, no caso de pretender
um executvel para correr em sistemas Windows ou a opo Macintosh
Projector, para ficheiros que correm em sistemas Apple. Para alterar o
nome que o programa atribui por defeito ao ficheiro inactive a opo
Use default Names.

Figura033 Exportar um executvel
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 281

Normalmente so aplicadas primeira keyframe do filme, mas estas
aces tambm podem ser associadas a botes ou movie clips.
No painel ACTIONS > BROWSER / NETWORK > FSCOMMAND aceda caixa
Commands for standalone player e escolha uma das seguintes opes:


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 tambm as
propores dos actores e imagens que fazem parte da animao. Na
opo false isto no acontecer. O valor default true.
Showmenu Por defeito est activo, assim o utilizador ao fazer clique
com o boto direito do rato sobre o filme ver aparecer um menu de
atalho que lhe permite controlar vrias opes no filme.


Figura035 Showmenu
282 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

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 parmetros.
Quit Fecha a janela do projector.


Figura036 Icon de projector


O ficheiro produzido pode ser aberto em qualquer computador, mesmo
que no possua o Player do Flash instalado.

SMBOLOS
Recapitulando alguns pontos-chave em relao aos smbolos, que se-
ro importantes para compreender a sua integrao com as actions em
Flash:

- As instncias dos movie clips e botes podem possuir nomes.


Figura037- Nomear movies

- As timelines dos movie clips so independentes da timeline do filme
principal, ou seja, um filme pode estar parado, mas os movie clips po-
dem manter as suas animaes.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 283

- Uma caixa de texto dinmico ou input pode possuir nome. No entanto,
devemos ter em ateno uma diferena importante entre nomear a
instncia de texto e atribuir-lhe um nome de varivel.

Figura038 Nome da instncia de texto

Ao atribuir um nome de instncia possvel aceder a mtodos e propri-
edades da caixa de texto. Esta opo portanto mais poderosa que a
atribuio do nome da varivel qual apenas podemos alterar o seu va-
lor.


Figura039 - Nome da varivel de texto

Os smbolos podem estar includos dentro de outros smbolos, que por
sua vez podem possuir outros smbolos dentro das suas timelines.
A localizao destes smbolos dada por uma hierarquia em forma de
rvore para a qual os nomes das instncias contribuem para identificar
a sua localizao. Esta localizao conhecida por caminho (target
path) do movie clip.

Figura040 Hierarquia dos smbolos
284 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Para nos referirmos aos mtodos de um objecto a forma anloga
utilizada para as instncias. Os mtodos possuem argumentos ou par-
metros, que so suportes para valores transportados para o mtodo.
Estes argumentos seguem o nome do mtodo entre parntesis, utilizan-
do a sintaxe nomedomtodo (argumentos).

Para utilizar a dot sintax na referncia a um mtodo 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 mtodo.
Para referenciar o mtodo (play) de um movie clip (boneco) utilizando a
dot sintax:

boneco.play()
ATRIBUIR NOMES A INSTNCIAS DE MOVIE CLIPS OU
BOTES



Para ser possvel
fazer referncia a
um movie clip ou
boto necessrio
que a instncia
possua um nome.
Para atribuir este
nome basta
seleccionar a
instncia e no painel
PROPERTIES
preencher o campo
instance name.


Figura041 Atribuir um nome a um movie clip

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 285

CAMINHOS RELATIVOS E ABSOLUTOS
Tal como j foi referido no primeiro captulo desta segunda parte do
livro, existem duas formas de fazer referncia ao target path (caminho)
dum movie clip. Atravs de referncias absolutas e relativas.
CAMINHOS ABSOLUTOS
A timeline principal do filme, referida como _root no Flash. Todos os
movie clips so instncias localizadas na timeline principal e so
dependentes da _root. Logo, para iniciar a animao dum movie cha-
mado modelo no palco teremos:

_root.modelo.play()

Ao utilizar este mtodo a action pode ser dada de qualquer timeline no
filme, pois o Flash espera encontrar no palco uma instncia com o nome
modelo e apenas actuar sobre esta.


Figura042 Target path absoluto

CAMINHOS RELATIVOS
No mtodo relativo a referncia _parent diz respeito timeline onde o
movie clip ou boto est inserido; esta pode ser o palco ou outro movie
clip. Numa estrutura do tipo representado na figura042, para aceder ao
palco atravs do movie clip vestido teremos algo do tipo:
_parent._parent

286 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura043 Target path relativo

Ainda no mtodo relativo surge-nos a referncia this que simboliza a
timeline em que estamos. Se estivermos na timeline modelo e nos qui-
sermos referir a ela no cdigo bastar escolher a opo this ou deixar o
campo target em branco.


Figura044 Movie clips dentro de outro movie clip

CONTROLAR INSTNCIAS DE SMBOLOS
Utilizando a dot sintax e os target paths conseguimos no s associar
actions a instncias, mas tambm alterar as suas propriedades e aceder
aos seus mtodos.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 287

No exemplo seguinte iremos criar uma simples interface com quatro
botes, para controlar um movie clip (pacman).
Comece por criar o movie clip do pacman com duas frames, para pro-
duzir a animao do abrir e fechar da boca do elemento.


Figura045 Animao do movie clip pacman


Crie de seguida um boto (seta) para a interface. Deste smbolo aplica-
remos quatro instncias, que sero rodadas no palco uma para cada di-
reco do movimento do personagem.
Vamos comear por criar a action que rodar o movie na direco dese-
jada. Para tal, basta-nos controlar a propriedade _rotation.
No palco atribua um nome instncia do pacman e seleccione no painel
ACTIONS > PROPERTIES > _ROTATION.

Para completar o comando
faa clique na linha de
cdigo 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
rotao do movie clip.

Figura046 Valores de rotao para as setas


288 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

PROPRIEDADES DOS MOVIE CLIPS
_alpha Altera a transparncia das instncias. Assume valores entre 0
e 100, em que o valor 0 simboliza a transparncia mxima da instncia.


Figura047 Alpha 100 e alpha 50

_currentframe Simboliza a frame actual onde a animao da instn-
cia se encontra.
_droptarget Representa a posio onde a instncia largada no caso
de estar a ser usada a action startdrag.
_focusrect Determina se um movie clip possui um rectngulo amarelo
sua volta no caso do utilizador navegar na animao com a tecla TAB.
_framesloaded A quantidade de frames j carregados da instncia.
_height Altura em pixis de uma instncia.
_name Nome da instncia.
_quality Qualidade com que exibida determinado movie clip. Os va-
lores possveis so:
LOW Grficos apresentam-se sem anti-aliasing.
MEDIUM Grficos com anti-alising utilizando uma grelha de 2 x 2
pixis, mas os bitmaps no possuem suavizao. Ideal para filmes
sem texto.
HIGH Boa qualidade. Grficos com anti-alising utilizando uma
grelha de 4 x 2 pixis, e os bitmaps so suavizados se a animao
estiver parada. Esta a qualidade por defeito do Flash.
BEST Muito boa qualidade. Igual qualidade high, mas os bit-
maps esto sempre suavizados.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 289


Figura048 Low quality vs High Quality


_rotation Valor da rotao de uma instncia.

Figura049 - Propriedade Rotation


_soundbuftime Tempo em segundos antes do filme comear uma
animao stream.
_target Retorna o valor do target path do movie clip.
_totalframes Devolve o nmero total de frames de um movie clip.
_url D o endereo URL do filme SWF de onde o movie clip fez down-
load.
_visible Visibilidade da instncia. Quando o seu valor false a instn-
cia ficar invisvel, no caso de true a instncia fica visvel. Por defeito, o
valor est configurado para true.
_width Largura dada em pixis de uma instncia.
_x Coordenada do centro de um movie clip visualizada na rgua
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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

_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 rgua 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 dimenso do movie clip que se encontra na biblioteca.

Figura051 - _xscale e _yscale
MTODOS MAIS UTILIZADOS NOS MOVIECLIPS

starDrag e stopDrag
A capacidade de arrastar movie clips dentro de uma animao sem
dvida uma das capacidades mais utilizadas pelos designers do Flash.
Esta operao desempenhada atravs da utilizao de um mtodo
denominado startDrag.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 291

Uma das formas mais simples para deslocar um movie clip atribuir o
mtodo directamente na instncia no evento onLoad. Esta situao
pode ser interessante quando pretendemos criar um rasto de movies a
seguir o cursor do rato.


Figura052 Mtodo startDrag


A opo Lock mouse to Centre coloca o centro da instncia a coincidir
com o ponteiro do rato. Se no 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 opo
Constrain to rectangle.

Figura053 Constrain to rectangle

No entanto, na maior parte das vezes pretendemos ter o controlo total
sobre a instncia e a possibilidade de a posicionar algures no palco.

292 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Para esta situao teremos de aplicar o mtodo stopDrag, mas que
apenas ser chamado quando o utilizador soltar o boto do rato.

Uma das formas de obter este efeito criar primeiro um boto que
contm o actor a arrastar e de seguida colocar esse boto dentro de um
movie clip que ser colocado no palco.

Seleccione o boto dentro do movie e escolha ACTIONS > MOVIE CLIP
CONTROL > STARTDRAG.



Figura054 Actions para drag and drop do movie clip


O boto que colocamos dentro do movie clip possuir ento a progra-
mao para arrastar e largar a instncia, mas em eventos diferentes.
Ver figura 054.

No necessrio especificar Target pois como o boto est dentro do
movie clip este automaticamente assumido como o movie que deve
ser arrastado. A instncia do movie clip colocada no palco e estar
pronta a funcionar.

DuplicateMovieClip e RemoveMovieClip
Estes dois mtodos permitem duplicar um movie clip e remover movie
clips que tenham sido criados atravs do mtodo DuplicateMovieClip.

Comeamos por nomear o movie clip no palco, atravs do painel
PROPERTIES.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 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 parmetros atribumos 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 atravs do mtodo Duplicate-
MovieClip, aplicamos o mtodo RemoveMovieClip onde s necessrio
indicar o nome do movie que pretendemos remover.

removeMovieClip("sol2");

Como exemplo vamos criar um simples mouse trail.
294 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura057 Mouse Trail


Na biblioteca criamos um movie clip para servir de rasto para o ponteiro
do rato. Este movie pode conter uma animao simples.

Colocamos uma instncia no palco e atribumos-lhe um nome. Vamos
chamar-lhe rasto.


Figura058 Rasto do ponteiro do rato


Na primeira keyframe do palco vamos inserir a programao. Criamos
duas variveis: n e novonome.
n Varivel de incremento

n++;

novonome Parte do nome dos movie clips duplicados. Possuiro
nomes do tipo rasto1, rasto2 e assim sucessivamente.

novonome = "rasto" + n;

Comeamos por arrastar o movie rastro.

startDrag("rasto", true);
De seguida duplicamos o movie e atribumos os novos nomes com a
varivel novonome e a profundidade n.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO 295


Figura058 Duplicar o movie


Como no queremos mais de seis movies atrs do ponteiro comeamos
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 mtodos so especialmente importantes quando preten-
demos carregar um filme de Flash externo ou um ficheiro de imagem
jpeg numa determinada localizao do filme principal.
Tal como foi referido no captulo anterior, nas actions LoadMovie e
UnloadMovie um filme carregado sobre a animao principal fica sem-
pre encostado ao canto superior do filme principal. A soluo para o
colocar noutra posio do palco utilizar um movie clip como referncia
e carreg-lo para dentro deste.
Imagine por exemplo que na animao principal possui um televisor
com vrios botes, cada um deles ir carregar uma animao diferente.
296 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Figura060 Filme Principal


Depois de criar as animaes secundrias com a dimenso do monitor
do televisor, exportamos cada uma delas para formato swf.
No nosso caso chamamos ao filme secundrio 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 referncia
para posicionar o filme que iremos carregar.

Figura061 - Filme secundrio

De seguida posicionamos o movie no palco sobre o televisor, tendo em
ateno 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 ANIMAO 297


Agora falta atribuir um nome instncia do ecr atravs do painel
PROPERTIES. Vamos chamar-lhe ecr.
Com um dos botes seleccionados, aplique do painel actions em
OBJECT > MOVIE > MOVIECLIP > METHODS > LOADMOVIE.

Figura063 Aplicar o mtodo loadMovie

Em objecto digitamos o nome da instncia e nos parmetros o nome do
movie clip ou imagem jpeg que iremos carregar (este nome deve estar
entre aspas).
Os restantes filmes devero ser carregados da mesma forma. Ao fazer
clique noutro boto, outro filme carregado e substitui o filme que se
encontra dentro do movie no momento.

Figura064 Resultado Final


GetBytesLoaded e GetBytesTotal
Estes dois mtodos so muito utilizados na criao de preloaders para
filmes. Um preload uma animao muito simples que antecede o filme
298 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

principal enquanto este carrega. Normalmente so aplicados preloaders
a filmes com mais de 50 Kb.

GetBytesLoaded Nmero de bytes carregados
GetBytesTotal Nmero total de bytes do filme (inclui todas as cenas).

Por exemplo, supondo que possumos 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.

Comeamos 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 WINDOW a opo SCENE. Arraste a cena do
preload de modo a ser a primeira cena do filme.


Figura065 Painel Scene

Na primeira cena criamos uma pequena animao e inserimos uma
caixa de texto dinmico qual atribumos 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 ANIMAO 299

Criamos tambm um novo layer para conter a programao do
preloader, e na primeira keyframe desta layer vamos inserir a seguinte
programao.


Figura067 Actions do primeiro frame do preload


_root.getBytesLoaded() OBJECTS > MOVIE > MOVIE CLIP > METHODS >
GETBYTESLOADED. Efectua a contagem do nmero de bytes carregados
do filme.

_root.getBytesTotal OBJECTS > MOVIE > MOVIE CLIP > METHODS >
GETBYTESTOTAL. Conta o nmero total de bytes do filme.
Math.round OBJECT > CORE > MATH > METHODS > ROUND. Mtodo
utilizado para arredondar valores numricos. Substitui a funo Int das
verses anteriores do Flash.

Dividimos o nmero de bytes carregados, pelo nmero total de bytes do
filme e multiplicamos por 100 para obter um valor em percentagem.
Para que o valor seja um nmero inteiro aplicamos o mtodo
Math.Round a envolver todo o cdigo.

percentagem = percent + "%" - Atribumos o resultado caixa de texto
dinmico percentagem e acrescentamos o caracter %.


Figura068 Caixa de texto dinmico no palco e em teste

300 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Finalmente testamos o valor da varivel percent e se este for igual a
100 o filme avana para a prxima cena. Caso contrrio prossegue nes-
ta cena. Da que seja necessrio incluir mais uma keyframe com uma
action que obriga a animao a regressar at frame 1 da cena do pre-
load, seno saltaria antes de tempo para o filme.


Figura069 Actions do primeiro frame do preload


Para testar o filme seleccione a opo CONTROL > TEST MOVIE e de
seguida na janela de teste, escolha a opo VIEW > SHOW STREAMING.
II.4 ESTRUTURAS AVANADAS DE
PROGRAMAO

SINTAXE DO ACTIONSCRIPTING
Chavetas { }
So utilizadas para agrupar blocos de cdigo relacionado.

on (release) {
play();
}


Ponto e vrgula (;) Todas as declaraes terminam desta forma,
embora o Flash consiga interpretar e completar o script sem a sua
presena, boa prtica utiliz-los. Tambm pode utilizar o boto auto-
format do painel Actions para acrescentar estes caracteres automatica-
mente, desde que o cdigo no contenha erros de sintaxe.

Pontos = 0;
Tempo = 0;


Parntesis ()
Tem diversas funes dentro do cdigo. A principal utilizao agrupar
os parmetros de uma funo.

function empregado (nome, idade){
...
}


Permitem tambm alterar a ordem de precedncia do actionscriptig e
ainda facilitar a leitura do cdigo.

302 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Tem o poder de avaliar uma expresso no lado esquerdo dum ponto na
dot sintax. Por exemplo, no script seguinte os parntesis permitem
avaliar o new Cor(this) e criar um novo objecto de cor.
onClipEvent(enterFrame) {
(new Cor(this)).setRGB(0xffffff);
}


Caso contrrio seria necessrio utilizar o seguinte script para determinar
o valor e criar o objecto:

onClipEvent(enterFrame) {
myCor = new Color(this);
myCor.setRGB(0xffffff);
}


Maisculas e minsculas
O actionscripting no sensvel capitalizao do texto (case-sensi-
tive). Apenas as palavras inerentes linguagem (keywords) possuem
limitaes neste campo.


Keywords
Palavras reservadas que no podem ser atribudas a nomes de vari-
veis e que possuem uma funo determinada pela prpria aplicao.

break else instanceof typeof
case for new var
continue function return void
default if switch while
delete in this with



Comentrios (//)
Permite adicionar notas ao cdigo. Estas notas so especialmente
importantes quando o cdigo muito extenso ou quando vrias pessoas
partilham o mesmo projecto de Flash.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 303


Figura070 Comentrios no cdigo
Variveis

Uma varivel um contentor de informao. Essa informao pode ser
alterada durante a animao, tanto para gravar informao acerca do
utilizador como por exemplo para guardar valores medida que o filme
muda. Aconselha-se a iniciar o valor duma varivel antes de a utilizar.
Os nomes das variveis no podem ser palavras reservadas ou valores
booleanos como true e false e devem ser nomes nicos no scope (es-
pao) de modo a evitar colises.

DATA TYPES
Um data type descreve o tipo de dados que as variveis 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 so object e movieclip. Existem ainda
dois tipo especiais de data types: null e undefined.

O tipo de dados de uma varivel afecta o modo como uma varivel
muda o seu valor quando associada a um script.

304 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Number: Um nmero pode ser manipulado utilizando operadores
aritmticos como a adio (+), subtraco (-), multiplicao (*), diviso
(/), modulo (%), incremento (++) e decremento (- -).

String: Uma sequncia de caracteres tais como letras, nmeros e
pontuaes. Em actionscripting cria-se uma string envolvendo um
determinado valor em aspas. Assim, o seu valor tratado como caracter
e no como uma varivel. O operador + passa a actuar como unio en-
tre as duas variveis.

nome= Ana + apelido

Boolean: Um valor que pode ser apenas true ou false.

If (utilizador==true && password==true){

}

Object: Uma coleco 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 smbolo movie clip que permite controlar
os seus mtodos.

movie.startDrag(true);

Null: Apenas possui o valor null, que simboliza que a varivel est vazia.

Undefined: Tal como o null apenas possui um valor, o undefined,
significa que ainda no lhe foi atribudo nenhum valor.


II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 305

SCOPE DA VARIVEL
O scope de uma varivel a rea em que a varivel conhecida e pode
ser referenciada. As variveis podem existir dentro de timelines de
instncias. A varivel pode ser local para essa timeline ou pode ser es-
pecificada como varivel global e ser utilizada por todas as timelines do
filme. Existem trs tipos de scope para as variveis:

Variveis locais
As que esto disponveis apenas dentro do bloco de cdigo onde foram
inseridas.

Variveis de Timeline
Vlidas para qualquer timeline desde que indicadas no cdigo atravs
dum caminho.

Variveis Globais
Existem em todas as timelines mesmo que no seja especificado um
caminho at elas.
DECLARAR VARIVEIS
Ao declarar uma varivel local deve utilizar o comando var dentro do
bloco de cdigo onde esta ficar inserida. Uma varivel local no defini-
da, expira no fim do script.

var pontos=0

Para declarar variveis de timeline, basta utilizar o comando set variable
ou apenas indicar o nome da varivel e usar o sinal de igual para atri-
buio do seu valor.

X=20

No caso da declarao de uma varivel global o nome desta deve ser
antecedido do identificador _global.
306 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

_global.time=0

No exemplo seguinte possumos um filme com duas cenas. O utilizador
tem de digitar o seu nome antes de entrar na segunda cena.
Ao fazer clique no boto de entrada o seu nome aparece numa caixa de
texto com uma saudao.
Na primeira frame da primeira cena (entrada) do filme colocamos uma
action Stop() de modo a que o filme permanea parado at o utilizador
premir o boto de entrada.


Figura071 Interface



A caixa de texto do tipo input, para permitir ao utilizador digitar
valores. No painel properties atribumos um nome varivel, qual
chamamos utilizador.


Figura072 Atribuir nome varivel
II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 307

Na segunda cena do filme (filme), colocamos tambm uma action stop(),
logo no incio de modo a que o filme fique parado na primeira frame.
Desenhamos uma caixa de texto dinmico qual atribumos um nome
(user).
De seguida seleccionamos o boto da cena entrada e atribumos as
seguintes actions.


Figura073 Actions do boto


Foi atribuda varivel user que aparece na cena filme o valor da
varivel utilizador da cena entrada, e concatenada com o texto entre as-
pas atravs do operador +.


Figura074 Resultado
308 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

TESTAR O VALOR DAS VARIVEIS
Para testar o valor duma varivel 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 varivel que digitar-
mos entre parntesis.

pontos = pontos+1;
trace(pontos);


Uma forma alternativa de testar os valores das variveis utilizar o
Debugger. Para visualizar o debugger basta testar o filme atravs do
comando CONTROL > DEBUG MOVIE.
Este comando alm de testar o filme abre o painel Debbuger onde basta
seleccionar o separador Variables e escolher o nvel do filme ou o movie
clip onde se encontra a varivel.

A animao surge sempre parada no incio. Para comear basta clicar
sobre o boto play para dar incio ao filme.

No separador PROPERTIES possvel ainda observar as propriedades
da _root ou do movie clip que se encontrar seleccionado acima.
O separador variables mostra as variveis criadas no filme e os seus
valores.

Figura075 Painel Debugger
II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 309

OPERADORES
Os operadores permitem combinar, comparar ou modificar valores
numa expresso. Para utilizar correctamente os operadores existem al-
gumas regras que devem ser respeitadas.

Prioridade dos operadores
Em qualquer clculo, o operador de multiplicao (*) e diviso (/)
possuem prioridade sobre a soma (+) e a subtraco (-). No entanto, se
uma determinada operao for envolvida em parntesis, ter prioridade
sobre as restantes.

pontos= 7 + 3 * 2


O resultado da operao 13. Primeiro calculada a multiplicao e s
depois ser efectuada a soma.

pontos= (7 + 3) * 2


O resultado desta forma ser 20, pois a soma ser realizada antes da
multiplicao por se encontrar entre parntesis.
Tipos de operadores

Operadores Numricos
Desempenham diversas operaes aritmticas mais comuns tais como:

+ Soma
* Multiplicao
/ Diviso
- Subtraco
% Mdulo (resto da diviso)
++ Incremento
-- Decremento
310 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura076 Soma


Operadores de comparao
Comparam valores de expresses e devolvem um valor booleano (True
/ False). Estes operadores, ao comparar duas strings, avaliam qual a
primeira atravs da sua ordem alfabtica.
Se um dos operandos for uma string e o outro numrico, ambos so
convertidos para numricos e efectuada uma comparao numrica.

< Menor que
> Maior que
<= Menor ou igual a
>= Maior ou igual a

If (n>=1) {
gotoAndPlay (10);
}


Operadores de string
Efectua a concatenao entre duas ou mais strings.

Joana + + Nunes o resultado Joana Nunes


Figura077 Concatenao
II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 311

Operadores lgicos
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 so iguais. O valor devolvido
booleano.

== igualdade
=== estritamente igual
!= diferente de
!== estritamente diferente

O operador === (estritamente igual) semelhante ao operador de
igualdade, mas no efectua converso do tipo de dados. Assim, se os
operandos forem de tipos diferentes, o resultado obtido ser false.


Operadores de atribuio
O sinal de = funciona como operador de atribuio, para associar um
valor a uma varivel.

login=administrador;

= Atribuio
+= Soma e atribuio
-= Subtraco e atribuio
*= Multiplicao e atribuio
312 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

%= Modulo e atribuio
/= Diviso e atribuio
<<= Mover para a esquerda e atribuio
>>= Mover para a direita e atribuio
^= XOR e atribuio
|= OR e atribuio
&= AND e atribuio

Vamos voltar ao exemplo do pacman que j tnhamos colocado a mudar
de direco atravs da propriedade _rotation.

Agora para o movimento vamos acrescentar uma linha para incrementar
o valor da deslocao do movie clip em 10 pixis, sempre que o utiliza-
dor fizer clique numa seta de direco. Para tal vamos utilizar os opera-
dores de atribuio.

Figura078 - Operadores de atribuio

CONDIO IF
Continuamos agora com o exemplo apresentado na figura 071.
Supondo que necessrio testar se o utilizador introduziu ou no 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 introduo do nome de utilizador.

Comeamos por acrescentar na primeira cena uma nova caixa de texto
dinmico, qual chamamos mensagem.
II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 313

De novo no boto apagamos as actions anteriores e vamos categoria
ACTIONS > CONDITIONS/LOOPS > IF e dentro das aspas digitamos a se-
guinte condio:

if (utilizador==null){
}


De seguida, na categoria ACTIONS > VARIABLES > VAR, vamos igualar a
varivel mensagem ao texto que ir aparecer se o utilizador no digitar
nada no nome.

var mensagem= "Preencha o nome de utilizador";


De novo na categoria ACTIONS > CONDITIONS/LOOPS > ELSE, iremos
introduzir o cdigo no caso de o utilizador realmente preencher o campo
do nome.

else {
}


Todas as instrues que seguirem a condio else sero 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura079 Cdigo do boto de entrada


Vamos elaborar mais um pouco o exerccio atrs referido, pois agora o
teste ser feito no s ao nome do utilizador, mas tambm ir verificar
se a password introduzida est correcta. Inserimos mais uma varivel
de texto no palco qual demos o nome de password e atribumos o tipo
password no painel PROPERTIES.


Figura080


O boto de entrada dever agora possuir um teste a duas variveis que
sero unidas pelo operador e (&&).

Este operador vai fazer com que seja necessrio que ambas as vari-
veis devam estar correctas para o utilizador entrar na pgina.

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 AVANADAS DE PROGRAMAO 315


Figura081 Programao do boto de entrada


Para completar a programao pretendemos que no caso de erro, para
alm da mensagem, os campos sejam limpos e o cursor volte ao campo
utilizador. Isto ser feito atravs da atribuio do valor undefined a ca-
da um dos campos. Para o cursor aparecer a piscar no campo utiliza-
dor, usamos o mtodo setFocus do objecto selection. Assim o cdigo
ficar:


Figura082


A condio IF tambm pode ser utilizada para testar as propriedades
dos movie clips. Por exemplo, ao testar a propriedade _droptarger
316 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

conseguimos determinar se um movie clip foi largado no 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 varivel (total).



Figura083- Interface


Para as frutas criamos primeiro um boto (fruta), o qual colocamos de
seguida dentro de um movie clip. Dentro do movie clip o boto possui a
seguinte programao para arrastar o movie.



Figura084

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 317

Depois de colocar as vrias instncias no palco, criamos tambm um
movie clip (saco) para onde estas sero arrastadas.
Atribumos nome ao movie clip e iremos agora acrescentar ao movie
clip da fruta o cdigo para testar a posio em que largado.


Figura085


Seleccionamos a linha 5, e vamos continuar a programao a partir
deste ponto, no painel ACTION > CONDITIONS / LOOPS > IF. Para condio
digitamos:

eval (this._droptarget) == _root.saco;


A funo eval necessria neste caso, para converter o resultado da
expresso this._droptarget, que obtm um valor em slash sintax
(/saco). O eval converte este valor para dot sintax (_level0.saco).
Dentro da condio if fazemos desaparecer o movie arrastado e incre-
mentamos uma unidade caixa de texto total.


Figura086 Programao do movie ma
318 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Vamos agora optimizar o cdigo do filme. Se for necessrio aumentar o
nmero de tipos de fruta na animao, cada novo boto ter a progra-
mao apresentada na figura 086.

Como a programao exactamente igual para todos os botes, vamos
criar um ficheiro de texto com o cdigo actionscripting.
Abra o bloco de notas e cole o cdigo da figura 086.


Figura087 Ficheiro de texto


De seguida guarde o ficheiro na mesma pasta do filme, com extenso
.as .


Figura088 Gravar o ficheiro


Na biblioteca edite o movie clip da laranja e seleccione o boto.

Para aceder ao ficheiro externo basta digitar #INCLUDE DROP.AS. Nas
actions encontra-se em MISCELLANEOS ACTIONS.
II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 319

A action #include permite aceder a um ficheiro externo de action-
scripting, desde que este tenha sido gravado com a extenso .as . Ver
figura 089.



Figura089 Action #include
CONDIO CASE
Numa situao em que seja necessrio testar mais de duas opes, a
condio if torna-se insuficiente e confusa. Como alternativa, possvel
usar a condio case nestas situaes em que esto envolvidos vrios
testes.
Como exemplo, vamos supor que possumos um site de compras online
e que os utilizadores iro obter preos 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
dinmica.


Figura090


320 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Seleccione o boto para clculo do total e active o painel actions. Na
categoria ACTIONS > CONDITIONS/LOOPS > SWITCH. Dentro dos parnte-
sis coloque o nome da varivel que vai ser testada (quantidade). Esta
varivel deve ser numrica; logo, para garantir que o Flash a interpreta-
r deste modo colocamos o seu nome dentro da Funo Number.
Na linha seguinte escolha no painel ACTIONS > CONDITIONS/LOOPS >
CASE, onde teremos de prever todos os valores possveis. Assim, no c-
digo, obtemos:



Figura091 Script completo


Por cada hiptese ter de ser introduzida uma linha que deve sempre
terminar com a action break, ou no voltar a funcionar da prxima vez
que o boto for premido.
A linha de default contempla todas as situaes que ficaram fora dos
valores definidos pelo case, ou seja, que no estejam no intervalo 0 a 2
inclusiv.
CICLO FOR
A funo principal dos ciclos numa linguagem repetir determinadas
actions diversas vezes.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 321

No exemplo seguinte iremos criar um pequeno programa, do tipo
totoloto, que gera seis nmeros aleatrios quando o utilizador prime um
boto. No palco esto seis caixas de texto dinmico, cada uma com os
nomes n1 at n6.

Figura092 - Interface do programa


No boto vamos introduzir um ciclo que gera nmeros aleatrios at um
mximo de seis e preenche as respectivas caixas.

No painel actions seleccione a categoria CONDITIONS / LOOPS > FOR.


Figura093 Ciclo For

Parmetros do ciclo For:
Init O valor onde se ir iniciar o ciclo.
322 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Condition A condio que ser testada antes de cada loop para
saber se verdadeira ou falsa. O loop terminar quando esta condio
for falsa.
Next A expresso que ser avaliada depois de cada loop. Normal-
mente o incremento ou decremento do valor dado no parmetro init.


De seguida, na categoria ACTIONS > VARIABLES > SET VARIABLE, crie uma
varivel de nome n. Vamos envolver a expresso dentro do mtodo
Math.Round para arredondar o valor obtido. Seleccione ACTIONS >
OBJECTS > CORE > MATH > METHODS > ROUND.



Figura094 Mtodo Round


Para atribuir o valor varivel, seleccione OBJECTS > CORE > MATH >
METHODS > RANDOM. Este calcula um nmero aleatrio entre 0 e
0,99999... . Para obter nmeros entre 0 e 48 multiplicamos este mtodo
pelo valor 48 e como o valor 0 no 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 AVANADAS DE PROGRAMAO 323


Figura095

CICLO WHILE
O ciclo while mais utilizado em casos em que no sabemos qual o
nmero de vezes que o loop ir correr.

Supondo que pretendemos criar um menu dinmico, que vai buscar as
opes a um ficheiro de texto externo. Estas opes podem variar, con-
soante o utilizador introduza ou apague no ficheiro de texto as variveis.

Comeamos por criar o ficheiro de texto com quatro variveis.


Figura096 Ficheiro de texto


No filme de Flash criamos um boto para as opes do menu e colo-
camos este boto dentro de um movie clip ao qual adicionamos uma
caixa de texto dinmico.

324 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura097- Boto dentro do movie clip

Atribumos um nome instncia da caixa de texto e desligamos a opo
selectable.


Figura098 Nome da instncia da caixa de texto


De volta ao palco
criamos um boto
para topo do menu e
colocamos abaixo
deste uma instncia
do movie clip que
contm a caixa de
texto. Atribumos a
esta instncia o
nome opcao1.


Figura099 Nomear a instncia do movie clip no palco


II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 325

No primeiro keyframe do palco iremos carregar as variveis do ficheiro
de texto e esconder o movie clip opcao1. Depois de seleccionar o key-
frame escolhemos no painel actions a categoria BROWSER / NETWORK >
LOADVARIABLES.


Figura100 - LoadVariables


Nos parmetros em URL digitamos o nome do ficheiro de texto, que por
se encontrar na mesma pasta do filme no necessrio 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 variveis do ficheiro externo.
Acrescentamos uma linha para tornar o movie invisvel. Fazemos isto
atravs da propriedade _visible.


Figura101 Actions primeira da keyframe do palco


Neste momento j podemos testar o filme e verificar no debbuger se as
variveis esto a ser carregadas para o filme. Utilizamos o comando
CONTROL > DEBUG MOVIE, premimos o boto play na janela do debugger
e ao seleccionar a opo _level0 e o separador variables, j devem
aparecer os valores que se encontram no ficheiro de texto externo.

326 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura102 Fazer Debug do filme


De seguida seleccionamos o boto que vai activar o menu e nele vamos
colocar a programao para gerar as opes do menu.
Comeamos por atribuir caixa de texto do primeiro movie, que j est
no palco o valor da primeira varivel do ficheiro de texto. Ao mesmo
tempo tornamos este movie visvel de novo.

opcao1.texto.text = op1;
opcao1._visible = true;



Para o ciclo while iniciamos uma varivel chamada i com valor 2, pois o
valor 1 pertence ao movie que j est no palco.

var i = 2;



Comeamos o ciclo while que ir correr enquanto a condio for
verdadeira. Ou seja, enquanto as opes forem diferentes de null.

while (eval("op"+i) != null)


II.4 ESTRUTURAS AVANADAS DE PROGRAMAO 327

A funo Eval utilizada nesta condio permite-nos obter o valor da
varivel que queremos preencher, atravs do clculo da expresso que
se encontra entre parntesis.

Figura103- Programao do boto menu

Dentro do ciclo while, duplicamos o movie clip. Na linha 7 deslocamos
os botes adicionando-lhes o valor da altura do movie e multiplicando
pelo i -1 (no esquecer que o primeiro valor de i 2, dai subtrair-mos
uma unidade).

Finalmente, atribumos a cada caixa de texto o valor da varivel respec-
tiva e incrementamos o i.
Para alterar o contedo e o nmero de opes o utilizador s tem de
editar o ficheiro texto.txt

Figura104 Menu gerado dinamicamente
II.5. FUNES



As funes so pedaos de cdigo reutilizvel. Quando se utiliza uma
funo possvel passar uma srie de argumentos para dentro dela e
retornar um valor.

O Flash possui algumas funes que j fazem parte da sua
programao e que podem ser utilizadas sem ser necessrio o utilizador
defini-las.

Boolean getVersion parseInt
escape isFinite String
eval isNaN targetPath
getProperty Number unescape
getTimer parseFloat


Funo Eval
Funo para aceder a variveis ou propriedades e extrair o seu valor.
Se for utilizada para aceder a objectos e movie clips extrai uma refe-
rncia dos mesmos.

produto1=mel;
produto2=acar;

resultado = eval (produto+n);

Assim, se n=1, o resultado ser mel, mas se n=2, o resultado ser
acar. O Eval avaliou a expresso produto+n e ao obter o valor de n
concatenou-o com a palavra produto para extrair o seu valor.

No caso da utilizao da propriedade _droptarget a funo eval
utilizada pelo Flash para converter o nome de um movie clip em notao
slash sintax para a notao dot sintax. Ver figura 086.

330 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Funo Number
Converte o valor entre parntesis num nmero e devolve o seu valor.

Number (n)


Funo getTimer
Devolve o nmero de milsimos de segundo que j passaram desde o
incio duma animao.

x=GetTimer


Figura105 - GetTimer


Funo getVersion
Devolve uma string que contm a verso do Player do Flash, desde que
seja a verso 5 ou posterior.

x=getVersion()


Figura106 Funo GetVersion


As funes so bastante semelhantes s variveis, pois esto
associadas timeline do movie clip onde foram definidas e necessrio
aceder-lhes atravs de um target path (caminho).
II.5. FUNES 331

Tambm possvel definir funes globais atravs do identificador
_global.

_global.funcao = function (z) {
return (z*5)-1;
}

Funo boolean
Converte uma expresso num valor Booleano. O valor retornado depen-
de do tipo de expresso.

Se a expresso um valor booleano, o valor devolvido expression.
Se a expresso um nmero, o valor devolvido true, caso o nmero
no seja 0. O valor zero devolver false.
Se a expresso uma string, o mtodo toNumber invocado para con-
verter a string num valor numrico. Se o resultado for diferente de zero
retornado true, caso o resultado seja zero, o valor igual a false.
Se a expresso undefined o valor devolvido false.
Se a expresso um movie clip ou um objecto, o valor devolvido true.

Boolean (expresso)

Funo string
Converte uma expresso numa string.

String (expresso)

Se a expresso um valor booleano, a string devolvida true ou false,
consoante o valor booleano apresentado pela expresso.
Se a expresso se tratar de um nmero, o valor devolvido uma repre-
sentao em texto do valor numrico que era o resultado da expresso.
Se a expresso uma string o valor devolvido expression.
Se a expresso um movie clip, valor o target path para o movie clip
em slash Sintax (/).
332 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Se a expresso undefined o valor devolvido o de uma string vazia
()


Funo escape
Converte um parmetro numa string e codifica-o num formato de URL
onde os caracteres especiais so convertidos em sequncias hexade-
cimais.

escape("parametro")

Funo getProperty
Devolve o valor de uma propriedade de um movie clip. O cdigo
seguinte devolve o valor da coordenada y de um movie clip chamado
carro.

carro_y = getProperty(_root.carro, _y)

Funo targetPath
Devolve uma string contendo o target path (caminho) do movie clip.
Este caminho dado utilizando a dot syntax.

targetPath(this)

Funo unescape
Funo que avalia um parmetro como string, e descodifica-o de forma-
to URL-encoded para uma string. Efectua o processo inverso da funo
Escape. Todas as sequncias hexadecimais so convertidas numa
string.
unescape(parametro)
II.5. FUNES 333

Funo isFinite
Avalia uma expresso e devolve o valor true se o resultado for um n-
mero finito e false se o resultado for infinito.
isFinite(expresso)
Funo isNaN
Avalia um parmetro e devolve o valor true se o resultado no for num-
rico, indicando que estamos na presena de um erro matemtico.
isNaN("carro")
// devolve t r ue
Funo parseFloat
Converte uma string num nmero de vrgula flutuante. Se a string no
comear por um nmero que possa ser convertido, a funo devolve o
valor NaN. Espaos que precedem nmeros inteiros vlidos so 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.75relgio") devolve 3.75

parseFloat("0gatos") devolve 0

Funo parseInt
Funo que converte uma string num nmero inteiro. Se a string no for
possvel de converter em inteiro a funo devolve NaN. Strings come-
adas por 0x so interpretadas como nmeros hexadecimais.
334 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Espaos em branco que antecedam valores inteiros vlidos so 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 binrio:

parseInt("1010", 2)

// devolve 10 (a representao binria de 1010)

DEFINIR FUNES
Todas as funes comeam com a palavra function e de seguida surge
o nome da funo. ACTIONS > USER-DEFINED FUNCTIONS > FUNCTION.

function calcTotal


Figura107 Definir uma funo
II.5. FUNES 335

Depois surgem os nomes dos argumentos a ser passados que apa-
recem listados entre parntesis. Os nomes dos parmetros so separa-
dos por vrgulas.

function calcTotal (preco, iva)

A seguir basta digitar entre chavetas o cdigo da funo.

function calcTotal (preco, iva) {
// o cdigo da funo aparece aqui
}

A outra parte especial duma funo a aco return, que notifica a
funo para terminar e retornar um certo valor para o cdigo que cha-
mou a funo.

function calcTotal (preco, taxa) {
return (preco, iva);
}

Para chamar a funo necessrio escrever algo semelhante a:
calcTotal(50, 1.7);

Vamos criar uma pequena funo 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 converso em euros
(euros) ser dinmica.


Figura108 Interface


Na primeira keyframe do filme vamos criar a funo. Escolha no painel
ACTIONS > USER DEFINED FUNCTIONS > FUNCTION. Defina o nome da
funo e o parmetro que vai ser necessrio (escudos).
336 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

De seguida seleccione na mesma categoria a action Return.



Figura109 Definir a funo


Agora basta associar ao boto que vai efectuar o clculo a chamada da
funo:

Ao introduzir um valor o utilizador preenche o parmetro necessrio
para a funo efectuar o clculo. O valor de seguida devolvido para
dentro da varivel euros.



Figura110 Actions do boto
II.6. OBJECTOS



Os objectos so blocos de cdigo designados para desempenhar deter-
minadas tarefas. Cada objecto possui propriedades que podem ser ma-
nipuladas. Estas propriedades so na realidade variveis. Para alm
das propriedades, os objectos possuem ainda mtodos que lhes permi-
tem desempenhar determinada funo. A grande vantagem dos objec-
tos a sua reutilizao. As linguagens orientadas por objectos, como o
Actionscript, vm j com alguns objectos incorporados.

Os objectos no Flash MX esto divididos em quatro categorias:

Objectos nucleares (core) que so tambm comuns especificao
ECMA Array, Boolean, Date, Function, Math, Number, Object e String.

Objectos de Movie que so caractersticos do Actionscript -
Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selec-
tion, Sound, Stage, System, TextField e TextFormat

Objectos Client / Server que so tambm especficos 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Object.name

Para associar uma propriedade a um objecto utiliza-se a action Set
Variable.

Objecto.name = Helena;

Invocar o mtodo de um objecto
O operador ponto (.) tambm permite aceder aos mtodos de um deter-
minado objecto. No exemplo seguinte chamamos o mtodo setRGB
para o objecto Color.

onClipEvent (load) {
myColor = new Color(this);
myColor.setRGB(0xFF66FF);
}

Objectos da categoria core
UTILIZAR O OBJECTO DATE
Objecto que constri uma nova data e/ou hora capturada atravs da
data e hora do computador do utilizador.

Para este exerccio, comece por criar um movie clip na biblioteca que
vai conter uma caixa de texto dinmico chamada hora_txt.


Figura111
II.6. OBJECTOS 339

Coloque uma instncia do movie clip no palco e atribua-lhe as seguintes
actions:


Figura112


Criamos uma nova varivel e atribumos-lhe o valor da data corrente
atravs do objecto OBJECTS > CORE > DATE. Basta agora passar os
parmetros da data que necessitamos para dentro da caixa de texto do
movie clip, utilizando os mtodos getHours, getMinutes e getSeconds.

UTILIZAR O OBJECTO ARRAY
Um array um objecto cujas propriedades podem ser acedidas atravs
de um nmero que determina a sua posio 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 nmero do elemento a que se pretende aceder.
Por exemplo, o seguinte array possui quatro valores, associados a cada
um dos nmeros 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 tambm pode ser descrito de uma forma mais extensa
do seguinte modo:

novoArray=New Array("Liliana","Manuela","Luisa","Sara");
340 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Para atribuir um valor do array basta simplesmente igualar o nome de
uma varivel a um dos elementos do array.
n=novoArray[2];

Vamos agora completar o exemplo do relgio 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 instncia do movie clip que ir conter a data, teremos:


Figura114 Actions da instncia
UTILIZAR O OBJECTO MATH > MTODO MAX
Devolve o maior valor de dois valores ou resultados de expresses nu-
mricas.

Math.max(x,y)

Parmetros:
x e y Podem ser valores ou expresses numricas. Os dois valores
so avaliados e o resultado o maior valor.
Math.max(55,88)
// resultado 88
II.6. OBJECTOS 341

UTILIZAR O OBJECTO MATH > MTODO MIN
Devolve o menor valor de dois valores ou resultados de expresses nu-
mricas.

Math.min(4,77)
// resultado 4

Parmetros:
x e y Podem ser valores ou expresses numricas. Os dois valores
so avaliados e comparados e o resultado o menor valor.


UTILIZAR O OBJECTO MATH > MTODO PI
Constante matemtica equivalente ao valor do Pi, ou seja,
3.14159265358979... .

Math.PI()


UTILIZAR O OBJECTO MATH > MTODO ROUND
Utilizado para arredondar uma expresso numrica ou um valor. O re-
sultado da seguinte expresso numrica 56.

Math.round(55.98)


UTILIZAR O OBJECTO MATH > MTODO RANDOM
Retorna um nmero aleatrio entre 0 e 0.9999...

Math.random()

342 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Criamos um jogo muito simples em que o utilizador introduz um nmero
(nmero) e assim que faz clique num boto gerado um nmero aleat-
rio entre 0 e 20, que comparado com o que foi introduzido.


Figura115 Random e Round


UTILIZAR O OBJECTO MATH > MTODO SQRT
Determina a raiz quadrada de um nmero ou expresso numrica.

Math.sqrt(x)

Parmetros:
x Nmero ou expresso numrica maior que 0.


Figura116 Raiz quadrada
Objectos da categoria movie
UTILIZAR O OBJECTO COLOR
Com este objecto possvel alterar a cor RGB a um movie clip. Depois
de atribudos 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
instncia.

Mtodos do objecto
Color.getRGB - Devolve o valor numrico RGB atribudo pelo ltimo
mtodo setRGB.
Color.getTransform Devolve a informao do ltimo mtodo 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 atravs da introduo de valores RGB. Para isso vamos criar trs
caixas de texto, para as trs cores primrias 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 atribumos os valores das
caixas instncia atravs do mtodo setRGB.


Figura118 Aplicar o mtodo setRGB ao movie clip
344 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Os valores devem ser introduzidos pelo utilizador em cdigo hexa-
decimal.

Figura119 Inserir os valores


UTILIZAR O OBJECTO MOVIECLIP > MTODO HITTEST
Vamos usar o mtodo hitTest para detectar quando um movie clip se
encontra sobreposto com outro.

movieClip.hitTest(target)

Parmetros:

target O target path da rea de coliso com o movie clip.

Continuamos no exemplo do filme pacman. Criamos um novo movie na
biblioteca e colocamos uma instncia no palco. Atribumos um nome
instncia (laranja) e na primeira keyframe do filme vamos criar uma fun-
o.

Figura120 Nomear a instncia


A funo vai permitir-nos reutilizar cdigo, pois os quatro botes vo ne-
cessitar de testar a sobreposio do movie.
II.6. OBJECTOS 345



Figura121 Actions da keyframe


Nos botes basta acrescentar o cdigo para chamar a funo 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 sero contro-
lados. Deve ser utilizado o construtor new Sound() para criar uma nova
instncia de som antes de ser possvel utilizar os seus mtodos.

musica = new Sound();


Como exemplo, vamos criar uma animao para onde um som car-
regado e controlado atravs de dois botes. Um boto pra o som e ou-
tro recomea o som de novo a partir do incio.

Comeamos por criar na primeira keyframe do filme um construtor para
a nova instncia de som. Logo de seguida carregamos um som externo,
ou seja, que no foi importado para a biblioteca do filme.
346 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO



Figura123 Actions da primeira keyframe


No boto play vamos inserir o mtodo start para dar incio ao som. Nos
parmetros 0 o valor em segundos onde o som ir dar incio e 1 o n-
mero de loops que este ir efectuar.


Figura124 Boto Play


musica.start(secondOffset, loop)

secondOffset Permite comear o som numa determinada posio.
Este valor opcional e o seu valor deve ser introduzido em segundos.
Loop Nmero de loops que o som ir efectuar

Para o boto de paragem do som, teremos de usar o mtodo stop.


Figura125 Parar o som

musica.stop("idName");
II.6. OBJECTOS 347

idname O nome do som a ser parado. Este parmetro opcional.
Logo, se nenhum som for especificado, todos os sons do filme param.
Se ainda pretendermos uma caixa de texto que indique quantos milsi-
mos de segundo do som j foram lidos, basta criar um movie clip no
qual inclumos uma caixa de texto com o nome (caixa) e usar a pro-
priedade position:



Figura126


UTILIZAR O OBJECTO CAPABILITIES
Este objecto permite analisar caractersticas do sistema do utilizador,
tais como resoluo, cores e capacidades udio ou vdeo. Para utiliz-lo
necessrio usar tambm 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 no capacida-
des udio.
System.capabilities.hasMP3 Possibilidade de ler ou no MP3.
348 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

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 proporo dos pixis
do ecr.
System.capabilities.screenColor Indica se o monitor a cores ou a
preto e branco.
System.capabilities.screenDPI Indica o nmero 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 verso mais antiga suportada
pelo Player do Flash.
System.capabilities.hasVideoEncoder Mostra os encoders instala-
dos para vdeo.


Figura127


Para exemplificar, no palco desenhamos algumas caixas de texto, s
quais atribumos 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
transferncia de dados entre um servidor e o filme de Flash.
necessrio utilizar o construtor new LoadVars() antes de invocar os
seus mtodos.

Mtodos do objecto LoadVars:

LoadVars.load Faz download de variveis de um URL especfico.
LoadVars.getBytesTotal Devolve o nmero de bytes carregados
atravs do mtodo load ou sendAndLoad.
LoadVars.getBytesTotal Devolve o nmero total de bytes aos quais
ser feito download atravs do mtodo load ou sendAndLoad.
LoadVars.send Publica as variveis de um objecto LoadVars para um
determinado URL.
LoadVars.sendAndLoad Publica as variveis 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-
tm todas as variveis enumeradas pelo objecto LoadVars.
350 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Eventos do objecto LoadVars:

LoadVars.onLoad Invocado quando uma operao de load ou send-
AndLoad completada.

Iremos criar um menu dinmico, que vai buscar os valores das suas
opes e links do boto a um ficheiro de texto externo.



Figura129 Ficheiro texto


Comeamos por criar um boto na biblioteca, que depois colocado
dentro de um movie clip, ao qual acrescentado uma caixa de texto
dinmico, e dada uma action GetURL em que o link ir ser determinado
atravs da varivel link.



Figura130 Boto dentro do movie com a caixa de texto


Arrastamos uma instncia do boto para o palco e atribumos-lhe o no-
me boto1.

II.6. OBJECTOS 351


Figura131 Instncia do movie no palco


Na primeira keyframe do filme iniciamos as actions criando um cons-
trutor LoadVars ao qual atribumos o nome dados_lVars.

dados_lVars=new LoadVars();


Na segunda linha aplicamos a funo 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 contm os dados que
necessitamos para criar o filme.

dados_lVars.load("links.txt");

E vamos criar a funo que atribui os valores carregados aos botes,
que so gerados dinamicamente atravs de um ciclo While.

Atribumos ao primeiro boto 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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Iniciamos a varivel i no valor 2, para comear a duplicar os prximos
movie clips.

I=2;


Iniciamos o ciclo while. Enquanto existirem novos textos no ficheiro
externos duplicado um novo boto e deslocado 40 pixis na vertical:

while(eval("dados_lVars.txt"+i)!=null){
eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i);
eval("botao"+i)._y+=40;


Finalmente so atribudos ao boto duplicado o seu texto, o seu link e a
varivel i incrementada em uma unidade, para criar a prxima ins-
tncia de boto.

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

necessrio criar primeiro um construtor new XML() antes de chamar
os mtodos 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, atravs 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 caractersticas nomeada-
mente um cdigo, o nome e a idade - de duas pessoas. Para quem co-
nhece o HTML, decerto j notou as semelhanas.
Qualquer documento XML, comea pela declarao da verso. De se-
guida, a declarao do tipo de documento, que opcional.

A partir da, surge a descrio dos dados. A estrutura sempre a
mesma. Cada bloco de dados est encarcerado entre uma etiqueta de
declarao de incio e outra de fim. No exemplo, os dados de cada pes-
soa comeam pela declarao <pessoa>, e terminam em </pessoa>.
Dentro de cada pessoa, esto os dados que lhe pertencem.
Se for necessrio 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 bifurcaes, denomina-se n (Node no Flash). Aos
segmentos de informao chamam-se textos. Cada um dos ns pode
conter atributos, ou sub-ns especiais os de texto, que no contm
354 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

atributos, nem sub-ns. O texto declarado entre as etiquetas de incio
e fim. No exemplo, temos o nome e a idade.

Os atributos so declarados dentro da etiqueta de incio. No exemplo, o
cdigo.

Os ns so 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 contm 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 Referncia ao primeiro filho do n especificado.
xml.nextsibling Refere-se prxima 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 comeamos por criar o construtor:

agenda_xml = new XML();

356 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

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 funo de nome
carregado correr assim que o ficheiro de XML esteja carregado.

agenda_xml.onLoad = carregado;


A quarta linha carrega o ficheiro. Utilizamos o mtodo Load para esse
efeito.

agenda_xml.load("teste.xml");


Agora criamos a funo para fazer referncia que vai ser executada
depois do carregamento.

function carregado() {
agenda = agenda_xml.firstChild;
pessoa = agenda.firstChild;
apresentaDados();
}


E de seguida a funo 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 botes, vamos introduzir utilizar a condio if para
determinar se os dados do ficheiro de XML j terminaram ou no.

II.6. OBJECTOS 357


Figura136 Botes de navegao no documento
II.7. COMPONENTES
Os componentes do Flash MX foram introduzidos para substituir os
Smart Clips que faziam parte da verso anterior do programa. Tratam-
-se de movie clips complexos que j possuem actions associadas, mas
nas quais o utilizador pode alterar parmetros que lhe permitem adaptar
os componentes a diferentes utilizaes em cada filme.


Figura137 Janela Components

Ao inserir um componente no filme a pasta Flash UI Components
adicionada biblioteca do filme, a qual contm o componente arrastado,
a pasta Component Skins e a pasta Core Assets Developer Only.


Fig138 Biblioteca

360 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

O painel PROPERTIES mostra a informao para configurar o compo-
nente atravs da definio dos seus parmetros. Cada componente
tambm por si s uma instncia e deve-lhe ser atribudo 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 aparecero no
filme publicado se o modo de visualizao Live Preview (CONTROL >
LIVE PREVIEW) estiver activado. No entanto, os componentes no esto
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 verificao ao documento. As caixas permi-
tem escolhas mltiplas.

Parmetros:
Change Handler - String de texto que permite indicar a funo que
dever ser executada quando o valor da checkbox alterado. A funo
II.7. COMPONENTES 361

deve estar definida na mesma timeline da checkbox. Este parmetro
opcional.
Initial Value - Indica se a caixa est ou no seleccionada de incio.
Label - Texto que aparece ao lado da caixa.
Label Placement Indica se o label aparece direita ou esquerda da
caixa.

Figura141 Opes Checkbox
ComboBox
Possibilita adicionar menus drop-down com vrias opes. Estes menus
podem ser editveis ou estticos. Cada item da caixa tem um valor,
sendo o primeiro equivalente a 0.
Parmetros:
Change Handler - String de texto que permite indicar a funo que
dever ser executada quando o valor da checkbox alterado. A funo
deve estar definida na mesma timeline da checkbox e o nome da com-
bobox pode ser aceite como parmetro.
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 editvel ou no.
Labels Ttulos que surgem para escolha dentro do menu.
Row Count Nmero de itens listados no menu.


Figura142 Opes ComboBox
362 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

ListBox
Permite adicionar listas de escolha nica ou mltipla. Estas listas podem
possuir scrollbars.

Parmetros:
Change Handler String de texto que permite indicar a funo que
dever ser executada quando o valor da checkbox alterado. A funo
deve estar definida na mesma timeline da checkbox. Este parmetro
opcional e s necessrio incluir se pretendermos que algo acontea
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 Ttulos que surgem para escolha dentro da caixa.
Select Multiple Especifica se a lista permite ou no escolha mltipla.
Se a opo False for seleccionada, a lista no permite escolhas mlti-
plas; este o valor por defeito.


Figura143 Opes ListBox
PushButton
Adiciona botes simples ao filme. Podem ser associadas actions ao
evento onClick.


Parmetros:

Click Handler - String de texto que permite indicar a funo que dever
ser executada quando o boto premido.
Label Ttulos que surgem para escolha dentro da caixa.
II.7. COMPONENTES 363

RadioButton
Permite adicionar botes de escolha nica ao documento.

Parmetros:
Change Handler String de texto que permite indicar a funo que
dever ser executada quando o valor do radio button alterado. A fun-
o deve estar definida na mesma timeline do radio button.
Este parmetro opcional e s necessrio incluir se pretendermos
que algo acontea 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 botes pertence o boto. V-
rios botes podem pertencer ao mesmo grupo.
Initial State Indica se o boto est ou no seleccionado de incio.
Label - Texto que aparece ao lado do boto.
Label Placement Indica se o label aparece direita ou esquerda do
boto.


Figura144 Opes 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 dinmico ou input. Escolha a opo multiline para poder
escrever em vrias linhas.
364 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

Arraste o componente scrollbar para junto da caixa. Se arrastar pelo
centro do componente ele adere automaticamente caixa.
Teste o filme.


Figura145 Scrollbar

Parmetros:
Horizontal Especifica se o scrollbar horizontal ou vertical.
Target text Field Especifica o nome da instncia do campo de texto
para o scrollbar. Assim que o scrollbar adere a um campo de texto este
campo preenchido automaticamente.


Figura146 Opes Scrollbar
ScrollPane
Permite adicionar janelas com scrollbars horizontais e verticais para
mostrar movie clips. especialmente indicado para mostrar muita infor-
mao em pouco espao de documento.

Parmetros:
Drag Content Indica se o utilizador pode arrastar o contedo 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 no. O valor por defeito auto, em que apenas mostrada se for ne-
cessria.

Scroll Content String de texto que especifica a identificao linkage
do smbolo que ir aparecer no painel. Para atribuir o nome de linkage a
um smbolo, faa clique com o boto direito do rato sobre o movie clip
na biblioteca e escolha a opo Linkage.


Figura147 Linkage


Vertical Scroll Determina se a barra vertical est a ser mostrada ou
no. O valor por defeito auto, em que apenas mostrada se for ne-
cessria.


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 mtodos dos componentes.

366 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Figura149

Para exemplo, vamos criar um formulrio simples em que o utilizador ao
clicar no boto Enviar passa informaes atravs de componentes.


Fig150 Formulrio

Nomes das instncias:
Checkbox = participa
Combobox = viagem com trs opes:
Maldivas
Istanbul
Cuba
Radio button 1= Meio_av
Radio button 2= Meio_comb

Para capturar os valores de todos os campos criamos uma funo na
timeline do filme e associamos essa funo ao boto Enviar.
Comeamos por nomear a instncia do boto e digitamos em Click
Handler o nome da funo que ser chamada quando o boto for premi-
do.
II.7. COMPONENTES 367



Figura151

Agora na primeira keyframe do filme criamos a funo que vai ficar as-
sociada ao boto.

function clicar (enviar) {
}


Comeamos por recolher os dados da checkbox. Em ACTIONS > FLASH
UI COMPONENTS > FCHECKBOX > METHODS > GETVALUE

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 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Fig152 Resultado

Anexo 1. SISTEMA HEXADECIMAL

Este sistema de numerao foi inventado para "simplificar" o trabalho de
lidar com nmeros muito grandes.
Ns, humanos, utilizamos um sistema de numerao de base 10,
decorrente do facto de termos dez dedos. No nosso sistema, a posio
de um determinado algarismo relevante, ao contrrio, por exemplo,
dos nmeros romanos onde isto no acontece.
Outra particularidade do nosso sistema de numerao que cada casa
decimal apenas pode variar de 0 a 9. Quando precisamos representar
nmeros 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 dgito
imediatamente esquerda do 9. Como neste caso o 9 tambm pode ser
visto como 09, ento devemos passar o 9 a 0 e o 0 a 1, criando assim o
nmero 10.
Imagine o contador de quilmetros de um automvel. Se o colocar a
zero, medida que o automvel se desloca, o primeiro dgito da direita
sobe progressivamente de 0 a 9, voltando em seguida a 0, e nesta volta
causando o incremento do dgito imediatamente sua esquerda, que
passa ento de 0 a 1, passando assim a representar o nmero 10.
Processo similar ocorre quando estes dois dgitos atingirem o valor 99
quando ento passaro a 00 e acrescentaro 1 ao dgito 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 incrementar o dgito esquerda. Como
a contagem na base 10 utiliza smbolos que ocupam uma s posio
para representar cada um dos nmeros, ento na base 16 tambm
370 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
deveremos criar smbolos para representar todos os algarismos de 0 a
15. J temos porm os dez primeiros que podemos pedir emprestados
base 10, ou seja, 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para os nmeros de 10 a 15
foi decidido utilizar sequencialmente as letras A, B, C, D, E e F.
Como um algarismo dentro de um determinado nmero pode ter valores
diferentes consoante a sua posio, podemos desmembrar um nmero
de acordo com a sua posio relativa. Ento, por exemplo, o nmero
5.326 pode ser lido como cinco milhares, trs 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 visualizao, temos o resultado abaixo:
POSIO Valor da coluna Pode ser visto como Ou ...
MILHAR 1000 10 x 10 x 10
10
3

CENTENA 100 10 x 10
10
2

DEZENA 10 10
10
1

UNIDADE 1 1
10
0


Repare que acrescentamos uma terceira coluna com representao em
termos de expoentes dos valores. Pode ver que dependendo da posio
do algarismo dentro do nmero o seu expoente assume um valor dife-
rente.
Se transportarmos este raciocnio para a base 16, teremos o seguinte
resultado:
POSIO Valor da coluna Pode ser visto como Ou ento...
MILHAR 4096 16 x 16 x 16
16
3

CENTENA 256 16 x 16
16
2

DEZENA 16 16
16
1

UNIDADE 1 1
16
0


As posies agora tm aspas porque no fazem mais sentido no novo
sistema. Servem apenas para que identifique a posio relativa do alga-
ismo de um determinado nmero.
ANEXO 1. SISTEMA HEXADECIMAL 371

Ento, se tivermos, por exemplo, o nmero 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
ocupa. O F vale 15 e est na coluna zero. Ento, 15x16
0
=15 e
2x16
1
=32, logo o nmero 2F equivale ao nosso nmero 47.
Por raciocnio anlogo, o nmero ABCD ser:
A = 10. Como est na coluna 3 (16
3
) ento 10 x 16
3
= 40.960
B = 11. Como est na coluna 2 (16
2
) ento 11 x 16
2
= 2.816
C = 12. Como est na coluna 1 (16
1
) ento 12 x 16
1
= 192
D = 13. Como est na coluna 0 (16
0
) ento 13 x 16
0
= 13

Somando tudo, o nmero ABCD vai equivaler a 43.981 na base 10.
Como se costuma representar a base em baixo do nmero, ento,
ABCD seria escrito ABCD
16
e 43981 seria escrito 43981
10
.
Se o seu problema converter da base 10 para a base 16, ento
dever dividir em vez de multiplicar.
Tomemos por exemplo o nmero 4.000. Se fizermos uma primeira
diviso deste nmero pelo 16 (da base) chegaremos ao valor de 250,
obtendo 0 de resto. Se usarmos o nmero 250 e o dividirmos
novamente por 16, obteremos 15 e 10 de resto. Veja o diagrama abaixo:




372 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO
Se olharmos agora para os nmeros resultantes, de trs para a frente,
teremos os nmeros 15, 10 e 0, que correspondem a F, A e zero, logo,
na base 16, o nmero 4000 FA0
16
.
Anexo 2. WEB COLORS

Em informtica, as cores so representadas por combinaes de 3 co-
res bsicas: vermelho, verde e azul. As placas de vdeo permitem que
cada uma destas cores possa ter valores que vo de de 0 a 255, sendo
0,0,0 o negro e 255, 255, 255 o branco.
No incio do desenvolvimento para a Web, ainda eram muitos os com-
putadores capazes de representar apenas 256 cores diferentes no ecr.
Utilizavam ento as famosas placas de vdeo de 8 bits
1
.
Comeou-se a notar ento que as cores no eram mostradas da mes-
ma forma quando vistas em diferentes computadores, browsers, siste-
mas operativos, etc.
Resolveu-se fazer uma comparao para descobrir quais destas cores
seriam exactamente as mesmas, independentemente do sistema utiliza-
do.
Utilizou-se o Netscape como padro, para fazer essa comparao, j
que era o browser mais utilizado na altura e o que existia para todos os
principais sistemas operativos de ento. Chegou-se concluso de que
apenas 216 das 256 cores possveis 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 tambm conhecidas por Web-Safe Colors,
safe colors ou Netscape Colors, e esto disponveis em programas
profissionais de design grfico e em editores HTML.

1
Como um bit possui dois estados possveis, ou seja, 0 ou 1, ento 8 bits possuem 256
estados possveis, 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 extenses
adicionais ao Flash MX


Para poder instalar as extenses adicionais no seu Flash MX, a primeira
coisa a fazer instalar no seu computador o programa Extension Mana-
ger (que tal como as extenses esto disponveis para download gratui-
to no site da Macromedia).
Corra ento o programa de instalao Ext_Manager_Install_En.exe
(no MAC, Ext_Manager_Install_hqx) no seu computador. Terminada a
instalao corra o programa Extension Manager
1
, que por defeito ar-
mazenado no mesmo directrio do Flash. Assim que o fizer ver a ima-
gem abaixo.


1
Certificando-se de que no tem o Flash MX aberto.
376 CENTRO ATLNTICO COLECO TECNOLOGIAS FLASH MX: DESIGN, ANIMAO E PROGRAMAO

V a FILE > INSTALL EXTENSIONS e escolha primeiro o ficheiro
MX365880_FUIComponentsSet2.mxp
2
que corresponde ao FLASH
MX UI COMPONENTS SET 2 e carregue no boto INSTALL.

Ver a seguir uma janela a perguntar se aceita as condies para a
instalao. Carregue em ACCEPT e as extenses sero instaladas no
seu computador. Repita o procedimento para as extenses FLASH
CHARTING COMPONENTS, cujo ficheiro chama-se MX377283_Char-
tingComponents.mxp.
Ao terminar a instalao, o seu EXTENSION MANAGER mostrar na
janela principal uma lista daquilo que acabou de instalar. Veja a figura
abaixo.

2
As extenses existem em verses diferentes para o Flash MX de PC e para o de MAC.
Apesar disso, tm os mesmos nomes.
ANEXO 3. EXTENSION MANAGER 377



Basta agora sair do programa e correr o Flash MX. Vai ver que as
extenses j esto dentro da janela COMPONENTS. Caso no estejam
visveis logo primeira vista, experimente seleccion-las por meio do
dropdown menu da prpria janela.

Você também pode gostar