Centro Atlântico

Flash MX Design, Animação e Programação

Anabela Gonçalves e Magno Urbano

Flash MX Design, Animação e Programação

Portugal/2002

Reservados todos os direitos por Centro Atlântico, Lda.
Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa dos editores da obra.

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO
Colecção: Tecnologias Autores: Anabela Gonçalves e Magno Urbano

Direcção gráfica: Centro Atlântico Revisão: Nuno Ricardo e Centro Atlântico Capa: Paulo Buchinho

© Centro Atlântico, Lda., 2002 Ap. 413 - 4764-901 V. N. Famalicão Porto - Lisboa Portugal Tel. 808 20 22 21

geral@centroatlantico.pt www.centroatlantico.pt

Fotolitos: Centro Atlântico Impressão e acabamento: Inova 1ª edição: Junho de 2002

ISBN: 972-8426-53-4 Depósito legal: 181.663/02

Marcas registadas: todos os termos mencionados neste livro conhecidos como sendo marcas registadas de produtos e serviços, foram apropriadamente capitalizados. A utilização de um termo neste livro não deve ser encarada como afectando a validade de alguma marca registada de produto ou serviço. O Editor e os Autores não se responsabilizam por possíveis danos morais ou físicos causados pelas instruções contidas no livro nem por endereços Internet que não correspondam às Home-Pages pretendidas.

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

6

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

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

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

ÍNDICE

7

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

I.2. OS MENUS ........................................................... 93
Os Menus e suas funções .........................................................93 FILE .......................................................................................93 New From Template ............................................................93 Open As Library ..................................................................96 Import & Export Movie .........................................................97 Quicktime .........................................................................97

8

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

Freehand .........................................................................99 Publish Settings ................................................................101 Opção Formats – Janela Publishing ...............................102 Opção Flash – Janela Publishing ...................................103 Opção HTML – Janela Publishing...................................105 Publish ..............................................................................107 VIEW ...................................................................................108 GoTo .................................................................................108 Zoom In, Zoom Out e Magnification ...................................108 Outlines, Fast, Antialias, Antialias Text ...............................108 Rulers, Grid e Guides ........................................................109 MODIFY ............................................................................... 112 Shape - Soften Fill Edges ................................................. 112 Convert Lines to Fills ......................................................... 114 Expand Fill ........................................................................ 115 Smooth ............................................................................. 115 Straighten .......................................................................... 116 Optimize ........................................................................... 117 Trace Bitmap .................................................................... 118 Transform ..........................................................................121 Arrange .............................................................................122 Align .................................................................................123 Group & Ungroup ..............................................................127 Break Apart .......................................................................127 Distribute to Layers ...........................................................128

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

ÍNDICE

9

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

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS ........... 181
As suas próprias bibliotecas ..................................................181 Graphics, Button e Movie Clips ...............................................183 Graphic (gráficos) ...................................................................185 Button (botão) .........................................................................186 Movie Clips ............................................................................189 Efeitos de Cor e Transparência ..............................................191 Brightness .........................................................................192 Tint ....................................................................................192 Alpha ................................................................................193 Advanced ..........................................................................193 Bibliotecas do Flash ...............................................................194 Buttons .................................................................................195 Arcade Buttons .................................................................195 Circle Buttons....................................................................196 Component Buttons ...........................................................196 Key Buttons .......................................................................198 Knobs & Faders ................................................................198 Ovals.................................................................................199 Playback ...........................................................................199 Push Buttons .....................................................................200 Sounds ................................................................................200

10

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

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

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

ÍNDICE

11

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

II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS ................................. 253
Linguagens Processuais ou Procedimentais ..........................253 Linguagens Orientadas por Objectos......................................253

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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO ...................................................... 271
Criar links para páginas HTML ............................................273 Carregar filmes de Flash externos ........................................276 Controlar ficheiros executáveis com o fscommand ..............280 Símbolos ..............................................................................282 Atribuir nomes a instâncias de movie clips ou botões ..........284 Caminhos relativos e absolutos ............................................285 Caminhos absolutos ............................................................285

12

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

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

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

II.5. FUNÇÕES .......................................................... 329
Função Number ......................................................................330 Função getTimer ....................................................................330 Função getVersion .................................................................330 Função boolean......................................................................331 Função string ..........................................................................331 Função escape ......................................................................332 Função getProperty ................................................................332 Função targetPath ..................................................................332 Função unescape ...................................................................332 Função isFinite .......................................................................333

ÍNDICE

13

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

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

II.7. COMPONENTES................................................ 359
Checkbox ...............................................................................360 ComboBox .............................................................................361 ListBox ...................................................................................362 PushButton .............................................................................362 RadioButton ............................................................................363 Scrollbar .................................................................................363 ScrollPane ..............................................................................364 Anexo 1. SISTEMA HEXADECIMAL.............................................369 Anexo 2. WEB COLORS ................................................................373 Anexo 3. EXTENSION MANAGER: como instalar as extensões adicionais ao Flash MX ......................375

14

FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO

Novas funcionalidades do Flash MX
Por Nuno Ricardo 1

Este documento pretende dar a conhecer as principais novidades do Macromedia Flash MX em relação às versões anteriores. Foi baseado parcialmente em documentos oficiais da Macromedia e na opinião pessoal do autor desta introdução.

1. Workflow
Área de trabalho flexível e intuitiva Os produtos da Macromedia sempre tiveram muitas paletas de trabalho diferentes, com a possibilidade de serem organizadas ao gosto do utilizador, mas eram frequentes as críticas à dificuldade de gestão da área de trabalho. Nesta versão do Flash, a melhoria é significativa neste aspecto. Com outra forma de as paletas se expandiram e se agruparem nos extremos do ecrã, trabalhar com o Flash deixou de ser stressante. Outra melhoria muito bem vinda é uma paleta de propriedades ao estilo do Dreamweaver. As suas opções variam consoante o objecto seleccionado, condensando múltiplas paletas numa só, poupando espaço de trabalho precioso.

1

Nuno Ricardo é o único Flash 5 Developer registado em Portugal

16

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

Melhorias ao nível da timeline Da versão 4 para a 5 foram introduzidas alterações na forma como se controlavam as frames e keyframes na timeline. Estas não foram bem aceites pelos utilizadores, preferindo muitos a versão 4 à 5 neste aspecto. Na versão MX, voltou-se atrás no tempo. Trabalhar com a timeline é quase igual ao que era na versão 4, indo de encontro ao que quase todos os utilizadores pediam. Uma novidade nesta versão MX foi a introdução de pastas de layers. Estas permitem agrupar layers, como conseguíamos fazer antes para os símbolos na Library. Torna-se assim mais fácil trabalhar com filmes complexos a nível de design.

Distribute to Layers Se tivermos um grupo de objectos numa layer, e pretendermos fazer animações independentes para cada um deles, é necessário colocá-los em layers também elas independentes. Um objecto em cada layer. O novo comando Distribute to Layers’ faz isso automaticamente, e ainda atribui o nome a cada uma das layers criadas, poupando tempo e trabalho aos designers.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
Suporte para versões anteriores do Flash

17

Tal como acontecia antes, se utilizarmos num filme novas capacidades do MX, este filme não poderá ser aberto numa versão anterior do Flash. No entanto, podemos usar a facilidade de gravar os filmes no formato da versão 5, por questões de compatibilidade. Desta forma, não poderemos usar as capacidades novas. O Flash informa quais as actions que são ’proibidas’ assinalando-as a amarelo no painel Actions.

Suporte para diversos Sistemas Operativos O Flash MX já suporta Windows XP e Mac OS X, além de todos os outros sistemas operativos habituais: Mac OS 9.1 (ou posterior), Windows 95, Windows 98 SE, Windows Me, Windows NT4 e Windows 2000.

18

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

2. Ferramentas para o designer

Free transform tool

A nova ferramenta permite, mais facilmente que antes, mudar o tamanho, rodar e distorcer elementos gráficos. Com as variantes shape distort e envelope distort, o designer consegue libertar a sua criatividade como antes não era possível.

Fill Transform tool Outra ferramenta que se tornou independente é a de transformação de preenchimentos. Permite-nos modificar os preenchimentos em degrade ou padrões. Embora esta ferramenta já existisse, estava bastante menos acessível.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
Pixel Snapping

19

Através da opção Snap to Pixels, e com a visualização a 400% ou superior, temos acesso a uma grelha que nos permite fazer o alinhamento de objectos ao nível do pixel. Desta forma, evitamos efeitos de antialiasing que podem ser prejudiciais à qualidade dos contornos das formas.

Gestão e selecção de cores Também alvo de algumas críticas, o Color Mixer foi transformado de forma a facilitar o seu uso.

Máscaras dinâmicas Agora, podem-se construir dinamicamente máscaras. Desde o desenho até à activação da máscara, tudo pode ser controlado por Actionscript dando mais poder ao utilizador sobre esta importante característica do Flash.

3. Suporte Multimedia

Suporte vídeo
Utilizando o codec Sonrenson Spark embebido dentro do player da versão 6, é possível inserir vídeos dentro de ficheiros SWF.

20

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

O Flash suporta a importação de vídeos nos formatos AVI, MOV, DV e MPEG. Depois de inserido, é possível tratar um vídeo como qualquer outro objecto: Mudar o tamanho, rodar, distorcer, mascarar, e controlar o seu andamento através de actionscripting.

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

4. Texto

Substituição de fontes em falta
Tal como acontecia em alguns programas de design gráfico, agora quando se abre um filme num computador que não possui as fontes necessárias, o Flash avisa de tal facto, e dá a hipótese de criar um mapeamento da fonte em falta para outra semelhante.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
Colocação de texto na vertical

21

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

Suporte Multilingue

O suporte a caracteres Unicode, permite a visualização de textos em línguas em que antes não era possível com o Flash. Permite também uma mais fácil compatibilidade com aplicações externas que ‘falem’ Unicode, tal como com algumas aplicações de gestão de conteúdos.

22

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

5. Recursos de ajuda

Templates Não só para ajudar um principiante, mas também para facilitar a criação repetitiva de filmes com conteúdo semelhante, os Templates, já conhecidos dos utilizadores de outras aplicações, estão também disponíveis no Flash MX.

Painel Answers Outra facilidade de ajuda – o Painel Answers, permite o acesso rápido a dicas e recursos, com actualização via Internet.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX Exemplos e tutoriais

23

Já incluídos nas versões anteriores, estes tornam-se cada vez melhores.

6. Publicação e navegação
Desenvolvimento de conteúdo acessível A acessibilidade dos conteúdos a indivíduos com necessidades especiais é um tema que tardiamente começou a ser tomado em conta. O Flash suporta agora ferramentas como os leitores de ecrã. É possível adicionar ajudas aos filmes para serem interpretadas por essas ferramentas.

Suporte em ambientes diferenciados O desenvolvimento de conteúdo em Flash garante-nos que este vai estar acessível em diversos meios de comunicação tão diferenciados como os PC’s com diferentes sistemas operativos, WebTV, Pocket PC, PDA e outros. A Macromedia está absolutamente empenhada em tornar cada vez mais abrangente o Flash Player no que toca a plataformas existentes e futuras.

Named Anchors As Named Anchors já são amplamente usadas em HTML, para facilitar a navegação num site. Agora, também dentro de um filme Flash é possível utilizar esta ferramenta, de forma a que o utilizador possa navegar utilizando o botão Back e Forward do browser.

24

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

Compressão SWF melhorada
O Flash MX possui novos algoritmos de compressão de conteúdo, direccionados à optimização de filmes com utilização intensiva de Actionscript.

Empenhamento na minimização do Flash Player
Como é sabido, cada nova versão do Flash obriga a que todos os clientes da Internet façam o download da nova versão do player. Tendo consciência disso, a Macromedia empenha-se em minimizar ao máximo a duração do download. Nesta versão, embora o player tenha obrigatoriamente crescido, devido ao suporte vídeo, manteve-se nuns simpáticos 380 Kb. Pouco mais de 1 minuto de download para um modem de 56 Kbps.

7. Painel Actions melhorado

Edição do Actionscript mais fácil
Embora exista o modo Normal e Expert de edição de Actionscript, é no segundo modo que se conseguem aproveitar todas as capacidades desta poderosa linguagem. É também em Expert Mode que se sentem as grandes melhorias ao nível de edição. Codificação por cores, ajudas sensíveis ao contexto, opções de procura e substituição, guia hierárquico do código, com suporte Drag-and-Drop, e um excelente material de consulta fazem o processo de aprendizagem tornar-se simples e dão preciosas ajudas mesmo a peritos em actionscripting.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX

25

Editor parametrizável

Algumas das ajudas disponíveis, tais como a codificação em cores, a autoformatação e mesmo o conteúdo do painel Actions, são parametrizáveis, para que se adaptem ao gosto e forma de trabalho do utilizador.

Dicas de código (code-hinting) e preenchimento automático Enquanto se está a escrever o código, o Flash detecta o tipo de objecto que estamos a utilizar, e lista numa caixa drop-down os métodos, propriedades e eventos para esse objecto. É possível, a partir dessa lista, utilizando a tecla TAB, o preenchimento automático da instrução seleccionada. Aparecem ainda referências aos parâmetros necessários ao completar da instrução.

Painel de referência Se ainda assim persistirem dúvidas sobre o funcionamento de alguma instrução, basta seleccioná-la e, pressionando SHIFT+F1, aparece no painel Reference a explicação relativa à instrução.

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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
Debugger melhorado

27

A detecção de erros de código é agora mais fácil. O debugger foi melhorado, 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 timelines. Novo modelo de objectos e eventos Novos objectos, novos eventos associados não só aos botões e movieclips, mas a quase todos os objectos, permitem que seja mais fácil associar código a cliques do rato ou a teclas, ao load e unload de dados de vários tipos, ao redimensionar da janela do Flash, etc.

28

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

Instrução Switch Anteriormente, a única instrução condicional era o IF, que embora fosse eficiente, em muitos casos se existissem múltiplas hipóteses a testar tornava-se pouco prático. Para resolver este problema, surge a instrução SWITCH. Já existente noutras linguagens segue um estilo sintáctico muito semelhante ao Javascript, tal como todo o Actionscript a partir da versão 5.

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

Objectos TextField e Button Todas as propriedades inerentes às caixas de texto, como o Word Wraping, o modo password, multiline, alinhamento do texto e o próprio formato de texto são controláveis dinamicamente por Actionscript através dos objectos TextField e TextFormat. Também o comportamento de um botão, como a ordem de tabulação, o bloqueamento, e até as actions associadas a este, são controláveis por Actionscript utilizando o objecto Button.

Drawing API Esta API, dentro do objecto MovieClip, permite-nos desenhar qualquer forma utilizando apenas Actionscript. É possível, por exemplo, desenhar gráficos de qualquer tipo (barras, circular, linhas, etc.) com dados que se carregam dinamicamente de um sistema de back-office.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
Controlo de som melhorado

29

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

Componentes Com os componentes pré-definidos é possível criar formulários com botões de selecção, caixas drop-down, caixas de selecção múltipla, etc. Existem também componentes para facilmente se adicionar scrollbars a caixas de texto. A área de componentes é completamente personalizável, existindo algumas empresas que se dedicam à produção de componentes para diversos fins. No site www.macromedia.com/exchange é possível encontrar alguns destes componentes, puxá-los e instalá-los utilizando o Macromedia Extension Manager, incluído no Flash.

30

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

9. Links Interessantes

Documentação e Recursos • www.macromedia.com/software/flash/productinfo/features/index.ht ml#detailed • www.macromedia.com/desdev/mx/flash • www.macromedia.com/exchange • www.sorenson.com • www.flashkit.com • www.flash4all.com • www.flashthief.com • www.flashworker.com • www.actionexchange.com

A não perder • • • • • • • • • • • • • • www.spiritonin.com www.spiritonin.com/stuff/capoeiragame.html www.electronicorphanage.com/biennale/works/fight.swf www.yugop.com www.m -designers.com www.2advanced.com www.cubadust.com www.habbohotel.com www.wmteam.com www.andyfoulds.com.uk www.estudio.com www.derbauer.de www.shocker.de www.symmetrylab.com

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

O Flash MX é um programa produzido pela empresa Macromedia (www.macromedia.com ) que permite a produção de páginas para a Internet e de aplicações para distribuição pela Internet ou por qualquer outro tipo de media como CD-ROM, DVD-ROM, etc. O Flash MX permite construir páginas de Internet completas e não apenas as partes animadas. Permite elaborar sites que contenham interacções com os utilizadores, de forma animada, com uma interface gráfica sofisticada, sons e outros elementos multimedia. Para que seja possível visualizar sites em Flash correctamente, é preciso que o software que permite a navegação na Internet (browser) tenha um programa (plug-in) instalado para esse fim. Normalmente, os principais browsers já vêm configurados correctamente. Segundo a Macromedia, 98,3% das pessoas que navegam na Internet estão aptas a ver páginas em Flash. Caso o seu browser não esteja apto a visualizar páginas em Flash, a solução é visitar o site da Macromedia, escolher a opção SHORTCUTS dentro do item DOWNLOADS no menu superior esquerdo e então escolher a opção que diz Flash PLAYER DOWNLOAD. Verá então que surgirá o link para download da versão do Flash Player adequada ao seu browser (automaticamente o site da Macromedia detecta que browser está a utilizar e mostra-lhe apenas a versão adequada). 1

1

Existem diversas versões do FLASH P layer disponíveis no site da Macromedia, cada qual

adequada a um tipo de browser e/ou sistema operativo (Netscape, Explorer ou Mozilla para Windows, MacOS ou Linux).

32

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

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

A interface gráfica
Logicamente, a primeira parte a abordar neste livro refere-se à interface gráfica do Macromedia Flash MX, para que possa conhecer os cantos à casa, significativamente modificados em relação à versão anterior. A primeira diferença que se nota na interface, ao correr o Flash MX, em comparação com as versões anteriores, é que as suas janelas estão todas encaixadas umas nas outras e podem ser destacadas para se tornarem independentes e encaixadas novamente no todo. Outra diferença que verificará é que a interface pode ser configurada consoante o perfil do utilizador: designer, utilizador genérico (general) ou programador (developer). Para proceder à escolha vá ao menu WINDOW > PANEL SETS e verá sete opções: DEFAULT LAYOUT, três opções de resolução para DESIGNER e três para DEVELOPER. Estes ajustes pré-definidos arrumam as diversas janelas de propriedades do Flash de acordo com aquilo que se entende necessário estar visível ou não para um determinado perfil. Pode-se entender mais facilmente esta explicação quando se vê que o Flash possui diversas janelas de propriedades e que nem todas são necessárias para todos os tipos de utilizador.

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

33

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

DEFAULT LAYOUT
Começaremos então por escolher o tipo DEFAULT LAYOUT, o qual modificará a interface para que fique conforme a figura abaixo.

34

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

Não se preocupe se não conseguir ler os elementos contidos na imagem, devido ao seu tamanho reduzido. Usaremos a imagem apenas como referência e vamos abordar cada parte desta em separado. Se olharmos para o lado esquerdo da interface do Flash, veremos a barra de ferramentas (Tools) vista na figura ao lado.

Arrow Tool
Na parte de cima da barra de ferramentas pode ver duas setas, uma preta e uma branca. A primeira (Arrow Tool2), quando accionada, coloca o programa em modo de selecção de objectos. Neste modo, poderá seleccionar os objectos criados, como por exemplo, círculos, quadrados, elipses, etc. Esta ferramenta também poderá ser utilizada para fazer modificações nas formas dos objectos criados. Poderá utilizá-la para fazer modificações nas curvaturas das linhas que formam os objectos.

Veja as próximas figuras. Desenhamos uma recta horizontal, escolhemos a ferramenta Arrow Tool, e com o cursor do rato arrastamos um ponto arbitrário no meio da recta, para cima.

2

Para ter maior coerência essa ferramenta ao nosso ver deveria chamar-se “selection tool”, já que

a ferramenta seguinte e que a complemente chama-se “subselection tool”.

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

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 selecção de sub-objectos, o que lhe permitirá seleccionar os elementos componentes dos objectos em si, como por exemplo, os pontos que formam um círculo. Veja a figura abaixo.

o objecto “círculo”

os pontos que o formam...

Se estiver no modo de selecção de sub-objecto poderá seleccionar um ponto componente da forma de um objecto (vértice) e movê-lo para outro sítio, e então criar novas formas. Também poderá seleccionar e mover os “nodes” dos vértices, responsáveis pelo controlo da curvatura do segmento ao qual este pertencem. Veja a figura a seguir.

36

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

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

Line Tool
Logo a seguir na barra de ferramentas, a ferramenta para criação de linhas (Line Tool), representada pelo ícone de uma linha recta em diagonal. Para criar uma linha, seleccione o Line Tool, carregue com o rato na área de desenho, mova o cursor para outro sítio e liberte o botão do rato. Se usar o SHIFT enquanto desenha, poderá fazer linhas horizontais, verticais ou a 45º.

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

37

Depois de criada a linha, pode modificar os seus parâmetros na janela de propriedades, encontrada na parte inferior do ecrã. Veja a figura abaixo.

Nesta janela poderá mudar a cor da linha ao carregar na caixa colorida (Stroke Color), a espessura (Stroke Height), na seta para baixo ao lado do número e o estilo (Stroke Style) se carregar na caixa com a palavra SOLID (figura acima).

Estão disponíveis diversos estilos de linha, tracejadas, pontilhadas, sólidas, etc. Também poderá carregar no botão CUSTOM e fazer ajustes mais detalhados. Ao abrir a janela vai ver uma caixa nomeada TYPE (tipo) de onde pode regular os estilos.

38

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

SOLID (SÓLIDO)
O primeiro estilo disponível é o SOLID (sólido), onde a linha tem uma aparência contínua. Este estilo permite apenas regular a espessura (THICKNESS) e fornece uma caixa com a frase SHARP CORNERS, que quando marcada produz linhas com cantos em bico.

DASHED (TRACEJADO)
O primeiro estilo disponível a seguir ao SOLID é o DASHED (linha tracejada), que fornece a seguinte janela para ajuste.

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

39

Nas duas caixas a seguir a DASH poderá regular, respectivamente, o tamanho de cada segmento do tracejado e do espaçamento, o que significa dizer que se preencher os campos com os valores 8 e 5 terá segmentos com 8 pixéis de comprimento espaçados 5 pixéis entre si.

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

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

RAGGED (IRREGULAR)
O estilo a seguir na caixa dos tipos é o RAGGED. Neste estilo estão disponíveis parâmetros como PATTERN, WAVE HEIGHT e WAVE LENGTH, que correspondem, respectivamente, ao padrão, altura e comprimento da irregularidade. O PATTERN corresponde ao padrão da linha e permite várias escolhas: SOLID, SIMPLE, RANDOM, DOTTED, RANDOM DOTTED, TRIPLE DOTTED e RANDOM TRIPLE DOTTED, correspondentes a sólido, simples, aleatório, ponteado, ponteado aleatório, ponteado triplo e ponteado triplo aleatório. Não é necessário decorar exactamente o que cada um destes parâmetros significa, porém vale a pena experimentá-

40

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

-los quando estiver a trabalhar porque modificam significativamente a aparência final. No campo WAVE HEIGHT poderá ajustar a amplitude e turbulência da irregularidade em quatro níveis disponíveis, consoante um menor ou maior grau de turbulência: FLAT , WAVY, VERY WAVY e WILD. Também poderá ajustar o comprimento da irregularidade pelo WAVE LENGTH. São também quatro as opções, a primeira a produzir o menor comprimento e a última a produzir o maior: VERY SHORT , SHORT, MEDIUM e LONG.

STIPPLE (PONTILHADO)
Este é o estilo nomeado de STIPPLE (pontilhado). Na janela deste estilo poderá ver os campos DOT SIZE (tamanho do ponto), DOT VARIATION (variação do ponto) e DENSITY (densidade). No DOT SIZE poderá regular o tamanho dos pontos, que do menor para o maior são: TINY, SMALL, MEDIUM e LARGE. A seguir poderá regular a variação dos pontos (DOT VARIATION) por meio de quatro opções: ONE SIZE, SMALL VARIATION, VARIED SI-

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

41

ZES e RANDOM SIZES. A primeira opção produz pontos do mesmo tamanho. A segunda produz pontos que possuem uma pequena variação de tamanho. Na terceira temos a produção de pontos de tamanhos variados e na quarta, pontos de tamanhos aleatórios. No campo DENSITY poderá regular a densidade dos pontos, ou seja, se os pontos são produzidos pegados uns aos outros ou não. As opções da mais densa para a menos densa são: VERY DENSE, DENSE, SPARSE e VERY SPARSE.

HATCHED (TRACEJADO)
O estilo seguinte é o HATCHED. Na janela deste estilo poderá ver os seguintes campos: THICKNESS (espessura), SPACE (espaçamento horizontal), JIGGLE (agitação), ROTATE (rotação), CURVE (curvatura) e LENGTH (comprimento).

42

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

Na primeira opção, THICKNESS, é possível ajustar a espessura das linhas produzidas no padrão. Da mais fina para a mais grossa, as opções são: HAIRLINE, THIN, MEDIUM e THICK. No campo SPACE é possível regular o espaçamento entre as linhas produzidas no padrão. A começar pelo menos espaçado, temos as seguintes opções neste campo: VERY CLOSE, CLOSE, DISTANT e VERY DISTANT. Em JIGGLE podemos ajustar o padrão de distribuição vertical e horizontal das linhas. Da opção menos para a mais caótica as opções são: NONE, BOUNCE, LOOSE e WILD. Na caixa ROTATE é possível regular a rotação das linhas. Os valores dos ângulos de rotação são pré-estabelecidos pelo p rograma e não podem ser mudados. Porém, é possível escolher as seguintes opções, da menos para a mais radical: NONE, SLIGHT, MEDIUM e FREE. Temos também o campo CURVE, onde é possível ajustar a curvatura das linhas produzidas. Da menos curva para a mais curva as opções são: STRAIGHT, LIGHT CURVE, MEDIUM CURVE, VERY CURVED. Em LENGTH podemos ajustar o comprimento das linhas. Com isso é possível criar variações verticais de tamanho. As opções são: EQUAL,

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

43

SLIGHT VARIATION, MEDIUM VARIATION e RANDOM, que correspondem respectivamente a linhas com os tamanhos todos iguais, com tamanhos que variam apenas ligeiramente, com tamanhos que variam de forma moderada e com tamanhos que variam aleatoriamente. Em todas as janelas de estilo anteriormente citadas, temos também o quadro que diz ZOOM 4X para permitir a visualização do efeito à linha de forma mais detalhada. Também há o campo THICKNESS que permite o ajuste da espessura da linha em pontos. SHARP CORNERS é outro quadro que, quando marcado, produz linhas com cantos em bico.

Lasso Tool
De volta à barra de ferramentas do Flash, verá, ao lado do ícone da recta, o ícone que representa um laço (Lasso Tool). Com esta ferramenta poderá seleccionar partes internas de um objecto. Não deve confundir-se com o modo de selecção de sub-objecto. Um sub-objecto é um ponto que forma um determinado objecto. A ferramenta LASSO permite seleccionar partes do objecto em si. Digamos que numa recta qualquer utilizámos o LASSO para seleccionar uma região, conforme nesta figura.

44

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

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

Esta região seleccionada poderia ser então eliminada, o que transformaria a recta única original em duas menores independentes, conforme a próxima figura.

Pen Tool
A próxima ferramenta da barra TOOLS é a pena de escrita (Pen Tool). Com ela, poderá criar os pontos (sub-objectos) relativos às curvas ou às formas que desejar.

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

45

O modo de criação dos pontos é simples. Depois de seleccionar a pena, vá com o rato para a área de desenho e carregue no botão. O Flash criará o primeiro ponto da curva. Mova então o rato para outro sítio. Ainda dentro da área de desenho, carregue novamente no botão para criar o segundo ponto. Sem libertar o botão, mova o rato suavemente. Verificará que o Flash permite o ajuste da curvatura do segmento. Crie outros pontos. Se quiser fechar a curva, e transformá-la numa superfície, volte com o rato para cima do primeiro ponto criado e verá um pequeno círculo surgir ao lado do cursor. Esta é a indicação de que se carregar no botão irá fechar a curva. Utilize a Arrow Tool e carregue com o rato duas vezes em cima da curva para a seleccionar. Na janela de propriedades da curva, que pode ser vista na parte central inferior do ecrã, encontrará os parâmetros que poderão ser modificados.

Pode ver que o Flash não diferencia uma linha apenas de uma forma e indica tudo como se fora SHAPE (forma). Nessa janela encontrará nas quatro primeiras caixas superiores da direita os mesmos parâmetros descritos anteriormente para as linhas, ou seja, a caixa de selecção da cor da forma, a espessura da sua linha, o estilo da linha e a caixa de CUSTOM que permite todos aqueles estilos descritos (solid, dashed, dotted, ragged, stipped e hatched).

46

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

No canto inferior esquerdo encontrará quatro caixas menores nomeadas W, H, X e Y. Elas indicam respectivamente a largura (Width), altura (Heigth), posição horizontal (X)3 e posição vertical (Y). Logo abaixo da caixa de cor da linha existe um ícone com um balde e logo ao lado uma outra caixa de cor. Para uma forma que seja apenas uma linha, este balde não faz sentido, mas se estiver a criar uma forma fechada, então poderá determinar a cor interior da forma, ou seja, a cor de preenchimento (FILL). Esta ferramenta se for usada numa linha já existente serve para acrescentar, apagar e converter pontos.

OBSERVAÇÃO Ao ser criada uma forma ela inclui duas regiões: a linha que determina a sua forma e a região interna (que pode ou não ser preenchida com uma cor). Estes elementos são conhecidos como LINE e FILL respectivamente.

Text Tool
O próximo ícone da barra de ferramentas é uma letra A. Esta ferramenta é a Text Tool, destinada à criação de textos.

3

O FLASH considera os valores de X (coordenada horizontal) e Y (coordenada vertical) a começar de zero. X = 0 é a posição mais à esquerda na horizontal e Y = 0 é a posição mais acima na vertical. Logo, a posição X=0 e Y=0 é o ponto superior esquerdo da janela de desenho.

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

47

Seleccione-a e mova o rato para a área de desenho. Carregue no botão do rato e verá surgir uma caixa conforme vemos na página ao lado.

Note que no canto superior direito poderá ver um quadrado. O quadrado indica que é uma caixa de tamanho fixo. Se tiver uma bola, é uma caixa de tamanho variável – cresce com o texto que se introduzir. Se arrastar este elemento poderá regular a largura da caixa de texto. Deve sempre previamente regular a largura da caixa de texto para forçar o Flash a formatar o texto numa região horizontal específica. Digite então qualquer coisa no interior da caixa, algo com várias linhas, e movimente o quadrado que regula a largura. Veja como se comporta o texto com os diversos tamanhos de caixa. Na figura seguinte vemos a janela de propriedade da caixa de textos do tipo STATIC, que pode ser encontrada na parte central inferior do ecrã, e os seus correspondentes parâmetros 4.

4

Caso não esteja a ver toda a janela como na figura, carregue no pequeno triângulo existente no

canto inferior direito da mesma para a maximizar.

48

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

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

ESCOLHA DO TIPO DE TEXTO
No campo de escolha do tipo de texto é possível seleccionar o tipo de funcionalidade da caixa de textos. As opções possíveis são STATIC TEXT, DYNAMIC TEXT e INPUT TEXT. Static Text STATIC TEXT é o tipo de caixa de texto tradicional, na qual poderá colocar os textos que deseja na sua animação. Uma caixa de texto ajustada como DYNAMIC TEXT permite ser actualizada durante a execução da animação, de forma dinâmica. Então, poderá, durante a execução da animação, controlar e colocar textos dentro da caixa, que poderão chegar-nos de ficheiros, por exemplo. As caixas ajustadas como INPUT TEXT têm a finalidade de servir como caixas de entrada de texto em formulários, por exemplo, cujos valores podem ser lidos por ActionScript.

I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS ESPAÇAMENTO DE CARACTERES

49

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

TIPO DE LETRA e TAMANHO

Nestes campos poderá ajustar o tipo de letra, dentre as que tiver instaladas no seu computador, e o tamanho que estas terão. Numa determinada caixa de texto poderá ter diferentes tipos e tamanhos de letra.

POSIÇÃO DOS CARACTERES

Nesta caixa poderá ajustar a posição de caracteres em relação às linhas. As opções são NORMAL, SUPERSCRIPT e SUBSCRIPT. Com a opção SUPERSCRIPT poderá escrever expoentes de equações, por exemplo, e com a opção SUBSCRIPT poderá colocar índices nestas mesmas equações. Logo, o SUPERSCRIPT corresponde à escrita de caracteres de tamanhos reduzidos acima da linha base do texto, enquanto que o SUBSCRIPT equivale a caracteres de tamanhos reduzidos abaixo da linha base. Veja os exemplos seguintes.

50

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

SUPERSCRIPT: x2 + y2 = z 2 SUBSCRIPT: x1 + x2 = z 1 Este campo só pode ser utilizado para as caixas de texto do tipo STATIC.

AJUSTE DE COR, BOLD e ITÁLICO

Os três campos a seguir são a caixa de ajuste de cor, o B e o I onde pode colocar o texto em negrito (BOLD) ou itálico (ITALIC). Também neste caso poderá colocar letras de diversos tipos, tamanhos, cores e formatos numa mesma caixa de texto.

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

A seguir, temos a caixa de ajuste da direcção do texto, indicada abaixo pelo primeiro ícone.

Se carregar neste ícone poderá e scolher uma das seguintes opções: HORIZONTAL, VERTICAL, LEFT TO RIGHT e VERTICAL, RIGHT TO LEFT. Na primeira, o texto é escrito normalmente, da esquerda para a direita, conforme imagem seguinte.

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

51

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

OPÇÕES DE ROTAÇÃO

Se todavia carregar no ícone logo abaixo daquele de ajuste de direcção de texto, poderá rodar o texto, de forma que a imagem ao lado se torna igual à seguinte.

52

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

Veja na figura abaixo a indicação do ícone de rotação do texto existente na janela de propriedades da letra.

Se tivesse escolhido na caixa de selecção de direcção do texto (não confundir com a caixa de rotação do texto) a opção VERTICAL, RIGHT TO LEFT (vertical, da direita para a esquerda), teria visto o texto ficar conforme a imagem abaixo.

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

53

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

54

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

Estas opções de formatação de texto são úteis também para escrita em outras linguagens em que o texto se lê noutras direcções. O suporte a essas linguagens – como o Coreano, Japonês e outras, foi melhorado nesta versão do Flash, já que pode utilizar o UNICODE para a interpretação do texto

OPÇÕES DE FORMATAÇÃO

Neste campo poderá ajustar alguns outros parâmetros na formatação do texto dentro da caixa. Assim que carregar com o rato neste botão verá a janela abaixo.

Nesta janela poderá regular o INDENT, que corresponde à posição relativa da primeira letra do parágrafo. Veja nas figuras abaixo um texto com indentação zero e com uma indentação de valor positivo.

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

55

Outros parâmetros que podem ser regulados na janela de opções de formatação são LINE SPAC ING (espaçamento entre as linhas de texto), LEFT MARGIN (margem esquerda) e RIGHT MARGIN (margem direita). Estes dois últimos valores referem-se às margens entre a caixa de texto e o texto em si.

AUTO KERN

Se marcar esta caixa o Flash passa a utilizar as o pções de Kerning5 disponíveis no próprio tipo de letra.

W, H, X e Y

Estes quatro parâmetros são os responsáveis pela definição da largura (width), altura (height), posição horizontal (X) e posição vertical (Y) da caixa de texto.

URL

Neste campo poderá colocar endereços de Internet para que se tornem hiperligações (links). Para isto, basta seleccionar a parte do texto que gostaria de transformar n uma hiperligação, e na caixa URL colocar o endereço de Internet correspondente. Desta forma, quando a sua animação estiver a ser visualizada na Internet, a palavra que marcou como link poderá ser clicada e actuará normalmente como todas as outras hiperligações dos sites. O endereço de Internet deve ser escrito neste campo na forma tradicional, ou seja, http://www.pagina.com

ALVO DA URL

Esta é uma função avançada de HTML e indica onde a página no campo URL deverá ser vista. As opções deste campo são “_blank”,

5

Distribuição das letras entre si de forma a tornar um determinado texto visualmente correcto do

ponto de vista gráfico.

56

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

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

O TEXTO PODE SER SELECCIONADO?

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

USE DEVICE FONTS

O Flash, por defeito, inclui no ficheiro final correspondente à sua animação todas as letras das fontes que utilizou. Logicamente que armazenar as informações de tais letras faz com que o ficheiro aumente de tamanho. Felizmente, o Flash apenas armazena a informação relativa a cada letra e fonte diferente que utilizou. Assim, se utilizar a fonte ARIAL e escrever a palavra AGUA, e com a Times New Roman escrever a frase DVD VIDEO, isto fará com que sejam armazenadas as letras A, G e U da fonte ARIAL e as letras D, V, I, E e O da Times New Roman. Se marcar a opção USE DEVICE FONTS indicará ao Flash para que este não armazene internamente as informações relativas às letras utilizadas nas animações e tente utilizar as fontes que existam na máquina onde estiver a correr, que mais se assemelhem às que utilizou. Geralmente não é indicado que seleccione esta opção, a não ser que tenha absoluta certeza de que as fontes são exactamente as mesmas.

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

57

Como na prática é impossível ter essa certeza absoluta, irá correr o risco de ver a sua animação completamente “destruída” pelo uso de uma fonte inadequada (atenção às questões legais no uso de fontes pagas).

TIPO DE LINHA

Nesta caixa poderá ajustar o estilo da caixa de textos no que se refere à disposição das linhas. As opções para as caixas de texto do tipo DYNAMIC são: SINGLE LINE, MULTILINE e MULTILINE NO WRAP. A primeira indica que a caixa somente terá uma linha na largura da caixa especificada. Caso o texto seja maior do que a largura disponível então somente parte deste será mostrado. A opção MULTILINE faz com que a caixa de textos passe a ter múltiplas linhas; respeitando o tamanho da caixa. Além disto, o texto é formatado automaticamente em linhas, à medida em que atinge a borda direita da caixa. A opção MULTILINE NO WRAP impede que o Flash arrume o texto em linhas à medida em que este atinge o limite direito da caixa. Cabe a si definir onde deve haver a mudança de linhas pela colocação de caracteres ENTER nos pontos desejados. Dynamic Text As caixas de texto do tipo DYNAMIC servem para que possa definir áreas de texto nas suas páginas Flash que serão preenchidas de forma dinâmica, à medida em que a página surgir. Digamos, por exemplo, que deseja fazer a leitura do texto de um ficheiro que muda diariamente e mostra esse conteúdo na sua animação. Isto é possível com o uso das caixas deste tipo. As propriedades desta caixa assemelham-se às das caixas do tipo STATIC vistas anteriormente; porém, alguns outros botões e campos novos surgem, tal como veremos a seguir. Veja a figura seguinte.

58

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

A primeira coisa que observa nas propriedades dessa caixa é o campo VAR e o botão CHARACTER. No primeiro, é possível definir as variáveis que vai utilizar em ActionScript. Pode, por exemplo, criar uma variável qualquer e armazenar nela valores a utilizar mais adiante. No botão CHARACTER vai poder definir que letras quer que o Flash armazene internamente no ficheiro final. Se accionar este botão vai ver a janela a seguir.

A primeira opção NO CHARACTERS indica que nenhuma informação de fontes irá ser armazenada. ALL CHARACTERS indica que todas as informações das letras serão armazenadas. ONLY usado em combinação com as quatro caixas seguintes indica que apenas as letras maiúsculas de A até Z serão armazenadas, apenas as letras minúsculas de a até z serão armazenadas, apenas os números de 0 a 9 serão armazenados e apenas os sinais de pontuação serão armazenados. A última caixa abaixo da frase AND THESE CHARACTERS indica algumas letras e sinais de pontuação que poderá inserir para indicar mais precisamente ao Flash o que deseja que ele faça. Esta caixa também é útil para definir os caracteres acentuados da íngua portuguesa, por l exemplo.

I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS BOTÃO HTML

59

Se seleccionar este botão, indicará ao Flash para preservar as características básicas de formatação de textos HTML, como tipo de letra, estilo, cor, tamanho, e hiperligações nas caixas de texto, pela aplicação automática dos correspondentes tags em HTML quando a animação final for exportada para SWF. Os seguintes tags em HTML são suportados: <A>, <B>, <FONT COLOR> , <FONT FACE>, <FONT SIZE>, <I> , <P> e <U>. Também são suportados os seguintes atributos: LEFTMARGIN, RIGHTMARGIN, ALIGN, INDENT e LEADING. Poderá preservar as características de formatação e estilo dos textos HTML pelo uso de variáveis das caixas de texto ou uso do nome da instância da caixa de texto. Se o desejar fazer pelo uso das variáveis proceda da seguinte forma: ü crie uma caixa de texto do tipo DYNAMIC ou INPUT; ü nomeie o campo VARIABLE dessa caixa na janela de propriedades como “texto” por exemplo.

Das duas opções abaixo, faça pelo menos uma: seleccione o botão HTML para que o texto seja finalizado como HTML respeitando os tags deste standard, ou no painel ACTIONS ajuste a propriedade “html” do objecto do tipo TextField para “true”. Ajuste a variável do campo de texto para um valor que inclua a lguns “tags” de HTML. Por exemplo, se ajustar a variável “txt” com o valor,
txt = “<B>apenas um teste</B>”

e accionar o botão HTML, então o texto será mostrado em negrito, uma vez que o accionamento deste botão faz o Flash seguir as instruções

60

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

dadas pelo tag <B> de HTML que indica “ligar o negrito” e o tag </B> que indica “desligar o negrito”. Se quiser fazer tudo directamente por ActionScript, então use os seguintes comandos.
instName.html = true; txt = “<B>apenas um teste</B>”

Se por outro lado quiser preservar as características dos textos HTML pelo uso do nome da instância da caixa de textos, faça o seguinte: ü crie uma caixa de texto do tipo DYNAMIC ou INPUT; ü nomeie o campo VARIABLE dessa caixa na janela de propriedades como “texto”, por exemplo.

Das duas opções abaixo, faça pelo menos uma: seleccione o botão HTML para que o texto seja finalizado como HTML respeitando os tags deste padrão ou no painel ACTIONS ajuste a propriedade “html” do objecto do tipo TextField para “true”.
InstanciaUm.html = “true”;

Ajuste a variável do campo de texto, no painel ACTIONS, para um valor que inclua alguns tags de HTML. Agora, se a instância da caixa se chamar InstanciaUm, use o comando abaixo de ActionScript para fazer o Flash finalizar o texto a utilizar os tags de HTML que inseriu.
InstanciaUm.html = “<B>apenas um teste</B>”

MOSTRAR BORDA

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

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

61

Input Text Este tipo de caixa de textos é indicado para a criação de formulários. São campos que podem conter valores previamente preenchidos mas que podem ser modificados pelo utilizador. As propriedades deste tipo de caixa são as mesmas já observadas para as caixas do tipo STATIC e DYNAMIC. Porém, ainda surge um novo campo chamado MAXIMUM CHARACTERS, quando se escolhe a caixa do tipo INPUT. Neste campo poderá definir o máximo número de letras que a caixa terá a capacidade de conter. O uso desta variável é indicado para limitar a quantidade de texto que tenciona deixar que seja preenchida, pelo utilizador num formulário, por exemplo.

TIPO DE LINHA

No caso da caixa de texto do tipo INPUT ainda existe mais uma opção para esta caixa, além das descritas nas caixas de tipo DYNAMIC, que é PASSWORD. Ao colocar esta opção ligada n um formulário fará com que qualquer texto inserido seja mostrado como uma série de asteriscos, como já é de uso tradicional nos campos de password de formulários em HTML.

Oval Tool &

Rectangle Tool

Ao voltar novamente à barra de ferramentas do Flash, encontramos os dois próximos ícones a seguir ao Text Tool. São eles a oval ( OVAL TOOL) e o rectângulo (RECTANGLE TOOL), representados pelos ícones de um círculo e um quadrado... O procedimento para criação de uma forma destas é simples. Carregue com o rato num ponto na área de desenho, movimente o cursor para outro sítio e liberte o botão.

DICA

62

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

Para criar quadrados ou círculos, com as ferramentas RECTANGLE TOOL e OVAL TOOL, respectivamente, mantenha o SHIFT carregado no momento da criação.

Após desenhar a forma também poderá carregar com o rato duas vezes em cima desta e utilizar a Arrow Tool para ajustar as suas propriedades, que são iguais às descritas para o caso da linha.

DICA
Para criar quadrados ou rectângulos com os cantos arredondados, carregue duas vezes no ícone RECTANGLE TOOL antes de criar o objecto.

Porém, estas formas, como são fechadas, permitem agora que se possa escolher uma cor ou padrão de preenchimento (FILL) interno. Então, depois de criar a forma deve seleccionar a região de fill e na janela de propriedades da forma, carregar no balde de preenchimento e escolher uma cor ou gradiente. Ao carregar no balde vai ver uma janela igual à vista abaixo.

Poderá então escolher uma cor ou um padrão de gradiente, conforme poderá ver no pequeno rodapé desta janela.

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

63

Seleccione um gradiente qualquer. Verá que, no lado direito da interface do Flash, existe uma janela chamada COLOR MIXER, vista na figura abaixo6 e que contém os parâmetros relativos ao gradiente escolhido.

Na parte superior esquerda da janela tem duas caixas de selecção de cor. A primeira delas está ao lado do ícone de um lápis, a indicar que se trata da cor da linha. A segunda está ao lado do ícone do balde de preenchimento, logo, trata-se da cor de FILL 7. Ao lado da caixa de FILL pode ver outra caixa com a palavra RADIAL, correspondente ao modo RADIAL GRADIENT. Nela é possível regular o tipo de gradiente. As outras opções possíveis são: NONE, SOLID, LINEAR GRADIENT e BITMAP, correspondentes a não preencher um

6

Se a janela no seu programa não estiver com a aparência indicada carregue no pequeno triângulo

no canto inferior direito desta, para a maximizar.

7

Na barra de ferramentas também existem estes dois ícones, o balde e o lápis, e têm exactamente

a mesma função.

64

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

objecto com cor, preencher com uma única cor, colocar u degrade m vertical ou horizontal ou preencher o objecto com uma imagem, respectivamente. A seguir a este ícone pode ver outros três.

O primeiro da esquerda coloca o preto no LINE e o branco no FILL. O do meio faz com que nenhuma cor seja usada no preenchimento. Finalmente o terceiro ícone troca as cores de LINE e FILL no color mixer. Na parte à direita do color mixer poderá ver caixas nomeadas de R, G e B onde será possível regular directamente os valores das três cores básicas, ou seja, Red, Green e Blue (vermelho, verde e azul)8. Em ALPHA poderá regular a transparência que a cor criada terá. Na parte inferior da janela do color mixer pode ver dois quadrados e um rectângulo vertical. No primeiro é mostrada a cor que foi escolhida no quadrado do meio. No rectângulo vertical à direita é possível regular o nível de brilho da cor que estiver a trabalhar.

8

Deverá ler o anexo 1 para saber como funciona o sistema de cor dos computadores e também o

que é o sistema hexadecimal.

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

65

A última caixa dessa janela é a que pode ser vista com o valor #57CCA0. Este número corresponde ao valor hexadecimal da cor onde a cruz está. No caso, o valor corresponde aos níveis RGB de 87, 204 e 160, respectivamente, conforme mostrado na figura acima. Este número é extremamente útil quando se criam páginas de Internet, porque quando se faz uma página em HTML 9 é preciso referir este valor para que o browser produza a cor exacta. Na parte superior direita da janela vê o ícone ao lado de um quadrado com uma seta a apontar para baixo. Aí poderá escolher se quer traba-

9

HTML = HyperText Markup Language. É o formato no qual as páginas de Internet são escritas. Equivalem a ficheiros-texto com todos os códigos (formatações) necessários para fazer uma página de Internet aparecer nos browsers como se pretende.

66

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

lhar no formato de cor RGB 10 ou HSB11. Também poderá guardar a cor numa paleta especial chamada SWATCH, para voltar a usá-la quando quiser.

Gradientes
Outra coisa que poderá fazer com o COLOR MIXER é criar gradientes. Existem dois tipos de gradientes no Flash: linear e radial. Melhor do que explicar o que cada um significa, mostramos duas imagens que representam cada um destes dois tipos.

GRADIENTE LINEAR

10

RGB = Red, Green e Blue são as três cores básicas utilizadas em televisão e por consequência,

em computadores. Uma cor neste sistema é definida como tendo um certo valor de R, G e B. Cada uma destas cores pode variar de 0 a 255, sendo 0 a ausência da cor. O preto equivale a 0,0,0 e o branco equivale a 255, 255, 255.

11

HSB = Hue Saturation Brightness (tom, nível de cor e brilho). Neste sistema, as cores são definidas pelo seu brilho, que pode variar de 0 (negro) a 100% (brilho máximo), pelo seu nível de cor, que varia segundo a mesma escala e pelo seu tom, definido por graus de rotação, onde o ângulo 0 corresponde ao vermelho, o 120 ao verde e o 240 ao azul. Normalmente este sistema é denominado de HLS (Hue Luminance Saturation), que é o termo pelo qual normalmente é conhecido no mundo profissional.

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

67

Para perceber melhor o efeito, reduzimos o número de cores do gradiente acima para 10, e temos a imagem abaixo.

GRADIENTE RADIAL

Depois de reduzidas as cores da imagem acima para apenas 10, teremos a imagem abaixo.

68

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

Se for ao rodapé da caixa COLOR SWATCHES e escolher o gradiente preto e branco lá existente, vai ver que a janela COLOR MIXER se modifica. Se então ajustar o campo existente nesta janela para LINEAR, vai ver a seguinte janela.

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

Esta barra possui um marcador no início, com a cor branca e outro no fim com a cor preta. Se mover o rato e posicioná-lo em cima desta barra, vai ver que o cursor se modifica e surge um sinal de “+”. Isto indica a possibilidade de acrescentar um novo marcador.

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

69

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

OBSERVAÇÃO
Se a qualquer momento quiser apagar um marcador no gradiente, basta arrastá-lo para baixo.

Pode marcar quantos quiser.

Se carregar num marcador poderá regular a sua cor e brilho. Criado o gradiente com todos os marcadores pretendidos, basta aplicá-lo aos objectos com o balde de pintura - PAINT BUCKET TOOL.

OBSERVAÇÃO
A forma na qual o gradiente é aplicado varia de acordo com a região do objecto onde se carregou no acto de criação. Poderá posteriormente mudar este ponto pelo uso da ferramenta FILL TRANSFORM TOOL da barra de ferramentas.

70

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

Pencil Tool
Ao voltar à barra de ferramentas do Flash, vemos o ícone a seguir ao quadrado. É o lápis ( PENCIL TOOL). Ele permite fazer linhas à mão livre, sem a necessidade de se ter que marcar pontos. Seleccione esta ferramenta. Ao fazê-lo, notará que na parte inferior da barra de ferramentas, na área nomeada como OPTIONS, surge o ícone de selecção do modo do lápis (PENCIL MODE). Carregue neste ícone e uma segunda janela será vista. Veja a figura ao lado. Imediatamente poderá ver três novas opções: STRAIGHTEN, SMOOTH e INK, que possibilitam a criação de linhas rectas, suaves ou à mão livre. A diferença é que, apesar dos dois primeiros modos também permitirem que se desenhe à mão livre, farão uma transformação na forma final para corresponder ao modo escolhido. Digamos, por exemplo, que seleccionou o modo STRAGHTEN. Como este modo é o que produz linhas com segmentos rectos, mesmo que desenhe linhas suaves, estas serão transformadas em linhas rectas. A mesma coisa acontece no modo SMOOTH. Depois de terminar o desenho da linha, o Flash entra em acção e suaviza a linha, para que fique menos irregular. No modo INK nenhum processamento é feito e a linha fica exactamente como foi desenhada. As linhas geradas pelo modo de desenho à mão livre com o lápis são para o Flash, depois de criadas, exactamente o mesmo tipo de objecto que uma linha comum. Logo, também possuem uma janela de propriedades, na parte central inferior do ecrã, com os mesmos parâmetros das linhas comuns; parâmetros estes descritos anteriormente.

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

71

Brush Tool
Ao lado do lápis, vemos na barra de ferramentas do Flash um pincel (BRUSH TOOL). A função do pincel é a mesma do lápis, ou seja, desenhar à mão livre. Porém, produz linhas de diâmetro largo. Assim como o lápis, uma vez seleccionado, o pincel faz aparecer uma janela de OPTIONS, na parte inferior da barra de ferramentas, que pode ser vista na figura ao lado. O primeiro ícone de cima é o BRUSH MODE e fornece-nos diferentes modos para o pincel: PAINT NORMAL, PAINT FILLS, PAINT BEHIND, PAINT SELECTION e PAINT INSIDE. Estes modos permitem os tipos de pintura a seguir. PAINT NORMAL – Este é o modo normal de pintura. À medida em que desloca o pincel, ele vai pintar todas as regiões por onde passar com a cor seleccionada. PAINT FILLS – Este modo de pintura apenas irá colorir as regiões de fill de um objecto e deixará as suas linhas intactas. PAINT BEHIND – Se for seleccionado faz com que o brush apenas desenhe por detrás dos objectos. PAINT SELECTION – Apenas pinta as regiões de fill dos objectos que estejam seleccionados. PAINT INSIDE – Apenas pinta as regiões de fill que sejam as mesmas correspondentes ao primeiro ponto onde o brush tocou. Isso quer dizer que, se o brush tiver começado a pintar, por exemplo, na área de fill de um círculo, não poderá pintar nada que esteja fora desta área. Na figura seguinte poderá ver os cinco exemplos de modos de brush e o tipo de efeitos que causam. Em todos os casos, pintamos uma linha vertical, de cima para baixo.

72

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

Repare que no primeiro caso tanto as linhas como o fill da figura foram afectados. Já no segundo caso, apenas as regiões de fill foram afectadas. No terceiro, ele fez a pintura por trás do objecto sem o afectar. No quarto, apenas a região de fill do objecto foi afectada. No último, o objecto não foi afectado em nenhum aspecto. Isto explica-se pelo facto de que iniciamos a pintura na parte externa do objecto. Então, apenas poderíamos pintar nesta região.

OBSERVAÇÃO
Um objecto geralmente é formado pela sua linha exterior (LINE) e sua região de preenchimento de cor (FILL). Se escolher a ferramenta de selecção de objectos (ARROW TOOL) e carregar duas vezes na linha exterior deste objecto, seleccionará apenas esta linha. Se por outro lado carregar duas vezes no FILL, seleccionará ambas as partes do objecto, LINE e FILL.

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

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

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

12

É um equipamento composto por uma mesa de desenho e uma caneta especial (geralmente sem

fio), no qual pode desenhar ou comandar o sistema e os seus programas. Os mais modernos são capazes de responder a 1024 ou mais níveis de pressão ou inclinação da caneta. Modelos sofisticados inclusive correspondem a verdadeiros monitores de computador, do tipo plano, que são colocados sobre a mesa, na horizontal, como uma prancha de desenho, e ainda por cima são sensíveis à pressão. Visite o site do melhor e principal fabricante de tablets , a Wacom (www.wacom.com).

74

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

Na barra de OPTIONS pode ver logo a seguir ao ícone USE PRESSURE duas caixas de selecção, sendo a primeira nomeada BRUSH SIZE e a segunda BRUSH SHAPE. Nelas pode ajustar o tamanho e a forma do pincel, respectivamente. Veja a figura abaixo.

O cadeado na parte debaixo da janela de options representa o LOCK FILL, a ser visto mais adiante.

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

75

Free Transform Tool
De volta à barra de ferramentas, temos o ícone a seguir ao BRUSH. É o FREE TRANSFORM TOOL. Esta ferramenta permite ajustar ou transformar a largura, altura ou rotação do objecto e também distorcê-lo em ambas as direcções. Construa um objecto qualquer e com o rato carregue duas vezes na região de fill deste para o seleccionar. Na barra de ferramentas carregue no ícone do FREE TRANSFORM TOOL e vai ver que um quadrado com diversos pontos aparece à volta do objecto. Aproxime o cursor do rato de cada um destes pontos e vai ver que este se transforma em diversos símbolos para representar as diversas operações que pode realizar, nomeadamente, ajuste da largura, ajuste da altura, rotação, distorção horizontal e distorção vertical. Veja na figura abaixo os símbolos existentes.

76

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

Para realizar uma destas funções basta clicar quando o ícone desejado surgir e mover o rato para a direcção ou direcções que o ícone indicar.

OBSERVAÇÃO
No modo normal o FREE TRANSFORM TOOL utiliza o canto esquerdo inferior da selecção como o centro para as transformações. Se mantiver o ALT carregado durante o processo, passa a ser considerado o centro real da selecção. Com o SHIFT carregado, a escala é feita mantendo-se as proporções. Se utilizar o CONTROL e arrastar um dos cantos da selecção, poderá distorcer o objecto!

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

ENVELOPE
A função ENVELOPE serve para distorcer um determinado objecto e moldá-lo à forma pretendida, de forma suave. Se seleccionar um

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

77

objecto e escolher esta função, vai ver que diversos pontos surgem à volta da selecção, como na figura abaixo.

Estes pontos que surgem estão divididos em duas categorias: os que formam o envelope em si (pontos quadrados) e aqueles que servem para ajustar a curvatura (pontos redondos). Um ponto do envelope possui dois pontos de curvatura. Na figura abaixo mudamos de lugar alguns dos pontos vistos acima e ajustamos as suas curvaturas, para que perceba melhor o efeito.

78

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

Uma vez que termine a distorção por envelope, e saia do modo de edição, perde o envelope que acabou de fazer. Ao retornar novamente ao modo de envelope, verá que a selecção volta a ficar direita.

SUBTRACÇÃO DE FORMAS
Pela utilização de algumas regras simples poderá combinar ou subtrair formas para criar outras novas. Por exemplo, se quer fazer um furo num

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

79

determinado objecto, crie a forma correspondente ao furo no mesmo layer, exactamente na região que quer furar; tendo o cuidado de criar este novo objecto com uma cor diferente da utilizada no primeiro. Então, seleccione esta segunda forma e elimine-a. Se quer por exemplo fazer um furo num círculo, desenhe o objecto correspondente ao furo na posição desejada, seleccione-o e apague-o.
outro objecto desenhado por cima para ser o furo...

Objecto original

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

80

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

UNIÃO DE FORMAS
Para fazer uma união de duas ou mais formas, o princípio é exactamente o mesmo descrito na secção anterior sobre SUBTRACÇÃO DE FORMAS. Porém, deve desenhar os objectos com a mesma cor do objecto original. Assim, se tem um objecto original azul com a borda cinza deve utilizar objectos com estas mesmas cores ao criar as novas formas. Veja o exemplo abaixo. Primeiro desenhamos o objecto visto na figura abaixo.

Para melhor unir os objectos que serão desenhados em seguida, utilizamos a Arrow Tool para seleccionar a linha de borda do objecto, que é apagada em seguida. Assim, ficamos apenas com o rectângulo interno.

Desenharemos agora por cima deste rectângulo, algumas outras formas, até obter o resultado seguinte.

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

81

Seleccione com o Arrow Tool e elimine todas as linhas de borda das formas que desenhou por cima da original. Obterá então o resultado abaixo.

Para voltar a ter a linha de borda, nesta altura, que corresponda ao contorno do objecto como um todo, seleccione o INK BOTTLE TOOL e carregue com o rato na região da borda do objecto. Assim, obterá o objecto da próxima página.

82

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

Fill Transform Tool
O próximo ícone na barra de ferramentas é o FILL TRANSFORM TOOL, que permite a transformação do gradiente utilizado no preenchimento de cor de um determinado objecto. Crie um objecto e preencha-o com um gradiente. Seleccione a função FREE TRANSFORM TOOL e carregue na região de fill do objecto. Um círculo aparecerá à volta do objecto, tendo como centro a região central do gradiente. Este círculo possui quatro elementos: um quadrado e três pequenas bolas, que realizam as funções indicadas na figura abaixo.

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

83

Ink Bottle Tool &

Paint Bucket Tool

Os dois próximos ícones na barra de ferramentas são o INK BOTTLE TOOL e o PAINT BUCKET TOOL. Com o INK BOTTLE TOOL, cujo ícone é um tinteiro, é possível colorir as linhas de contorno das formas. Para tal, seleccione-o, ajuste os parâmetros nas propriedades visíveis na parte central inferior do ecrã13 e aplique o tinteiro sobre a linha a colorir. Já o PAINT BUCKET TOOL, cujo ícone é um balde, permite mudar a cor de preenchimento de um objecto. No caso de ter sido escolhido um gradiente para preenchimento, o ponto onde carregar com o balde no objecto determinará o início do gradiente. Na figura abaixo veja quatro figuras criadas com o mesmo gradiente onde apenas se variou o ponto inicial 14.

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

13

Que são as mesmas já descritas anteriormente para as linhas, no início deste capítulo.

14

Ponto onde se carregou com o rato dentro do objecto para criar o gradiente.

84

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

Estas opções causam os seguintes efeitos. DON´T CLOSE GAPS – Se por acaso a forma que estiver a preencher tiver alguma falha ou buraco intencional na área de FILL e escolher esta opção, então o preenchimento de cor ou gradiente é feito e deixa intactas tanto falhas como áreas de furo. CLOSE SMALL GAPS – Esta função preenche as áreas de FILL de objectos mas preenche também as áreas com falhas ou buracos intencionais. Serve para corrigir áreas de fill que por acaso estejam com problemas. Só consegue corrigir as áreas de pequena dimensão. CLOSE MEDIUM GAPS – Esta função é igual à anterior mas consegue corrigir áreas com falhas e furos de médio tamanho. CLOSE LARGE GAPS – Esta função é igual à anterior mas consegue corrigir áreas com falhas e furos de grande tamanho.

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

85

OBSERVAÇÃO
Nesta altura devemos falar do cadeado que se encontra na parte inferior esquerda da j nela OPTIONS na barra de ferramentas. Esta ferramenta é o a LOCK FILL e é bastante útil quando estamos a lidar com gradientes. Se olhar para a figura anterior vai ver que um objecto colorido com um gradiente pelo balde de pintura muda de aparência consoante o ponto onde o balde tocou no momento da criação do gradiente. Com a função LOCK FILL ligada, o Flash passa a considerar toda a área de desenho como área de preenchimento para o gradiente, em vez de considerar cada objecto em particular. Logo, o objecto será preenchido com a cor que lhe couber conforme a sua posição horizontal e vertical. Veja as figuras abaixo.
LOCK FILL DESLIGADO

LOCK FILL LIGADO

Repare que na primeira imagem o mesmo gradiente é aplicado a cada objecto. Na segunda imagem, cada figura leva a cor do gradiente a que corresponde, consoante a sua posição horizontal.

86

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

Eyedropper Tool
O EYEDROPPER TOOL, cujo ícone é uma pipeta, é o próximo ícone da barra de ferramentas, cuja função é permitir capturar a cor ou gradiente de preenchimento de um determinado objecto. Basta seleccioná-lo e carregar na área de fill de um objecto para fazer a captura.

Eraser Tool
O ERASER TOOL é o próximo ícone na barra de ferramentas. Com ele é possível apagar regiões dos objectos, sejam linhas ou áreas de preenchimento. Uma vez seleccionada esta ferramenta, surgirão parâmetros na janela de options da barra de ferramentas, conforme a figura abaixo.

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

87

No ERASE MODE, pode ver que existem diversos modos. São eles: ERASE NORMAL – Este é o modo normal. À medida em que desloca o pincel, ele vai apagar todas as regiões por onde passar. ERASE FILLS – Neste modo somente as áreas de fill são apagadas. As linhas de contorno são deixadas intactas. ERASE LINES – Este é exactamente o inverso do anterior, ou seja, as linhas de contorno são apagadas e as áreas de fill são deixadas intactas. ERASE SELECTED FILLS – Apenas apaga as regiões de fill dos objectos que estejam seleccionados. ERASE INSIDE – Apenas apaga as regiões de fill que sejam as mesmas correspondentes ao ponto onde o ERASER TOOL tocou pela primeira vez. Isso quer dizer que, se tiver começado a apagar, por exemplo, na área de fill de um círculo, não poderá apagar nada que não corresponda a esta área. Outra janela que se desdobra do OPTIONS é a ERASER SHAPE. Nela poderá escolher a forma da borracha, redonda ou quadrada, em diversos tamanhos. Também está presente o ícone de uma torneira ( FAUCET). Com ele poderá apagar de uma vez, ou linhas ou áreas de fill. Seleccione-o e experimente carregar numa área destas. De uma vez só a área seleccionada desaparece.

DICA
Se quer apagar todos os objectos da área de desenho de uma só vez, carregue duas vezes no ícone do ERASER TOOL.

88

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

Hand Tool
Podemos usar o HAND TOOL para mover a área de desenho. Carregue neste ícone e em seguida arraste a área de desenho com o rato.

Zoom Tool
O ZOOM TOOL permite fazer zoom, ou seja, tornar maior ou menor a área de trabalho e permitir a visualização de elementos diminutos. Assim que é seleccionado, mostra na janela de options da barra de ferramenta duas opções: ENLARGE e REDUCE. Com elas é possível fazer o aumento ou redução do desenho, respectivamente. Não deve confundir esta função com aquela para aumentar os objectos de facto. O ZOOM TOOL apenas aumenta e diminui no ecrã, para facilitar a visualização dos objectos, e não modifica o tamanho dos objectos. A sua utilização é simples. Basta escolher uma das duas opções mencionadas no parágrafo anterior e carregar na área de desenho. Veja a figura abaixo.

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

89

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

Nesta janela encontrará várias cores em pequenos quadrados. São cores pré-ajustadas, prontas a utilizar. Poderá acrescentar as s uas próprias cores (ou swatches) a esta janela, para tê-las prontas a usar. Para acrescentar uma cor à janela de swatches basta criar a cor no COLOR MIXER e depois escolher a opção ADD WATCH no menu disponível no ícone superior direito desta janela. Caso acrescente um swatch pelo COLOR MIXER, verá surgir um novo quadrado com a sua cor na janela COLOR SWATCHES. Gradientes também poderão ser adicionados aos swatches, como pode ver pelos ícones na parte debaixo da janela. Se carregar no ícone no canto superior

90

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

direito da janela verá surgir um menu com algumas funções, as quais explicamos a seguir. DUPLICATE SWATCH – poderá duplicar um swatch seleccionado se utilizar esta função. DELETE SWATCH – poderá eliminar o swatch seleccionado. ADD COLORS – Interessante esta função... com ela poderá acrescentar à janela de swatches cores que venham de tabelas de cores ou de imagens indexadas como GIF´s. É excelente se precisar trabalhar numa animação que deva ter cores precisamente escolhidas. REPLACE COLORS – importa cores para o swatch que venham de tabelas de cores ou de imagens indexadas como GIF´s, exactamente como a função anterior, porém, a anterior acrescenta as cores importadas à janela de swatches, enquanto que esta substitui as que lá estavam pelas que estão a ser importadas. LOAD DEFAULT COLORS – Faz a janela de swatches voltar ao estado normal ajustado de fábrica. Porém as cores “default” podem ser mudadas pelo utilizador como veremos a seguir... SAVE COLORS – grava num ficheiro as cores que estão na janela de swatches. Pode mais tarde recuperá-las através das opções ADD COLORS ou REPLACE COLORS. SAVE AS DEFAULT – faz o mesmo, porém as cores gravadas passam a ser as cores “de fábrica”, o que modifica a função LOAD DEFAULT COLORS, que a partir do uso desta função passa a chamar às cores gravadas cores “default”. CLEAR COLORS – elimina todas as cores dos swatches. WEB 216 – Ajusta os swatches para as famosas 216 cores da Web Safe Palete. Veja o Anexo 2. SORT BY COLOR – Ordena os swatches pelas cores.

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

91

HELP, MAXIMIZE PANEL e CLOSE PANEL são as três últimas opções do menu que servem para trazer o help na secção correspondente, maximizar e fechar a janela de SWATCHES, respectivamente.

92

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

I.2. OS MENUS

Neste capítulo vamos falar das principais opções dos menus no Flash MX, não abordando porém aqueles comandos óbvios inerentes a basicamente todos os programas que correm no Windows ou Mac, uma vez que estes seguem standards comuns a praticamente todos os outros programas próprios destes sistemas operativos; estamo-nos a referir a comandos como FILE OPEN, FILE SAVE, etc.

Os Menus e suas funções

FILE
O primeiro menu que se vê do lado esquerdo na parte superior, é o FILE e nele encontramos algumas opções importantes, sobre as quais devemos falar.

New From Template A primeira função deste menu que nos chama a atenção é a NEW FROM TEMPLATE. Ao carregar nela verá a janela a seguir.

94

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

Os templates são formatos padronizados para facilitar a sua criação. Pode ver na coluna da esquerda que a Macromedia dividiu os templates por categorias: ads, broadcast, menus, mobile devices, photo slide show, presentation e quiz, que correspondem respectivamente a formatos para a criação de anúncios ao estilo dos presentes em páginas de Internet (banners), para desenvolvimento de material para televisão e vídeo, para a criação de páginas com menus, para a criação de páginas para dispositivos móveis, para a criação de slideshows1, para apresentações comerciais e para questionários. Um dos templates que poderá escolher é o BROADCAST (veja a figura seguinte), que já fornece a moldura a servir como guia para a produção de vídeo.

1

Criação de páginas que mostram imagens em sequências ao estilo de um projector de slides.

I.2. OS MENUS

95

NOTA
A área de trabalho para vídeo ou televisão, ou seja, o tamanho do frame, é, em PAL, 720 x 576 pixéis e em NTSC, 720 x 486 pixéis. Porém, quando se está a criar para estes formatos, não se pode considerar toda a área disponível na imagem para a composição dos elementos. Isto porque a imagem que se vê nos televisores está ampliada ligeiramente em relação ao que é transmitido. Assim , se um objecto estiver muito perto da borda, não será visto. Na imagem acima pode ver um rectângulo maior que diz WORK AREA, mas que indica 720 x 540. Este formato indicado equivale a ao formato NTSC com pixel quadrado. Na prática, deve criar em 720 x 486 que é o formato mais utilizado. Dentro deste rectângulo vê outro que diz ACTION SAFE que representa a área onde deve colocar os objectos e movimento da sua animação. Na verdade, deve fazer a animação ocupar toda a WORK AREA, mas deve ter em mente que qualquer coisa fora da ACTION SAFE corre o risco de não ser vista. Finalmente, vê um terceiro rectângulo que diz TITLE SAFE. Esta área menor representa o local onde deve colocar textos e tudo o que precise ser visto ou lido, como logótipos, etc.

Deve explorar outros templates existentes, como o PhotoSlideShow para a criação de projecções de imagens sequenciais e os da categoria QUIZ, para a criação de questionários e sondagens.

96

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

Todos os templates vêm acompanhados de um layer com as instruções para que entenda o funcionamento do referido template e o saiba usar. Este layer pode ser apagado sem afectar o funcionamento do template. Open As Library A seguir, no menu FILE, pode ver a opção OPEN AS LIBRARY. Deve utilizá-la sempre que pretender abrir uma animação ou objectos que tenha previamente criado, para importar para o trabalho que estiver a criar. Com esta opção, o Flash importa o ficheiro aberto para a biblioteca e de lá poderá trazer aquilo que lhe interessar para o trabalho actual.

NOTA
A biblioteca do Flash é uma área onde estão armazenados todos os símbolos (objectos) criados, além dos ficheiros que forem importados, como imagens, sons, vídeos e artes vectoriais.

Vista a janela poderá arrastar os objectos lá existentes para a área de trabalho. Inclusive no Flash é conveniente fazer sempre o menor número possível de objectos e sempre que possível aproveitar os que já tenha criado para diferentes partes da mesma animação. Se, por exemplo, pretende colocar três rectângulos, um de cada cor, crie apenas um e da biblioteca arraste-o para a sua área de desenho e mude a cor de cada um. Desta forma, na animação final o Flash armazenará apenas um símbolo, o que tornará o ficheiro menor. Cada trabalho que criar possui automaticamente a sua própria biblioteca, mas, enquanto estiver a criar pode ter mais de uma biblioteca aberta, se usar o comando OPEN AS LIBRARY. Por outro lado, o comando IMPORT TO LIBRARY traz todos os objectos da animação que está a importar para a biblioteca do trabalho que está a realizar.

I.2. OS MENUS
Import & Export Movie

97

Estes comandos do menu FILE importam ou exportam a sua animação de e para determinados formatos de ficheiro. Pode importar ou exportar formatos de filme tradicionais como AVI e MOV, ficheiros de som, imagens, sequências de imagens ou artes vectoriais (FreeHand, Illustrator, etc.), etc. Esta função é bastante útil quando se está a utilizar o Flash em conjunto com algum software de edição de vídeo como o Adobe Premiere ou de efeitos visuais como o Combustion ou o After Effects.

QUICKTIME

Por exemplo, se tiver que importar filmes QuickTime para as suas animações Flash, primeiro deve certificar-se que tem instalado no seu computador o QuickTime Player. Caso contrário será impossível ao Flash importar filmes neste formato. Para fazer download do Player QuickTime deve ir ao site da Apple (www.apple.com) e carregar no link correspondente (visto logo na primeira página). Logo em seguida deve ir ao menu FILE > IMPORT e carregar no ficheiro QuickTime (extensão MOV) para o poder importar. Surgirá a janela abaixo.

Esta janela contém duas perguntas: a primeira diz EMBED VIDEO IN MACROMEDIA FLASH DOCUMENT . Se escolher esta opção, o filme

98

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

importado será colocado no interior do ficheiro final da sua animação Flash. A segunda hipótese diz LINK TO EXTERNAL VIDEO FILE e faz com que o Flash não acrescente o filme QuickTime ao ficheiro final da animação. De facto, esta opção apenas faz uma ligação (link) entre o filme Flash final e o filme QuickTime. Porém, para que o vídeo seja visível, é preciso que exporte a animação final no formato QuickTime. Caso escolha a primeira hipótese verá surgir a seguinte janela.

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

I.2. OS MENUS

99

A caixa que diz SYNCHRONIZE VIDEO TO MACROMEDIA FLASH DOCUMENT FRAME RATE sincroniza ou não o vídeo importado à taxa de frames por segundo (frame rate) da animação Flash onde está a ser importado. Logo abaixo uma outra caixa permite a justar o número de frames de vídeo a ser codificados por frames da animação Flash (NUMBER OF VIDEO FRAMES TO ENCODE PER NUMBER OF MACROMEDIA FLASH FRAMES). Geralmente, assim que carregar em OK na janela anterior e iniciar o processo de importação do filme, verá a seguinte janela.

Nela, o Flash está a perguntar se deseja aumentar a quantidade de frames no seu timeline para o tamanho correspondente à quantidade de frames do filme após a conversão. Neste caso, 102 frames .

FREEHAND

Mas se for importar um ficheiro FreeHand, deverá ir ao mesmo menu FILE > IMPORT e seleccionar o ficheiro em formato FreeHand que deseja importar. Vai ver então a seguinte janela.

100

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

A primeira secção da janela corresponde à função de MAPPING e irá informar o Flash de que maneira pretende que a importação do ficheiro seja feita. Em PAGES tem duas opções: SCENES e KEY FRAMES. Na primeira poderá definir se quer que as páginas d seu trabalho no o FreeHand sejam transformadas em cenas ou keyframes quando for importada. Na opção LAYERS, poderá definir como quer que os layers do FreeHand sejam importados. A primeira opção é LAYERS. Se a escolher, os layers do FreeHand são importados como layers no Flash. Se escolher a opção KEYFRAMES os layers do FreeHand são importados cada qual num frame na animação Flash, para o caso de se tratar de uma animação onde cada frame foi desenhado como sendo um layer no FreeHand. A terceira hipótese é FLATTEN. Neste caso, todos os layers do FreeHand são combinados e apenas um layer correspondente é criado no Flash. Na secção PAGES da janela poderá definir que páginas do ficheiro FreeHand pretende importar, todas (ALL) ou um número definido de páginas, se utilizar os campos FROM e TO.

I.2. OS MENUS
Na secção OPTIONS verá três quadros:

101

INCLUDE INVISIBLE LAYERS, INCLUDE BACKGROUND LAYER e MAINTAIN TEXT BOXES. No primeiro poderá definir se quer ou não importar os layers invisíveis que porventura possam existir no documento FreeHand importado. Na segunda opção, poderá definir se quer importar o layer de background da arte no FreeHand. Na última opção, indicará ao Flash se quer manter os textos criados no FreeHand ainda editáveis no Flash. Publish Settings Do menu FILE esta opção é a mais importante, no que diz respeito à produção das animações em Flash. É nela que deverá ajustar todos os parâmetros que devem ser seguidos para a criação dos ficheiros finais correspondentes ao trabalho que criar. Quando a seleccionar vai ver a janela abaixo.

Vai ver que a janela acima possui três subdivisões, nomeadamente FORMATS, FLASH e HTML.

102

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

Porém, se marcar todos os quadros disponíveis nesta janela, verá aumentar o número de subdivisões.

Porém, de todas estas subdivisões, as mais importantes são as três primeiras, as quais falaremos a seguir.

OPÇÃO FORMATS – JANELA PUBLISHING

Nesta primeira divisão, deverá marcar os formatos que pretende produzir. Por defeito, o Flash produz sempre o filme final em SWF e também a página HTML com os comandos para chamar o filme. Deverá notar que enquanto está a trabalhar na sua animação em Flash o ficheiro é guardado no disco no formato FLA. Quando finaliza a animação e a publica, o ficheiro tem o formato SWF. É exactamente este formato o que é visualizado pelo Flash Player directamente no browser. Além disso, pode pedir a produção de uma imagem GIF, JPEG ou PNG equivalente ao primeiro frame do seu filme.

I.2. OS MENUS

103

Existem também disponíveis dois formatos especiais chamados WINDOWS PROJECTOR e MACINTOSH PROJECTOR nos quais o seu trabalho é colocado no interior de um programa, no formato de PC ou MAC. Desta forma, os seus trabalhos podem ser distribuídos e vistos em máquinas que não possuam o Flash Player, ou colocados em CDROM e DVD.

OPÇÃO FLASH – JANELA PUBLISHING

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

VERSION – nesta caixa pode escolher qual a versão de filme Flash que pretende gerar. Se marcar uma versão anterior à 6 (Flash MX), muitas das funções no programa serão desligadas e não as poderá utilizar, uma vez que não seriam possíveis de visualizar numa versão antiga.

104

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

GENERAT E SIZE REPORT – quando marcada esta opção é gerado um ficheiro de texto no mesmo directório onde estiver a gravar o seu trabalho, com um resumo de tudo o que foi gerado durante a criação do filme (publishing). PROTECT FROM IMPORT - Marque esta opção se quiser impedir que outros importem os seus filmes para utilizar nos seus trabalhos. OMIT TRACE ACTIONS – Esta opção funciona em conjunto com a anterior. Se a ligar impedirá que as operações de trace (veja nota de rodapé) sejam mostradas na janela de saída (OUTPUT). DEBUGGING PERMITTED – Se ligar esta opção estará a permitir que um filme seu possa ser “debugged2” remotamente. Poderá usar esta opção com a de PASSWORD, para proteger o seu trabalho. COMPRESS MOVIE – Esta opção apenas está disponível no Flash MX. Quando ligada faz com que uma compressão seja aplicada ao filme, no intuito de diminuir o tamanho final do ficheiro. Use esta opção se tiver muita quantidade de texto ou ActionScript. Se a ligar o filme só poderá ser visto por aqueles que possuírem o Flash 6 Player instalado. PASSWORD – coloque uma password nesta caixa para permitir que os seus filmes possam ser depurados ou importados por outras pessoas. JPEG QUALITY - caixa para estabelecer o nível de compressão das imagens finais. Por defeito, todas as imagens importadas para dentro de um filme no Flash são exportadas em JPEG e tudo o que é ouvido, em MP3. Quanto maior a compressão menor o tamanho do ficheiro e pior a qualidade da imagem.
2

BUG em informática é um erro que um software ou hardware possa ter. Debugging é a operação

para detectar e eliminar esses bugs. Geralmente o que se faz nesta etapa é estabelecer pontos de paragem na animação (BREAK POINTS) para verificar se até aquela etapa está tudo em ordem. Também são utilizados artifícios especiais (TRACES) para enviar informações a uma janela especial (OUTPUT). Estes TRACES ajudam a verificar e acompanhar o estado de variáveis do filme. Ao fazer um TRACE de uma variável X, por exemplo, o FLASH estará a enviar durante todo o tempo do debugging os valores que esta variável X assume durante todas as etapas da animação. Então, pode-se verificar se o programa (ActionScript) está correctamente escrito.

I.2. OS MENUS

105

AUDIO STREAM MP3, 16 Kbps, Mono – Se carregar no botão SET poderá ajustar de que forma deseja gerar as “streams” de áudio. AUDIO EVENT MP3, 16 Kbps, Mono – Se carregar no botão SET poderá ajustar de que forma deseja gerar os “eventos” de áudio.

OPÇÃO HTML – JANELA PUBLISHING

Nesta janela, poderá regular as opções do ficheiro HTML a ser gerado para suportar o filme em Flash que está a publicar.

No campo TEMPLATE poderá escolher um formato para publicar o seu filme, como por exemplo, um formato e alinhamento específico para algum tipo de PocketPC. A escolha por defeito é Flash ONLY.

106

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

Logo a seguir vê o campo DIMENSIONS onde pode regular o tamanho do filme, caso pretenda publicar um filme menor do que o tamanho que criou 3. A próxima secção da janela é a PLAYBACK e possui quatro opções: PAUSED AT START, DISPLAY MENU, LOOP e DEVICE FONT. A página HTML que tiver a opção PAUSED AT START marcada irá carregar o filme Flash correspondente mas não o irá executar. O utilizador deverá carregar com o botão da direita do rato sobre a animação e escolher PLAY (figura ao lado), ou criar um botão no filme para executar esta função. DISPLAY MENU indica se deve ou não ser mostrado o menu que surge quando o botão da direita do rato é carregado em cima de uma animação. Veja a figura ao lado. LOOP – indica se o filme deve ser repetido quando chegar ao fim (caso não possua instrução no próprio filme para parar ou fazer outra coisa). DEVICE FONT – Por defeito, o Flash armazena dentro da própria animação todos os tipos de letra que estiverem a ser utilizados. Se marcar esta opção, o Flash passa a não embeber as letras dentro da animação. O problema é que se estiver a utilizar na sua animação um tipo de letra que não exista na máquina do utilizador, o Flash será obrigado a escolher um tipo qualquer de letra, das disponíveis no sistema onde estiver a correr, para colocar no lugar da letra original. Esta opção não é aconselhável de se usar pois pode destruir o visual de
3

Como os filmes em Flash são ficheiros vectoriaisl, estes não possuem um tamanho específico e

podem ser desenhados a qualquer escala. Logicamente, quanto maior o filme, mais a máquina estará a trabalhar, para conseguir manter o filme em PLAY na velocidade correcta. Então, como não é possível delimitar o tamanho do filme pelo próprio filme em si, é preciso delimitá-lo pelo HTML de onde será executado.

I.2. OS MENUS

107

uma animação, caso a letra seja muito diferente da original. Só a use caso tenha a certeza absoluta de que isto não vai acontecer. A vantagem é a diminuição do tamanho final do ficheiro SWF. A próxima opção relevante na janela é a que diz QUALITY. As seguintes opções estão disponíveis: LOW, AUTO LOW, AUTO HIGH, MEDIUM e HIGH. A diferença entre elas é o anti-aliasing: low não faz antialiasing; medium não faz apenas no texto; high faz em todas as formas. LOW – esta opção faz com que o filme seja carregado em baixa qualidade, ideal para serem vistos em máquinas lentas. AUTO LOW – esta opção faz o filme carregar inicialmente em baixa qualidade e passar à média ou alta qualidade consoante o potencial da máquina onde estiver a ser executado. AUTO HIGH – este comando é idêntico ao anterior, porém o filme é carregado inicialmente a alta qualidade que será reduzida caso veja que a máquina não é capaz de visualizar o filme à qualidade indicada. MEDIUM – o filme é executado em média qualidade independente da máquina. Se esta for muito lenta o filme pode não conseguir ser mostrado como pretendido. HIGH – Idêntica à anterior, porém o filme é executado em alta qualidade. Publish Esta é a próxima opção do menu FILE. Uma vez ajustados os parâmetros que pretende na opção PUBLISH SETTINGS, é hora de carregar nesta opção e fazer com que o Flash crie os ficheiros. É aconselhável antes de fazer PUBLISH gravar o ficheiro de trabalho em alguma directoria, pois, caso contrário, o Flash irá “publicar” o seu ficheiro numa directoria interna do próprio programa.

108 VIEW

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

No menu VIEW vai encontrar alguns comandos interessantes, dos quais destacamos os mais relevantes. GoTo No caso de haver mais de uma cena na sua animação Flash, esta função irá permitir que se desloque directamente para a cena desejada. As opções que irá encontrar neste menu são, além dos nomes das cenas que tiver criado, FIRST, PREVIOUS, NEXT e LAST, que lhe permitirão ir para a primeira cena, cena anterior, cena posterior e última cena respectivamente. Zoom In, Zoom Out e Magnification As duas primeiras funções são óbvias e permitem que possa aumentar o nível de zoom da área de trabalho, o que em outras palavras corresponderia a ver os objectos mais de perto para poder trabalhar detalhes muito pequenos ou diminuir este nível respectivamente. MAGNIFICATION permite regular directamente o nível de zoom adequado mediante a escolha de um dos valores oferecidos. As duas últimas funções do submenu MAGNIFICATION porém, oferecem as possibilidades de SHOW FRAME e SHOW ALL. Estas duas equivalem a ajustar o nível de proximidade no ecrã para que toda a área de trabalho esteja visível e ajustar este mesmo nível para que toda a área circundante à área de trabalho esteja visível também - logicamente se existir algum objecto que seja maior que a área de desenho ou que esteja fora desta. Outlines, Fast, Antialias, Antialias Text Estas quatro funções são responsáveis por mostrar os objectos com qualidade inferior no ecrã com o propósito de aumentar a velocidade de operação para o caso de estar a lidar com animações complexas (veremos 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 qualidade; ANTIALIAS mostra os objectos com qualidade óptima mas mantém todo o texto em baixa qualidade; ANTIALIAS TEXT é a maior qualidade. Tudo é mostrado em alta qualidade. RULERS, GRID e GUIDES Estas três funções equivalem a três funcionalidades importantes do Flash. RULERS (réguas) – Por defeito, as réguas horizontal e vertical estão visíveis no ecrã. Estas réguas ajudam a que tenha uma ideia do tamanho do objecto que estiver a criar. Veja a figura abaixo.

GRID (grelha) – O grid é um auxiliar de desenho no qual é activada uma grelha sobre a área de desenho para lhe ajudar a criar os objectos enquanto os estiver a desenhar. Dentro deste submenu vai encontrar três outras funções: VIEW GRID, SNAP TO GRID e EDIT GRID. Se accionar o VIEW GRID, vai ver que a sua área de desenho fica com uma grelha como vista na figura abaixo.

110

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

Se accionar a função SNAP TO GRID, então à medida em que deslocar o rato somente poderá criar pontos que estejam contidos nas intersecções das linhas do grid. Mesmo que esteja a desenhar à mão livre, o Flash estará a interpretar o seu desenho segundo estes pontos do grid. Veja a figura abaixo.

Repare como todos os pontos formadores dos objectos (vértices) estão localizados nos pontos do grid. Se escolher a opção EDIT GRID vai ver a janela abaixo onde poderá ajustar as propriedades do grid.

I.2. OS MENUS

111

Na primeira caixa, logicamente, poderá escolher a cor do grid. Logo em seguida pode ver duas caixas: SHOW GRID e SNAP TO GRID, as quais acabamos de descrever. Nas duas caixas seguintes, poderá ajustar a distância entre as linhas horizontais e verticais do grid. Por defeito, estes campos são ajustados em 18 pixéis. O último campo, denominado de SNAP ACCURACY, permite ajustar o grau de precisão do acto de colar os pontos ao grid. As opções são da maior precisão para a menor: MUST BE CLOSE, NORMAL, CAN BE DISTANT e ALWAYS SNAP. GUIDES (guias) – Os guias são outro auxiliar de desenho que correspondem a linhas horizontais e verticais mostradas por cima da área de desenho e que o ajudam a se orientar enquanto desenha. Para criar um guia carregue com o botão da direita do rato em cima de uma das réguas, mantenha o botão carregado e mova o rato para a área de desenho. Depois de criado um guia poderá mudá-lo para outra posição clicando em cima do guia e arrastando-o para outro sítio. No menu VIEW > GUIDES, vai encontrar quatro opções: SHOW GUIDES, LOCK GUIDES, SNAP TO GUIDES e EDIT GUIDES. Na primeira opção pode tornar os guias visíveis ou não. Na segunda pode colocar travados os layers para que não possam ser movidos para outro sítio. Na terceira opção pode fazer com que os guias possam ter funcionalidade semelhante à do grid, ou seja, qualquer ponto clicado nas imediações do grid seriam colados a este. A última opção permite que ajuste a cor do guia e parâmetros semelhantes aos que ajustou no grid.

112 MODIFY

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

O menu MODIFY do Flash MX fornece-nos diversas ferramentas para manipular e transformar os objectos (SHAPES). Enc ontraremos ferramentas para suavização, simplificação, conversão de imagens para vectores e muito mais. Vamos a elas. Shape - Soften Fill Edges Este comando chamado SOFTEN FILL EDGES é muito importante para criar suavizações nos contornos das formas. Uma das maiores utilidades para ele é a criação de sombras para objectos. Crie então uma forma qualquer, por exemplo, um círculo no meio da área de desenho, e carregue duas vezes na sua área interna para o seleccionar. Vá ao menu MODIFY > SHAPE > SOFTEN FILL EDGES. Surgirá então a janela a seguir.

No campo DISTANCE poderá regular o tamanho da suavização, em NUMBER OF STEPS a quantidade de níveis que esta suavização terá e em DIRECTION poderá definir a direcção da suavização, para fora (EXPAND) ou para dentro (INSET) da forma. Veja então o que acontece com o círculo, quando aplicamos uma suavização com DISTANCE =20 px, NUMBER OF STEPS = 6 e DIRECTION = INSET.

I.2. OS MENUS

113

Se observar a borda com mais cuidado verá o seguinte

114

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

Repare que pode contar os 6 níveis que definiu para o NUMBER OF STEPS. Então, como vê, a suavização pode melhorar se aumentarmos o número de níveis. Se aumentar para 50 níveis, verá a imagem abaixo.

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

Convert Lines to Fills Se precisar converter uma linha de contorno de um objecto qualquer numa área de pintura (fill), deve utilizar o comando CONVERT LINES TO FILLS existente no menu MODIFY > SHAPE.

I.2. OS MENUS
Expand Fill

115

Um comando EXPAND FILL está presente dentro do menu MODIFY > SHAPE e serve para permitir a expansão ou contracção de uma área de pintura de um objecto. Ao ser accionado mostra a janela abaixo.

Nesta janela poderá regular o tamanho da expansão (DISTANCE) e a direcção (DIRECTION), no sentido de expandir (EXPAND) ou contrair (INSET ) o shape.

OBSERVAÇÃO
Algumas formas com cantos em bico ou larguras muito finas não se saem bem durante uma expansão ou compressão.

Smooth No menu MODIFY, vai encontrar a função SMOOTH. Com ela poderá suavizar formas para que fiquem com uma aparência mais arredondada. Isso pode ser útil para corrigir formas muito irregulares.

OBSERVAÇÃO
Algumas formas com cantos em bico ou larguras muito finas não se saem bem durante um SMOOTH.

116

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

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

Depois de repetidos SMOOTHs as letras ficaram da seguinte forma.

OBSERVAÇÃO
Para transformar uma letra numa forma e assim poder fazer as operações existentes para as formas, é preciso seleccioná-las e quebrá-las duas vezes com o comando MODIFY > BREAK APART.

Straighten Ainda no menu MODIFY encontramos outra função designada STRAIGHTEN, que faz exactamente o oposto do SMOOTH, ou seja, tira a suavização. Linhas outrora curvas e suaves passam a rectas em ângulos agudos. Veja o que aconteceu às letras ABCD depois de accionarmos seguidas vezes o comando STRAIGHTEN.

I.2. OS MENUS

117

Optimize No mesmo menu MODIFY também encontramos o comando OPTIMIZE. Com ele é possível simplificar uma forma existente para algo com menos pontos e consequentemente mais leve. Digamos que tenha transformado uma imagem em vectorial. Porém, durante a conversão, o objecto final ficou com um número muito grande de pontos o que o tornou deveras pesado para ser colocado na animação. Então, pode tentar uma simplificação dos pontos por meio deste comando. Assim que accionado o comando, surge a janela a seguir.

Pode ver uma barra deslizante (slider) no meio da janela de SMOOTHING. Esta barra regula o grau de suavização que o SHAPE terá durante a optimização. Se a deslocar para a esquerda n enhuma optimização será feita, e para a direita teremos o grau máximo de optimização. A seguir vemos um quadro que diz USE MULTIPLE PASSES (SLOWER). Ao marcá-lo obrigará o Flash a fazer várias optimizações

118

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

até ao resultado final. Esta opção, conforme indicada, faz o processo demorar bem mais a finalizar. O último quadro diz SHOW TOTALS MESSAGE e quando marcado obriga o Flash a mostrar uma janela final com o resumo do que foi feito. Este comando deve ser usado por tentativa e erro, já que fornece resultados consoante a forma submetida à optimização. Trace Bitmap Esta é uma das mais importantes funções encontradas no menu MODIFY. Com ela poderá transformar imagens em formas , que poderá modificar no Flash. Além do mais, é muito mais conveniente para o Flash se tiver de lidar com formas e não com imagens. O que este comando faz é analisar a imagem, e de acordo com o contraste da imagem e com as diferenças de cor tentar descobrir e isolar cada um dos objectos e criar com isso objectos para representar a imagem original. Importe uma imagem qualquer na área de desenho e accione o comando. Verá então a janela a seguir.

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

I.2. OS MENUS

119

COLOR THRESHOLD – Neste campo é possível regular o nível de transição das cores, de 1 a 500. A finalidade deste campo é permitir a produção de traçados mais perfeitos para os casos de imagens pouco ou muito contrastadas. MINIMUM ÁREA – Neste campo poderá ajustar o número de pixéis que o Flash considerará durante o cálculo, de 1 a 1000. Quanto menor o número, maior a precisão do traçado e, consequentemente, mais pesado será o objecto final. CURVE FIT – Neste campo poderá regular a precisão das curvas do traçado. Várias opções estão disponíveis: PIXELS, VERY TIGHT, TIGHT , NORMAL, SMOOTH e VERY SMOOTH. A primeira opção equivale “ao pixel” e corresponde ao nível que fornece a curva mais precisa segundo a imagem traçada. Daí para a frente, os níveis de precisão diminuem. Logicamente, quanto mais preciso o traçado melhor o resultado final e maior o objecto. CORNER THRESHOLD – Neste caixa poderá regular a quantidade de esquinas ou bicos nas formas. As opções são: MANY CORNERS, NORMAL e FEW CORNERS, ou seja, muitos cantos, normal e poucos cantos, respectivamente. Digamos então que importa a imagem abaixo e a transforma com os parâmetros vistos na janela anterior.

120

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

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

O que deve notar agora é que cada parte da imagem é vectorial e pode ser movida, deslocada, animada, mudada de cor ou sofrer qualquer outro tipo de transformação própria a um objecto que puder ser feita no Flash. Veja a imagem abaixo.

Veja como depois da transformação é fácil seleccionar cada uma das partes e retirá-la da imagem. Deve observar entretanto, que depois da transformação a imagem perdeu a aparência realista e ficou a parecer um tipo de desenho ou pintura, o que pode ser um efeito interessante. Esta modificação ocor-

I.2. OS MENUS

121

reu porque é inerente à função TRACE BITMAP. Mesmo que os valores da precisão fossem aumentados, haveria sempre uma degradação na qualidade final, uma vez que esta função é adequada à transformação principalmente de desenhos, logótipos, etc. Transform Ainda no menu MODIFY, encontramos o comando TRANSFORM, que fornece muitas das funções que já conhecemos a quais são accionas das pela barra de ferramentas. Ao accionar esta função, vai ver o menu da figura abaixo.

As primeiras seis funções deste menu são nossas conhecidas, disponíveis por ícones na barra de ferramentas sobre os quais falamos anteriormente. ROTATE 90º CW e ROTATE 90º CCW permitem rodar um objecto 90 graus no sentido horário ou anti-horário, respectivamente. FLIP VERTICAL e FLIP HORIZONTAL permitem girar o objecto 180 graus em relação a um eixo imaginário vertical ou horizontal, respectivamente, que passe pelo centro do objecto. Por outras palavras, corresponde a espelhar em relação a estes eixos.

122

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

REMOVE TRANSFORM (MODIFY > TRANSFORM > REMOVE TRANSFORM) serve para remover todas as transformações que tiverem sido feitas ao objecto. Arrange Este é o próximo item encontrado no menu MODIFY. Dentro deste item do menu encontraremos diversas opções para manipular objectos que estejam a ser desenhados todos no mesmo layer.

BRING TO FRONT – Esta opção permite trazer um objecto para a frente de todos os objectos dentro de um layer. BRING FORWARD – Se imaginar vários objectos desenhados n um mesmo layer, vai ter de ter em mente que o Flash mantém cada um num nível diferente, como os degraus de uma escada. Então, se um objecto está num nível superior, ele aparece desenhado por cima de um com nível inferior, como se estivessem empilhados uns por cima dos outros. Assim, cada vez que usar o comando BRING FORWARD, estará a fazer um objecto subir um nível ou degrau dessa escada. SEND BACKWARD – Esta função faz exactamente o inverso da anterior. SEND TO BACK – Faz um objecto ir imediatamente para a posição mais abaixo de todos os outros.

I.2. OS MENUS

123

LOCK – Este comando “trava” um objecto num determinado degrau, e impede que este seja modificado. UNLOCK ALL – liberta todos os objectos que estavam travados. Align O próximo item encontrado no menu MODIFY é o ALIGN. Com este item é possível fazer o alinhamento de diversos objectos que se encontrem dispostos no mesmo layer ou em layers diferentes.

A explicação para cada uma destas opções está a seguir. A primeira função que precisa conhecer é a última do menu, ou seja, TO STAGE. Este comando pode estar ou não accionado. Quando accionado ele faz com que o tamanho da área de desenho (stage) seja considerada durante as transformações. Caso contrário, apenas as posições dos objectos e os seus pontos são considerados. A seguir explicamos cada comando visto na janela. LEFT - Alinha todos os objectos seleccionados pelos seus pontos mais à esquerda. Toma como referência para o alinhamento o objecto que

124

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

mais à esquerda estiver. Caso TO STAGE esteja ligado, então os objectos seleccionados são alinhados à esquerda da área de desenho. CENTER VERTICAL - Este comando leva em conta o ponto superior do objecto que estiver mais acima e o ponto inferior do objecto que estiver mais abaixo. Assim, calcula o ponto médio e alinha os centros verticais4 de cada objecto segundo este ponto. Caso TO STAGE esteja ligado, então os objectos são alinhados ao centro vertical da área de desenho. RIGHT – Alinha todos os objectos seleccionados pelos seus pontos mais à direita. Toma como referência para o alinhamento o objecto que mais à direita estiver. Caso TO STAGE esteja ligado, então os objectos seleccionados são alinhados à direita da área de desenho. TOP - Alinha todos os objectos seleccionados ao topo, tomando como base o ponto mais superior do objecto que estiver mais acima. Caso TO STAGE esteja ligado, então os objectos são alinhados ao topo da área de desenho. CENTER HORIZONTA – Este comando leva em conta o ponto mais à L esquerda do objecto mais à esquerda e o ponto mais à direita do objecto mais à direita para efectuar o cálculo. Calcula o ponto médio e alinha os centros horizontais de cada objecto segundo este ponto. Caso TO STAGE esteja ligado, então os objectos são alinhados ao centro horizontal da área de desenho. BOTTOM - Alinha todos os objectos seleccionados pelos pontos inferiores de cada objecto. Caso TO STAGE esteja ligado, então os objectos são alinhado ao fundo da área de desenho. DISTRIBUTE WIDTHS - Este comando leva em conta o objecto que estiver mais à esquerda e o que estiver mais à direita para descobrir a quantidade de pixéis existente no intervalo. Assim, distribui os centros horizontais dos outros objectos para que fiquem igualmente espaçados nesta direcção. Caso TO STAGE esteja ligado, então a largura da área

4

O centro do objecto é onde está o eixo central deste.

I.2. OS MENUS

125

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

MAKE SAME WIDTH – Faz com que todos os objectos fiquem com a mesma largura. Toma como base o objecto mais largo. Caso TO STAGE esteja ligado, então os objectos passam a ter a largura da área de desenho.

MAKE SAME HEIGHT - Faz com que todos os objectos fiquem com a mesma altura. Toma como base o objecto mais alto. Caso TO STAGE esteja ligado, então os objectos passam a ter a altura da área de desenho. Também existe outro menu no Flash onde poderá encontrar os mesmos comandos de alinhamento sobre os quais acabamos de falar. Basta que vá ao menu WINDOW e escolha a opção ALIGN, depois do que verá surgir a janela que colocamos na figura abaixo juntamente com as explicações de cada ícone. É até preferível que passe a utilizar o ALIGN disponível pelo accionamento deste comando, uma vez que este contém mais opções disponíveis.

126

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

Notamos a presença de alguns outros comandos não presentes no MODIFY > ALIGN. DISTRIBUTE TOP – Faz o mesmo que o DISTRIBUTE HEIGHTS, visto anteriormente, porém considera o ponto mais superior de cada objecto durante o cálculo. Se TO STAGE estiver ligado então a altura da área de desenho passa a ser considerada no cálculo. DISTRIBUTE BOTTOM – Faz o mesmo que o DISTRIBUTE HEIGHTS visto anteriormente, porém considera o ponto mais inferior de cada objecto durante o cálculo. Se TO STAGE estiver ligado, então a altura da área de desenho passa a ser considerada no cálculo. SAME WIDTH AND HEIGHT – Faz os objectos seleccionados ficarem com a mesma largura e altura. Se TO STAGE estiver accionado, então os objectos seleccionados passam a ter a mesma largura e altura da área de desenho.

I.2. OS MENUS

127

SPACE EVENLY VERTICALLY – Espaça por igual os objectos na vertical. SPACE EVENLY HORIZONTALLY – Espaça por igual os objectos na horizontal. Group & Ungroup GROUP e UNGROUP são dois itens também presentes no menu MODIFY. Com estes dois comandos poderá agrupar ou desagrupar objectos. Quando cria objectos com as ferramentas de desenho do Flash, deve lembrar-se que estes geralmente são formados por uma linha que delimita o seu contorno (LINE) e por uma área interior preenchida por uma cor ou gradiente (FILL). Se deseja fazer alguma operação de alinhamento, de mudança de ordem de desenho (arrange), etc., primeiro é preciso agrupar LINE e FILL pelo uso do comando GROUP. Este comando também é útil quando tem vários objectos criados no mesmo layer e quer agrupá-los no sentido de os animar mais facilmente. Se a qualquer instante os quiser desagrupar, basta utilizar o comando UNGROUP no mesmo ponto no menu MODIFY. Break Apart Se aplicar este comando a um grupo terá a quebra deste grupo e a transformação de cada elemento na sua forma mais básica, ou seja, cada objecto volta a ser a sua borda e área de cor (line & fill). Este comando é essencial para os casos de desejar fazer operações com letras e formas, como utilizar o formato da letra para fazer um furo num objecto. Se for este o caso, deverá partir antes as letras em LINE e FILL com o uso desta função. Deve notar que quando faz o primeiro BREAK APART numa palavra, primeiro obtém a separação de cada letra da palavra, que se torna uma forma em separado. O segundo BREAK APART transforma tudo em LINE & FILL. Uma vez que a letra tenha sido transformada na sua forma

128

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

mais básica não mais poderá ser editada com a ferramenta de texto, já que nesta altura passou a ser um desenho e perdeu a sua propriedade de ser letra e a consequente capacidade de ser editada.

OBSERVAÇÃO
Quando utiliza letras nas suas animações, o Flash armazena, no ficheiro final, as informações vectoriais de como desenhar estas letras, independentemente da quantidade de letras que desenhar. Assim , se a sua animação contiver 200 letras A, o Flash armazenará apenas uma informação que lhe permita desenhar esta letra. Uma letra partida em LINE e FILL com a função BREAK APART ocupa mais espaço no ficheiro final da animação, pois o Flash precisa armazenar todos os pontos da forma para conseguir desenhar o objecto correctamente.

Distribute to Layers Esta é uma função também existente no menu MODIFY e que permite enviar para outro layer novo um objecto que esteja seleccionado num determinado layer. Assim, se tem por exemplo dois objectos presentes no mesmo layer, pode seleccionar um deles e escolher DISTRIBUTE TO LAYERS e fazer com que este objecto passe a figurar num layer novo. Se mais objectos estiverem seleccionados no momento da escolha desta função, então cada um deles é colocado num layer diferente.

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

Antes de saber fazer animações no Flash é preciso entender o que é o timeline e saber lidar com os layers (camadas).

Layers
O Flash utiliza na sua forma de trabalho o conceito dos objectos dispostos em layers, como é comum nos melhores softwares de desenho e edição gráfica disponíveis no mercado. Os layers são como folhas de acetato transparentes, sobrepostas, onde poderá criar objectos estáticos ou animados. Desta forma, cada layer fica independente de todos os outros. Os layers são representados no timeline, conforme a figura abaixo.

130

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

Os layers, assim como as folhas de acetato, são montados de baixo para cima, ou seja, desenhados de baixo para cima. Logo, segundo a figura acima, os layers são desenhados na ordem 1, 2, 3, 4 e 5. Assim, um objecto no layer 2 pode cobrir um outro no layer 1, já que é desenhado depois.

Quando entra n Flash, por defeito é criado o “Layer 1”. Para criar o novos layers basta carregar no ícone no canto esquerdo inferior do timeline ou ir ao menu INSERT > LAYER.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

131

Também poderá guardar os layers em pastas, dentro da janela do timeline e assim organizar melhor os seus trabalhos, principalmente quando estiver a lidar com um número grande de layers. Inclusive poderá ter pastas dentro de pastas! Para criar uma, carregue no terceiro ícone no canto inferior esquerdo do timeline.

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

132

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

DICAS
Para nomear uma pasta ou layer basta carregar duas vezes sobre o nome daquilo que deseja mudar. Para colocar um layer dentro de uma pasta basta arrastá-lo para lá. Para abrir ou fechar uma pasta e ver o que contém, basta carregar uma vez sobre ela.

Olho, Cadeado e Quadrado Colorido
Se observar cuidadosamente a janela do timeline vai ver que existem três colunas na parte dos layers: Uma representada por um olho, outra por um cadeado e a última por quadrados coloridos.

I.3. LAYERS, TIMELINE E ANIMAÇÃO
Pode ver pela figura abaixo, a função de cada um destes ícones.

133

OLHO (show/hide layer)
Esta coluna representa a visibilidade d um layer. Se contiver uma e bolinha na linha do layer, significa que este está visível. Se um X estiver presente, é sinal que o layer está invisível.

CADEADO (lock/unlock layer)
Esta coluna representa o bloqueio do layer. Se uma bolinha estiver presente na linha do layer, significa que o layer está desbloqueado. Caso um cadeado esteja presente, o layer está bloqueado. Isto significa que não pode ser seleccionado na janela de desenhos. A função é útil quando precisamos impedir que um layer seja seleccionado na janela de desenhos, quando estivermos a trabalhar em animações intrincadas.

134

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

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

ficam assim...

I.3. LAYERS, TIMELINE E ANIMAÇÃO

135

... ou seja, muito mais leves, pois o Flash fica com menos coisas para desenhar! Na realidade, o objecto não é modificado, apenas é mostrado de forma simplificada.

DICA
Para aplicar de uma só vez as propriedades referentes ao olho, cadeado ou outline a todos os layers da animação, basta carregar no símbolo correspondente no alto da coluna.

O Timeline
Como se disse no capítulo anterior, o Flash é um programa que permite criar elementos gráficos com animação e interacção. Para criar as animações, é preciso, depois de criar os elementos, definir os estados em que estarão ao longo do tempo. Quando vai ao cinema, está, de facto, a ver uma sequência de imagens paradas. Como estas imagens paradas estão a ser projectadas a uma velocidade de 24 imagens por segundo 1, tem a impressão de que está a ver movimentos contínuos como na vida real. Os filmes 2 em Flash são projectados a taxas que podem variar. Por defeito, o valor está ajustado a 12 fps (frames por segundo).

1

O termo “imagens por segundo” também é conhecido como “quadros por segundo”, ou frames , do inglês. Normalmente usa-se a sigla “fps” para representar esta grandeza, que significa frames per second.

2

Tudo o que é feito no FLASH tem o nome de “filme”. A área de desenho também é conhecida

como “stage” (palco).

136

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

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

KEYFRAMES - representação no timeline
Se pretender criar uma animação do círculo de um tamanho X para Y, basta definir dois keyframes para representar estes estados, um no frame em que deseja que a animação comece e outro no frame em que o círculo encerra a sua animação. Daí para a frente, o Flash encarrega-se de calcular os tamanhos intermédios do círculo, de forma a tornar suave o aumento de tamanho 3. A representação dos keyframes é feita no timeline e é simbolizada por uma pequena bolinha ou ponto no frame onde está situado. Na figura abaixo pode ver que o objecto no Layer1 tem dois keyframes , um no frame 1 e outro no frame 30.

O timeline é uma das principais partes da interface gráfica do Flash. É nele que ocorrem todas as acções, interacções e movimentações dos objectos. Os keyframes são a chave para tudo isso ocorrer.

3

Estes frames intermédios são conhecidos como “in between” e o acto de fazer o cálculo deles é

conhecido como “tweening”.

I.3. LAYERS, TIMELINE E ANIMAÇÃO ACTIONSCRIPT – representação no timeline

137

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

LABELS – representação no timeline
Existe ainda uma terceira coisa que pode estar presente no timeline: um LABEL. Um LABEL é uma “etiqueta” ou nome, que um determinado frame pode ter. Dar um nome em particular a um frame da animação pode ser interessante para quando se está a criar programas em ActionScript, pois pode-se posteriormente referenciar o frame por nomes como “rua”, “casa”, “final”, etc. e não pelo seu número. Imagine a confusão que é referenciar dezenas de frames de uma animação pelos números. Vemos por esse motivo que o label é uma funcionalidade deveras poderosa. Além do mais, caso precise alterar algo da animação que venha a mudar os frames antes considerados, teria um trabalho redobrado em actualizar nos outros pontos da animação todas as referências aos frames alterados. Para acrescentar um label a um frame simplesmente posicione o rato num frame ou região que já exista no timeline e vá à janela de propriedades.

138

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

Em seguida carregue no quadro que diz “<Frame Label>” e coloque um nome qualquer. Assim que o fizer, o timeline passa a mostrar a indicação da existência do label pela colocação de uma pequena bandeira vermelha com o label no local apropriado.

A seguir então vamos passar a uma primeira simples animação, para que se familiarize com o uso do timeline e com a criação de keyframes. O uso da opção ‘Named Anchor’ juntamente com a label, permitirá que o botão back e forward do browser interajam com o filme. Para utilizar esta capacidade, é preciso seleccionar o template ‘Flash with Named Anchors’ na janela HTML do PUBLISH SETTINGS.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

139

A Animação frame-a-frame
Pode pensar na primeira animação que irá realizar aquela na qual determina a posição de todos os objectos em cada um dos frames da animação. Assim, se tem três frames no total, deve mostrar ao Flash onde quer cada objecto para que a animação seja feita correctamente. Então podemos começar por algo simples. Imagine que deseja fazer um quadrado a girar e diminuir de tamanho sem que mude de lugar. Comece então por desenhar um quadrado com a ferramenta RECTANGLE TOOL da barra de ferramentas no meio da área de desenho. Assim que tiver terminado terá criado o que é tecnicamente definido pelo Flash com uma forma (shape). A próxima etapa é transformar esse shape que criou em símbolo4. Para fazer isso seleccione a Arrow Tool na barra de ferramentas, posicione o cursor no meio da figura que criou e clique duas vezes para seleccionar as duas partes que formam o quadrado 5 e vá ao menu INSERT > CONVERT TO SYMBOL. Verá então uma janela surgir que deve preencher e marcar conforme mostrado na figura abaixo.

4

Ao faz er isso estará a acrescentar o objecto à biblioteca (veremos isso mais adiante).

5

Dito no plural pois geralmente um objecto possui duas partes: a linha de contorno e a área de

preenchimento de cor (line & fill).

140

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

Nesta janela pode ver o item REGISTRATION que indica onde quer colocar o ponto de transformação do objecto. Por defeito, é ajustado ao centro mas pode colocar em qualquer dos nove pontos indicados. Em relação a este ponto é que todas as transformações serão feitas (escalas, translações, rotações, etc.). Seleccione agora o objecto clicando uma vez com a Arrow Tool em cima deste e com o botão carregado mova-o para que fique no centro da área de desenho. Esta então fica a ser a posição do quadrado no primeiro frame da animação. Mova o rato até ao frame 2 no timeline e clique com o botão da direita. Surgirá um menu flutuante. Escolha a opção INSERT KEYFRAME, conforme mostrado abaixo.

Esta operação vai criar um novo keyframe no frame 2 da animação, que ficará conforme visto abaixo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

141

Arraste o quadrado semi-transparente rosa que é visto na figura acima sobre o número indicativo do frame 1 para que fique em cima do frame 2. Veja a figura abaixo.

Repare que existe uma bolinha a marcar o frame 1 e outra a marcar o 2. É sinal de que existem dois keyframes criados para o objecto neste layer. Utilize agora a FREE TRANSFORM TOOL da barra de ferramentas e com ela clique em cima do objecto. Posicione o rato no canto inferior direito do quadrado até que surja o símbolo representativo de que está prestes a efectuar uma rotação no objecto, conforme visto a seguir.

142

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

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

Repita o procedimento de criação de keyframe para criar o frame 3 da animação e novamente transforme o objecto para que fique conforme a figura abaixo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

143

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

Se arrastar o quadrado rosa indicador do frame actual ao longo dos frames criados vai poder ver a sua animação. Também poderá ver a animação a correr em tempo real se colocar o Flash no modo TEST MOVIE (CONTROL > TEST MOVIE). As animações frame-a-frame são úteis para o caso de q uerer criar 6 animações do tipo stop motion ou de formas orgânicas, como o movimento de pessoas, animais, insectos, etc. Também as poderá utilizar para criar movimentos mais realistas de objectos como cortinas, tecidos e outros. Estas animações, apesar de serem as mais simples, são as mais trabalhosas, pois terá de criar keyframes para todos os frames da

6

ao estilo das animações feitas em vídeo ou película com personagens criadas a partir de massas

de modelar.

144

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

animação7. Então, se o seu filme está a correr a uma taxa de 12 fps, terá de criar 12 imagens para ter 1 segundo de filme. Os programas que transformam vídeos em Flash, ou que fazem efeitos para o Flash, geralmente fornecem saídas em ficheiros com tudo colocado frame-a-frame. No caso de um vídeo é até lógico já que o próprio vídeo em si é composto de imagens diferentes frame a frame.

A Animação Motion Tween
A animação do tipo MOTION TWEEN é justamente aquela que referimos na secção anterior, como sendo a que permite criar animações sem exigir a criação de todos os keyframes que correspondem ao seu tempo total. A animação motion tween utiliza o conceito de TWEENING para criar o movimento entre os keyframes base. Assim, se um objecto tem no frame 1 o tamanho de 100 e no frame 30 o tamanho de 10, o programa saberá fazer os cálculos necessários para deduzir o tamanho do objecto ao longo dos frames. Desse modo, ao assistirmos a tal filme, veríamos o objecto a diminuir de tamanho de 100 para 10 ao longo de 30 frames. Vamos então criar uma animação deste tipo para ver como funciona. Carregue em FILE > NEW para iniciar um novo filme. Com a ferramenta de criação de ovais na barra de ferramentas crie um círculo de médio tamanho no centro da área de desenho. Carregue no ponto preto que simboliza o frame 1 no timeline para seleccionar as duas partes componentes do círculo. Carregue em INSERT > CONVERT TO SYMBOL para transformar os objectos em símbolos e acrescentá-los à biblioteca8 (falaremos sobre bibliotecas mais adiante).

7

Vai ver na próxima secção que é possível criar animações sem ter de criar todos os keyframes .

8

Deve observar que só é possível fazer animações motion tween de símbolos e não de grupos, por

isso tivemos que transformar o círculo, até então apenas um shape, em símbolo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

145

Quando fizer isso vai ver uma janela conforme indicado na figura abaixo.

Mova o rato até que fique sobre o frame 30 no timeline e carregue no botão da direita. No menu que surgir, escolha a opção INSERT KEYFRAME. O timeline ficará com a aparência abaixo.

Carregue com o rato em cima da bolinha do keyframe 30, para seleccionar o objecto na área de desenho neste frame. Vá à barra de ferramentas e escolha o FREE TRANSFORM TOOL na barra de ferramentas, para poder fazer algumas alterações no tamanho e na aparência do objecto. Se olhar agora para a área de desenho vai ver que o círculo está seleccionado e que um quadrado preto com pontos está à volta. Veja a seguir.

146

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

Posicione o rato no ponto negro superior direito do quadrado e clique com o rato. Mantendo o botão carregado, mova o ponto para outro sítio, de forma a aumentar o tamanho do círculo e em seguida liberte o botão. O que acabou de fazer foi aumentar o tamanho original do círculo. Porém, como fez isso enquanto estava com o timeline posicionado no frame 30, então o que fez foi aumentar o tamanho do círculo nesse frame apenas. Verifique a veracidade desta afirmação carregando alternadamente nas bolinhas correspondentes ao frame 1 e 30 no timeline. Se observar o timeline vai ver que na verdade o círculo começa com um tamanho no frame 1 e o mantém até ao frame 29, quando então, subitamente, aumenta de tamanho ao entrar no frame 30. Se era isso o que pretendia a animação está encerrada. Porém , se a sua intenção era fazer uma animação suave, continue a ler os parágrafos a seguir. Carregue na bolinha correspondente ao frame 1 (início da animação) e nas propriedades do objecto visíveis na parte central inferior do ecrã, mude o campo TWEEN para MOTION. Veja a figura abaixo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

147

Deve ter observado que o campo TWEEN tem outra opção chamada SHAPE, a ser vista mais adiante. Verá que agora a linha do timeline ficou lilás e com uma seta a indicar uma animação do frame 1 ao 30, conforme figura abaixo.

Arraste o rectângulo rosa existente na área da numeração dos frames no timeline para os lados, para ver que a animação agora está suave.

NOTA IMPORTANTE
Cuidado que este tipo de animação só funciona se no layer em questão estiver um único objecto ou grupo de objectos, como fizemos neste exemplo. No entanto, a situação ideal é usar um único símbolo da Library que será estudada mais tarde.

Ease In & Ease Out (o controlo do movimento)
Repare na figura relativa às propriedades do frame, que existe uma caixa EASE. Esta variável controla a forma na qual é feita a distribuição da animação ao longo do intervalo de keyframes . Em termos gerais, a variável regula a forma como a animação chega ou sai de um determinado keyframe. Tecnicamente são conhecidas pelos nomes de EASE IN e EASE OUT.

148

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

Noutros softwares de animação como o Maya, Alias PowerAnimator, Combustion, Inferno, 3DS MAX, After Effects, etc., estão disponíveis maneiras de se regular independentemente estas duas funções, no keyframe inicial e no final de um determinado segmento. Porém, no Flash, foi feita uma simplificação. O ajuste é apenas feito no primeiro keyframe do segmento. Por defeito, a distribuição de movimento é feita de forma linear, ou seja, se um shape tem uma posição, tamanho, ângulo de rotação, etc., no primeiro keyframe e X frames depois tem outra completamente diferente, então o Flash calcula a diferença de propriedades entre os dois keyframes e divide pelo número de frames, para fazer o movimento linear entre os pontos. Digamos que no frame 1 tem um círculo com um tamanho de 1 e dez frames depois aumentou para 30. Então, a cada frame da animação o Flash vai aumentar o tamanho em 3, o que significa...
... no frame 1 o tamanho do círculo = 1 ... no frame 2 o tamanho do círculo = 4 ... no frame 3 o tamanho do círculo = 7 ... no frame 4 o tamanho do círculo = 10 ... ... no frame 10 o tamanho do círculo = 30

Logo, o círculo aumenta linearmente ao longo do tempo. Em termos gráficos de movimento ao longo do tempo teríamos o seguinte.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

149

Se agora posicionar o controlo de EASE todo para cima, na direcção de EASE = 100 terá modificado o gráfico para o visto abaixo.

Se olhar atentamente para o gráfico acima, verá que não há mais linearidade de movimento ao longo do tempo. Agora o movimento começa rápido e em seguida desacelera. Se ajustar o EASE para –100 vai ter exactamente o inverso: o movimento começa devagar e depois acelera, conforme pode observar abaixo.

150

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

A vantagem de ser permitido este tipo de ajuste reside no facto de que às vezes é preciso criar movimentos acelerados e desacelerados, como o movimento de pêndulos ou de bolas que saltam. É uma função útil que, se bem entendida, pode ajudar a melhorar a qualidade das animações produzidas.

Como é que o Flash interpreta uma animação?
Como vimos, o Flash precisa conhecer a posição do objecto em cada frame para conseguir calcular a animação. Então, ao fornecer keyframes para os intervalos que deseja animar ou para cada um dos frames, está a dar meios ao Flash para compor todos os elementos conforme planeado ao longo do tempo. O Flash precisa basicamente utilizar a capacidade de cálculos da máquina para conseguir mostrar correctamente a animação. Então, ao fazer uma animação, deve ter em conta a quantidade de exigências que ela vai ter na máquina onde for correr. Cálculos muito complexos como objectos de tamanhos gigantes ou muitos objectos com transparências de uns sobre os outros, vão exigir muita capacidade da máquina e talvez não consiga ser visto conforme pretende. Teste sempre a sua animação em máquinas de baixa capacidade. Quando cria uma animação e a põe a correr, o Flash começa-a sempre pelo primeiro frame e avança sequencialmente para a frente em intervalos de um frame9. Então, se vai fazer, por exemplo, um programa em ActionScript, deve colocar os códigos e comandos em cada um dos frames que pretende fazer alguma acção. Os programas ou comandos em ActionScript são dispostos nos frames em que o programador deseja fazer algo e são separados por objecto, ou seja, cada objecto carrega consigo o código ActionScript que vai precisar. Desta forma, cada objecto que carregue consigo linhas de ActionScript dispostas em frames específicos terá estes códigos executados quando os frames onde estas linhas estiverem forem visualizados.

9

se não for dada nenhuma ordem para que ele actue de forma diferente.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

151

Digamos, por exemplo, que deseja realizar uma animação de um carrinho que deita fumo pelo tubo de escape e esteja sempre a buzinar. O fumo sai do escape, sobe e desaparece nos cinco primeiros frames. Logo em seguida, a buzina toca e encerra no frame 15. Depois disso, a animação retorna ao primeiro frame e o processo repete-se. Então, em termos descritivos, a animação equivaleria à tabela abaixo.

FRAME(S) 1 até 5 6 até 15

ACÇÃO O fumo começa a sair do tubo de escape no frame 1 e encerra no 5 A buzina toca até ao frame 15 e encerra.

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

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

152

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

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

Poderão as suas animações ser compostas por inúmeros objectos, animados ou não, interactivos ou não, de qualquer tipo, como filmes dentro de filmes, objectos dentro de objectos, filmes em AVI ou QuickTime, sons, desenhos, etc. Não há limite teórico para o que pode fazer a não ser o tamanho que o ficheiro final da animação possa ter e, este sim , pode representar um empecilho pelo tempo que demorará a carregar se for via Internet ou requisitos de sistema para poder ser executado conforme planeado. Digamos, por exemplo, que fez uma animação a usar o desenho de uma paisagem campestre de fundo. Por cima deste desenho cria a animação de um sol a nascer e a pôr-se. Esta animação tem 200 fra-

I.3. LAYERS, TIMELINE E ANIMAÇÃO

153

mes e é cíclica, ou seja, ao atingir o último frame retorna ao primeiro e repete-se. Porém, no frame 80 desta animação faz surgir uma ovelha que cruza a cena em 40 frames. A ovelha é um objecto independente e possui uma animação própria, de 8 frames , correspondente ao movimento das suas patas como se estivesse a andar. Este movimento também é cíclico. Além disso, no frame 1 da ovelha coloca o início do som correspondente ao balir desta. Desta forma, de cada vez que a animação da ovelha começar será ouvido o som. Como a ovelha está presente durante 40 frames da cena inicial, que é o tempo da sua animação contra o fundo, então automaticamente a sua animação repetir-se-á cinco vezes (8 frames x 5 = 40). Imagine que podia pegar no objecto ovelha com a mão e suspendê-lo no ar. Veria então a ovelha com as patinhas a andar. Então, poderia pegar este objecto e animá-lo contra o fundo e teria sempre as patas a andar independente do outro movimento que fizesse com o objecto. Como vê, o objecto tem as suas propriedades e animações contidas em si próprio.

Animação de formas (shape animation)
Além do tipo de animação convencional, no qual é animado algum parâmetro do objecto, como tamanho, posição, rotação, cor, etc., existe um outro tipo particular de animação conhecida pelo nome de SHAPE ANIMATION (animação de forma). Nela, em vez de fazer um objecto deslocar-se de um ponto a outro ou aumentar de tamanho, fazêmo-lo mudar de forma. As animações desse tipo, na realidade, ocorrem por uma animação de movimento dos pontos (sub-objectos) que formam os objectos. Este tipo de animação deve ser usado com cuidado, já que aumenta muito o tamanho final do filme. Para começar uma animação de forma, inicie um novo filme em branco (FILE > NEW) e com a ferramenta de criação de ovais crie um círculo de médio tamanho no centro da área de desenho.

154

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

Mova o rato até que fique sobre o frame 30 no timeline e carregue no botão da direita. No menu que há-de surgir, escolha a opção INSERT KEYFRAME. O timeline ficará com a aparência abaixo.

Carregue com o rato em cima da bolinha do keyframe 30, para seleccionar o objecto na área de desenho onde então modificaremos a aparência deste. Seleccione o SUBSELECTION TOOL na barra de ferramentas e com o rato carregue em cima da linha de borda do círculo. Surgirá então uma forma circular delimitada por uma linha fina azul que tem exactamente oito pontos à volta. Estes pontos são os que formam o círculo10.

10

conhecidos como nós (nodes), pontos de controlo (control points) ou simplesmente vértices.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

155

Mova então, a utilizar ainda a mesma ferramenta, alguns dos pontos do círculo até formar uma figura qualquer, como a vista abaixo

Pronto! O que acabou de fazer foi modificar a forma do círculo para uma “estrela”. Porém, como está a trabalhar no frame 30, o que fez foi modificar a forma do círculo apenas nesse frame. Se voltar ao frame 1 vai ver que ele ainda tem a mesma forma naquele ponto. Tem então agora duas formas: um círculo no frame 1 e uma “estrela” no 30. É preciso agora fazer esses dois frames tornarem-se uma animação de forma. Carregue na bolinha correspondente ao frame 1 (início da animação) e nas propriedades do objecto visíveis na parte central inferior do ecrã e mude o campo TWEEN para SHAPE.

Assim que fizer isto vai ver que o timeline ficou verde no intervalo de 1 a 30 e surgiu uma seta a indicar a presença de uma animação neste intervalo. Por causa da cor verde sabe-se que se trata de uma animação de forma. Carregue no rectângulo rosa na área numérica do time-

156

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

line e desloque-o para a direita e esquerda. Vai ver que foi criada uma suave animação na forma do objecto. No caso da animação de forma também é possível ajustar o EASE IN e OUT da curva de distribuição de movimento, da mesma forma que foi descrita na secção anterior.

DICA
Para ser possível aplicar uma animação de forma a grupos, instâncias ou objectos com imagens, primeiro terá de “quebrar” estes grupos com a função BREAK APART (MODIFY > BREAK APART), para que passem a ser objectos comuns. As letras são consideradas grupos e devem passar por esse processo para que possam ser animadas correctamente.

Shape Hints
Quando faz uma animação de forma, basicamente define dois shapes e deixa ao Flash a tarefa de animar a metamorfose da maneira que mais lhe convier. Porém, nem sempre esta é a solução ideal. Por vezes ocorrem problemas na transformação ou é preciso ter controlo sobre uma determinada maneira específica de realizar a transformação. É então que entram em cena os SHAPE HINTS! Vamos a um exemplo. Digamos que criou o objecto da esquerda, na figura abaixo, e quer fazer uma animação de forma (shape animation) de modo a transformá-lo no objecto da direita.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

157

Então, se deixar a cargo do Flash, como fizemos, pode ser que tenha uma animação conforme a sequência de imagens abaixo.

158

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

Se reparar nos frames de 6 a 9, vai ver que houve um problema na transformação. Parte do shape entra sobre si mesma, criando buracos. Além do mais, a animação ocorre de forma pouco agradável. O objecto fica estranho, amassado, durante o processo. A única maneira de resolver isso é inserir SHAPE HINTS, para mostrar ao Flash de que forma deve ser feita a transformação. O SHAPE HINT funciona segundo a seguinte filosofia: vai-se ao primeiro frame de uma animação de forma e posiciona-se um SHAPE HINT para indicar uma determinada região de um objecto. Depois, vai-se ao frame final da mesma transformação e move-se o SHAPE HINT para a região final. Desta forma, o Flash saberá que a região marcada com o SHAPE HINT no primeiro frame é a que deve ser transformada para a indicada no mesmo SHAPE HINT no frame final. Os SHAPE HINTS, quando acrescentados, são representados por pequenos círculos coloridos com uma letra no interior. As cores utilizadas são o amarelo para representar o HINT inicial e o verde para representar o final. Caso esteja vermelho significa que o HINT em questão está mal posicionado. Vamos então à correcção da animação anterior pelo uso de SHAPE HINTS.

CRIAÇÃO DO SHAPE HINT...
Carregue na bolinha correspondente ao frame 1 da animação para seleccionar o shape pretendido neste frame. Carregue em MODIFY > SHAPE > ADD SHAPE HINT para acrescentar o primeiro HINT. Mova-o até que fique na posição indicada abaixo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

159

No timeline, carregue na bolinha correspondente ao último frame da animação, para seleccionar o shape neste frame. Posicione o SHAPE HINT final no ponto indicado na figura abaixo.

Continue a acrescentar mais hints até ficar como na figura abaixo.

No Shape inicial...

160

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

No Shape final

A ordem pela qual acrescenta os HINTS é importante porque é nesta ordem que o Flash os vai nomear. Se agora movimentar a linha de tempo no timeline vai ver que a transformação ocorre sem problemas, como na figura abaixo. Repare que já não existe o problema da primeira animação, dos furos no shape, pois ao colocarmos os hints D, E e F, fizemos de forma a indicar a maneira pela qual as regiões deveriam “andar” na transformação. Além do mais de notar que a transformação agora não está mais amassada e tem uma aparência bonita e suave.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

161

Na prática, o que aconteceu foi o movimento das regiões conforme indicado a seguir.

Para os pontos A, B e C...

162

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

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

Animação com Motion Guide
MOTION GUIDE é uma possibilidade interessante que o Flash nos oferece para a criação de animações: fazer com que objectos sigam caminhos (paths) específicos definidos por curvas. Digamos então que tem o objecto ao lado e que gostaria de o fazer percorrer o caminho indicado na figura seguinte.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

163

Então, depois de criado e agrupado o avião, vá ao timeline, na área onde são mostrados os layers, e carregue com o botão da direita em cima do nome do layer. Escolha a opção que diz ADD MOTION GUIDE. Surgirá outro layer acima do primeiro, MOTION GUIDE, conforme a imagem abaixo.

Neste layer “GUIDE: AVIÃO” desenhe a curva que deseja utilizar como caminho. Vá à barra de ferramentas e escolha a pena (PEN) para desenhar o caminho. Depois disso, posicione o avião da maneira e no local onde iniciará o movimento.

164

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

Volte então ao timeline e posicione o rato na área em branco correspondente ao frame 30 para cada um dos objectos e carregue com o botão da direita do rato e escolha a opção INSERT KEYFRAME, para criar keyframes para os dois objectos neste frame. O timeline deve ficar como indicado abaixo.

No timeline, carregue na bolinha correspondente ao frame 1 do avião e, com o botão pressionado, mova o rato na horizontal até ao frame 30. Solte o botão do rato. Posicione o rato na área seleccionada e carregue no botão da direita. Escolha a opção CREATE MOTION TWEEN. Isso vai fazer a animação do avião do frame 1 ao 30. Se movimentar a barra de tempo no timeline vai notar que agora o avião já percorre o caminho. Porém, ainda não está orientado segundo o que seria a maneira correcta de movimento.

NOTA
Não há necessidade do frame 30 para o guia do avião para que a animação funcione correctamente quando finalizada. Porém , é importante que este frame esteja presente durante a construção da animação, para que possa visualizar correctamente o caminho. Assim que for finalizar o filme, elimine os frames desnecessários do guia mantendo apenas o primeiro. Assim, o timeline ficará com a aparência abaixo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

165

NOTA
Por acaso, quando finalizado este exemplo, verificou-se que no último frame o avião virava ao contrário. Se por acaso isso acontecer quando terminar de fazer o exemplo, basta reposicionar neste último frame o avião para a posição correcta.

Poderá fazer com que vários objectos sigam o mesmo caminho. Para isso, basta criar mais layers que fiquem subordinados ao layer do caminho, como indicado abaixo pelo layer “círculo”.

Então, todos os objectos passam a seguir o caminho...

166

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

Máscaras
As máscaras são objectos colocados em layers especiais que limitam a visibilidade de um determinado layer. Digamos que possui o objecto mostrado na figura abaixo e que ele está presente na sua animação por diversas vezes.

Então, numa determinada ocasião, gostaria de colocar este objecto dentro de uma moldura oval, sem que nenhuma parte ficasse para fora.

Poderia criar uma cópia deste objecto eliminando as partes não desejadas. Porém, uma segunda cópia do objecto na animação significa au-

I.3. LAYERS, TIMELINE E ANIMAÇÃO

167

mentar o tamanho do ficheiro final Flash. Então, o que pode fazer é utilizar uma máscara oval para indicar o que deve ficar visível no objecto original.

NOTA
Imagine que em cima do desenho coloca uma folha de acetato e pinta com uma cor sólida as áreas deste objecto que deseja deixar visíveis, sendo que, as áreas não pintadas passariam a ficar invisíveis. Veja a figura abaixo.

Repare como a máscara oval limita o quanto do primeiro rectângulo deve ser mostrado.

Neste caso então, criaria um layer acima do layer do objecto, e aí desenharia uma máscara oval, para limitar o tamanho do objecto. Finalizado o desenho da máscara, basta carregar com o botão da direita em cima do nome do layer no timeline e escolher a opção MASK.

168

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

O que vai fazer a aparência dos layers assemelhar-se à vista abaixo.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

169

Veja como agora o layer da máscara e do objecto subordinado mudaram de ícone. Também ambos estão com os cadeados accionados. Aliás, a máscara só actua no objecto se os cadeados estiverem neste estado. O objecto das casas com a máscara oval cabe agora dentro do espaço determinado.

Se por acaso reduzíssemos a oval da máscara ligeiramente, poderíamos obter o seguinte efeito.

170

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

Se por acaso animássemos em 15 frames a máscara, de um tamanho igual a zero a um tamanho igual ao visto acima, teríamos a seguinte sequência de imagens.

I.3. LAYERS, TIMELINE E ANIMAÇÃO LAYER DO TIPO GUIDE

171

Se carregar com o botão da direita em cima do nome de um layer e escolher a opção PROPERTIES, vai ver a janela a seguir.

Pode ver pelo campo TYPE que existem diversos tipos de layer, dos quais já falamos, com a excepção do GUIDE. Este tipo de layer não é visível na animação final. Só é visto durante a construção. É exactamente o que o nome diz, um GUIA, para criar as suas animações, como linhas para orientação ou imagens/objectos que precise colocar em cena apenas para que o possam orientar durante a criação da animação.

LAYER DE SOM
Quando colocar um som, música ou banda sonora nos seus objectos ou filmes Flash, primeiro terá de importar o referido ficheiro sonoro para a biblioteca (IMPORT TO LIBRARY) e depois arrastar para um determinado layer em branco. Assim que o fizer, a janela dos layers mostra a forma de onda do som.

172

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

Se carregar em cima dessa forma de onda e for às propriedades verá a seguinte janela.

Repare que a caixa SOUND mostra o nome do ficheiro. Effect (efeitos sonoros) Na caixa EFFECT vê a palavra NONE. As opções nesta caixa são: LEFT CHANNEL, RIGHT CHANNEL, FADE LEFT TO RIGHT, FADE RIGHT TO LEFT, FADE IN, FADE OUT e CUSTOM, cujas explicações se encontram a seguir. LEFT CHANNEL – faz com que somente o canal esquerdo seja ouvido (no caso de ser um ficheiro estéreo). RIGHT CHANNEL – faz com que somente o canal direito seja ouvido (no caso de ser um ficheiro estéreo). FADE LEFT TO RIGHT – faz com que o som comece no canal esquerdo e progressivamente vá passando ao direito onde terminará.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

173

FADE RIGHT TO LEFT – faz com que o som comece no canal direito e progressivamente vá passando ao esquerdo onde terminará. FADE IN – o som começa com volume zero e vai progressivamente aumentando até ao seu volume normal. FADE OUT – o som começa com o seu volume normal e vai progressivamente diminuindo até zero. CUSTOM – Nesta opção poderá editar de que forma o som se comportará. Assim que escolher esta opção verá a janela abaixo, chamada EDIT ENVELOPE, onde poderá determinar o efeito que pretende.

Na janela acima tem o desenho de duas formas de onda. Como o som utilizado se trata de um ficheiro estéreo, a curva de cima corresponde ao canal esquerdo de som e a de baixo ao direito. Na parte inferior da janela, no lado direito, pode ver quatro ícones perto do botão HELP. São eles: uma lupa com sinal de mais, uma lupa com sinal de menos, um relógio e o desenho de um filme, e permitem ver a curva mais de perto (ZOOM IN), ver a curva mais de longe (ZOOM OUT), ver no eixo horizontal os intervalos em segundos e ver os mesmos intervalos em frames, respectivamente.

174

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

Do lado esquerdo na mesma linha, pode ver dois ícones, um quadrado e um triângulo, para que possa parar (STOP) ou ouvir (PLAY) o som. Se observar com cuidado verá uma linha em diagonal por cima da forma de onda. Com esta linha poderá desenhar o envelope à onda, para causar o efeito pretendido. Mova então o rato até um ponto qualquer desta linha diagonal e arraste a linha para baixo. Um novo ponto será criado na curva que modificou e na outra. Crie outros pontos e movimente-os. Crie um padrão como o visto abaixo.

A explicação para o que acontece na figura acima é a seguinte. CANAL ESQUERDO - O volume começa a zero e sobe até ao máximo, decaindo em seguida até um valor baixo, onde fica constante até 0,5s e torna a subir até ao máximo, mantendo-se constante até ao final. CANAL DIREITO – O volume começa a zero e sobe até ao máximo, decaindo em seguida até aproximadamente 70% do máximo, onde permanece até ao final.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

175

DICA
Para apagar um ponto criado no envelope arraste-o para fora da janela!

Sync (tipo de sincronismo de som) De volta à janela de propriedades do som, pode ver o campo SYNC, o qual apesar de inicialmente marcado com a opção EVENT, permite também escolher START, STOP e STREAM. A explicação para cada opção é dada a seguir.

EVENT

Esta é a opção escolhida por defeito pelo Flash quando insere um ficheiro sonoro num layer em branco. O som ajustado desta forma é tocado assim que o seu primeiro keyframe é mostrado, seja no filme ou no objecto onde está localizado. Então, por exemplo, se no frame 37 de uma determinada animação existir um som, quando a animação aí chegar, o som começa a tocar, independentemente do filme parar ou ir para outro frame. O som ajustado como EVENT é sempre tocado até ao fim, uma vez iniciado. A opção loops permite-nos dizer quantas vezes vai ser tocado um som depois de iniciado. Por exemplo, se quiser colocar um loop a servir de música de fundo deverá escrever um valor muito elevado, para estar continuamente a tocar. Outra propriedade do som ajustado como EVENT é a permissão da simultaneidade, o que significa, por exemplo, que se houver um som associado ao clique de um botão e um utilizador carregar diversas vezes sobre o botão, ouviremos então vários sons do clique, uns por cima dos outros, misturados.

176
START

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

O som ajustado como START também é tocado até ao fim, uma vez tendo iniciado, porém, não permite a simultaneidade e enquanto estiver a ser tocado não permite que outro som igual seja tocado. Quando dizemos isso referimo-nos aos sons iguais. Se, por exemplo, tivermos o desenho de uma porta e um botão de campainha, a este botão temos associado o som de uma campainha musical. Quando carregarmos no botão, ouviremos a melodia. Se durante o PLAY carregarmos seguidamente no botão, não ouviremos vários sons da campainha misturados como no EVENT. Somente será possível ouvir outra vez a melodia quando a primeira tiver terminado. Entretanto, se na mesma cena tivermos o desenho de um cão a ladrar, este som será ouvido em conjunto com o da campainha, se assim tiver de ser.

STOP

Esta opção impede que o som seja ouvido. A principal utilidade deste evento é parar sons que se tenham iniciado com o start ou event. Por exemplo, um loop que sirva de música de fundo.

STREAM

Esta opção é extremamente útil quando se está a lidar com músicas ou sons que precisem ficar síncronos com as animações 11. Quando possuir um som associado a um vídeo e esta opção estiver ligada, então o Flash ao mostrar a sua produção dará sempre prioridade ao áudio em detrimento do vídeo. Fará tudo para manter a sincronia e mostrar os frames no momento certo. Como precisa manter o áudio a tocar continuamente sem intervalos, vai deitar fora frames da animação, caso a máquina onde esteja a correr não seja capaz de mostrar a animação como seria preciso. Depois de muito produzir para o mercado audiovisual chega-se à conclusão de que é menos incómodo ter frames de vídeo eliminados e o áudio a correr bem, a ver a animação a correr cer-

11

Na minha opinião esta deveria ser a opção por defeito já que é a mais importante!

I.3. LAYERS, TIMELINE E ANIMAÇÃO

177

ta e o áudio a engasgar. Quando o vídeo falha ligeiramente, o utilizador tem a impressão de que algo se passou no próprio computador. Quando o áudio está a ter problemas, o mesmo utilizador pensa que a animação foi mal dimensionada e é “pesada” demais para ser vista no seu computador. Outro problema que pode ocorrer pela falta de sincronia é ter o áudio a acabar muito antes do vídeo, caso a máquina não seja rápida o suficiente para mostrar a animação como idealizada. Por isso, deve colocar sempre o áudio como STREAM quando precisar de sincronia perfeita. Estes sons são carregados à medida que o filme é carregado. Inicialmente são carregados apenas 5 segundos de som, que servem de ‘almofada’ (buffer) para se manterem em memória; à medida que o filme decorre, o resto do som é carregado. É particularmente útil para músicas de fundo pesadas.

Como testar as suas animações
Para saber se as suas animações estão a funcionar correctamente, deve sempre testá-las por meio da função TEST MOVIE no menu CONTROL. Também encontrará por lá o comando TEST SCENE, que permite apenas o teste de uma das cenas da animação, caso possua mais de uma. O TEST MOVIE permite visionar a animação final na forma em que será vista pelo utilizador, seja pela Internet, seja através de um CD-ROM ou DVD-ROM que distribuiu. Enquanto que em HTML tradicional o que conta é o tamanho final do ficheiro, já que basicamente se trabalham com elementos de tamanho fixo, no Flash além desta variável deve ter também em consideração o “peso” que a sua animação pode representar para a máquina em que for correr. Como tudo o que é gerado em Flash é convertido para informações vectoriais, é preciso usar maior capacidade da máquina para poder desenhar todos os elementos correctamente e nos tempos certos das animações; ainda mais se contiverem músicas ou sons que

178

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

precisem estar síncronos. Logo, todas as animações em Flash requerem em menor ou maior grau poder de processamento da máquina. Elementos de tamanhos grandes e com efeitos de transparências ou degradés, por exemplo, irão requisitar mais processamento da máquina. Se possível teste as suas animações na máquina mais modesta que tiver por perto. Se ela conseguir mostrar tudo correctamente é um óptimo sinal de que em máquinas mais sofisticadas tudo correrá bem.

BANDWIDTH PROFILER

Um outro auxiliar do Flash que poderá utilizar para verificar o “peso” das suas animações é o BANDWIDTH PROFILER. Este módulo é capaz de fazer uma análise frame a frame da carga da sua animação. Saiba que ao carregar a animação via Internet, por exemplo, a carga será feita por frames na ordem correcta da animação. Assim, se tiver frames ou conjuntos de frames com uma carga muito grande haverá uma demora excessiva quando estes frames tiverem de ser carregados. Isto poderá inclusive reflectir um abrandamento da animação durante o play. O ideal é que consiga a menor animação possível e que haja uma distribuição homogénea da carga ao longo dos frames da animação a fim de evitar que existam frames com muita carga e outros sem carga alguma que possam interferir no download ou play da animação. Então poderá correr o Bandwidth Profiler para analisar a carga da animação em cada frame. Para isso, primeiro accione o modo de TEST MOVIE do Flash, conforme explicado na secção anterior, e então no menu VIEW escolha BANDWIDTH PROFILER.

I.3. LAYERS, TIMELINE E ANIMAÇÃO

179

Na figura atrás pode ver que a animação em questão tem três frames, representados pelos pequenos traços verticais na parte de cima das colunas. Cada uma dessas colunas representa a carga do filme em cada um desses frames. A primeira coluna atinge o valor de 8 Kbytes, a segunda atinge aproximadamente 3 Kbytes e a terceira menos de 1 Kbyte. Na secção esquerda da janela pode ver as informações sobre o filme: tamanho em pixéis, taxa de fps, tamanho do ficheiro, quantidade de frames totais da animação e o tempo de carga total do ficheiro (neste caso, 2,6 segundos). No menu DEBUG poderá ajustar a velocidade do MODEM ou LINK, para que possa ver como a sua animação seria carregada em diferentes velocidades de download. A linha vermelha que corta horizontalmente os gráficos na marca dos 400 Bytes indica o máximo de bytes que poderiam ser trazidos por download para que o frame fosse visto em tempo real. Na prática, isso significa que se cada frame da animação tivesse no máximo 400 bytes, então a animação poderia ser puxada da Internet em play normal sem existir nenhum abrandamento na animação. Qualquer valor acima disso causaria um abrandamento do play. Logicamente poderá notar isso pelas informações da coluna da esquerda pois, se a animação tem 3 frames e o Flash está ajustado para PLAY a 12 fps, então o tempo total de download deveria ser 3/12 segundos. Porém, a janela diz-nos que o tempo total de carga é de 2,6 segundos. Por defeito, o Bandwidth Profiler mostra o gráfico de carga pelo modo STREAMING, ou seja, a distribuição de carga à medida em que é feito o download do filme. Se for ao menu VIEW e escolher a opção FRAME BY FRAME GRAPH, verá então a carga por frame. Outra opção neste menu é SHOW STREAMING. Se a accionar vai ver o Flash simular o download do filme na velocidade do MODEM escolhida no menu DEBUG. O primeiro frame de qualquer animação, pela própria forma como o Flash funciona, é geralmente grande. Neste frame são armazenados todos os objectos e símbolos que estarão presentes no filme.

180

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

I.4. SÍMBOLOS, EFEITOS e BIBLIOTECAS

Quando cria um objecto, seja ele um gráfico (graphic), botão (button) ou filme (movie clip) no Flash MX, este é colocado em algo chamado biblioteca (library), de onde pode ser recuperado para posterior uso, seja no mesmo projecto, seja em projecto diferente. O Flash MX mantém uma biblioteca para cada projecto que fizer e também vem com uma biblioteca com diversos objectos prontos a usar.

As suas próprias bibliotecas
Sempre que estiver a criar páginas ou animações em Flash de qualquer tipo, deve sempre ter por objectivo conseguir um ficheiro com o menor tamanho possível que corresponda ao seu trabalho, pois ficheiros menores são mais rápidos a correr e a carregar. Se a animação vai ser vista via Internet mais uma razão para sempre seguir essa regra. Para conseguir isso, deverá quase que obrigatoriamente criar e reutilizar objectos das bibliotecas. Praticamente, todo o trabalho em Flash permite o uso repetido de objectos previamente criados no mesmo projecto. Se vai usar um rectângulo várias vezes num determinado projecto deve criar um rectângulo na biblioteca e de lá arrastá-lo para todos os pontos onde o for utilizar. Desta forma optimizará e minimizará o tamanho dos seus projectos em Flash, tornando-os menores e mais rápidos. Assim como o Flash tem bibliotecas de objectos, você também poderá ter as suas. A vantagem de as ter é poder reutilizar objectos previamente criados nas suas animações em qualquer momento.

182

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

Sempre que reutiliza um objecto num projecto, o Flash cria uma instância deste, que equivale apenas a armazenar informações acerca de onde e como o objecto está a ser utilizado. Logo, há uma economia de espaço uma vez que não precisa armazenar as definições da forma do objecto. Todos os objectos (símbolos) que criar num determinado projecto são automaticamente colocados numa biblioteca própria referente ao projecto em que estiver a trabalhar. Assim, ao iniciar um novo projecto, poderá abrir a biblioteca de um projecto anterior e importar os objectos desejados. Se observar no menu FILE, vai ver um item nomeado OPEN AS LIBRARY. Se o utilizar poderá abrir um projecto como uma biblioteca. Faça isso e verá surgir automaticamente a janela correspondente, de onde poderá arrastar objectos para o seu projecto actual.

Uma segunda opção no menu FILE é a IMPORT TO LIBRARY, que importa a biblioteca de um projecto para a biblioteca na qual está a trabalhar.

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

183

Na prática, basta abrir a biblioteca que pretende e dela arrastar para a sua biblioteca ou directamente para o seu projecto os objectos desejados.

Graphics, Button e Movie Clips
Como dissemos, as bibliotecas do Flash MX permitem o armazenamento de três tipos de símbolos: graphics, movie clips e buttons (gráficos, filmes ou botões). Quando cria formas na área de desenho e sabe que não terão movimento, deve criá-las como sendo GRAPHIC. Os gráficos são símbolos estáticos como logótipos, imagens de fundo ou elementos que não terão movimento, ou seja, um logótipo estático pode ser um caso de GRAPHIC mas um boneco a dançar não, já que a imagem do boneco modifica-se ao longo do tempo. Um símbolo do tipo GRAPHIC pode entretanto ser animado em tamanho, posição, transparência ou cor. Um símbolo do tipo MOVIE CLIP, por outro lado, já permite animações. Enquanto que os GRAPHIC possuem apenas um frame, os MOVIE CLIPS podem ter qualquer quantidade de frames. Então, se imaginar um MOVIE CLIP como um boneco com as pernas a mexer poderá animá-lo a deslocar-se ao longo do ecrã sem se preocupar com o movimento das pernas, que já é intrínseco ao próprio objecto em si. Os símbolos do tipo BUTTON são os botões ou qualquer outro elemento que deva ter a propriedade de poder ser clicado. Quando o rato encontrar qualquer símbolo deste tipo numa animação automaticamente mostrará que se trata de um elemento clicável. A definição do tipo do símbolo é feita no momento da sua criação ou conversão (INSERT > NEW SYMBOL ou INSERT > CONVERT TO SYMBOL), conforme visto na janela a seguir.

184

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

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

Deve reparar na imagem acima que existem três entradas adicionais na biblioteca, nomeadas TWEEN 1, TWEEN 2 e TWEEN 3 que lá apareceram sem a nossa intervenção. Estes símbolos adicionais representam as animações do objecto “cruz”, já que é um movie clip. Não deve apagar estes símbolos “estranhos” que o Flash for colocando na biblioteca à medida em que for criando os seus trabalhos, a não ser que saiba tratar-se de algo não mais utilizado. Se o fizer corre o risco de deitar fora animações e movimentos de objectos que já havia criado.

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

185

Graphic (gráficos)
Para criar um símbolo do tipo GRAPHIC no Flash MX, basta ir ao menu INSERT > NEW SYMBOL e, em seguida, desenhar o objecto pretendido. Automaticamente estará a criar uma nova entrada na biblioteca. Em seguida, vá a WINDOW > LIBRARY, e faça surgir a janela da biblioteca vista abaixo com os objectos que criamos.

Agora arraste da biblioteca para a área de desenho os objectos que tiver criado. Modifique o tamanho, crie efeitos de distorção, animações, etc. Vai ver que pode fazer com eles o que quiser, com excepção de mudar as cores, com o balde de pintura/tinteiro, ou a forma pelo uso das ferramentas de selecção. Se fizer isto estará a modificar o objecto em si, e todas as cópias deste passarão a ficar com a nova aparência. Caso precise mudar a cor de uma instância, a única forma possível é pelo uso de um efeito, que veremos mais adiante. Porém, o efeito muda a cor do objecto todo em conjunto, ou seja, se possui um objecto com

186

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

diversas cores, ao aplicar um efeito estará a afectar todas as cores deste. Se precisar aplicar mudanças diferentes a cada uma das cores, deve considerar separar as partes do objecto em diferentes símbolos, que depois poderão ser agrupados pelo comando GROUPS (CONTROL G) para facilitar a animação ou manipulação deste.

Button (botão)
Criar um botão no Flash é um trabalho deveras fácil. Em poucos passos terá o seu a funcionar. Para que seja possível esta criação basta apenas que tenha em mente a forma como o Flash MX trata este tipo de objecto e assim fornecer as imagens de que necessitará. Um botão no Flash possui três estados: UP, OVER e DOWN. O estado UP equivale à aparência que o botão tem quando está normal. Assim que o rato passa por cima deste é assumida a aparência indicada no estado OVER. O estado DOWN representa a aparência que o botão tem quando nele carregar. Carregue em INSERT > NEW SYMBOL para criar um novo símbolo. Na janela que se seguirá nomeie o objecto como “botão” e ajuste o campo BEHAVIOR para BUTTON.

Vai ver que a área de desenho fica em branco. Isto é porque agora está na área de desenho do botão. Na parte de cima, o timeline muda de aparência e passa a mostrar os estados do botão.

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

187

Repare que a linha vertical está posicionada em UP e uma bolinha em branco, ou seja, um keyframe em branco (blank keyframe) está a representar o estado que se está a criar. Então, crie um desenho para representar o estado normal do botão. Criamos algo como na figura abaixo.

Carregue na caixa em branco do timeline, na coluna OVER, e clique com o botão da direita do rato. Escolha a opção INSERT BLANK KEYFRAME para começar a desenhar o novo estado do botão.

188

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

Desenhe então neste estado a mesma figura acima, porém com a seta a apontar para o lado direito. Repita a operação para o campo DOWN, e volte a modificar a seta para que esta aponte para baixo. Fica então com três desenhos diferentes, cada um a representar um estado do botão. Falta agora definir o campo que diz HIT, sobre o qual ainda não havíamos falado. Neste campo irá indicar ao Flash que área do botão está activa para clicar, ou seja, se quiser que toda a área do botão esteja activa, então deverá na área de HIT desenhar um círculo que cubra toda a superfície deste. Poderá definir a área que desejar. Definimos esta área como sendo toda a superfície do botão. O nosso botão tem agora os seguintes estados:
UP OVER DOWN HIT

Criados os estados volte à cena principal da animação, por meio de um clique na palavra SCENE 1, no canto superior esquerdo da área de desenho.

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

189

Faça surgir a biblioteca (WINDOW > LIBRARY) e arraste de lá o botão para a sua área de desenho. Coloque o Flash MX no modo de teste (CONTROL > TEST MOVIE) e vai ver que o botão funciona perfeitamente. Se quer acrescentar um som ao botão, basta criar um layer novo, colocar um keyframe em branco na coluna correspondente ao estado em que quer colocar o som e arrastar o som para a janela de desenhos. Então, por exemplo, poderá ter um som a ser tocado quando o botão entrar no estado UP, outro para o estado OVER e um terceiro para o estado DOWN.

Movie Clips
Um movie clip é um símbolo que em si próprio já é um filme, ou seja, possui movimento próprio. Digamos que gostaríamos de criar o movimento de uma bola a saltar conforme a figura abaixo.

190

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

Então poderíamos imaginar um movie clip como sendo a bola a saltar até encerrar o seu movimento, mas sem se deslocar na horizontal. Em seguida poderia animar o movie clip a deslocar-se na horizontal. Logo, teria uma composição de movimentos que causaria a ilusão da bola estar a saltar e a deslocar-se horizontalmente. Veja as figuras abaixo.

Dentro da área correspondente ao movie clip, representada pelo rectângulo, a esfera movimenta-se para cima e para baixo, simulando o movimento de saltar no mesmo lugar.

Arrastamos esse movie clip da biblioteca para o nosso projecto e fazemos uma animação dele a deslocar-se para a direita...

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

191

Como a esfera dentro do movie clip movimenta-se a saltar e o próprio movie clip é deslocado para a direita, então, pela combinação de movimentos , veremos a esfera a saltar enquanto que se desloca para a direita...

Efeitos de Cor e Transparência
Existem diversos tipos de efeitos que poderá aplicar num determinado objecto da biblioteca, assim que o trouxer para a sua animação. Basicamente, os efeitos relacionam-se com as cores ou com a transparência do objecto. Se trouxer um objecto da biblioteca para a sua área de desenho e o seleccionar, deverá observar o campo COLOR na janela de propriedades, conforme visto na imagem abaixo.

Neste campo, encontrará diversas outras opções além de NONE, nomeadamente, BRIGHTNESS, TINT, ALPHA e ADVANCED. A seguir, vamos à explicação de cada uma delas.

192

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

Brightness Se seleccionar esta opção, poderá regular o brilho do objecto de –100 a 100%, por meio de uma caixa que surge ao lado do campo COLOR.

Se ajustar o brilho totalmente a 100% fará com que o objecto fique completamente branco. Se o ajuste for feito a –100% o objecto ficará completamente negro. Em 0% o objecto tem a aparência normal. Tint Se ajustar o campo COLOR com a opção TINT, poderá acrescentar uma cor a ser somada à cor do objecto em si. Ao seleccionar esta opção, vê o campo COLOR da janela de propriedades transformar-se conforme imagem abaixo.

Na caixa colorida ao lado da palavra TINT poderá regular a cor a somar ao objecto, que também poderá ser ajustada pelos três campos RGB na parte inferior. Ao lado da caixa de cor encontra-se também outra caixa com o valor 100%. Isto significa que a cor escolhida está a ser somada

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

193

100% à cor do objecto original, o que significa que este passa a ter a nova cor. Se colocar 0%, significa que o objecto mantém a sua cor original e não sofre efeito algum de TINT. Alpha O nome ALPHA vem de ALPHA CHANNEL (canal alfa), que é a designação mais antiga de que se tem notícia para nomear a informação de transparência de um material. Se escolher ALPHA como opção de efeito, verá a janela de propriedades com a aparência abaixo.

Na caixa ao lado do nome ALPHA, poderá regular o grau de transparência do objecto. Os valores podem estar entre 0 e 100%, sendo o primeiro equivalente ao objecto completamente transparente e o segundo a completamente opaco. Advanced Esta opção do menu COLOR realmente é a mais completa e combina várias das opções anteriores numa só interface. Assim que a escolher, vai ver que a janela de propriedades assume a aparência abaixo.

194

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

Se carregar no botão SETTINGS verá então,

Vai ver que as três primeiras linhas equivalem aos canais de cor RGB e a última ao canal de transparência. Em cada linha, a primeira caixa permite regular a intensidade de cada canal, entre -100 e 100%, e a segunda caixa representa um valor a ser somado a este canal, entre -255 e 255.

OBSERVAÇÃO
Logicamente todos os efeitos podem ser animados!

Bibliotecas do Flash
Para alegria de toda a gente, esta nova versão do Flash vem com diversos objectos reclamados durante anos e que podem ser usados nos seus projectos. Estes objectos estão separados em diversas categorias as quais passaremos a explicar a seguir.

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

195

A primeira delas é a biblioteca de botões. Para fazer surgir a janela da biblioteca com estes itens, vá ao menu WINDOWS > LIBRARY > BUTTONS. Verá então a seguinte janela:

Arcade Buttons Vai ver diversas categorias separadas em pastas. A primeira delas é a ARCADE BUTTONS que disponibiliza o botão tipo máquina de pinball em diversas cores, como na figura abaixo.

196

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

Circle Buttons Na categoria CIRCLE BUTTONS vai encontrar botões como os vistos abaixo.

E também os do tipo a seguir.

Component Buttons Na categoria COMPONENT BUTTONS, vai encontrar novamente o botão do tipo ARCADE, porém, ao trazê-lo para a área de desenhos e seleccioná-lo, vai ver que a janela de propriedades desta vez mostra algo completamente diferente, que demonstra uma nova potencialidade do Flash MX!

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

197

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

A subdivisão COMPONENT BUTTONS ainda lhe traz mais três botões, o KEYBOARD BUTTON, o PILL BUTTON e o PUSH BUTTON, vistos a seguir.

O KEYBOARD BUTTON permite, nas propriedades, a escolha da letra a ser colocada na tecla. O PILL BUTTON permite, nas propriedades, regular a largura, a palavra a ser colocada em cima, a cor da base do botão e a cor do brilho.

198

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

O PUSH BUTTON, por sua vez, permite apenas regular a cor interna. Key Buttons Nesta categoria vai encontrar novamente teclas de computador e mais as setas.

Knobs & Faders Nesta categoria vai encontrar os tão desejados botões deslizantes e rotativos para as suas páginas, como os vistos abaixo.

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS

199

São botões completos que não precisam de nada para funcionar. Basta colocá-los nas suas páginas e pronto1. Ovals Nesta categoria terá botões ovais coloridos como o seguinte, existente em diversas cores.

Playback O tão adorado visual “aqua” do MacOS X está presente em botões existentes nesta categoria.

Também terá nesta categoria botões como os vistos abaixo.

1

É lógico que depois vai precisar de um pouco de ActionScript para poder ler os valores que o

utilizador ajustar.

200

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

Push Buttons Esta última categoria traz novamente o botão PUSH BUTTON existente na categoria COMPONENT BUTTONS. Porém, os botões presentes não permitem regular a cor 2. Estão sim presentes em várias cores pré-ajustadas.

SOUNDS
Outra biblioteca que acompanha o Flash MX e que está de acordo com o objectivo introdutório deste livro é a encontrada em WINDOW > COMMON LIBRARIES > SOUNDS. Ao escolher esta opção fará surgir a janela abaixo, que contém diversos sons para que os possa utilizar nas suas animações.

2

Pelo menos não sem uso de ActionScript.

I.5. COMPONENTES

Neste capítulo vamos falar sobre uma das grandes inovações no Flash, os COMPONENTES. Estes objectos agora disponibilizados pela Macromedia são a resposta aos anseios dos utilizadores ao longo dos últimos anos, reunidos em objectos sofisticados e de relativa facilidade de uso. Convém saber que estes novos componentes do Flash têm a sua maior utilidade quando acompanhados do apropriado código em JavaScript, que é o que realmente os faz funcionar. Neste capítulo abordaremos a explicação de cada um deles, já que sobre o ActionScript falaremos mais adiante. Se olhar para a interface gráfica do Flash MX, a seguir aos SWATCHES vai ver uma janela de COMPONENTS. Nela encontrará os componentes fornecidos para a criação de interfaces gráficas.

202

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

A utilização destes componentes só é plenamente aproveitada se tiver subrotinas em ActionScript1 a correr, para ler as propriedades resultantes da interacção dos utilizadores com os componentes e daí derivar acções que tornem a página mais interessante. Também com ActionScript é possível criar componentes “on the fly”, ou seja, apenas pelo uso da linguagem de programação, sem que estes tenham que estar presentes graficamente nos filmes Flash. A seguir veremos então cada um destes componentes e as suas funções2.

CheckBox
O CheckBox é uma caixa que pode ser marcada ou desmarcada pelo utilizador. Deve ser utilizado quando pretende restringir as possíveis respostas dos utilizadores a uma certa questão. Veja o exemplo abaixo.

Observe que os CheckButton permitem livre marcação, ou seja, mais de um quadro pode ser escolhido.
1

ActionScript é a linguagem de programação utilizada no Flash, que possui centenas de comandos

para permitir virtualmente qualquer tipo de criação. 2 Logicamente neste capítulo apenas vamos demonstrar a funcionalidade de cada objecto. O uso avançado será abordado na segunda parte deste livro, onde falaremos de ActionScript.

I.5. COMPONENTES

203

RadioButton
O RadioButton tem praticamente a mesma função do CheckBox, porém, não permite a marcação de mais de um controlo de mesmo tipo. Assim, se tiver três componentes RadioButton num formulário, apenas um poderá estar activo num dado momento. Se observar a figura abaixo e a comparar com a anterior vai entender o significado disso.

Ao olhar para o exemplo acima vê que pela pergunta realizada não faz sentido permitir a marcação de mais de uma opção. Quando for este o caso usa-se o RadioButton. Outros exemplos são, quando num formulário perguntar se o utilizador tem ou não e-mail, ou alguma outra questão onde não faça sentido mais de uma resposta.

PushButton
O PushButton é o botão que precisa estar presente em todos os formulários para permitir o envio da informação.

204

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

ListBox
Com uma ListBox poderá fazer listas de escolha para os utilizadores. Por defeito, este componente está ajustado para apenas permitir que o utilizador faça uma escolha. Porém, a mudança de uma propriedade pode permitir múltiplas escolhas.

I.5. COMPONENTES

205

ComboBox
O ComboBox3, ao contrário do ListBox, apenas mostra uma opção à entrada. No caso abaixo, temos apenas visível a frase “faça uma escolha...”.

Porém, quando o utilizador carrega na caixa, ela desdobra-se e mostra uma segunda janela com as opções, permitindo assim a escolha.

3

Conhecido em muitos programas como DROP DOWN MENU.

206

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

No caso das ComboBox, somente uma escolha é possível.

ScrollPane
Este componente permite criar áreas completas com barras de deslocamento4 horizontais e verticais onde poderá colocar imagens, filmes Flash5 ou textos. Veja a seguir.

Para aguçar o seu apetite, enquanto não entramos na secção de ActionScript, vamos à explicação de como foi feita esta ScrollPane. Logicamente, a primeira coisa é criar a ScrollPane; o que é feito arrastando-se o componente da janela “components” para a área de desenho. Vai ver então a seguinte figura.

4

Barras de deslocamento ou scroll bars são as barras existentes nos programas que nos permitem

deslocar textos ou imagens para os lados.
5

Formato SWF

I.5. COMPONENTES

207

Crie um novo símbolo (CONTROL F8), e na janela que se seguirá nomeie-o como “texto”. Ainda nesta janela marque o campo que diz BEHAVIOR como GRAPHIC; marque o quadro que diz EXPORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque também a palavra “texto”. Carregue em ENTER6.

6

Se estas últimas opções não estiverem presentes carregue no botão que diz ADVANCED.

208

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

A seguir, escolha a ferramenta de criação de textos, o TEXT TOOL (T), posicione o rato num ponto na parte média esquerda da área de desenho. Carregue no botão do rato e arraste-o para a direita. Vai ver que surge uma caixa para escrita. Escreva o texto pretendido. No canto superior direito da área de desenho carregue no ícone correspondente a uma claquete e escolha a opção Scene 1, para voltar à cena principal.

De volta à cena principal, seleccione o ScrollPane, para que fique activo, e na janela de propriedades mude o campo Scroll Content para o nome que deu ao identifier do texto, no caso, “texto”.

I.5. COMPONENTES

209

PRONTO! Coloque o Flash no modo de visualização e teste o filme (CONTROL ENTER), para ver o ScrollPane a funcionar.

ScrollBar
O ScrollBar é o último campo dos componentes disponíveis no Flash MX. A função dele é permitir a construção de caixas com barras de deslocamento. Desta forma, pode-se numa pequena área colocar grandes quantidade de texto. A aparência de uma caixa de texto deste tipo assemelha-se à criada pelo ScrollPane. Veja na figura abaixo.

Para criar uma janela de texto com ScrollBar, faça o seguinte: Primeiro seleccione a ferramenta de textos. Vá à barra de propriedades e troque o campo “STATIC TEXT” para “DYNAMIC TEXT”, o campo “SINGLE LINE” para “MULTILINE” e o campo “<INSTANCE NAME>”, para “texto”.

210

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

Com o rato na área de desenho, crie uma região rectangular para colocar o texto que pretende. Coloque nesta área uma quantidade de texto maior do que a caixa poderia permitir. Vai ver que a caixa aumenta de tamanho e ultrapassa a fronteira da área de desenho do Flash, como na figura abaixo.

Seleccione a caixa do texto que inseriu. Uma linha azul aparecerá à volta a indicar a selecção activa. Carregue duas vezes com o rato em cima dessa caixa marcada a azul, para entrar no modo de edição de texto. A caixa azul então muda de cor, ficando negra, e aparece um quadrado no canto inferior direito. Arraste este quadrado para diminuir o tamanho da caixa, voltando a colocá-la dentro da área de desenho do Flash.

I.5. COMPONENTES

211

Escolha a ferramenta de selecção de objectos na barra de ferramentas e volte a seleccionar a caixa de textos 7. Arraste o ScrollBar da janela de componentes e liberte-o próximo do border onde deseja colocar a barra de deslocamento, seja esta horizontal ou vertical 8. Deve fazê-lo numa área próxima ao border, desde que seja no interior da caixa. Vai ver que o Flash faz aderir imediatamente a barra à caixa de textos, já ficando esta com o tamanho exacto. Teste o filme (CONTROL ENTER). Vai ver que tudo está a funcionar perfeitamente.

7

Isto fará com que saia do modo de edição de textos, que é o que pretendíamos. O Flash, por defeito, cria sempre barras de deslocamento vertical, mas uma vez criada a barra,

8

pode mudá-la para horizontal na janela de propriedades.

212

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

Caso também desejasse uma barra horizontal, basta repetir o procedimento indicando o local onde deseja a colocação da barra. A regra geral é a seguinte: se arrastar um ScrollBar para áreas próximas à borda esquerda ou direita da caixa de textos, vai ter a criação de uma barra de deslocamento vertical, e se arrastar para áreas próximas às bordas inferior ou superior da caixa de textos, então terá barras de deslocamento horizontal. Se quiser pode ter todas... J

I.5. COMPONENTES

213

Actions (ActionScript)
A última secção da interface gráfica do Flash sobre a qual ainda falta falar é a de ACTIONS, que pode ser encontrada na parte central inferior do ecrã, logo abaixo da área de desenho.

ActionScript é a linguagem de programação do Flash. Com ela poderá fazer praticamente tudo o que puder imaginar. Quase que a totalidade das páginas em Flash mais sofisticadas precisam fazer uso do ActionScript para poderem funcionar como planeado. A simples colocação de um botão na página, que responda aos cliques dos utilizadores com acções previamente planeadas, faz uso de ActionScript para poder funcionar.

Objectos encapsulados
Para melhor visualizarmos a forma pela qual o Flash trata todos os objectos, podemos considerar, por exemplo, o caso da colocação de um botão numa página que responda às acções de clique dos utilizadores. As páginas construídas em Flash podem ser consideradas como aplicações9, já que na sua essência são exactamente isso. Normalmente são
9

Sim, pode considerar uma página em Flash como sendo uma aplicação já que na sua essência é

exactamente isso.

214

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

ficheiros que reúnem todo o seu conteúdo no seu interior (áudio, vídeo, texto, etc.), ao contrário das páginas normais de Internet em HTML, que precisam referenciar todos os ficheiros necessários à boa visualização, já que não têm a capacidade de armazenar nada no seu interior que não seja texto. O Flash com o ActionScript forma um ambiente de programação orientada ao objecto. Por outras palavras, isto significa que qualquer software criado por meio do uso desta linguagem é composto por vários objectos menores independentes que interagem entre si. Pela independência de cada objecto e por conterem no seu interior todo o código necessário ao seu funcionamento, são chamados objectos encapsulados (encapsulated objects). Além de ter diversas propriedades, cada objecto é dotado da possibilidade de reagir a determinados eventos com acções que podem ser designadas pelos programadores. Cada um destes eventos dá aos programadores a possibilidade de fazer interacções e combinações e permite a criação de aplicações sofisticadas e intrincadas. Imagine, por exemplo, que possui no Flash um objecto que é uma lâmpada. Esta lâmpada possui uma propriedade chamada “ESTADO”, que pode ser ajustada com apenas dois valores: 0 ou 1. Se o ESTADO for colocado em “1” a lâmpada liga e em “0”, desliga. Então, o fabricante da lâmpada r esolve sofisticar o objecto e cria um evento chamado “QuandoLigado10”. Permite então que este evento possa ser associado a uma determinada acção11 a ocorrer todas as vezes que a propriedade da lâmpada passe de 0 a 1. Então pode associar a este evento uma acção, como por exemplo, fazer aparecer o cão e apagar a luz.
10

Usamos esta notação porque aproxima-se mais da forma como vai ver as propriedades e

eventos dos objectos quando com eles se deparar.
11

A acção pode ser qualquer coisa que imaginar, por exemplo, o carregar de uma página de

Internet.

I.6. COMPONENTES AVANÇADOS

No site do fabricante do Flash MX, a Macromedia, descobrimos alguns ‘brinquedos’ interessantes que poderá acrescentar ao seu programa e fazê-lo brilhar!! Os ‘brinquedos’ são alguns componentes adicionais para a criação de interfaces gráficas e outros para páginas em geral. Para instalá-los é preciso utilizar um programa da própria Macromedia, disponível no site, chamado EXTENSION MANAGER, que é um painel de controlo, para a instalação de novos componentes ao Flash MX. Veja no Anexo III como obter o programa, as extensões e como fazer para as instalar. Tendo já feito a instalação das extensões, o primeiro grupo de componentes novos que encontrará no seu Flash MX chama-se Flash UI COMPONENTS SET 2, que são componentes adicionais à criação de interfaces gráficas avançadas. O segundo grupo é o Flash CHARTING COMPONENTS, que são controlos para a criação de gráficos nas suas páginas ou aplicações Flash. Vamos então a partir de agora, à análise dos componentes.

Flash UI Components Set 2
CALENDAR
O primeiro componente do grupo é o CALENDAR (calendário). É exactamente o que o nome diz. Um calendário completo a funcionar para utilizar nos seus programas e páginas Flash.

216

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Seleccione o calendário e veja que a janela de propriedades do componente fica como a imagem abaixo.

Na janela acima, a primeira propriedade chama-se Selection Type e está preenchida com “SINGLE”. Se carregar duas vezes sobre a palavra SINGLE vai ver que duas outras escolhas são oferecidas: RANGE e MULTIPLE. Esta propriedade controla de que forma o calendário funcionará quando estiver na sua página Flash. Se a propriedade estiver em SINGLE, o utilizador apenas poderá escolher um dia de cada vez no calendário. Em MULTIPLE, será permitido ao utilizador escolher vários dias e em RANGE uma faixa de dias pode ser escolhida. Logicamente, saber o que foi escolhido pelo utilizador e

I.6. COMPONENTES AVANÇADOS

217

trabalhar com as hipóteses daí decorrentes só é possível pelo uso de ActionScript. Logo a seguir vemos a propriedade MONTHS. Se carregar uma vez em cima da lista dos nomes dos meses verá a janela abaixo.

Repare que na figura acima existe uma coluna numerada de 0 a 11 e a seu lado os meses correspondentes 1. Se carregar sobre cada um dos nomes dos meses pode mudá-los para a língua que desejar. A setas s para cima e para baixo mudam uma determinada linha da tabela (mês) para cima ou para baixo dentro da tabela. O sinal de mais e de menos acrescentam e apagam, respectivamente, meses na tabela. De volta às propriedades do controlo, vai encontrar uma propriedade chamada DaysOfWeek (dias da semana). Se carregar uma vez sobre a lista de nomes desta propriedade vai ver a janela a seguir.
1

JANUARY, FEBRUARY, MARCH, APRIL, MAY, JUNE, JULY, AUGUST, SEPTEMBER,

OCTOBER, NOVEMBER e DECEMBER.

218

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Tal como no exemplo anterior, nesta janela poderá ajustar os dias da semana para a língua que quiser. Os números ao lado dos nomes representam o valor que será retornado pelo ActionScript caso seja escolhido um dia que corresponda a um dos dias da semana listados na segunda coluna 2. A próxima propriedade do controlo chama-se FirstDayOfWeek (primeiro dia da semana) e está preenchida por defeito com o número zero, que corresponde a SUN (Sunday = Domingo). Ajuste esta caixa com o número do primeiro dia da semana que tiver colocado na figura acima. Se quiser que o primeiro dia da sua semana seja o dia na quarta linha da tabela, então este campo deve conter o valor 3.

2

SUN, MON, TUE, WED, THU, FRI e SAT são as abreviaturas dos dias da semana em Inglês:

SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY e SATURDAY, isto é, DOMINGO, SEGUNDA... respectivamente.

I.6. COMPONENTES AVANÇADOS

219

DRAGGABLEPANE
Este controlo chamado Draggable Pane é, nada mais, nada menos, do que o de janelas arrastáveis completas e prontas a usar, com um ícone para minimizar (triângulo no canto superior esquerdo) e outro para fechar (o X no canto superior direito).

As janelas podem ser arrastadas (pela barra do título). Por meio de um clique na barra do título é possível trazer para a frente uma janela que esteja por baixo de outras. Funcionam aproximadamente com a mesma lógica utilizada nas janelas comuns do Windows ou MacOS. Uma janela pode conter qualquer tipo de objecto, conforme veremos mais adiante. Possuem as seguintes propriedades:

220

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Colocamos na propriedade nomeada Pane Title o valor “janela 1”, conforme pode ver atrás. Esta propriedade representa o título da janela, que pode ou não ser colocado.

As últimas quatro propriedades da janela são: Has Close Box, Is Scrolling, Resizable e Has Shader. Elas representam o seguinte: HAS CLOSE BOX – indica se a janela tem ou não o X no canto superior direito para permitir que seja fechada pelo utilizador. IS SCROLLING – indica se a janela tem ou não barras de deslocamento (scroll bars) na horizontal e vertical. RESIZEABLE – indica se o tamanho da janela pode ser modificado pelo utilizador. HAS SHADER – indica se a janela tem ou não o botão no canto superior esquerdo para minimizar.

Se está atento, notou que passamos à frente uma propriedade, a SCROLL CONTENT . Com essa propriedade, a exemplo do que fez nos exemplos do ScrollBar e do ScrollPane, vai indicar aquilo a fazer scroll dentro da janela. De facto, esta propriedade refere-se a um objecto que poderá conter outros tantos, textos, imagens, sons, vídeos, etc. Se for um texto, faça o seguinte: Crie um novo símbolo e na janela que se seguirá nomeie-o como “texto”. Ainda nesta janela marque campo que diz BEHAVIOR como GRAPHIC, marque o quadro que diz EXPORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque também a palavra “texto”. Carregue em ENTER.

I.6. COMPONENTES AVANÇADOS

221

Siga o mesmo procedimento que utilizou no componente ScrollPane para criar uma caixa de texto dinâmica. Na janela do componente DraggablePane, marque o campo ScrollContent com o que preencheu no campo IDENTIFIER da janela acima, ou seja, “texto”. Coloque o Flash no modo de teste e verifique que o texto está perfeitamente dentro da janela, pelo menos teoricamente...3 Caso seja uma imagem que pretende colocar dentro da janela, siga exactamente o mesmo procedimento, mas após a criação do novo sím bolo importe uma imagem da biblioteca ou do disco para este novo objecto.

3

Detectamos um bug no controlo DraggablePane quando é colocado um texto no interior da janela:

quando se desloca a barra de scroll vertical da janela toda para baixo, o texto aparece fora da janela na parte de cima. Com imagens isso não acontece.

222

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

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

DICA
Se fizer um novo símbolo que contenha outros, como botões, imagens, sons, etc., pode colocar tudo dentro de uma janela, se referenciar apenas este símbolo principal no ScrollContent.

I.6. COMPONENTES AVANÇADOS

223

Se usar esse princípio, poderá colocar qualquer coisa dentro da janela!

ICONBUTTON
Com este componente poderá criar botões, prontos a usar, e que permitem a colocação de imagens à face. Para criar um botão com este componente basta arrastá-lo para a área de desenho. Em seguida, deve criar um novo símbolo, com uma imagem qualquer (utilizamos uma gaivota), pelo mesmo procedimento utilizado no exemplo anterior e dar ao IDENTIFIER deste símbolo o nome “gaivota”. Carregue no IconButton que está na área de desenho e na janela das propriedades ajuste o campo que diz ICON para “gaivota”.

Vai ter então, um botão com a imagem da gaivota na face. Voilà!

224

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

As outras propriedades do IconButton são as seguintes. LABEL – permite a colocação de um título (frase) que fica agregada à imagem que inserir para a face do botão. LABEL PLACEMENT – permite escolher em que posição relativa à imagem deve ficar posicionada o tal LABEL acima. As posições possíveis são: LEFT, RIGHT, TOP e BOTTOM, ou seja, à esquerda, à direita, acima e abaixo da imagem, respectivamente. TOGGLE – esta propriedade ajusta a forma de funcionamento do botão. Normalmente o botão funciona da seguinte forma. Chamemos de estado A o estado no qual o botão está em repouso e B o estado no qual ele está quando nele se clica. Assim, o botão que está em A só fica no estado B enquanto estiver a carregar com o rato sobre ele. Logo que liberta o botão do rato o botão volta ao estado A. Porém, a propriedade TOGGLE altera essa forma de funcionamento. Esta propriedade está ajustada por defeito como FALSE e neste estado corresponde ao modo de funcionamento normal descrito no parágrafo anterior. Se alterar esta propriedade para TRUE, fará o botão funcionar da seguinte forma: inicialmente estaria no estado A e assim que clicasse sobre ele faria que ele assumisse o estado B, assim permanecendo mesmo depois de libertado o botão do rato. Seria preciso outro clique para o fazer voltar ao estado A e assim sucessivamente. INITIAL VALUE – O valor normal desta propriedade é FALSE, o que faz o botão inicialmente ser mostrado em repouso com a aparência (A) e com a aparência (B) enquanto estiver a carregar sobre ele. Se passar a propriedade a TRUE, inverterá esta condição. BACKGROUND – Esta propriedade é surpreendente! Não satisfeitos em permitir a colocação de uma imagem na face do botão, também permitiram a colocação de outra imagem para o fundo do botão. O procedimento para agregar outra imagem a esta propriedade é o mesmo que foi descrito para o campo ICON.

I.6. COMPONENTES AVANÇADOS

225

MESSAGEBOX
Este componente permite a criação de caixas de mensagem para os seus programas ou páginas Flash.

Se olhar para a janela de propriedades vai ver a imagem a seguir.

As propriedades vistas nesta caixa significam o seguinte: TITLE – permite criar um título para a caixa de mensagens. Colocamos a palavra TÍTULO neste campo. MESSAGE – indica a mensagem a ser mostrada na caixa. Colocamos a frase: ESTA É A MENSAGEM neste campo.

226

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

ICON – este campo permite a colocação de um ícone associado à caixa de mensagem, para melhor a ilustrar. À partida existem quatro ícones definidos por defeito 4: QUESTION, INFO, WARNING e ERROR, que são vistos abaixo nesta ordem.

BUTTONS – Inicialmente este campo está preenchido com a palavra OK, o que significa que a caixa apenas contém um botão com este nome, conforme pode ser visto pela imagem no início da explicação deste componente. Porém, se carregar na palavra OK, verá a janela abaixo onde poderá criar quantos botões desejar.

4

Dizemos isso pois qualquer um dos COMPONENTS pode ser modificado para assumir a aparência que desejar, pelo uso de skins (peles), como verá no próximo capítulo.

I.6. COMPONENTES AVANÇADOS

227

O procedimento de criação de linhas – neste caso, botões, nesta janela, é o mesmo visto no Calendar. CLOSE HANDLER – Neste campo deverá colocar uma string5 que corresponda à subrotina6 a ser executada quando a caixa se fechar, ou seja, assim que o utilizador carregar em algum botão e a caixa se fechar, automaticamente o Flash executará a subrotina cujo nome estiver indicado neste campo. BUTTON WIDTH – neste campo pode ajustar em pixéis a largura dos botões. TITLEBAR HEIGHT – e aqui, a altura da barra do título. VISIBLE – é onde pode ajustar a visibilidade e invisibilidade da caixa de mensagens por ActionScript. Pode ter dois valores, TRUE ou FALSE. O primeiro corresponde à caixa visível e o segundo a ela invisível. Para finalizar este componente, devemos dizer que encontramos um bug que torna o uso deste componente dentro de uma janela DraggingPane impossível. No fim, depois dos ajustes acima descritos, poderá ter uma caixa assim.

5

String = sequência de textos, números ou quaisquer outros caracteres, que para o programa são Conjunto de linhas de programação que fazem determinada função.

tratados como texto.
6

228

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

SPLITVIEW
O SplitView é um componente fantástico que permite dividir uma área em duas outras independentes, tanto na vertical, quanto na horizontal. Digamos que precisa colocar dois filmes n uma área na sua página Flash, mas o espaço mal é suficiente para a colocação de um. Pode então usar o SplitView para dividir a área, e em cada parte colocar integralmente aquilo que pretende. Então, ambas as informações estarão no mesmo sítio, divididas por uma barra que poderá ser deslocada para um lado e para o outro 7 e assim permitir a visualização das duas partes. Vamos criar um exemplo para ver como o componente funciona. Arraste o SplitView da janela COMPONENTS para o meio da área de desenho, e aumente o seu tamanho para que cubra quase toda a área, conforme indicado abaixo.

Veja que o componente foi deixado no estado normal de divisória vertical.
7

Ou para cima e para baixo, consoante o tipo de SplitView que escolher...

I.6. COMPONENTES AVANÇADOS

229

Se carregar no componente vai ver que a janela de propriedades é igual à da figura abaixo.

Vai ver cinco propriedades no comando as quais descrevemos abaixo. TOP/LEFT CONTENT – Se estiver a utilizar uma barra divisória vertical, então esta propriedade refere-se ao nome do objecto que estará na parte esquerda (LEFT) da divisória. Se estiver a utilizar uma barra divisória horizontal, então este campo refere-se ao nome do objecto existente na parte de cima (TOP) da divisória. BOTTOM/RIGHT CONTENT – De forma análoga, esta propriedade refere-se ao objecto que vai estar na parte de baixo (BOTTOM) ou na direita (RIGHT) da divisória, consoante esteja a utilizar uma barra divisória horizontal ou vertical, respectivamente. Vai ver que já preenchemos este campo como “outro”.

NOTA
“gaivota” é o nome do objecto correspondente à fotografia do pássaro que estará na metade esquerda da divisória. “outro” é o nome do objecto que estará na metade direita da divisória (neste caso é um texto).

230

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Então, a primeira coisa é criar os dois objectos que ficarão associados a cada metade do SplitView. Para criar um objecto com uma imagem, faça INSERT > NEW SYMBOL, e na janela que se seguirá preencha o nome como “gaivota”. Escolha o tipo GRAPHIC e marque o quadro que diz EXPORT FOR ACTIONSCRIPT. Veja a imagem abaixo.

Ao fazer isso, o quadro EXPORT IN FIRST FRAME já aparecerá marcado e o campo IDENTIFIER aparecerá preenchido com “gaivota”. Deixe-os como estão e carregue em ENTER para criar o novo objecto. Importe uma imagem com o comando FILE > IMPORT para finalizar este objecto. Repita a sequência de comandos acima para criar o objecto “outro”. Porém, em vez de importar uma imagem, crie uma caixa de texto do tipo DYNAMIC TEXT e MULTILINE e insira um texto qualquer. Os parâmetros da caixa e a sua aparência são vistos a seguir.

I.6. COMPONENTES AVANÇADOS

231

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

232

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

De volta à cena principal, seleccione o componente SplitView e preencha as propriedades TOP / LEFT CONTENT e BOTTOM / RIGHT CONTENT, com “gaivota” e “outro”, respectivamente.

Se colocar o Flash no modo de teste, vai ver que tem a imagem do lado esquerdo e o texto do lado direito e que, à medida em que desloca a barra esconde ou mostra a imagem.

Se deslocar a barra totalmente para a direita terá a seguinte imagem.

I.6. COMPONENTES AVANÇADOS

233

Da mesma forma, se deslocar a barra totalmente para a esquerda terá a imagem a seguir.

Se em vez de colocar um texto e uma imagem colocar duas imagens, passa a ter algo como visto abaixo.

234

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Entretanto, se deslocar a barra totalmente à esquerda verá ...

... e toda à direita ...

O Componente SplitView tem ainda duas propriedades interessantes: T/L COMPONENTE BEHAVIOR e R/B COMPONENT BEHAVIOR. Cada uma destas propriedades permite três escolhas: STICK TO BAR , STICK TO PANE e RESIZE. Por defeito, estão ajustadas na opção STICK TO BAR. Se as colocar em STICK TO PANE as imagens passam a ficar estáticas em relação ao fundo enquanto desloca a barra

I.6. COMPONENTES AVANÇADOS

235

divisória. Na opção RESIZE, o tamanho das imagens é aumentado ou diminuído para caber na metade que lhes cabe, à medida em que desloca a barra divisória.

NOTA
Pode mudar o BEHAVIOR de cada metade da janela de forma independente. Pode, por exemplo, colocar STICK TO PANE numa metade e RESIZE na outra!

Tudo o que foi dito até aqui para este componente, pode ser repetido para o caso da barra divisória horizontal. Basta apenas mudar a propriedade ORIENTATION do componente para HORIZONTAL .

TICKER
A função deste componente é permitir a criação de caixas de texto que mostram frases a passar na horizontal ou vertical, similares a equipamentos encontrados em aeroportos que ficam a passar mensagens. Veja a figura abaixo.

Os parâmetros do componente são os vistos na figura seguinte.

236

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

A seguir vamos a uma descrição detalhada de cada uma das propriedades. ORIENTATION – permite duas escolhas: HORIZONTAL e VERTICAL e corresponde ao sentido de deslocamento da frase na caixa. SCROLL DIRECTION – permite duas escolhas: DECREMENTAL e INCREMENTAL. Se a orientação da caixa for horizontal, e colocar esta propriedade como INCREMENTAL, vai ver a frase a deslocar-se da esquerda para a direita e pode inverter este sentido de deslocamento se colocar a propriedade como DECREMENTAL. Se a orientação da caixa for vertical, então a frase irá deslocar-se de cima para baixo ou de baixo para cima, consoante a propriedade esteja INCREMENTAL ou DECREMENTAL, respectivamente. SPEED – representa a velocidade com que a frase se move, medida em pixéis por segundo. SMOOTHNESS – representa a quantidade de pixéis que a frase se move a cada ciclo. Este campo tem relação directa com o SPEED. Isto significa o seguinte: se a velocidade estiver a 10 e o SMOOTHNESS estiver a 1, então a frase desloca-se a 10 pixéis por segundo. Porém, se ajustar SMOOTHNESS com o valor 2, a velocidade passa a ser 20 pixéis por segundo, pois a cada deslocamento da frase ela salta 2 pi-

I.6. COMPONENTES AVANÇADOS

237

xéis. Logicamente, quanto menor este número, mais suave é o movimento aos olhos, por isso o campo tem esse nome8. SPACING – É a quantidade de pixéis entre cada um dos itens a ser mostrado na caixa9. STOP ON FOCUS – Se ajustar esse valor como TRUE, de cada vez que o utilizador passar o rato sobre a caixa, o movimento encerra, voltando ao normal à saída do cursor. Pode ser útil para quando deseja colocar links a deslocar-se pela caixa e permitir que possam ser clicados facilmente. Se ajustar como FALSE, o movimento não se altera à passagem do rato. SCROLL LOCATION – Permite regular a posição das setas de scroll (deslocamento) da caixa. As opções disponíveis são: NONE, TOP, BOTTOM, LEFT e RIGHT, correspondentes a nenhuma seta, setas em cima, setas em baixo, setas à esquerda e setas à direita, respectivamente. Na figura da caixa, no início desta secção, a caixa está ajustada com a opção BOTTOM. FRAME WIDTH – indica a espessura em pixéis da borda da caixa. Se escrever zero, a caixa fica sem border. FRAME COLOR – pode nesta caixa regular a cor do border. HIGHLIGHT COLOR – nesta caixa pode indicar a cor do highlight, ou seja, quando o cursor do rato passa em cima da caixa com o texto em movimento, uma caixa colorida ilumina a região do texto imediatamente abaixo do cursor, para indicar que está seleccionada esta região. Podese então, por meio desta propriedade, regular a cor da iluminação. DATA PROVIDER – indica o nome de um objecto em ActionScript responsável pelo fornecimento dos textos a serem mostrados na caixa.

8

smoothness = suavidade a caixa permite a colocação de inúmeras frases seguidas, que são mostradas sequencialmente,

9

independente do tipo de deslocamento, horizontal ou vertical.

238

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

DATA ARRAY – Indica uma matriz de elementos a serem mostrados na caixa. Pode ver na imagem que este campo contém a frase que aparece na primeira imagem a falar do Ticker. Se carregar uma vez com o rato sobre a região onde está a frase vai ver uma janela onde poderá inserir todos as frases que deseja mostrar. HEADER TEXT – O texto que preencher neste campo será mostrado como sendo o título da caixa. HEADER LOCATION – Nesta caixa poderá ajustar a posição em que o título da caixa vai estar. As escolhas possíveis são: NONE, TOP, BOTTOM, LEFT e RIGHT, que correspondem a nenhuma, em cima, em baixo, à esquerda e à direita, respectivamente. HEADER WIDTH – indica a largura do título em pixéis. HEADER HEIGHT – indica a altura do título em pixéis. DATA WITDH – indica a largura dos itens na caixa em pixéis. Esta propriedade faz mais sentido no caso de caixas de deslocamento horizontal, pois irão espaçar as frases na horizontal de forma a não se confundirem. DATA HEIGHT – esta propriedade indica a altura em pixéis das frases. Deixamos para o fim os dois últimos componentes do primeiro grupo, o TREE e o PROGRESS BAR. Não nos estenderemos nas explicações acerca destes componentes nesta secção, por se tratarem de elementos que apenas podem funcionar quando programados por ActionScript.

TREE
Este componente permite a criação de “árvores” com informações em sistema de hierarquia. Poderá por ActionScript, criar, apagar, mover e ordenar os nós e as suas ramificações. Poderá descobrir qual a ramificação que foi clicada, e derivar acções correspondentes.

I.6. COMPONENTES AVANÇADOS

239

PROGRESSBAR
A Macromedia finalmente lançou um componente que corresponde a uma barra de progressão. Todo o controlo da barra é feito via ActionScript.

As propriedades deste componente são: CHANGE HANDLER – Deve colocar neste campo o nome da função (subrotina) em ActionScript (no mesmo timeline) a ser executada à medida que a barra progride. DISPLAY GRAPHICS – É uma propriedade que pode ser ajustada para TRUE ou FALSE. Se for colocada em true, que é o modo por defeito, é mostrado o desenho da barra a progredir. Se colocado em false, faz o desenho ficar invisível.

240

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

DISPLAY TEXT – É uma propriedade que indica se deve estar visível (TRUE) ou não (FALSE) a string a mostrar os Kilobytes.

Flash charting components
Este é o segundo grupo adicional de extensões oferecido pela Macromedia no seu site. Assim como o primeiro grupo de extensões, este também requer instalação para que possa ser usado no Flash MX (veja o Anexo III). Assim que o tiver instalado terá à sua disposição os seguintes componentes: BAR CHART, LINE CHART e PIE CHART, os quais descrevemos a seguir.

BAR CHART
Com este componente poderá criar gráficos em barra, como na figura abaixo.

I.6. COMPONENTES AVANÇADOS

241

Para conseguir um gráfico similar ao visto acima, preenchemos as propriedades do componente conforme visto abaixo.

LAYOUT OPTIONS – Se carregar n este campo, vai ver surgir uma janela, onde poderá ajustar diversas propriedades.

CharTitle – Esta propriedade representa o texto que será o título do gráfico. No caso “GRÁFICO DE VENDAS”. XAxisTitle – Neste campo deverá colocar o título correspondente ao eixo horizontal (X). No caso, “MESES”. YAxisTitle – Neste campo deverá colocar o título correspondente ao eixo vertical (Y). No caso, “EUROS”.

242

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Margin – Corresponde ao valor em pixéis da margem, ou seja, em relação ao tamanho total do controlo, quantos pixéis de margem deseja estabelecer em todas as direcções. Se aumentar muito a margem e, consequentemente, diminuir o espaço interno dentro do controlo, pode ser que o Flash automaticamente ajuste a rotação dos textos para tentar encaixar o gráfico dentro do componente. Veja na figura abaixo o gráfico que foi comprimido na vertical, com a retirada das linhas de 25 e 75 e a rotação realizada nas strings dos nomes dos meses.

XlabelMaxHeight – No caso de ter sido rodado o texto colocado ao longo do eixo horizontal, conforme visto na figura acima, esta propriedade determina o quanto em pixéis deve ser reservado para a colocação dos nomes. Por outras palavras, digamos que se os meses acima tivessem sido escritos por extenso, então, automaticamente não caberiam no gráfico e teriam sido rodados. Assim sendo, poderíamos ajustar esse campo, para um valor alto, digamos, 500, e teríamos o gráfico seguinte...

I.6. COMPONENTES AVANÇADOS

243

... ou poderíamos optar por ajustar a propriedade para um valor pequeno, como 30 pixéis, por exemplo, e limitar a este valor a quantidade de pixéis utilizada para mostrar os títulos ao longo do eixo horizontal, conforme visto na figura abaixo.

LINE CHART
O próximo componente do pacote Flash CHARTING COMPONENTS é o LINE CHART. A sua utilidade é permitir a criação de gráficos de li-

244

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

nhas, como o visto abaixo que é criado automaticamente no momento em que insere um componente LINE CHART na sua área de desenho

Ao arrastar um componente destes para a janela de desenho e clicar nas propriedades, vai ver a janela abaixo.

Line Chart – Layout Options
A primeira propriedade é a LAYOUT OPTIONS e se carregar no campo da direita nesta linha, vai ver uma surgir uma janela que pode preencher conforme visto a seguir.

I.6. COMPONENTES AVANÇADOS

245

A primeira opção é a Chart Title e representa o título do gráfico. Vamos preenchê-la com a frase “RESUMO DE VENDAS”. A seguir vemos as propriedades Xaxis Title e Yaxis Title , que correspondem ao título a colocar para o eixo horizontal e vertical, respectivamente. Preenchemos estes campos com as frases “valores em euros” e “meses”, respectivamente. As opções a seguir são: LineColor e LineWeight que permitem o ajuste da cor e da espessura da linha. Vemos também o campo ShowHighlights, que indica a presença (TRUE) ou não (FALSE) de pequenos círculos de cor diferente a destacar os pontos do gráfico. Os campos a seguir, MARGIN e XLabelMaxHeight assemelham-se aos do BAR CHART e têm a mesma funcionalidade explicada anteriormente.

246

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Line Chart – Chart Event Handlers
Ao voltar à janela de propriedades do componente, vemos que a próxima variável a seguir ao LAYOUT OPTIONS chama-se CHART EVENT HANDLERS. Vai ver ao lado desta frase quatro palavras: PRESS, RELEASE, ROLLOVER e ROLLOUT, que dizem respeito aos quatro eventos que os gráficos podem gerar em relação ao comportamento do rato. Se carregar nestas palavras vai ver a janela a seguir.

Terá de preencher a coluna VALUE com strings que representem o nome das funções em ActionScript a executar, quando cada um dos quatro eventos acontecer. Neste caso, os eventos são: Press (quando o botão do rato for carregado em cima de um ponto do gráfico), Release (quando o botão do rato for libertado depois de ter sido carregado em cima de um ponto do gráfico), RollOver (quando o cursor do rato passar por cima de um ponto do gráfico) e RollOut (quando o cursor do rato sair de cima de um ponto do gráfico, depois de ter entrado).

I.6. COMPONENTES AVANÇADOS

247

Line Chart – Category Labels
A seguir, nas propriedades do componente, vemos CATEGORY LABELS. Vai ver que originalmente este campo está preenchido com A, B, C, D e E, que representam as colunas indicadas no gráfico. Se carregar nessas letras vai ver a janela a seguir a qual aproveitamos para modificar e colocar o texto equivalente aos cinco primeiros meses do ano.

Line chart – data values
A próxima propriedade do LINE CHART chama-se DATA VALUES. Por defeito, quando criar o objecto vai ver que está preenchido com os valores 58, 25, 50, 34 e 80, que correspondem aos valores que os pontos do gráfico vão ter no eixo vertical. Carregue nestes números e vai ver uma janela onde poderá regular estes pontos. Nesta etapa deixamos os valores como estavam. Feitos todos esses ajustes, terá transformado o gráfico no que pode ser visto a seguir.

248

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

Repare nos highlights à volta dos pontos. As questões discutidas no BAR CHART referentes à margem e ao comportamento do componente à medida que altera os seus valores, também são válidas para o LINE CHART.

Pie Chart
O PIE CHART é o próximo componente sobre o qual iremos falar. Com ele é possível fazer gráficos PIZZA ou TARTE10 conforme visto na figura abaixo que é criada automaticamente no momento em que insere um componente PIE CHART na sua área de desenho.

10

Escolha o nome conforme o seu apetite... J

I.6. COMPONENTES AVANÇADOS

249

Ao carregar no componente, depois de o ter arrastado para a sua área de desenho, vai ver as seguintes propriedades:

Pie Chart – Layout options
A primeira propriedade que vê na janela é a de LAYOUT OPTIONS. Se carregar no valor contido nesta variável vai ver a janela a seguir.

Os parâmetros vistos nesta janela são: CHART TITLE - que corresponde ao título do gráfico. MARGIN – que pode regular a margem interna do componente (ver explicação dada para o BAR CHART).

250

C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO

SHOW LEGEND – variável que pode assumir os valores TRUE ou FALSE, correspondentes respectivamente ao gráfico ter ou não a legenda lateral ao lado direito. As três próximas propriedades, ou seja, CHART EVENT HANDLERS, CATEGORY LABELS e DATA VALUES têm um funcionamento igual ao explicado para o caso do componente LINE CHART.

Pie Chart – Pie Colors
Se carregar nesta propriedade pode regular as cores de cada fatia no gráfico.

IIª PARTE

A PROGRAMAÇÃO NO MACROMEDIA FLASH MX

II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS

Linguagens Processuais ou Procedimentais
Linguagens como o Pascal, o Fortran ou o C, são consideradas processuais ou procedimentais. Denominam-se desta forma, pois o código é escrito passo-a-passo. Os programadores que utilizam estas linguagens podem organizar as instruções a ser processadas em partes de código mais pequenas chamadas funções (functions) que para o seu funcionamento utilizam estruturas de dados (data structures). É importante salientar que as linguagens processuais mantêm as funções e as estruturas de dados separadas – estas não estão relacionadas de modo algum. Embora sejam eficientes, as linguagens processuais possuem alguns inconvenientes, um dos quais é a dificuldade na reutilização do código. A sua natureza passo-a-passo obriga o programador a compreender cada linha de código, para conseguir compreender o que o programa faz. Outra desvantagem das linguagens processuais é o facto de ignorarem o relacionamento entre as funções e as estruturas de dados.

LINGUAGENS ORIENTADAS POR OBJECTOS
O conceito de linguagens orientadas por objectos foi introduzido, na Web, por linguagens tais como o Javascript, VBScript e mais recentemente pelo Actionscript do Flash. O Actionscript segue as normas ECMA-262 Standard, uma especificação escrita pela European Computer Manufacturers Association, que serve também de base à linguagem Javascript - daí as semelhanças entre as duas linguagens. No entanto, existem ainda alguns pontos onde ambas as linguagens diferem.

254

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

No Flash MX as funções e as estruturas de dados estão agrupadas em classes que podem ser definidas pelo construtor de funções (constructor function). Um construtor de funções é um conjunto de instruções que define as propriedades e os métodos de uma classe. É possível criar múltiplas instâncias de uma classe, cada uma delas denominada por objecto, para reutilizar através do código. Por exemplo, para obter informações acerca da taxa de IVA de diversos artigos, criamos um construtor através da declaração de uma função (iva) que possui duas propriedades (preco,taxa) e através destas criamos um método (calcTotal) que calcula e devolve o preço do produto com IVA.
function iva (p, t) { this.preco = p; this.taxa = t; this.calcTotal = function() this.taxa)+ this.preco;}; }

{return

(this.preco

*

Esta função necessita de dois parâmetros (t, d). Assim, a partir desta classe podemos criar instâncias deste objecto em que os parâmetros variam.
almoco = new iva (5, 0.05); computador = new iva (1000, 0.17);

O operador new foi usado para criar duas novas instâncias do objecto iva, às quais atribuímos os nomes almoco e computador e para onde passamos os parâmetros que se encontram entre parêntesis. A utilização do operador new é similar a arrastar um movie clip da biblioteca para o palco, ou seja, criar uma nova instância de um símbolo (objecto). Nas linguagens orientadas por objectos as classes podem receber propriedades e métodos umas das outras de acordo com uma ordem específica. A esta característica denomina-se herança (inheritance).

II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS

255

Uma classe que herda as características de outra classe é designada de subclasse (subclass). A classe que passa as propriedades e métodos é chamada de superclasse (superclass). Uma classe pode ser subclasse e superclasse em simultâneo.

II.2. CONCEITOS BASE

Dot sintax versus Slash sintax
A slash syntax foi utilizada pelo Flash desde a versão 3 até à versão 5. Na versão 5 do programa, foi feita a transição entre as duas notações, podendo o utilizador funcionar com ambas em simultâneo, embora a slash sintax fosse já aconselhada pela Macromedia apenas para abrir ficheiros de Flash mais antigos. Na versão MX a slash sintax já não existe pois foi totalmente substituíd a pela dot sintax. Na slash sintax os caminhos são muito semelhantes aos utilizados em HTML. O caminho pode ser absoluto, começando pela _root (timeline do filme principal) ou relativo se começar numa instância e seguindo o caminho até ao target (movie clip). Em HTML a ( / ) representa a raiz (_root) e quando se possui um caminho relativo para, por exemplo, subir um nível na hierarquia este é representado por ( ../ ). Em Flash a ( / ) simboliza o palco e para atribuir uma action a um botão que afecte um movie clip chamado bola, no palco, basta digitar /bola. No caso inverso, se possuir um movie que vai accionar uma ordem para o palco, então no movie deverá aparecer apenas / A dot syntax foi introduzida no actionscripting do Flash 5. É o método preferencial para identificar o caminho para um movie clip ou para uma variável. Se ainda trabalhar em Flash 5, a slash sintax deve ser evitada pois foi totalmente substituída pela dot sintax no Flash MX. A dot sintax é muito semelhante à slash sintax, mas as barras foram substituídas por pontos. Os caminhos podem ser absolutos e relativos e existem duas referências especiais, _root e _parent. A _root num caminho absoluto refere-se à timeline principal (raiz), da mesma maneira

258

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

que a ( / ) na slash sintax. A _parent refere-se à timeline onde o filme (movie clip) está inserido, e é semelhante a utilizar (../ ) numa estrutura HTML, quando especificada em termos relativos. O topo da árvore é a timeline principal do filme, referida como root no Flash. Todos os movie clips são instâncias localizadas na timeline principal e são dependentes da root. Existem dois métodos para referenciar o target path de um movie clip: Absoluto e relativo.

Timeline principal root

Escritório

Quarto

Figura001 - Target Paths

No esquema da figura 001, o caminho absoluto para o movie computador será: _root.escritório.computador, e o caminho relativo para o movie clip quarto a partir do movie clip cama será _parent.

Terminologias utilizadas no Actionscripting
Actions – São declarações que instruem a animação a desempenhar determinada tarefa. Boolean – É um valor que apenas pode assumir true ou false.

II.2. CONCEITOS BASE

259

Class (classe): Tipo de dados que podem ser utilizados para definir um novo objecto. Constantes – São elementos imutáveis durante toda a animação. Constructor - Função utilizada para definir as propriedades e os métodos de uma classe. Eventos - O evento é a acção que ocorre enquanto a animação está a decorrer. Os eventos podem ocorrer quando um movie clip carrega, ou quando o utilizador faz clique sobre um botão. Function (função): Bloco de código reutilizável cujos argumentos (parâmetros) podem ser passados e de onde os seus valores podem ser extraídos. Identifier (identificador): Nome utilizado para identificar uma variável, propriedade, objecto, função ou método. O primeiro caracter de um identificador deve ser uma letra, underscore (_), ou sinal $. Cada caracter subsequente deve ser uma letra, underscore (_), sinal $ ou número. Keywords – Palavras reservadas que possuem uma função pré-definida no Flash. Method (método): Função associada a um objecto. Depois da função associada, pode ser chamada método desse objecto. Object (objecto): Uma instância de uma classe. Cada instância contém todas as propriedades e métodos da classe. Instâncias também podem conter propriedades e métodos adicionais não definidos na classe. Nome da instância – Nomes únicos que permitem identificar determinados elementos na animação, como movie clips ou variáveis. Property (propriedade): Características que definem um objecto. Parâmetros ou argumentos – São contentores que permitem passar valores para dentro de uma função. Por exemplo, o código seguinte passa o parâmetro cor para a função cores.
function cores (cor) { cor_preferida = "A minha cor preferida é " + cor; }

260

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

Variable (variável): Identificador que armazena um valor. Seria possível definir uma classe de tigres utilizando um construtor de funções. As propriedades destes tigres incluiriam os dentes, tamanho, apetite e forma. Os métodos incluiriam código para fazer o tigre andar, comer e caçar. Depois de definir a classe do tigre através de propriedades e métodos teríamos o objecto do tigre. Para construir outro tigre deveríamos criar uma instância da mesma classe, podendo possuir no entanto propriedades e métodos diferentes da primeira. Cada objecto pode ter as suas propriedades e métodos não definidos pela classe da qual derivou. Por exemplo, poderia definir uma instância em que o tigre tem outra cor, mas como seria o único a possuí-la esta propriedade não seria adicionada na classe.

Painel Actions
No Flash é utilizado o painel Actions para se escrever os scripts. Este painel pode ser acedido através do comando W INDOW > ACTIONS ou da tecla de atalho F9. O painel possui dois modos de edição de scripts, o Normal e o Expert. A diferença entre o modo Normal e o modo Expert está no tipo de ajuda fornecido ao utilizador. Em modo Normal são exibidos no topo do painel os parâmetros que são possíveis de utilizar com determinada action.

Figura002 – Painel Actions em Normal Mode

II.2. CONCEITOS BASE

261

No modo Expert o utilizador introduz os scripts da mesma forma mas também o pode fazer digitando-os directamente no painel; para tal deve possuir já bons conhecimentos de actionscripting, sendo este modo aconselhado a utilizadores mais experientes. A área superior do painel que estava presente em modo Normal desaparece, mas ao digitar os comandos surge uma janela de auxílio com as keywords do programa.

Figura003 - Painel Actions em Expert Mode

INSERIR UMA ACTION
Pode utilizar vários métodos para aplicar actions a uma frame ou instância. Primeiro, seleccione o frame ou instância onde irá aplicar a action e active o painel actions através do comando W INDOW > ACTIONS ou com a tecla F9. No lado esquerdo do painel as actions apresentam-se divididas por categorias. Para aceder a determinada categoria basta fazer clique uma vez sobre a mesma e para aplicar a action pretendida deverá fazer duplo clique sobre a sua designação. O código aparecerá imediatamente no lado direito do painel. Algumas actions possuem parâmetros que podem ser de seguida configurados na área à direita. Ver figura 002.

262

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

Como alternativa, o painel actions possui o botão (+) que também acede às categorias e actions do programa, mas através de menus pop-up.

Figura004 – Botão (+)

Nota:

Neste livro não faremos referência ao modo que deve ser utilizado para a inserção de uma action, deixando ao critério do leitor essa escolha.

Figura005 – Botões do painel Actions

Find – Procurar palavras no código.

Figura006 – Janela Find

II.2. CONCEITOS BASE

263

Para encontrar palavras no código, digite o texto na caixa “Find What” e active a opção Match Case se pretende procurar as palavras com maiúsculas e minúsculas exactamente como as escreveu na caixa. Replace – Procurar e substituir palavras no código.

Figura007 - Janela Replace

Targe t Path - Inserir o caminho relativo ou absoluto para uma instância. Check sintax – Verifica se a sintaxe do código está correcta. Autoformat – Formata automaticamente o código de modo a que este fique com um aspecto conciso e de fácil leitura. Show Code hint – Mostra uma pequena janela de ajuda enquanto se digita o código.

ALTERNAR ENTRE MODOS NO PAINEL ACTIONS
Para alterar entre modos de trabalho (Expert e Normal) clique no menu pop-up do painel Actions e escolha a opção pretendida.

NAVEGAR ENTRE SCRIPTS NUM DOCUMENTO
No topo do painel actions surge em menu pop-up que permite ao utilizador navegar entre todos os scripts presentes no documento, sem necessitar de seleccionar as instâncias ou keyframes onde estes estão aplicados.

264

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

Figura008

Uma outra forma de visualizar as actions presentes num determinado filme é através do Movie Explorer, que podemos aceder através do comando W INDOW > MOVIE E XPLORER.

Figura009 – Movie Explorer

PARA APAGAR UMA ACTION
Seleccione a action ou a linha no painel do lado direito. Faça clique sobre o botão (-).

II.2. CONCEITOS BASE

265

VISUALIZAR A NUMERAÇÃO PARA AS LINHAS DE CÓDIGO
Seleccione a opção VIEW LINE NUMBERS no menu pop-up do painel actions ou então utilize o atalho Ctrl+Shft+L (Windows) ou Command+ Shift+L (Macintosh). A janela Actions possui ainda o botão View Options, onde esta opção aparece disponível.

Figura010 – Numeração nas linhas de código

IMPRIMIR ACTIONS
No menu pop-up do painel actions seleccione a opção Print. Surgirá a janela com as opções de impressão. Clique no botão Print.

PAINEL REFERENCE
Este novo painel auxilia o utilizador a compreender cada acção listada no painel Actions. Existem também alguns exemplos de código, que podem ser copiados para dentro do painel de Actions.

Figura011 – Painel Reference

266

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

PARA VISUALIZAR O PAINEL REFERENCE
Para visualizar o painel Reference, seleccione o comando W INDOW > REFERENCE. Se já existir uma linha de código seleccionada no painel Actions pode fazer clique sobre o ícone reference que aparece no canto superior direito da janela, que acede directamente ao painel Reference já na descrição da action seleccionada.

Figura012 – Icon Reference no painel Actions

PARA ALTERAR A DIMENSÃO DA FONTE NO PAINEL REFERENCE
Seleccione a opção Large, Medium ou Small do menu pop-up do painel Reference.

ASSOCIAR ACTIONS NA TIMELINE
Ao associar uma action na timeline a acção acontecerá assim que a animação atingir essa keyframe. Para associar uma action a uma frame comece por adicionar um novo layer na animação. Se a action for para uma frame, que não seja a primeira da animação, deve ser inserida uma blank keyframe na layer Actions (F7). De seguida com a keyframe seleccionada, active o painel Actions e introduza o código pretendido.

Figura013 – Associar actions a um keyframe

II.2. CONCEITOS BASE ASSOCIAR ACTIONS A SÍMBOLOS

267

Podemos associar actions a frames, timelines de movie clips e botões e directamente às instâncias dos movies e botões. Algumas actions são exclusivamente para aplicação em instâncias de movie clips e outras apenas podem ser associadas a instâncias de botões. Ao criar um símbolo na biblioteca (library) e arrastar uma cópia para o palco acabamos de criar uma instância do símbolo. Ao associar as actions às instâncias em vez de directamente no símbolo, podemos utilizar várias instâncias do símbolo em que cada uma pode conter o seu conjunto de actions, reaproveitando recursos no filme. Para aplicar uma action a um símbolo, basta seleccioná-lo e atribuir a action que pretendemos.

Figura014 – Símbolo Button na livraria e uma instância no palco

Eventos
Ao associar uma action a um símbolo surge sempre uma linha adicional para especificar o evento. O evento é a acção que ocorre enquanto a animação está a decorrer. No Flash, os eventos são normalmente de teclado ou de rato e diferem entre movie clips e botões. Cada instância pode conter mais do que um evento.

268

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

EVENTOS ASSOCIADOS A BOTÕES

Figura015 – Eventos associados a uma instância dum botão

Press – Ao premir o botão do rato, mas antes de o soltar. Release – Quando se solta o botão do rato. Este evento acontece sempre depois do evento Press. Release Outside – Soltar o rato fora da área hit do botão. Roll Over – Passar o rato por cima do botão, mas sem possuir o botão do rato premido. Roll Out – Retirar o rato de cima do botão, sem o premir. Drag Over – Passar o rato por cima do símbolo, mantendo o botão do rato premido. Esta operação é normalmente designada por “arrastar”. Drag Out – Retirar o rato de cima do botão ou movie, mantendo o botão premido. Keypress – Acontece quando o utilizador prime uma determinada tecla.

EVENTOS DE MOVIE CLIPS
Load – Ocorre apenas uma vez, assim que a instância acaba de ser carregada. EnterFrame – A acção está constantemente a ser despoletada à velocidade do filme. As acções associadas a este evento acontecem antes de qualquer action da timeline do movie clip.

II.2. CONCEITOS BASE

269

Unload – A acção é iniciada no primeiro frame, depois do movie clip ser removido da timeline. Mouse Down – Ao premir o botão do rato sobre a instância. Mouse Up – Ao soltar o botão do rato sobre a instância. Mouse Move – A acção é iniciada sempre que o rato é movido. Deve utilizar as propriedades _xmouse e _ymouse para determinar a posição do rato. Key Down – Acontece assim que uma tecla é premida. Deve ser utilizada a propriedade Key.getCode para determinar qual foi a última tecla premida. Key Up – Ao soltar uma tecla. Utilizar a propriedade Key.getCode para identificar a última tecla a ser premida. Data – A acção é iniciada assim que entram dados no movie através da action LoadVariables ou LoadMovie.

Ao ser especificada através da acção LoadVariables o evento apenas acontece uma vez, enquanto que através da action LoadMovie o evento acontece repetidamente à medida que os dados são recebidos.

Figura016 – Eventos associados a uma instância dum movie clip.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

Neste exemplo vamos utilizar actions que controlam o fluxo da animação. Importamos um vídeo em formato QuickTime que iremos controlar com alguns botões. Comece por importar um filme Quicktime para a biblioteca através do comando FILE > IMPORT. Active a opção Embed video.

Figura017 – Opções na importação de vídeo

No palco crie mais duas layers, uma para os botões e a segunda para as actions. Ver figura 018. No menu W INDOW > COMMON LIBRARIES > BUTTONS, seleccione da categoria Playback um botão para parar o filme, um para retomar a animação e mais dois para recuar e avançar o filme frame-a-frame.

272

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

Figura018

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

De seguida, seleccione o botão que irá fazer a animação arrancar e escolha no painel ACTIONS > MOVIE CONTROL > PLAY.

Para o botão que pára o filme aplique de novo a action Stop.

Figura019 – Action Stop

Repare que nenhuma destas duas actions possui argumentos. Tanto a action stop como a play actuam sobre a timeline em que estão inseridas, mas não afectam directamente movie clips presentes dentro da mesma. Assim, se existissem movies no palco nenhum seria afec-

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

273

tado pelas actions que acabamos de inserir, pois as timelines dos movie clips são independentes da animação criada no palco. Restam os botões para fazer o filme recuar ou avançar frame a frame. Para estes utilizaremos a action goto, mas os parâmetros deverão ser alterados. Assim, teremos:

Figura020 – Actions do filme

CRIAR LINKS PARA PÁGINAS HTML
Para criar um link para uma página HTML utilizamos a action GetURL. É possível criar links relativos e absolutos, assim como passar variáveis, no caso do envio dum formulário, através desta action. Para criar um link num botão, seleccione o botão e aplique a action GetURL que se encontra na categoria ACTIONS > BROWSER NETWORK.

Figura021 – Action getURL

274

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

Um link relativo liga o filme de Flash a uma página do nosso site. O caminho deverá ser escrito usando a mesma notação do HTML. Para uma página que se encontre na mesma pasta que o HTML que contém o filme de Flash basta digitar o nome da mesma. Ver figura 022.

Figura022 – Aceder a uma página que se encontra na mesma pasta do filme em Flash.

Se esta se encontrar numa pasta diferente, o caminho deve ser digitado desde a página HTML que contém o filme de Flash até à página do link. Para recuar um nível utilizam-se dois pontos. Ver figura 023.

Figura023– Aceder a uma página HTML que se encontra numa pasta diferente do filme em Flash.

Um link absoluto poderá ser para uma página fora do nosso site. Com o código seguinte é aberto o endereço http://www.centroatlantico.pt numa nova página do browser.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

275

Figura024 – Action GetURL

Um link e-mail cria automaticamente uma nova mensagem no programa de e-mail que estiver instalado no computador do utilizador, e preenche o endereço de e-mail para onde será enviada a mensagem.
on (release) { getURL("mailto: geral@centroatl.pt "); }

Se pretendermos preencher também o assunto basta completar com:
on (release) { getURL("mailto:geral@centroatl.pt?subject=Opinião"); }

Figura025 – Mensagem criada através do link e-mail

276

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

CARREGAR FILMES DE FLASH EXTERNOS
Num site totalmente em Flash, os filmes podem tornar-se muito extensos e pesados. Nas animações mais complexas começa também a ser difícil organizar todo o fluxo de trabalho por cenas e muitas vezes é necessário recorrer à separação do conteúdo em diversos filmes. Estes filmes por serem mais pequenos, são mais fáceis de organizar e podemos sempre optar por removê-los da animação principal em qualquer altura ou substituí-los quando não estão a ser visualizados pelo utilizador. Um exemplo clássico será um site que possui como área fixa uma navegação de botões que pretendemos se mantenha constantemente visível, enquanto uma segunda área acomodará todas as animações referentes a cada um destes botões. Ver figura 026.

Figura026 – Interface principal do filme

Para carregar filmes de Flash sobre outro filme é necessário que a animação que vai ser carregada esteja já exportada em formato swf. A animação que carrega os filmes secundários estará no nível inferior. Cada nível só pode possuir um filme, logo, ao carregar um filme num nível ocupado, a animação que lá se encontra é automaticamente removida.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

277

Figura027 - Carregamento de filmes swf

Os filmes secundário herdam do principal as seguintes características: Velocidade – A velocidade do filme principal sobrepõe-se à das animações secundárias. Dimensões – O canto superior esquerdo dos filmes secundários irá coincidir com a coordenada (0,0) do filme principal. O restante será cortado se estes forem maiores e nunca redimensionado. Cor de fundo - Os filmes secundários irão possuir fundo transparente. Para um fundo opaco devemos criar uma layer onde desenhamos um rectângulo com a cor de preenchimento pretendida.

Para carregar um filme secundário vamos começar por exportá-lo para o formato .swf através do comando FILE > EXPORT MOVIE. Tivemos o cuidado de dar a este ficheiro a mesma dimensão do filme principal e de construir a animação do lado direito para não interferir com a navegação. Ver figura 028.

278

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

Figura028 - Filme secundário

Guardamos este ficheiro na mesma pasta onde se encontra guardado o filme principal, pois o caminho necessita de ser especificado na altura do carregamento e é mais fácil se ambos se encontrarem na mesma localização.

Figura029 - Exportar o filme

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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

279

Figura030 – Action Load Movie

Na opção URL digitamos o nome do ficheiro exportado anteriormente. O nível deverá ser superior a 0 pois este é o do filme principal e se o mantivermos o filme principal desaparece para dar lugar ao filme secundário.

Figura031– Filme swf carregado sobre o principal

Qualquer outro filme que seja agora carregado em nível 1 fará automaticamente a remoção do filme existente (clientes.swf ). No caso de pretendermos remover um determinado filme, basta utilizar a action UnloadMovie e referi-lo através do nível onde se encontra carregado.

280

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

Figura032 – Remover um filme

CONTROLAR FICHEIROS EXECUTÁVEIS COM O FSCOMMAND
O Flash exporta ficheiros executáveis para a criação de CD-ROMs interactivos. A action Fscommand permite aceder e alterar algumas características nos ficheiros executáveis criados pelo Flash. Para exportar um ficheiro executável seleccione a opção FILE > PUBLISH SETTINGS e escolha a opção Windows Projector, no caso de pretender um executável para correr em sistemas Windows ou a opção Macintosh Projector, para ficheiros que correm em sistemas Apple. Para alterar o nome que o programa atribui por defeito ao ficheiro inactive a opção Use default Names.

Figura033 – Exportar um executável

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

281

Normalmente são aplicadas à primeira keyframe do filme, mas estas acções também podem ser associadas a botões ou movie clips. No painel ACTIONS > BROWSER / NETWORK > FSCOMMAND aceda à caixa Commands for standalone player e escolha uma das seguintes opções:

Figura034 – Comandos para standalone player

Fullscreen – O default é true. Se for igual a true o filme ocupará toda a área do monitor do utilizador. Allowscale –A janela do filme ao ser redimensionada, altera também as proporções dos actores e imagens que fazem parte da animação. Na opção false isto não acontecerá. O valor default é true. Showmenu – Por defeito está activo, assim o utilizador ao fazer clique com o botão direito do rato sobre o filme verá aparecer um menu de atalho que lhe permite controlar várias opções no filme.

Figura035 – Showmenu

282

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

Trapallkeys – Converte todos os eventos de teclado (KeyUp e KeyDown) em eventos de movie clip (onClipEvent). Exec – Executa outro ficheiro exe. O caminho para o ficheiro deve ser especificado na caixa parâmetros. Quit – Fecha a janela do projector.

Figura036 – Icon de projector

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

SÍMBOLOS
Recapitulando alguns pontos-chave em relação aos símbolos, que serão importantes para compreender a sua integração com as actions em Flash: - As instâncias dos movie clips e botões podem possuir nomes.

Figura037- Nomear movies

- As timelines dos movie clips são independentes da timeline do filme principal, ou seja, um filme pode estar parado, mas os movie clips podem manter as suas animações.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

283

- Uma caixa de texto dinâmico ou input pode possuir nome. No entanto, devemos ter em atenção uma diferença importante entre nomear a instância de texto e atribuir-lhe um nome de variável.

Figura038 – Nome da instância de texto

Ao atribuir um nome de instância é possível aceder a métodos e propriedades da caixa de texto. Esta opção é portanto mais poderosa que a atribuição do nome da variável à qual apenas podemos alterar o seu valor.

Figura039 - Nome da variável de texto

Os símbolos podem estar incluídos dentro de outros símbolos, que por sua vez podem possuir outros símbolos dentro das suas timelines. A localização destes símbolos é dada por uma hierarquia em forma de árvore para a qual os nomes das instâncias contribuem para identificar a sua localização. Esta localização é conhecida por caminho (target path) do movie clip.

Figura040 – Hierarquia dos símbolos

284

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

Para nos referirmos aos métodos de um objecto a forma é análoga à utilizada para as instâncias. Os métodos possuem argumentos ou parâmetros, que são suportes para valores transportados para o método. Estes argumentos seguem o nome do método entre parêntesis, utilizando a sintaxe nomedométodo (argumentos). Para utilizar a dot sintax na referência a um método de um objecto, será preciso primeiro referenciar o n ome do objecto (ou o caminho de um movie clip) seguido de um ponto e de seguida o método. Para referenciar o método (play) de um movie clip (boneco) utilizando a dot sintax:
boneco.play()

ATRIBUIR NOMES A INS TÂNCIAS DE MOVIE CLIPS OU BOTÕES

Para ser possível fazer referência a um movie clip ou botão é necessário que a instância possua um nome. Para atribuir este nome basta seleccionar a instância e no painel PROPERTIES preencher o campo instance name.

Figura041 – Atribuir um nome a um movie clip

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO CAMINHOS RELATIVOS E ABSOLUTOS

285

Tal como já foi referido no primeiro capítulo desta segunda parte do livro, existem duas formas de fazer referência ao target path (caminho) dum movie clip. Através de referências absolutas e relativas.

CAMINHOS ABSOLUTOS
A timeline principal do filme, referida como _root no Flash. Todos os movie clips são instâncias localizadas na timeline principal e são dependentes da _root. Logo, para iniciar a animação dum movie chamado modelo no palco teremos:
_root.modelo.play()

Ao utilizar este método a action pode ser dada de qualquer timeline no filme, pois o Flash espera encontrar no palco uma instância com o nome modelo e apenas actuará sobre esta.

Figura042– Target path absoluto

CAMINHOS RELATIVOS
No método relativo a referência _parent diz respeito à timeline onde o movie clip ou botão está inserido; esta pode ser o palco ou outro movie clip. Numa estrutura do tipo representado na figura042, para aceder ao palco através do movie clip vestido teremos algo do tipo:
_parent._parent

286

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

Figura043 – Target path relativo

Ainda no método relativo surge-nos a referência this que simboliza a timeline em que estamos. Se estivermos na timeline modelo e nos quisermos referir a ela no código bastará escolher a opção this ou deixar o campo target em branco.

Figura044 – Movie clips dentro de outro movie clip

CONTROLAR INSTÂNCIAS DE SÍMBOLOS
Utilizando a dot sintax e os target paths conseguimos não só associar actions a instâncias, mas também alterar as suas propriedades e aceder aos seus métodos.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

287

No exemplo seguinte iremos criar uma simples interface com quatro botões, para controlar um movie clip (pacman). Comece por criar o movie clip do pacman com duas frames , para produzir a animação do abrir e fechar da boca do elemento.

Figura045 – Animação do movie clip pacman

Crie de seguida um botão (seta) para a interface. Deste símbolo aplicaremos quatro instâncias, que serão rodadas no palco uma para cada direcção do movimento do personagem. Vamos começar por criar a action que rodará o movie na direcção desejada. Para tal, basta-nos controlar a propriedade _rotation. No palco atribua um nome à instância do pacman e seleccione no painel ACTIONS > PROPERTIES > _ROTATION .

Para completar o comando faça clique na linha de código e complete com o nome do movie clip, seguido de um ponto. Ver figura 046. Para os restantes valores complete as actions mudando apenas o valor da rotação do movie clip.
Figura046 – Valores de rotação para as setas

288

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

PROPRIEDADES DOS MOVIE CLIPS
_alpha – Altera a transparência das instâncias. Assume valores entre 0 e 100, em que o valor 0 simboliza a transparência máxima da instância.

Figura047 – Alpha 100 e alpha 50

_currentframe – Simboliza a frame actual onde a animação da instância se encontra. _droptarget – Representa a posição onde a instância é largada no caso de estar a ser usada a action startdrag. _focusrect – Determina se um movie clip possui um rectângulo amarelo à sua volta no caso do utilizador navegar na animação com a tecla TAB. _framesloaded – A quantidade de frames já carregados da instância. _height – Altura em pixéis de uma instância. _name – Nome da instância. _quality – Qualidade com que é exibida determinado movie clip. Os valores possíveis são: LOW – Gráficos apresentam-se sem anti-aliasing. MEDIUM – Gráficos com anti-alising utilizando uma grelha de 2 x 2 pixéis, mas os bitmaps não possuem suavização. Ideal para filmes sem texto. HIGH – Boa qualidade. Gráficos com anti-alising utilizando uma grelha de 4 x 2 pixéis, e os bitmaps são suavizados se a animação estiver parada. Esta é a qualidade por defeito do Flash. BEST – Muito boa qualidade. Igual à qualidade high, mas os bitmaps estão sempre suavizados.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

289

Figura048 – Low quality vs High Quality

_rotation – Valor da rotação de uma instância.

Figura049 - Propriedade Rotation

_soundbuftime – Tempo em segundos antes do filme começar uma animação stream. _target – Retorna o valor do target path do movie clip. _totalframes – Devolve o número total de frames de um movie clip. _url – Dá o endereço URL do filme SWF de onde o movie clip fez download. _visible – Visibilidade da instância. Quando o seu valor é false a instância ficará invisível, no caso de true a instância fica visível. Por defeito, o valor está configurado para true. _width – Largura dada em pixéis de uma instância. _x – Coordenada do centro de um movie clip visualizada na régua horizontal do Flash. De notar que a coordenada (0,0) no palco é o canto superior esquerdo, enquanto que dentro de um movie clip é o centro do mesmo.

290

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

_xmouse – Coordenada do ponteiro do rato no eixo x. _xscale – Valor em percentagem da largura dum movie clip. _y – Coordenada do centro de um movie clip visualizada na régua vertical do programa. _ymouse – Coordenada do ponteiro do rato no eixo y.

Figura050 - _xmouse e _ymouse

_yscale – Valor em percentagem da altura dum movie clip. O valor 100 representa a dimensão do movie clip que se encontra na biblioteca.

Figura051 - _xscale e _yscale

MÉTODOS MAIS UTILIZADOS NOS MOVIECLIPS
starDrag e stopDrag A capacidade de arrastar movie clips dentro de uma animação é sem dúvida uma das capacidades mais utilizadas pelos designers do Flash. Esta operação é desempenhada através da utilização de um método denominado startDrag.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

291

Uma das formas mais simples para deslocar um movie clip é atribuir o método directamente na instância no evento onLoad. Esta situação pode ser interessante quando pretendemos criar um rasto de movies a seguir o cursor do rato.

Figura052– Método startDrag

A opção Lock mouse to Centre coloca o centro da instância a coincidir com o ponteiro do rato. Se não especificarmos Target este será interpretado com aquele onde a action está a ser aplicada. Para restringir o movimento a uma área mais pequena, utilize a opção Constrain to rectangle.

Figura053 – Constrain to rectangle

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

292

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

Para esta situação teremos de aplicar o método stopDrag, mas que apenas será chamado quando o utilizador soltar o botão do rato. Uma das formas de obter este efeito é criar primeiro um botão que contém o actor a arrastar e de seguida colocar esse botão dentro de um movie clip que será colocado no palco. Seleccione o botão dentro do movie e escolha ACTIONS > MOVIE CLIP CONTROL > STARTDRAG.

Figura054 – Actions para drag and drop do movie clip

O botão que colocamos dentro do movie clip possuirá então a programação para arrastar e largar a instância, mas em eventos diferentes. Ver figura 054. Não é necessário especificar Target pois como o botão está dentro do movie clip este é automaticamente assumido como o movie que deve ser arrastado. A instância do movie clip é colocada no palco e estará pronta a funcionar.

DuplicateMovieClip e RemoveMovieClip Estes dois métodos permitem duplicar um movie clip e remover movie clips que tenham sido criados através do método DuplicateMovieClip. Começamos por nomear o movie clip no palco, através do painel PROPERTIES.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

293

Figura055 – Nomear o movie clip

De seguida para testar seleccionamos o primeiro keyframe da timeline no palco e aplicamos a action MOVIE CLIP CONTROL > DUPLICATE MOVIECLIP. Nos parâmetros atribuímos o nome do movie a ser duplicado, o nome do novo movie clip e a profundidade (depth) onde será duplicado. Apenas pode existir um movie clip por profundidade. Como o duplicado fica sobre o original, usaremos a propriedade _x para mover o segundo movie para a direita.

Figura056 – Duplicar movies

Para remover movie clips criados através do método DuplicateMovieClip, aplicamos o método RemoveMovieClip onde só é necessário indicar o nome do movie que pretendemos remover.
removeMovieClip("sol2");

Como exemplo vamos criar um simples mouse trail.

294

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

Figura057 – Mouse Trail

Na biblioteca criamos um movie clip para servir de rasto para o ponteiro do rato. Este movie pode conter uma animação simples. Colocamos uma instância no palco e atribuímos-lhe um nome. Vamos chamar-lhe rasto.

Figura058 – Rasto do ponteiro do rato

Na primeira keyframe do palco vamos inserir a programação. Criamos duas variáveis: n e novonome . n – Variável de incremento
n++;

novonome – Parte do nome dos movie clips duplicados. Possuirão nomes do tipo rasto1, rasto2 e assim sucessivamente.
novonome = "rasto" + n;

Começamos por arrastar o movie rastro.
startDrag("rasto", true);

De seguida duplicamos o movie e atribuímos os novos nomes com a variável novonome e a profundidade n.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

295

Figura058 – Duplicar o movie

Como não queremos mais de seis movies atrás do ponteiro começamos a remover todos os movies anteriores. Para funcionar o palco deve ter pelo menos duas frames. Acrescente uma frame com a tecla F5. Esta segunda frame faz com que o filme entre em loop e duplique novos movie clips sempre que volta a passar pela primeira keyframe.

Figura059 – Script completo

LoadMovie e Unload Movie Estes dois métodos são especialmente importantes quando pretendemos carregar um filme de Flash externo ou um ficheiro de imagem jpeg numa determinada localização do filme principal. Tal como foi referido no capítulo anterior, nas actions LoadMovie e UnloadMovie um filme carregado sobre a animação principal fica sempre encostado ao canto superior do filme principal. A solução para o colocar noutra posição do palco é utilizar um movie clip como referência e carregá-lo para dentro deste. Imagine por exemplo que na animação principal possui um televisor com vários botões, cada um deles irá carregar uma animação diferente.

296

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

Figura060 – Filme Principal

Depois de criar as animações secundárias com a dimensão do monitor do televisor, exportamos cada uma delas para formato swf. No nosso caso chamamos ao filme secundário exportado programa1.swf . No filme principal vamos criar um movie clip na biblioteca com nome ecrã, mas completamente vazio. Este filme só vai servir de referência para posicionar o filme que iremos carregar.

Figura061 - Filme secundário

De seguida posicionamos o movie no palco sobre o televisor, tendo em atenção que quando carregados sobre um movie clip os filmes aparecem com o seu canto superior esquerdo posicionado no centro do movie clip, ou seja na coordenada (0,0). Assim, colocando o centro do movie clip no canto do televisor, sabemos que coincide com o canto superior esquerdo do filme que vai ser carregado.

Figura062 – Posicionar o movie clip

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

297

Agora falta atribuir um nome à instância do ecrã através do painel PROPERTIES. Vamos chamar-lhe ecrã. Com um dos botões seleccionados, aplique do painel actions em OBJECT > MOVIE > MOVIECLIP > METHODS > LOAD MOVIE.

Figura063 – Aplicar o método loadMovie

Em objecto digitamos o nome da instância e nos parâmetros o nome do movie clip ou imagem jpeg que iremos carregar (este nome deve estar entre aspas). Os restantes filmes deverão ser carregados da mesma forma. Ao fazer clique noutro botão, outro filme é carregado e substitui o filme que se encontra dentro do movie no momento.

Figura064 – Resultado Final

GetBytesLoaded e GetBytesTotal Estes dois métodos são muito utilizados na criação de preloaders para filmes. Um preload é uma animação muito simples que antecede o filme

298

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

principal enquanto este carrega. Normalmente são aplicados preloaders a filmes com mais de 50 Kb. GetBytesLoaded – Número de bytes carregados GetBytesTotal – Número total de bytes do filme (inclui todas as cenas).

Por exemplo, supondo que possuímos um filme que tem apenas uma cena e precisamos de criar um preload. Este filme possui sons e imagens bitmap e tem cerca de 200 Kb. Começamos por criar uma nova cena no filme. Seleccione no menu INSERT > SCENE. A cena de preload deve ser a primeira do filme. Para alterar a ordem das cenas escolha no menu W INDOW a opção SCENE. Arraste a cena do preload de modo a ser a primeira cena do filme.

Figura065 – Painel Scene

Na primeira cena criamos uma pequena animação e inserimos uma caixa de texto dinâmico à qual atribuímos o nome percentagem no painel PROPERTIES e que vai mostrar a percentagem de filme carregado.

Figura066 – Atribuir nome à caixa de texto

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO

299

Criamos também um novo layer para conter a programação do preloader, e na primeira keyframe desta layer vamos inserir a seguinte programação.

Figura067 – Actions do primeiro frame do preload

_root.getBytesLoaded() – OBJECTS > MOVIE > MOVIE CLIP > METHODS > GETB YTESLOADED. Efectua a contagem do número de bytes carregados do filme. _root.getBytesTotal – OBJECTS > MOVIE > MOVIE CLIP > METHODS > GETB YTESTOTAL . Conta o número total de bytes do filme. Math.round – OBJECT > CORE > MATH > METHODS > ROUND. Método utilizado para arredondar valores numéricos. Substitui a função Int das versões anteriores do Flash. Dividimos o número de bytes carregados, pelo número total de bytes do filme e multiplicamos por 100 para obter um valor em percentagem. Para que o valor seja um número inteiro aplicamos o método Math.Round a envolver todo o código. percentagem = percent + "%" - Atribuímos o resultado à caixa de texto dinâmico “percentagem” e acrescentamos o caracter %.

Figura068 – Caixa de texto dinâmico no palco e em teste

300

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

Finalmente testamos o valor da variável “percent” e se este for igual a 100 o filme avança para a próxima cena. Caso contrário prossegue nesta cena. Daí que seja necessário incluir mais uma keyframe com uma action que obriga a animação a regressar até à frame 1 da cena do preload, senão saltaria antes de tempo para o filme.

Figura069 – Actions do primeiro frame do preload

Para testar o filme seleccione a opção CONTROL > TEST MOVIE e de seguida na janela de teste, escolha a opção VIEW > SHOW STREAMING.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

SINTAXE DO ACTIONSCRIPTING
Chavetas { } São utilizadas para agrupar blocos de código relacionado.
on (release) { play(); }

Ponto e vírgula (;) – Todas as declarações terminam desta forma, embora o Flash consiga interpretar e completar o script sem a sua presença, é boa prática utilizá-los. Também pode utilizar o botão autoformat do painel Actions para acrescentar estes caracteres automaticamente, desde que o código não contenha erros de sintaxe.
Pontos = 0; Tempo = 0;

Parêntesis () Tem diversas funções dentro do código. A principal utilização é agrupar os parâmetros de uma função.
function empregado (nome, idade){ ... }

Permitem também alterar a ordem de precedência do actionscriptig e ainda facilitar a leitura do código.

302

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

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

Caso contrário seria necessário utilizar o seguinte script para determinar o valor e criar o objecto:
onClipEvent(enterFrame) { myCor = new Color(this); myCor.setRGB(0xffffff); }

Maiúsculas e minúsculas O actionscripting não é sensível à capitalização do texto (case-sensitive). Apenas as palavras inerentes à linguagem (keywords) possuem limitações neste campo.

Keywords Palavras reservadas que não podem ser atribuídas a nomes de variáveis e que possuem uma função determinada pela própria aplicação.
break case continue default delete else for function if in instanceof new return switch this typeof var void while with

Comentários (//) Permite adicionar notas ao código. Estas notas são especialmente importantes quando o código é muito extenso ou quando várias pessoas partilham o mesmo projecto de Flash.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

303

Figura070 – Comentários no código

Variáveis
Uma variável é um contentor de informação. Essa informação pode ser alterada durante a animação, tanto para gravar informação acerca do utilizador como por exemplo para guardar valores à medida que o filme muda. Aconselha-se a iniciar o valor duma variável antes de a utilizar. Os nomes das variáveis não podem ser palavras reservadas ou valores booleanos como true e false e devem ser nomes únicos no scope (espaço) de modo a evitar colisões.

DATA TYPES
Um data type descreve o tipo de dados que as variáveis podem conter. Existem dois tipos de data types: primitive e reference. O data type primitive engloba as categorias number, string e boolean, enquanto os reference data types são object e movieclip. Existem ainda dois tipo especiais de data types: null e undefined. O tipo de dados de uma variável afecta o modo como uma variável muda o seu valor quando associada a um script.

304

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

Number: Um número pode ser manipulado utilizando operadores aritméticos como a adição (+), subtracção (-), multiplicação (*), divisão (/), modulo (%), incremento (++) e decremento (- -). String: Uma sequência de caracteres tais como letras, números e pontuações. Em actionscripting cria-se uma string envolvendo um determinado valor em aspas. Assim, o seu valor é tratado como caracter e não como uma variável. O operador + passa a actuar como união entre as duas variáveis.
nome= “Ana” + apelido

Boolean: Um valor que pode ser apenas true ou false.
If (utilizador==true && password==true){ … }

Object: Uma colecção de propriedades. Cada propriedade tem um nome e um valor. O valor pode ser qualquer tipo de dados e os objectos podem estar contidos dentro de outros. Por exemplo, para aceder à propriedade da visibilidade de um movie clip, teremos:
carro._visible

movieclip: Um apontador a um símbolo movie clip que permite controlar os seus métodos.
movie.startDrag(true);

Null: Apenas possui o valor null, que simboliza que a variável está vazia. Undefined: Tal como o null apenas possui um valor, o undefined, significa que ainda não lhe foi atribuído nenhum valor.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO SCOPE DA VARIÁVEL

305

O scope de uma variável é a área em que a variável é conhecida e pode ser referenciada. As variáveis podem existir dentro de timelines de instâncias. A variável pode ser local para essa timeline ou pode ser especificada como variável global e ser utilizada por todas as timelines do filme. Existem três tipos de scope para as variáveis:

Variáveis locais As que estão disponíveis apenas dentro do bloco de código onde foram inseridas.

Variáveis de Timeline Válidas para qualquer timeline desde que indicadas no código através dum caminho.

Variáveis Globais Existem em todas as timelines mesmo que não seja especificado um caminho até elas.

DECLARAR VARIÁVEIS
Ao declarar uma variável local deve utilizar o comando var dentro do bloco de código onde esta ficará inserida. Uma variável local não definida, expira no fim do script.
var pontos=0

Para declarar variáveis de timeline, basta utilizar o comando set variable ou apenas indicar o nome da variável e usar o sinal de igual para atribuição do seu valor.
X=20

No caso da declaração de uma variável global o nome desta deve ser antecedido do identificador _global.

306

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

_global.time=0

No exemplo seguinte possuímos um filme com duas cenas. O utilizador tem de digitar o seu nome antes de entrar na segunda cena. Ao fazer clique no botão de entrada o seu nome aparece numa caixa de texto com uma saudação. Na primeira frame da primeira cena (entrada) do filme colocamos uma action Stop() de modo a que o filme permaneça parado até o utilizador premir o botão de entrada.

Figura071 – Interface

A caixa de texto é do tipo input, para permitir ao utilizador digitar valores. No painel properties atribuímos um nome à variável, à qual chamamos “utilizador”.

Figura072 – Atribuir nome à variável

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

307

Na segunda cena do filme (filme), colocamos também uma action stop(), logo no início de modo a que o filme fique parado na primeira frame. Desenhamos uma caixa de texto dinâmico à qual atribuímos um nome (user). De seguida seleccionamos o botão da cena entrada e atribuímos as seguintes actions.

Figura073 – Actions do botão

Foi atribuída à variável user que aparece na cena filme o valor da variável utilizador da cena entrada, e concatenada com o texto entre aspas através do operador +.

Figura074 – Resultado

308

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

TESTAR O VALOR DAS VARIÁVEIS
Para testar o valor duma variável utilize a action Trace (ACTIONS > MISCELLANEOUS ACTIONS > TRACE ) para abrir uma janela de output sempre que o filme for testado e mostrar o valor da variável que digitarmos entre parêntesis.
pontos = pontos+1; trace(pontos);

Uma forma alternativa de testar os valores das variáveis é utilizar o Debugger. Para visualizar o debugger basta testar o filme através do comando CONTROL > DEBUG MOVIE. Este comando além de testar o filme abre o painel Debbuger onde basta seleccionar o separador Variables e escolher o nível do filme ou o movie clip onde se encontra a variável. A animação surge sempre parada no início. Para começar basta clicar sobre o botão play para dar início ao filme. No separador PROPERTIES é possível ainda observar as propriedades da _root ou do movie clip que se encontrar seleccionado acima. O separador variables mostra as variáveis criadas no filme e os seus valores.

Figura075 – Painel Debugger

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO OPERADORES

309

Os operadores permitem combinar, comparar ou modificar valores numa expressão. Para utilizar correctamente os operadores existem algumas regras que devem ser respeitadas.

Prioridade dos operadores Em qualquer cálculo, o operador de multiplicação (*) e divisão (/) possuem prioridade sobre a soma (+) e a subtracção (-). No entanto, se uma determinada operação for envolvida em parêntesis, terá prioridade sobre as restantes.
pontos= 7 + 3 * 2

O resultado da operação é 13. Primeiro é calculada a multiplicação e só depois será efectuada a soma.
pontos= (7 + 3) * 2

O resultado desta forma será 20, pois a soma será realizada antes da multiplicação por se encontrar entre parêntesis. Tipos de operadores Operadores Numéricos Desempenham diversas operações aritméticas mais comuns tais como: + * / % ++ -Soma Multiplicação Divisão Subtracção Módulo (resto da divisão) Incremento Decremento

310

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

Figura076 – Soma

Operadores de comparação Comparam valores de expressões e devolvem um valor booleano (True / False). Estes operadores, ao comparar duas strings, avaliam qual a primeira através da sua ordem alfabética. Se um dos operandos for uma string e o outro numérico, ambos são convertidos para numéricos e é efectuada uma comparação numérica. < > <= >= Menor que Maior que Menor ou igual a Maior ou igual a

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

Operadores de string Efectua a concatenação entre duas ou mais strings.
“Joana” + “ “ + “Nunes” o resultado é Joana Nunes

Figura077– Concatenação

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

311

Operadores lógicos Estes operadores comparam valores booleanos ( true / false) e devolvem um outro valor booleano. && || !
If }

e ou negado
(nome==”Cristina” && idade>25) { gotoAndStop(2);

Operadores de igualdade Determina se dois valores ou identidades são iguais. O valor devolvido é booleano. == === != !== igualdade estritamente igual diferente de estritamente diferente

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

Operadores de atribuição O sinal de = funciona como operador de atribuição, para associar um valor a uma variável.
login=”administrador”;

= += -= *=

Atribuição Soma e atribuição Subtracção e atribuição Multiplicação e atribuição

312
%= /= <<= >>= ^= |= &=

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

Modulo e atribuição Divisão e atribuição Mover para a esquerda e atribuição Mover para a direita e atribuição XOR e atribuição OR e atribuição AND e atribuição

Vamos voltar ao exemplo do pacman que já tínhamos colocado a mudar de direcção através da propriedade _rotation. Agora para o movimento vamos acrescentar uma linha para incrementar o valor da deslocação do movie clip em 10 pixéis, sempre que o utilizador fizer clique numa seta de direcção. Para tal vamos utilizar os operadores de atribuição.

Figura078 - Operadores de atribuição

CONDIÇÃO IF
Continuamos agora com o exemplo apresentado na figura 071. Supondo que é necessário testar se o utilizador introduziu ou não um valor na caixa de texto da cena de entrada. No caso afirmativo, o filme prossegue para a segunda cena, mas no caso negativo surge uma mensagem, a solicitar a introdução do nome de utilizador. Começamos por acrescentar na primeira cena uma nova caixa de texto dinâmico, à qual chamamos mensagem.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

313

De novo no botão apagamos as actions anteriores e vamos à categoria ACTIONS > CONDITIONS/LOOPS > IF e dentro das aspas digitamos a seguinte condição:
if (utilizador==null){ }

De seguida, na categoria ACTIONS > VARIABLES > VAR, vamos igualar a variável “mensagem” ao texto que irá aparecer se o utilizador não digitar nada no nome.
var mensagem= "Preencha o nome de utilizador";

De novo na categoria ACTIONS > CONDITIONS/LOOPS > ELSE, iremos introduzir o código no caso de o utilizador realmente preencher o campo do nome.
else { }

Todas as instruções que seguirem a condição else serão executadas só no caso de preenchimento do campo utilizador. Como pretendemos que o filme passe para a segunda cena da animação, teremos a action:
gotoAndPlay(“filme”,1);

Para preencher o campo User com o nome introduzido, basta:
User=”Benvindo(a), ” + utilizador;

314

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

Figura079 – Código do botão de entrada

Vamos elaborar mais um pouco o exercício atrás referido, pois agora o teste será feito não só ao nome do utilizador, mas também irá verificar se a password introduzida está correcta. Inserimos mais uma variável de texto no palco à qual demos o nome de password e atribuímos o tipo password no painel PROPERTIES.

Figura080

O botão de entrada deverá agora possuir um teste a duas variáveis que serão unidas pelo operador e (&&). Este operador vai fazer com que seja necessário que ambas as variáveis devam estar correctas para o utilizador entrar na página. Se em vez do operador (e) && estivesse o operador (ou) || bastava uma das caixas estar correcta para o utilizador entrar na cena 2.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

315

Figura081 – Programação do botão de entrada

Para completar a programação pretendemos que no caso de erro, para além da mensagem, os campos sejam limpos e o cursor volte ao campo utilizador. Isto será feito através da atribuição do valor undefined a cada um dos campos. Para o cursor aparecer a piscar no campo utilizador, usamos o método setFocus do objecto selection. Assim o código ficará:

Figura082

A condição IF também pode ser utilizada para testar as propriedades dos movie clips. Por exemplo, ao testar a propriedade _droptarger

316

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

conseguimos determinar se um movie clip foi largado não sobre outro movie clip. No exemplo seguinte vamos simular um site de compras, em que o utilizador tem de arrastar diversas frutas para dentro de um saco que irá incrementar uma variável (total).

Figura083- Interface

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

Figura084

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

317

Depois de colocar as várias instâncias no palco, criamos também um movie clip (saco) para onde estas serão arrastadas. Atribuímos nome ao movie clip e iremos agora acrescentar ao movie clip da fruta o código para testar a posição em que é largado.

Figura085

Seleccionamos a linha 5, e vamos continuar a programação a partir deste ponto, no painel ACTION > CONDITIONS / LOOPS > IF. Para condição digitamos:
eval (this._droptarget) == _root.saco;

A função eval é necessária neste caso, para converter o resultado da expressão this._droptarget, que obtém um valor em slash sintax (/saco). O eval converte este valor para dot sintax (_level0.saco). Dentro da condição if fazemos desaparecer o movie arrastado e incrementamos uma unidade à caixa de texto total.

Figura086 – Programação do movie maçã

318

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

Vamos agora optimizar o código do filme. Se for necessário aumentar o número de tipos de fruta na animação, cada novo botão terá a programação apresentada na figura 086. Como a programação é exactamente igual para todos os botões, vamos criar um ficheiro de texto com o código actionscripting. Abra o bloco de notas e cole o código da figura 086.

Figura087 – Ficheiro de texto

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

Figura088 – Gravar o ficheiro

Na biblioteca edite o movie clip da laranja e seleccione o botão. Para aceder ao ficheiro externo basta digitar #INCLUDE actions encontra-se em MISCELLANEOS ACTIONS.
DROP.AS.

Nas

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

319

A action #include permite aceder a um ficheiro externo de actionscripting, desde que este tenha sido gravado com a extensão .as . Ver figura 089.

Figura089 – Action #include

CONDIÇÃO CASE
Numa situação em que seja necessário testar mais de duas opções, a condição if torna-se insuficiente e confusa. Como alternativa, é possível usar a condição case nestas situações em que estão envolvidos vários testes. Como exemplo, vamos supor que possuímos um site de compras online e que os utilizadores irão obter preços diferentes consoante a quantidade de produtos que adquirem.

Temos duas caixas de texto: A “quantidade” onde introduzimos previamente o valor 0 e que é do tipo input e o “preco” que é uma caixa de texto dinâmica.

Figura090

320

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

Seleccione o botão para cálculo do total e active o painel actions. Na categoria ACTIONS > CONDITIONS/LOOPS > SWITCH. Dentro dos parêntesis coloque o nome da variável que vai ser testada (quantidade). Esta variável deve ser numérica; logo, para garantir que o Flash a interpretará deste modo colocamos o seu nome dentro da Função Number. Na linha seguinte escolha no painel ACTIONS > CONDITIONS/LOOPS > CASE, onde teremos de prever todos os valores possíveis. Assim, no código, obtemos:

Figura091 – Script completo

Por cada hipótese terá de ser introduzida uma linha que deve sempre terminar com a action break, ou não voltará a funcionar da próxima vez que o botão for premido. A linha de default contempla todas as situações que ficaram fora dos valores definidos pelo case, ou seja, que não estejam no intervalo 0 a 2 inclusivé.

CICLO FOR
A função principal dos ciclos numa linguagem é repetir determinadas actions diversas vezes.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

321

No exemplo seguinte iremos criar um pequeno programa, do tipo totoloto, que gera seis números aleatórios quando o utilizador prime um botão. No palco estão seis caixas de texto dinâmico, cada uma com os nomes n1 até n6.

Figura092 - Interface do programa

No botão vamos introduzir um ciclo que gera números aleatórios até um máximo de seis e preenche as respectivas caixas. No painel actions seleccione a categoria CONDITIONS / LOOPS > FOR .

Figura093 – Ciclo For

Parâmetros do ciclo For: Init – O valor onde se irá iniciar o ciclo.

322

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

Condition – A condição que será testada antes de cada loop para saber se é verdadeira ou falsa. O loop terminará quando esta condição for falsa. Next – A expressão que será avaliada depois de cada loop. Normalmente o incremento ou decremento do valor dado no parâmetro init.

De seguida, na categoria ACTIONS > VARIABLES > SET VARIABLE, crie uma variável de nome n. Vamos envolver a expressão dentro do método Math.Round para arredondar o valor obtido. Seleccione ACTIONS > OBJECTS > CORE > MATH > METHODS > ROUND.

Figura094 – Método Round

Para atribuir o valor à variável, seleccione OBJECTS > CORE > MATH > METHODS > RANDOM. Este calcula um número aleatório entre 0 e 0,99999... . Para obter números entre 0 e 48 multiplicamos este método pelo valor 48 e como o valor 0 não nos interessa somamos uma unidade ao resultado. Obtemos assim um intervalo de valores entre o 0 e o 48.
n = Math.round(Math.random()*48+1);

Finalmente, para atribuir estes valores a cada uma das caixas de texto, seleccione no painel ACTIONS > VARIABLES > SET VARIABLE.

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

323

Figura095

CICLO WHILE O ciclo while é mais utilizado em casos em que não sabemos qual o número de vezes que o loop irá correr. Supondo que pretendemos criar um menu dinâmico, que vai buscar as opções a um ficheiro de texto externo. Estas opções podem variar, consoante o utilizador introduza ou apague no ficheiro de texto as variáveis. Começamos por criar o ficheiro de texto com quatro variáveis.

Figura096 – Ficheiro de texto

No filme de Flash criamos um botão para as opções do menu e colocamos este botão dentro de um movie clip ao qual adicionamos uma caixa de texto dinâmico.

324

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

Figura097- Botão dentro do movie clip

Atribuímos um nome à instância da caixa de texto e desligamos a opção selectable.

Figura098 – Nome da instância da caixa de texto

De volta ao palco criamos um botão para topo do menu e colocamos abaixo deste uma instância do movie clip que contém a caixa de texto. Atribuímos a esta instância o nome opcao1.
Figura099 – Nomear a instância do movie clip no palco

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

325

No primeiro keyframe do palco iremos carregar as variáveis do ficheiro de texto e esconder o movie clip opcao1. Depois de seleccionar o keyframe escolhemos no painel actions a categoria BROWSER / NETWORK > LOAD VARIABLES.

Figura100 - LoadVariables

Nos parâmetros em URL digitamos o nome do ficheiro de texto, que por se encontrar na mesma pasta do filme não é necessário indicar um caminho relativo apenas o nome do ficheiro basta. Location – Escolhemos Target e digitamos o valor _root, ou seja a timeline principal irá receber as variáveis do ficheiro externo. Acrescentamos uma linha para tornar o movie invisível. Fazemos isto através da propriedade _visible.

Figura101 – Actions primeira da keyframe do palco

Neste momento já podemos testar o filme e verificar no debbuger se as variáveis estão a ser carregadas para o filme. Utilizamos o comando CONTROL > DEBUG M OVIE, premimos o botão play na janela do debugger e ao seleccionar a opção _level0 e o separador variables, já devem aparecer os valores que se encontram no ficheiro de texto externo.

326

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

Figura102 – Fazer Debug do filme

De seguida seleccionamos o botão que vai activar o menu e nele vamos colocar a programação para gerar as opções do menu. Começamos por atribuir à caixa de texto do primeiro movie, que já está no palco o valor da primeira variável do ficheiro de texto. Ao mesmo tempo tornamos este movie visível de novo.
opcao1.texto.text = op1; opcao1._visible = true;

Para o ciclo while iniciamos uma variável chamada i com valor 2, pois o valor 1 pertence ao movie que já está no palco.
var i = 2;

Começamos o ciclo while que irá correr enquanto a condição for verdadeira. Ou seja, enquanto as opções forem diferentes de null.
while (eval("op"+i) != null)

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

327

A função Eval utilizada nesta condição permite-nos obter o valor da variável que queremos preencher, através do cálculo da expressão que se encontra entre parêntesis.

Figura103- Programação do botão menu

Dentro do ciclo while, duplicamos o movie clip. Na linha 7 deslocamos os botões adicionando-lhes o valor da altura do movie e multiplicando pelo i -1 (não esquecer que o primeiro valor de i é 2, dai subtrair-mos uma unidade). Finalmente, atribuím os a cada caixa de texto o valor da variável respectiva e incrementamos o i. Para alterar o conteúdo e o número de opções o utilizador só tem de editar o ficheiro texto.txt

Figura104 – Menu gerado dinamicamente

II.5. FUNÇÕES

As funções são pedaços de código reutilizável. Quando se utiliza uma função é possível passar uma série de argumentos para dentro dela e retornar um valor. O Flash possui algumas funções que já fazem parte da sua programação e que podem ser utilizadas sem ser necessário o utilizador defini-las.
Boolean escape eval getProperty getTimer getVersion isFinite isNaN Number parseFloat parseInt String targetPath unescape

Função Eval Função para aceder a variáveis ou propriedades e extrair o seu valor. Se for utilizada para aceder a objectos e movie clips extrai uma referência dos mesmos.
produto1=”mel”; produto2=”açúcar”; resultado = eval (“produto”+n);

Assim, se n=1, o resultado será mel, mas se n=2, o resultado será açúcar. O Eval avaliou a expressão “produto”+n e ao obter o valor de n concatenou-o com a palavra produto para extrair o seu valor. No caso da utilização da propriedade _droptarget a função eval é utilizada pelo Flash para converter o nome de um movie clip em notação slash sintax para a notação dot sintax. Ver figura 086.

330

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

Função Number Converte o valor entre parêntesis num número e devolve o seu valor.
Number (n)

Função getTimer Devolve o número de milésimos de segundo que já passaram desde o início duma animação.
x=GetTimer

Figura105 - GetTimer

Função getVersion Devolve uma string que contém a versão do Player do Flash, desde que seja a versão 5 ou posterior.
x=getVersion()

Figura106 – Função GetVersion

As funções são bastante semelhantes às variáveis, pois estão associadas à timeline do movie clip onde foram definidas e é necessário aceder-lhes através de um target path (caminho).

II.5. FUNÇÕES

331

Também é possível definir funções globais através do identificador _global.
_global.funcao = function (z) { return (z*5)-1; }

Função boolean Converte uma expressão num valor Booleano. O valor retornado depende do tipo de expressão. Se a expressão é um valor booleano, o valor devolvido é “expression”. Se a expressão é um número, o valor devolvido é “true”, caso o número não seja 0. O valor zero devolverá “false”. Se a expressão é uma string, o método toNumber é invocado para converter a string num valor numérico. Se o resultado for diferente de zero é retornado true, caso o resultado seja zero, o valor é igual a false. Se a expressão é undefined o valor devolvido é false. Se a expressão é um movie clip ou um objecto, o valor devolvido é true.
Boolean (expressão)

Função string Converte uma expressão numa string.
String (expressão)

Se a expressão é um valor booleano, a string devolvida é true ou false, consoante o valor booleano apresentado pela expressão. Se a expressão se tratar de um número, o valor devolvido é uma representação em texto do valor numérico que era o resultado da expressão. Se a expressão é uma string o valor devolvido é expression. Se a expressão é um movie clip, valor é o target path para o movie clip em slash Sintax (/).

332

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

Se a expressão é undefined o valor devolvido é o de uma string vazia (“”)

Função escape Converte um parâmetro numa string e codifica-o num formato de URL onde os caracteres especiais são convertidos em sequências hexadecimais.
escape("parametro")

Função getProperty Devolve o valor de uma propriedade de um movie clip. O código seguinte devolve o valor da coordenada y de um movie clip chamado carro.
carro_y = getProperty(_root.carro, _y)

Função targetPath Devolve uma string contendo o target path (caminho) do movie clip. Este caminho é dado utilizando a dot syntax.
targetPath(this)

Função unescape Função que avalia um parâmetro como string, e descodifica-o de formato URL-encoded para uma string. Efectua o processo inverso da função Escape. Todas as sequências hexadecimais são convertidas numa string.
unescape(parametro)

II.5. FUNÇÕES
Função isFinite

333

Avalia uma expressão e devolve o valor true se o resultado for um número finito e false se o resultado for infinito.
isFinite(expressão)

Função isNaN Avalia um parâmetro e devolve o valor true se o resultado não for numérico, indicando que estamos na presença de um erro matemático.
isNaN("carro") // devolve true

Função parseFloat Converte uma string num número de vírgula flutuante. Se a string não começar por um número que possa ser convertido, a função devolve o valor NaN. Espaços que precedem números inteiros válidos são ignorados.
parseFloat("-5") devolve -5 parseFloat("2.5") devolve 2.5 parseFloat("3.5e6") devolve 3.5e6, ou 3500000 parseFloat("chocolate") devolve NaN parseFloat(" 5.1") devolve 5.1 parseFloat("3.75relógio") devolve 3.75 parseFloat("0gatos") devolve 0

Função parseInt Função que converte uma string num número inteiro. Se a string não for possível de converter em inteiro a função devolve NaN. Strings começadas por 0x são interpretadas como números hexadecimais.

334

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

Espaços em branco que antecedam valores inteiros válidos são ignorados assim como outros caracteres especiais.
parseInt("3.5") // devolve 3.5 parseInt("chocolate") // devolve NaN parseInt("4foo") // devolve 4

Exemplo hexadecimal:
parseInt("0x3F8") // devolve 1016

Exemplo binário:
parseInt("1010", 2) // devolve 10 (a representação binária de 1010)

DEFINIR FUNÇÕES
Todas as funções começam com a palavra function e de seguida surge o nome da função. ACTIONS > USER-DEFINED FUNCTIONS > FUNCTION .
function calcTotal

Figura107 – Definir uma função

II.5. FUNÇÕES

335

Depois surgem os nomes dos argumentos a ser passados que aparecem listados entre parêntesis. Os nomes dos parâmetros são separados por vírgulas.
function calcTotal (preco, iva)

A seguir basta digitar entre chavetas o código da função.
function calcTotal (preco, iva) { // o código da função aparece aqui }

A outra parte especial duma função é a acção return, que notifica a função para terminar e retornar um certo valor para o código que chamou a função.
function calcTotal (preco, taxa) { return (preco, iva); }

Para chamar a função é necessário escrever algo semelhante a:
calcTotal(50, 1.7);

Vamos criar uma pequena função para converter valores de escudos para euros. Criamos duas caixas de texto. A caixa para os escudos (escudos) será do tipo input, enquanto que a que vai apresentar a conversão em euros (euros) será dinâmica.

Figura108 – Interface

Na primeira keyframe do filme vamos criar a função. Escolha no painel ACTIONS > USER DEFINED FUNCTIONS > FUNCTION . Defina o nome da função e o parâmetro que vai ser necessário (escudos).

336

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

De seguida seleccione na mesma categoria a action Return.

Figura109 – Definir a função

Agora basta associar ao botão que vai efectuar o cálculo a chamada da função: Ao introduzir um valor o utilizador preenche o parâmetro necessário para a função efectuar o cálculo. O valor de seguida é devolvido para dentro da variável euros.

Figura110 – Actions do botão

II.6. OBJECTOS

Os objectos são blocos de código designados para desempenhar determinadas tarefas. Cada objecto possui propriedades que podem ser manipuladas. Estas propriedades são na realidade variáveis. Para além das propriedades, os objectos possuem ainda métodos que lhes permitem desempenhar determinada função. A grande vantagem dos objectos é a sua reutilização. As linguagens orientadas por objectos, como o Actionscript, vêm já com alguns objectos incorporados. Os objectos no Flash MX estão divididos em quatro categorias: Objectos nucleares (core) que são também comuns à especificação ECMA – Array, Boolean, Date, Function, Math, Number, Object e String. Objectos de Movie que são característicos do Actionscript Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selection, Sound, Stage, System, TextField e TextFormat Objectos Client / Server que são também específicos do Actionscript e que permitem comunicar entre cliente e servidor - LoadVars, XML, e XMLSocket. Objectos Authoring que permitem configurar o Flash - CustomActions e Live Preview.

Aceder às propriedades de um objecto
Para aceder às propriedades de um objecto utiliza-se o ponto (.) como operador. O nome do objecto surge do lado esquerdo separado pelo ponto e o nome da propriedade que pretendemos aceder.

338

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

Object.name

Para associar uma propriedade a um objecto utiliza-se a action Set Variable.
Objecto.name = “Helena”;

Invocar o método de um objecto
O operador ponto (.) também permite aceder aos métodos de um determinado objecto. No exemplo seguinte chamamos o método setRGB para o objecto Color.
onClipEvent (load) { myColor = new Color(this); myColor.setRGB(0xFF66FF); }

Objectos da categoria core
UTILIZAR O OBJECTO DATE
Objecto que constrói uma nova data e/ou hora capturada através da data e hora do computador do utilizador. Para este exercício, comece por criar um movie clip na biblioteca que vai conter uma caixa de texto dinâmico chamada hora_txt.

Figura111

II.6. OBJECTOS

339

Coloque uma instância do movie clip no palco e atribua-lhe as seguintes actions:

Figura112

Criamos uma nova variável e atribuímos-lhe o valor da data corrente através do objecto OBJECTS > CORE > DATE. Basta agora passar os parâmetros da data que necessitamos para dentro da caixa de texto do movie clip, utilizando os métodos getHours, getMinutes e getSeconds.

UTILIZAR O OBJECTO ARRAY
Um array é um objecto cujas propriedades podem ser acedidas através de um número que determina a sua posição no array. O primeiro elemento de um array é sempre o zero, o seguinte o 1 e assim sucessivamente. Para definir os valores de um array utiliza-se o operador [ ] no qual se envolve o número do elemento a que se pretende aceder. Por exemplo, o seguinte array possui quatro valores, associados a cada um dos números do array. O array deve ser sempre iniciado com o construtor new Array().
novoArray=New Array(); novoArray[0] = "Liliana"; novoArray[1] = "Manuela"; novoArray[2] = "Luisa"; novoArray[3] = "Sara";

O mesmo array também pode ser descrito de uma forma mais extensa do seguinte modo:
novoArray=New Array("Liliana","Manuela","Luisa","Sara");

340

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

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

Vamos agora completar o exemplo do relógio acrescentando mais um movie clip para conter a data completa. Dentro deste movie clip está outra caixa de texto à qual demos o nome de data_txt. Na primeira keyframe do filme criamos dois novos arrays.

Figura113 – Criar os arrays

Para a instância do movie clip que irá conter a data, teremos:

Figura114 – Actions da instância

UTILIZAR O OBJECTO MATH > MÉTODO MAX
Devolve o maior valor de dois valores ou resultados de expressões numéricas.
Math.max(x,y)

Parâmetros: x e y – Podem ser valores ou expressões numéricas. Os dois valores são avaliados e o resultado é o maior valor.
Math.max(55,88) // resultado é 88

II.6. OBJECTOS UTILIZAR O OBJECTO MATH > MÉTODO MIN

341

Devolve o menor valor de dois valores ou resultados de expressões numéricas.
Math.min(4,77) // resultado é 4

Parâmetros: x e y – Podem ser valores ou expressões numéricas. Os dois valores são avaliados e comparados e o resultado é o menor valor.

UTILIZAR O OBJECTO MATH > MÉ TODO PI
Constante matemática 3.14159265358979... .
Math.PI()

equivalente

ao

valor

do

Pi,

ou

seja,

UTILIZAR O OBJECTO MATH > MÉTODO ROUND
Utilizado para arredondar uma expressão numérica ou um valor. O resultado da seguinte expressão numérica é 56.
Math.round(55.98)

UTILIZAR O OBJECTO MATH > MÉTODO RANDOM
Retorna um número aleatório entre 0 e 0.9999...
Math.random()

342

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

Criamos um jogo muito simples em que o utilizador introduz um número (número) e assim que faz clique num botão é gerado um número aleatório entre 0 e 20, que é comparado com o que foi introduzido.

Figura115 – Random e Round

UTILIZAR O OBJECTO MATH > MÉTODO SQRT
Determina a raiz quadrada de um número ou expressão numérica.
Math.sqrt(x)

Parâmetros: x – Número ou expressão numérica maior que 0.

Figura116 – Raiz quadrada

Objectos da categoria movie
UTILIZAR O OBJECTO COLOR
Com este objecto é possível alterar a cor RGB a um movie clip. Depois de atribuídos os valores podem ainda ser guardados para reutilizar mais tarde.

II.6. OBJECTOS

343

Deve ser sempre usado o construtor new Color() para definir uma nova instância. Métodos do objecto Color.getRGB - Devolve o valor numérico RGB atribuído pelo último método setRGB. Color.getTransform – Devolve a informação do último método setTransform. Color.setRGB – Altera o valor hexadecimal da cor de um determinado objecto. Color.setTransform – Atribui um valor para alterar as cores a um objecto. Por exemplo, imagine que queremos alterar a cor de um movie clip no palco através da introdução de valores RGB. Para isso vamos criar três caixas de texto, para as três cores primárias do modelo RGB.

Figura117 - Interface

Na primeira keyframe do filme iremos criar o construtor new Color().
alvo_color=new Color(alvo_mc);

De seguida, seleccionamos o movie clip e atribuímos os valores das caixas à instância através do método setRGB.

Figura118 – Aplicar o método setRGB ao movie clip

344

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

Os valores devem ser introduzidos pelo utilizador em código hexadecimal.

Figura119 – Inserir os valores

UTILIZAR O OBJECTO MOVIECLIP > MÉTODO HITTEST
Vamos usar o método hitTest para detectar quando um movie clip se encontra sobreposto com outro.
movieClip.hitTest(target)

Parâmetros: target – O target path da área de colisão com o movie clip. Continuamos no exemplo do filme pacman. Criamos um novo movie na biblioteca e colocamos uma instância no palco. Atribuímos um nome à instância (laranja) e na primeira keyframe do filme vamos criar uma função.

Figura120 – Nomear a instância

A função vai permitir-nos reutilizar código, pois os quatro botões vão necessitar de testar a sobreposição do movie.

II.6. OBJECTOS

345

Figura121 – Actions da keyframe

Nos botões basta acrescentar o código para chamar a função sempre que o movie clip é deslocado. Ver a figura 122.

Figura122

UTILIZAR O OBJECTO SOUND
O objecto Sound permite controlar o som de um filme. Ao utilizar este objecto sem especificar Target, todos os sons do filme serão controlados. Deve ser utilizado o construtor new Sound() para criar uma nova instância de som antes de ser possível utilizar os seus métodos.
musica = new Sound();

Como exemplo, vamos criar uma animação para onde um som é carregado e controlado através de dois botões. Um botão pára o som e outro recomeça o som de novo a partir do início. Começamos por criar na primeira keyframe do filme um construtor para a nova instância de som. Logo de seguida carregamos um som externo, ou seja, que não foi importado para a biblioteca do filme.

346

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

Figura123 – Actions da primeira keyframe

No botão play vamos inserir o método start para dar início ao som. Nos parâmetros 0 é o valor em segundos onde o som irá dar início e 1 o número de loops que este irá efectuar.

Figura124 – Botão Play

musica.start(secondOffset, loop)

secondOffset – Permite começar o som numa determinada posição. Este valor é opcional e o seu valor deve ser introduzido em segundos. Loop – Número de loops que o som irá efectuar Para o botão de paragem do som, teremos de usar o método stop.

Figura125 – Parar o som

musica.stop("idName");

II.6. OBJECTOS

347

idname – O nome do som a ser parado. Este parâmetro é opcional. Logo, se nenhum som for especificado, todos os sons do filme param. Se ainda pretendermos uma caixa de texto que indique quantos milésimos de segundo do som já foram lidos, basta criar um movie clip no qual incluímos uma caixa de texto com o nome (caixa) e usar a propriedade position:

Figura126

UTILIZAR O OBJECTO CAPABILITIES
Este objecto permite analisar características do sistema do utilizador, tais como resolução, cores e capacidades áudio ou vídeo. Para utilizá-lo é necessário usar também o objecto system . Por exemplo, para verificar se o sistema tem capacidades áudio:
System.capabilites.hasAudio

Propriedades do objecto capabilities: System.capabilities.hasAudioEncoder – Mostra os encoders de áudio suportados. System.capabilities.hasAccessibility – Indica se o sistema possui os standards de acessibilidade requeridos. System.capabilities.hasAudio – Se o sistema possui ou não capacidades áudio. System.capabilities.hasMP3 – Possibilidade de ler ou não MP3.

348

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

System.capabilities.language – Indica a linguagem suportada pelo FlashPlayer. System.capabilities.manufacturer – Indica o fabricante do Player do Flash. System.capabilities.os – Indica o sistema operativo do computador que está a correr o Player do Flash. System.capabilities.pixelAspectRatio – Indica a proporção dos pixéis do ecrã. System.capabilities.screenColor – Indica se o monitor é a cores ou a preto e branco. System.capabilities.screenDPI – Indica o número de pontos por polegada do ecrã. System.capabilities.screenResolution.x – Mostra o tamanho horizontal do ecrã. System.capabilities.screenResolution.y - Mostra o tamanho vertical do ecrã. System.capabilities.version – Indica a versão mais antiga suportada pelo Player do Flash. System.capabilities.hasVideoEncoder – Mostra os encoders instalados para vídeo.

Figura127

Para exemplificar, no palco desenhamos algumas caixas de texto, às quais atribuímos propriedades do objecto capabilities. O resultado do filme depois de testado aparece na figura 128.

II.6. OBJECTOS

349

Figura128

Objectos da categoria client/server
UTILIZAR O OBJECTO LOADVARS
Este objecto é utilizado como alternativa à action LoadVariables, para transferência de dados entre um servidor e o filme de Flash. É necessário utilizar o construtor new LoadVars() antes de invocar os seus métodos. Métodos do objecto LoadVars: LoadVars.load – Faz download de variáveis de um URL específico. LoadVars.getBytesTotal – Devolve o número de bytes carregados através do método load ou sendAndLoad. LoadVars.getBytesTotal – Devolve o número total de bytes aos quais será feito download através do método load ou sendAndLoad. LoadVars.send – Publica as variáveis de um objecto LoadVars para um determinado URL. LoadVars.sendAndLoad – Publica as variáveis de um objecto LoadVars e faz download da resposta do servidor para um objecto. LoadVars.toString – Devolve uma string de URL codificada que contém todas as variáveis enumeradas pelo objecto LoadVars.

350

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

Eventos do objecto LoadVars: LoadVars.onLoad – Invocado quando uma operação de load ou sendAndLoad é completada. Iremos criar um menu dinâmico, que vai buscar os valores das suas opções e links do botão a um ficheiro de texto externo.

Figura129 – Ficheiro texto

Começamos por criar um botão na biblioteca, que depois é colocado dentro de um movie clip, ao qual é acrescentado uma caixa de texto dinâmico, e dada uma action GetURL em que o link irá ser determinado através da variável “link”.

Figura130 – Botão dentro do movie com a caixa de texto

Arrastamos uma instância do botão para o palco e atribuímos-lhe o nome botão1.

II.6. OBJECTOS

351

Figura131 – Instância do movie no palco

Na primeira keyframe do filme iniciamos as actions criando um construtor LoadVars ao qual atribuímos o nome dados_lVars.
dados_lVars=new LoadVars();

Na segunda linha aplicamos a função “carregado” (que iremos descrever mais à frente) no evento onLoad, para que seja executada assim que o filme carrega.
dados_lVars.onLoad=carregado;

Agora é a vez de chamar o ficheiro de texto que contém os dados que necessitamos para criar o filme.
dados_lVars.load("links.txt");

E vamos criar a função que atribui os valores carregados aos botões, que são gerados dinamicamente através de um ciclo While. Atribuímos ao primeiro botão o valor do primeiro texto e do link que lhe corresponde dentro do ficheiro de texto.
botao1.botao_txt.text=dados_lVars.txt1; botao1.link=dados_lVars.link1;

352

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

Iniciamos a variável i no valor 2, para começar a duplicar os próximos movie clips.
I=2;

Iniciamos o ciclo while. Enquanto existirem novos textos no ficheiro externos é duplicado um novo botão e deslocado 40 pixéis na vertical:
while(eval("dados_lVars.txt"+i)!=null){ eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i); eval("botao"+i)._y+=40;

Finalmente são atribuídos ao botão duplicado o seu texto, o seu link e a variável i é incrementada em uma unidade, para criar a próxima instância de botão.
eval("botao"+i).botao_txt.text=eval("dados_lVars.txt"+i); eval("botao"+i).link=eval("dados_lVars.link"+i) i++; }

Figura132 – Script completo

UTILIZAR O OBJECTO XML
Utiliza-se para carregar, manipular e construir documentos de XML.

II.6. OBJECTOS

353

É necessário criar primeiro um construtor new XML() antes de chamar os métodos do objecto. Antes de mais, e visto que estamos a tratar de um assunto relativamente recente, vamos falar um pouco da estrutura de um documento XML, através de um exemplo simples:
<?xml version="1.0"?> <!DOCTYPE lista de pessoas> <pessoas> <pessoa codigo=”E345”> <nome>José</nome> <Idade>54</idade> </pessoa> <pessoa codigo=”F546”> <nome>Maria</nome> <Idade>32</idade> </pessoa> </pessoas>

Neste exemplo, estamos a transmitir as características – nomeadamente um código, o nome e a idade - de duas pessoas. Para quem conhece o HTML, decerto já notou as semelhanças. Qualquer documento XML, começa pela declaração da versão. De seguida, a declaração do tipo de documento, que é opcional. A partir daí, surge a descrição dos dados. A estrutura é sempre a mesma. Cada bloco de dados está encarcerado entre uma etiqueta de declaração de início e outra de fim. No exemplo, os dados de cada pessoa começam pela declaração <pessoa>, e terminam em </pessoa>. Dentro de cada pessoa, estão os dados que lhe pertencem. Se for necessário declarar elementos vazios, usa-se apenas uma etiqueta: <pessoa/>, que é equivalente a <pessoa></pessoa>. Desta estrutura resulta uma hierarquia de dados em “árvore” (figura 133). Cada uma das bifurcações, denomina-se nó (Node no Flash). Aos segmentos de informação chamam-se textos. Cada um dos nós pode conter atributos, ou sub-nós especiais – os de texto, que não contêm

354

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

atributos, nem sub-nós. O texto é declarado entre as etiquetas de início e fim. No exemplo, temos o nome e a idade. Os atributos são declarados dentro da etiqueta de início. No exemplo, o código. Os nós são pais (parent) e filhos (child) uns dos outros. Por exemplo, pessoa é filho do documento, mas é pai de nome e idade.

Figura133 – Estrutura de um documento XML

Como exemplo, vamos criar uma agenda em Flash que acede aos dados contidos num ficheiro de XML. O nosso ficheiro encontra-se na mesma pasta do filme e contém a seguinte estrutura.

II.6. OBJECTOS

355

Figura134 – Ficheiro XML

Propriedades do objecto XML que iremos utilizar neste exemplo: xml.load – Verifica se o ficheiro XML foi carregado. xml.firstchild – Referência ao primeiro filho do nó especificado. xml.nextsibling – Refere-se à próxima linha dos filhos do nó especificado. xml.nodevalue – Devolve o texto que se encontra dentro de um nó de texto.

Figura135 – Interface

Na primeira keyframe do filme começ amos por criar o construtor:
agenda_xml = new XML();

356

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

Na segunda linha iremos aplicar a propriedade IgnoreWhite para o Flash ignorar todas as quebras de linha do documento de texto.
agenda_xml.ignoreWhite = true;

De seguida acrescentamos uma linha para uma função de nome “carregado” correr assim que o ficheiro de XML esteja carregado.
agenda_xml.onLoad = carregado;

A quarta linha carrega o ficheiro. Utilizamos o método Load para esse efeito.
agenda_xml.load("teste.xml");

Agora criamos a função para fazer referência que vai ser executada depois do carregamento.
function carregado() { agenda = agenda_xml.firstChild; pessoa = agenda.firstChild; apresentaDados(); }

E de seguida a função que vai apresentar os dados:
function apresentaDados() { codigo = pessoa.attributes.codigo; valor = pessoa.firstChild; nome = valor.firstChild.nodeValue; valor = valor.nextSibling; telefone = valor.firstChild.nodeValue; }

Para as actions dos botões, vamos introduzir utilizar a condição if para determinar se os dados do ficheiro de XML já terminaram ou não.

II.6. OBJECTOS

357

Figura136 – Botões de navegação no documento

II.7. COMPONENTES
Os componentes do Flash MX foram introduzidos para substituir os Smart Clips que faziam parte da versão anterior do programa. Tratam-se de movie clips complexos que já possuem actions associadas, mas nas quais o utilizador pode alterar parâmetros que lhe permitem adaptar os componentes a diferentes utilizações em cada filme.

Figura137 – Janela Components

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

Fig138 – Biblioteca

360

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

O painel PROPERTIES mostra a informação para configurar o componente através da definição dos seus parâmetros. Cada componente é também por si só uma instância e deve-lhe ser atribuído um nome único no filme. Para alterar o aspecto de qualquer um dos componentes, basta alterar os movie clips que se encontram dentro da pasta Component Skins.

Fig139 – Painel Properties com um componente seleccionado

Os componentes podem ser visualizados tal e qual como aparecerão no filme publicado se o modo de visualização Live Preview ( ONTROL > C LIVE PREVIEW) estiver activado. No entanto, os componentes não estão operacionais desta forma. Teste-os com o comando CONTROL > TEST MOVIE.

Figura140 – Sem live preview vs Live preview

Existem sete componentes no painel Components.

Checkbox
Permite adicionar caixas de verificação ao documento. As caixas permitem escolhas múltiplas. Parâmetros: Change Handler - String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função

II.7. COMPONENTES

361

deve estar definida na mesma timeline da checkbox. Este parâmetro é opcional. Initial Value - Indica se a caixa está ou não seleccionada de início. Label - Texto que aparece ao lado da caixa. Label Placement – Indica se o label aparece à direita ou à esquerda da caixa.

Figura141 – Opções Checkbox

ComboBox
Possibilita adicionar menus drop-down com várias opções. Estes menus podem ser editáveis ou estáticos. Cada item da caixa tem um valor, sendo o primeiro equivalente a 0. Parâmetros: Change Handler - String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função deve estar definida na mesma timeline da checkbox e o nome da combobox pode ser aceite como parâmetro. Data – É um array de strings de texto que especificam os valores associados a cada uma das entradas do menu. Editable – Determina se a caixa é editável ou não. Labels – Títulos que surgem para escolha dentro do menu. Row Count – Número de itens listados no menu.

Figura142 – Opções ComboBox

362

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

ListBox
Permite adicionar listas de escolha única ou múltipla. Estas listas podem possuir scrollbars. Parâmetros: Change Handler – String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função deve estar definida na mesma timeline da checkbox. Este parâmetro é opcional e só é necessário incluir se pretendermos que algo aconteça quando um item é seleccionado. Data – É um array de strings de texto que especificam os valores associados a cada uma das entradas da lista. Labels – Títulos que surgem para escolha dentro da caixa. Select Multiple – Especifica se a lista permite ou não escolha múltipla. Se a opção False for seleccionada, a lista não permite escolhas múltiplas; este é o valor por defeito.

Figura143 – Opções ListBox

PushButton
Adiciona botões simples ao filme. Podem ser associadas actions ao evento onClick.

Parâmetros: Click Handler - String de texto que permite indicar a função que deverá ser executada quando o botão é premido. Label – Títulos que surgem para escolha dentro da caixa.

II.7. COMPONENTES

363

RadioButton
Permite adicionar botões de escolha única ao documento. Parâmetros: Change Handler – String de texto que permite indicar a função que deverá ser executada quando o valor do radio button é alterado. A função deve estar definida na mesma timeline do radio button. Este parâmetro é opcional e só é necessário incluir se pretendermos que algo aconteça quando um item é seleccionado. Data – É um array de strings de texto que especificam os valores associados a cada uma das entradas da lista. Group Name – Especifica a que grupo de botões pertence o botão. Vários botões podem pertencer ao mesmo grupo. Initial State – Indica se o botão está ou não seleccionado de início. Label - Texto que aparece ao lado do botão. Label Placement – Indica se o label aparece à direita ou à esquerda do botão.

Figura144 – Opções ComboBox

Scrollbar
Permite adicionar um scrollbar vertical ou horizontal ao documento. É a forma mais simples de adicionar scrollbars a caixas de texto. Para adicionar um scrollbar a uma caixa de texto, crie uma caixa de texto do tipo dinâmico ou input. Escolha a opção multiline para poder escrever em várias linhas.

364

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

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

Figura145 – Scrollbar

Parâmetros: Horizontal – Especifica se o scrollbar é horizontal ou vertical. Target text Field – Especifica o nome da instância do campo de texto para o scrollbar. Assim que o scrollbar adere a um campo de texto este campo é preenchido automaticamente.

Figura146 – Opções Scrollbar

ScrollPane
Permite adicionar janelas com scrollbars horizontais e verticais para mostrar movie clips. É especialmente indicado para mostrar muita informação em pouco espaço de documento. Parâmetros: Drag Content – Indica se o utilizador pode arrastar o conteúdo do painel, ou tem de utilizar as scrollbars.

II.7. COMPONENTES

365

Horizontal Scroll – Determina se a barra horizontal está a ser mostrada ou não. O valor por defeito é auto, em que apenas é mostrada se for necessária.

Scroll Content – String de texto que especifica a identificação linkage do símbolo que irá aparecer no painel. Para atribuir o nome de linkage a um símbolo, faça clique com o botão direito do rato sobre o movie clip na biblioteca e escolha a opção Linkage.

Figura147 – Linkage

Vertical Scroll – Determina se a barra vertical está a ser mostrada ou não. O valor por defeito é auto, em que apenas é mostrada se for necessária.

Figura148 – ScrollPane

Depois de configurados os componentes necessitam que seja adicionado actionscripting para ficarem a funcionar convenientemente. No Painel Actions encontramos uma categoria totalmente vocacionada para os métodos dos componentes.

366

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

Figura149

Para exemplo, vamos criar um formulário simples em que o utilizador ao clicar no botão Enviar passa informações através de componentes.

Fig150 – Formulário

Nomes das instâncias: Checkbox = participa Combobox = viagem com três opções: Maldivas Istanbul Cuba Radio button 1= Meio_av Radio button 2= Meio_comb Para capturar os valores de todos os campos criamos uma função na timeline do filme e associamos essa função ao botão Enviar. Começamos por nomear a instância do botão e digitamos em Click Handler o nome da função que será chamada quando o botão for premido.

II.7. COMPONENTES

367

Figura151

Agora na primeira keyframe do filme criamos a função que vai ficar associada ao botão.
function clicar (enviar) { }

Começamos por recolher os dados da checkbox. Em ACTIONS > UI COMPONENTS > FCHECKBOX > METHODS > GET VALUE
function clicar (enviar) { trace(participa.getValue()); }

FLASH

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, acrescentamos ainda:
function clicar (enviar) { trace(participa.getValue()); trace(RadioGroup.getValue()); trace(viagem.getSelectedItem().label); }

O resultado depois de fazer CONTROL > TEST MOVIE:

368

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

Fig152 – Resultado

Anexo 1. SISTEMA HEXADECIMAL

Este sistema de numeração foi inventado para "simplificar" o trabalho de lidar com números muito grandes. Nós, humanos, utilizamos um sistema de numeração de base 10, decorrente do facto de termos dez dedos. No nosso sistema, a posição de um determinado algarismo é relevante, ao contrário, por exemplo, dos números romanos onde isto não acontece. Outra particularidade do nosso sistema de numeração é que cada casa decimal apenas pode variar de 0 a 9. Quando precisamos representar números acima da faixa que uma determinada casa decimal pode representar, colocamo-la a zero e somamos "um" à casa decimal imediatamente à esquerda da que estamos a considerar. Assim, se estamos a contar a partir de zero e chegamos a 9 teremos de somar "um" ao dígito imediatamente à esquerda do 9. Como neste caso o 9 também pode ser visto como 09, então devemos passar o 9 a 0 e o 0 a 1, criando assim o número 10. Imagine o contador de quilómetros de um automóvel. Se o colocar a zero, à medida que o automóvel se desloca, o primeiro dígito da direita sobe progressivamente de 0 a 9, voltando em seguida a 0, e nesta volta causando o incremento do dígito imediatamente à sua esquerda, que passa então de 0 a 1, passando assim a representar o número 10. Processo similar ocorre quando estes dois dígitos atingirem o valor 99 quando então passarão a 00 e acrescentarão 1 ao dígito da esquerda, passando a 100. Agora pense que o seu contador está a trabalhar na base 16. Ele pode contar de 0 a 15 antes de ter de increm entar o dígito à esquerda. Como a contagem na base 10 utiliza “símbolos” que ocupam uma só posição para representar cada um dos números, então na base 16 também

370

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

deveremos criar “símbolos” para representar todos os algarismos de 0 a 15. Já temos porém os dez primeiros que podemos pedir emprestados à base 10, ou seja, 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para os números de 10 a 15 foi decidido utilizar sequencialmente as letras A, B, C, D, E e F. Como um algarismo dentro de um determinado número pode ter valores diferentes consoante a sua posição, podemos desmembrar um número de acordo com a sua posição relativa. Então, por exemplo, o número 5.326 pode ser lido como cinco milhares, três centenas, duas dezenas e seis unidades. Se pensarmos bem, um milhar é igual a 10 vezes 10 vezes 10. Da mesma forma, uma centena é igual a 10 vezes 10, sendo logicamente uma dezena igual a 10. Colocando isto de uma maneira que nos facilite a visualização, temos o resultado abaixo:
POSIÇÃO MILHAR CENTENA DEZENA UNIDADE Valor da coluna 1000 100 10 1 Pode ser visto como 10 x 10 x 10 10 x 10 10 1 Ou ... 3 10 2 10 1 10 0 10

Repare que acrescentamos uma terceira coluna com representação em termos de expoentes dos valores. Pode ver que dependendo da posição do algarismo dentro do número o seu expoente assume um valor diferente. Se transportarmos este raciocínio para a base 16, teremos o seguinte resultado:
POSIÇÃO “MILHAR” “CENTENA” “DEZENA” “UNIDADE” Valor da coluna 4096 256 16 1 Pode ser visto como 16 x 16 x 16 16 x 16 16 1 Ou então... 3 16 2 16 1 16 0 16

As posições agora têm aspas porque não fazem mais sentido no novo sistema. Servem apenas para que identifique a posição relativa do algaismo de um determinado número.

ANEXO 1. SISTEMA HEXADECIMAL

371

Então, se tivermos, por exemplo, o número 2F, podemos descobrir o seu valor na base 10, multiplicando-se o valor que o F tem relativamente à sua coluna e somando o valor que o 2 tem na coluna que ocupa. O F vale 15 e está na coluna zero. Então, 15x16 =15 e 2x16 =32, logo o número 2F equivale ao nosso número 47. Por raciocínio análogo, o número ABCD será: A = 10. B = 11. C = 12. D = 13. Como está na coluna 3 (16 ) então 10 x 16 = 40.960 Como está na coluna 2 (16 ) então 11 x 16 = 2.816 Como está na coluna 1 (16 ) então 12 x 16 = 192 Como está na coluna 0 (16 ) então 13 x 16 = 13
0 0 1 1 2 2 3 3
1 0

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

372

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

Se olharmos agora para os números resultantes, de trás para a frente, teremos os números 15, 10 e 0, que correspondem a F, A e zero, logo, na base 16, o número 4000 é FA0 16.

Anexo 2. WEB COLORS

Em informática, as cores são representadas por combinações de 3 cores básicas: vermelho, verde e azul. As placas de vídeo permitem que cada uma destas cores possa ter valores que vão de de 0 a 255, sendo 0,0,0 o negro e 255, 255, 255 o branco. No início do desenvolvimento para a Web, ainda eram muitos os computadores capazes de representar apenas 256 cores diferentes no ecrã. Utilizavam então as famosas placas de vídeo de 8 bits 1. Começou-se a notar então que as cores não eram mostradas da mesma forma quando vistas em diferentes computadores, browsers, sistemas operativos, etc. Resolveu-se fazer uma comparação para descobrir quais destas cores seriam exactamente as mesmas, independentemente do sistema utilizado. Utilizou-se o Netscape como padrão, para fazer essa comparação, já que era o browser mais utilizado na altura e o que existia para todos os principais sistemas operativos de então. Chegou-se à conclusão de que apenas 216 das 256 cores possíveis pareciam iguais em todos os sistemas. Foi criada uma paleta com estas 216 cores que ficou com o nome de “Web Colors”. Às vezes também conhecidas por “ eb-Safe Colors”, W “safe colors” ou “Netscape Colors”, e estão disponíveis em programas profissionais de design gráfico e em editores HTML.

1

Como um bit possui dois estados possíveis, ou seja, 0 ou 1, então 8 bits possuem 256 estados possíveis, uma vez que 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256.

Anexo 3. EXTENSION MANAGER como instalar as extensões adicionais ao Flash MX

Para poder instalar as extensões adicionais no seu Flash MX, a primeira coisa a fazer é instalar no seu computador o programa Extension Manager (que tal como as extensões estão disponíveis para download gratuito no site da Macromedia). Corra então o programa de instalação “Ext_Manager_Install_En.exe” (no MAC, “Ext_Manager_Install_hqx”) no seu computador. Terminada a instalação corra o programa Extension Manager 1, que por defeito é armazenado no mesmo directório do Flash. Assim que o fizer verá a imagem abaixo.

1

Certificando-se de que não tem o Flash MX aberto.

376

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

Vá a FILE > INSTALL EXTENSIONS e escolha primeiro o ficheiro “MX365880_FUIComponentsSet2.mxp2” que corresponde ao FLASH MX UI COMPONENTS SET 2 e carregue no botão INSTALL.

Verá a seguir uma janela a perguntar se aceita as condições para a instalação. Carregue em ACCEPT e as extensões serão instaladas no seu computador. Repita o procedimento para as extensões FLASH CHARTING COMPONENTS, cujo ficheiro chama-se “MX377283_ChartingComponents.mxp”. Ao terminar a instalação, o seu EXTENSION MANAGER mostrará na janela principal uma lista daquilo que acabou de instalar. Veja a figura abaixo.

2

As extensões existem em versões diferentes para o Flash MX de PC e para o de MAC. Apesar disso, têm os mesmos nomes.

ANEXO 3. EXTENSION MANAGER

377

Basta agora sair do programa e correr o Flash MX. Vai ver que as extensões já estão dentro da janela COMPONENTS. Caso não estejam visíveis logo à primeira vista, experimente seleccioná-las por meio do “dropdown menu” da própria janela.

Sign up to vote on this title
UsefulNot useful