379
Centro Atlântico Flash MX Design, Animação e Programação

Flash Mx - Apostila

Embed Size (px)

Citation preview

Page 1: Flash Mx - Apostila

Centro Atlântico

Flash MXDesign, Animação e

Programação

Page 2: Flash Mx - Apostila
Page 3: Flash Mx - Apostila

Anabela Gonçalves e Magno Urbano

Flash MXDesign, Animação e

Programação

Portugal/2002

Page 4: Flash Mx - Apostila

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

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

Direcção gráfica: Centro AtlânticoRevisão: Nuno Ricardo e Centro AtlânticoCapa: Paulo Buchinho

© Centro Atlântico, Lda., 2002Ap. 413 - 4764-901 V. N. FamalicãoPorto - LisboaPortugalTel. 808 20 22 21

[email protected]

Fotolitos: Centro AtlânticoImpressão e acabamento: Inova1ª edição: Junho de 2002

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

Marcas registadas: todos os termos mencionados neste livro conhecidos como sendo marcas registadas deprodutos e serviços, foram apropriadamente capitalizados. A utilização de um termo neste livro não deveser 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 pelasinstruções contidas no livro nem por endereços Internet que não correspondam às Home-Pagespretendidas.

Page 5: Flash Mx - Apostila

Iª PARTE:DESIGN E ANIMAÇÃO NO MACROMEDIA FLASH MX

NOVAS FUNCIONALIDADES DO FLASH MX ............................... 151. Workflow ...............................................................................15

Área de trabalho flexível e intuitiva .........................................15Melhorias ao nível da timeline ................................................16Distribute to Layers ...............................................................16Suporte para versões anteriores do Flash .............................17Suporte para diversos Sistemas Operativos .........................17

2. Ferramentas para o designer ...............................................18Free transform tool ................................................................18Fill Transform tool ..................................................................18Pixel Snapping ......................................................................19Gestão e selecção de cores..................................................19Máscaras dinâmicas .............................................................19

3. Suporte Multimedia ...............................................................19Suporte vídeo ........................................................................19Carregamento dinâmico de som e imagens ..........................20

4. Texto .....................................................................................20Substituição de fontes em falta ..............................................20Colocação de texto na vertical ...............................................21Suporte Multilingue ................................................................21

5. Recursos de ajuda ................................................................22Templates .............................................................................22Painel Answers .....................................................................22Exemplos e tutoriais ..............................................................23

6. Publicação e navegação ......................................................23Desenvolvimento de conteúdo acessível ...............................23Suporte em ambientes diferenciados ....................................23Named Anchors ....................................................................23Compressão SWF melhorada...............................................24Empenhamento na minimização do Flash Player ..................24

7. Painel Actions melhorado .....................................................24Edição do Actionscript mais fácil ...........................................24Editor parametrizável ............................................................25Dicas de código (code-hinting) e preenchimento automático 26

ÍNDICE

Page 6: Flash Mx - Apostila

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

Painel de referência ..............................................................26Funcionamento interno melhorado.........................................26Debugger melhorado ............................................................27

8. Novos comandos Actionscript ...............................................27SetInterval e ClearInterval ......................................................27Novo modelo de objectos e eventos ......................................27Instrução Switch ....................................................................28Controlo dinâmico do layout do filme ....................................28Objectos TextField e Button ...................................................28Drawing API ..........................................................................28Controlo de som melhorado ..................................................29Componentes .......................................................................29

9. Links Interessantes ...............................................................30Documentação e Recursos ...................................................30A não perder .........................................................................30

I.1. A INTERFACE GRÁFICA E OSFUNDAMENTOS BÁSICOS........................................ 31

A interface gráfica ....................................................................32Default Layout ........................................................................33

Arrow Tool ................................................................................34Subselection Tool .....................................................................35Line Tool ...................................................................................36

Solid (sólido) ..........................................................................38Dashed (tracejado) ................................................................38Dotted (ponteado) ..................................................................39Ragged (irregular) ..................................................................39Stipple (pontilhado) ................................................................40Hatched (tracejado) ................................................................41

Lasso Tool ................................................................................43Pen Tool ...................................................................................44Text Tool ...................................................................................46

Escolha do tipo de texto .........................................................48Static Text............................................................................48

Espaçamento de caracteres ............................................49Tipo de letra e tamanho ....................................................49Posição dos caracteres ...................................................49Ajuste de cor, negrito e itálico...........................................50Direcção do texto e opções de alinhamento .....................50

Page 7: Flash Mx - Apostila

7ÍNDICE

Opções de rotação ..........................................................51Opções de formatação ....................................................54Auto Kern .........................................................................55W, H, X e Y .......................................................................55URL .................................................................................55Alvo da URL .....................................................................55O texto pode ser seleccionado? .......................................56Use device fonts...............................................................56Tipo de linha.....................................................................57

Dynamic Text .......................................................................57Botão HTML.....................................................................59Mostrar borda ..................................................................60

Input Text .............................................................................61Tipo de linha.....................................................................61

Oval Tool & Rectangle Tool .......................................................61Gradientes ...............................................................................66

Gradiente linear .....................................................................66Gradiente radial .....................................................................67

Pencil Tool ................................................................................70Brush Tool ................................................................................71Free Transform Tool ..................................................................75

Envelope ................................................................................76Subtracção de formas ............................................................78União de formas ....................................................................80

Fill Transform Tool .....................................................................82Ink Bottle Tool & Paint Bucket Tool ............................................83Eyedropper Tool .......................................................................86Eraser Tool ...............................................................................86Hand Tool .................................................................................88Zoom Tool ................................................................................88Color Swatches ........................................................................89

I.2. OS MENUS ........................................................... 93Os Menus e suas funções .........................................................93

FILE .......................................................................................93New From Template ............................................................93Open As Library ..................................................................96Import & Export Movie .........................................................97

Quicktime.........................................................................97

Page 8: Flash Mx - Apostila

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

Freehand .........................................................................99Publish Settings ................................................................101

Opção Formats – Janela Publishing ...............................102Opção Flash – Janela Publishing ...................................103Opção HTML – Janela Publishing...................................105

Publish ..............................................................................107VIEW ...................................................................................108

GoTo .................................................................................108Zoom In, Zoom Out e Magnification ...................................108Outlines, Fast, Antialias, Antialias Text ...............................108Rulers, Grid e Guides ........................................................109

MODIFY ............................................................................... 112Shape - Soften Fill Edges ................................................. 112Convert Lines to Fills ......................................................... 114Expand Fill ........................................................................ 115Smooth ............................................................................. 115Straighten.......................................................................... 116Optimize ........................................................................... 117Trace Bitmap .................................................................... 118Transform ..........................................................................121Arrange .............................................................................122Align .................................................................................123Group & Ungroup ..............................................................127Break Apart .......................................................................127Distribute to Layers ...........................................................128

I.3. LAYERS, TIMELINE e ANIMAÇÃO.....................129Layers .....................................................................................129Olho, Cadeado e Quadrado Colorido ......................................132

Olho (show/hide layer)..........................................................133Cadeado (lock/unlock layer) .................................................133Quadrado colorido (show layer as outline)............................134

O Timeline..............................................................................135Keyframes - representação no timeline................................136ActionScript – representação no timeline ............................137Labels – representação no timeline .....................................137

A Animação frame-a-frame .....................................................139A Animação Motion Tween ......................................................144Ease In & Ease Out (o controlo do movimento)........................147

Page 9: Flash Mx - Apostila

9ÍNDICE

Como é que o Flash interpreta uma animação? ......................150Animação de formas (shape animation) ..................................153Shape Hints ............................................................................156

Criação do Shape Hint... ......................................................158Animação com Motion Guide ..................................................162Máscaras ................................................................................166

Layer do tipo Guide..............................................................171Layer de som .......................................................................171

Effect (efeitos sonoros) .....................................................172Sync (tipo de sincronismo de som)....................................175

Event..............................................................................175Start ...............................................................................176Stop ...............................................................................176Stream ...........................................................................176

Como testar as suas animações .............................................177Bandwidth Profiler ..........................................................178

I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS ...........181As suas próprias bibliotecas ..................................................181Graphics, Button e Movie Clips ...............................................183Graphic (gráficos) ...................................................................185Button (botão) .........................................................................186Movie Clips ............................................................................189Efeitos de Cor e Transparência ..............................................191

Brightness .........................................................................192Tint ....................................................................................192Alpha ................................................................................193Advanced..........................................................................193

Bibliotecas do Flash ...............................................................194Buttons.................................................................................195

Arcade Buttons .................................................................195Circle Buttons....................................................................196Component Buttons...........................................................196Key Buttons .......................................................................198Knobs & Faders ................................................................198Ovals.................................................................................199Playback ...........................................................................199Push Buttons .....................................................................200

Sounds ................................................................................200

Page 10: Flash Mx - Apostila

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

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

I.6. COMPONENTES AVANÇADOS .........................215Flash UI Components Set 2 ....................................................215

Calendar ..............................................................................215DraggablePane ...................................................................219IconButton ............................................................................223MessageBox........................................................................225SplitView ..............................................................................228Ticker ...................................................................................235Tree .....................................................................................238ProgressBar ........................................................................239

Flash charting components .....................................................240Bar Chart ................................................................................240Line Chart ..............................................................................243

Line Chart – Layout Options ..............................................244Line Chart – Chart Event Handlers ....................................246Line Chart – Category Labels............................................247Line chart – data values.....................................................247

Pie Chart ................................................................................248Pie Chart – Layout options ................................................249Pie Chart – Pie Colors ......................................................250

Page 11: Flash Mx - Apostila

11

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

II.1. INTRODUÇÃO À PROGRAMAÇÃOORIENTADA POR OBJECTOS .................................253

Linguagens Processuais ou Procedimentais ..........................253Linguagens Orientadas por Objectos......................................253

II.2. CONCEITOS BASE ...........................................257Dot sintax versus Slash sintax .................................................257Terminologias utilizadas no Actionscripting .............................258Painel Actions ........................................................................260

Inserir uma Action .................................................................261Alternar entre modos no painel Actions ................................263Navegar entre scripts num documento..................................263Para apagar uma action .......................................................264Visualizar a numeração para as linhas de código.................265Imprimir Actions ...................................................................265Painel Reference .................................................................265Para visualizar o painel Reference .......................................266Para alterar a dimensão da fonte no painel Reference .........266Associar actions na timeline ................................................266Associar actions a símbolos ................................................267

Eventos ..................................................................................267Eventos associados a botões ..............................................268Eventos de movie clips ........................................................268

II.3 INTRODUZIR INTERACTIVIDADENUMA ANIMAÇÃO ......................................................271

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

ÍNDICE

Page 12: Flash Mx - Apostila

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

Caminhos relativos ..............................................................285Controlar instâncias de símbolos ..........................................286Propriedades dos movie clips .............................................288Métodos mais utilizados nos movieclips ..............................290

DuplicateMovieClip e RemoveMovieClip ..........................292LoadMovie e Unload Movie ...............................................295GetBytesLoaded e GetBytesTotal......................................297

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO ..........................................301

Sintaxe do Actionscripting ....................................................301Variáveis ................................................................................303

Data Types...........................................................................303Scope da variável ................................................................305

Variáveis locais .................................................................305Variáveis de Timeline .......................................................305Variáveis Globais ..............................................................305

Declarar variáveis ................................................................305Testar o valor das variáveis ..................................................308Operadores .........................................................................309

Prioridade dos operadores ...............................................309Tipos de operadores .........................................................309

Condição If ...........................................................................312Condição CASE ..................................................................319Ciclo For ..............................................................................320Ciclo While...........................................................................323

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

Page 13: Flash Mx - Apostila

13

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

II.6. OBJECTOS ........................................................337Aceder às propriedades de um objecto ..................................337Invocar o método de um objecto .............................................338Objectos da categoria core ....................................................338

Utilizar o objecto date ..........................................................338Utilizar o objecto array .........................................................339Utilizar o objecto math > método max ..................................340Utilizar o objecto math > método min ...................................341Utilizar o objecto math > método pi ......................................341Utilizar o objecto math > método round ................................341Utilizar o objecto math > método random .............................341Utilizar o objecto math > método sqrt ...................................342

Objectos da categoria movie ..................................................342Utilizar o objecto color .........................................................342Utilizar o objecto movieclip > método hittest ........................344Utilizar o objecto sound .......................................................345Utilizar o objecto capabilities ...............................................347

Objectos da categoria client/server .........................................349Utilizar o objecto loadvars ...................................................349Utilizar o objecto XML .........................................................352

II.7. COMPONENTES................................................359Checkbox ...............................................................................360ComboBox .............................................................................361ListBox ...................................................................................362PushButton .............................................................................362RadioButton............................................................................363Scrollbar .................................................................................363ScrollPane ..............................................................................364

Anexo 1. SISTEMA HEXADECIMAL.............................................369Anexo 2. WEB COLORS ................................................................373Anexo 3. EXTENSION MANAGER: como instalar

as extensões adicionais ao Flash MX ......................375

ÍNDICE

Page 14: Flash Mx - Apostila

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

Page 15: Flash Mx - Apostila

Novas funcionalidades do Flash MX Por Nuno Ricardo 1

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

1. Workflow

Área de trabalho flexível e intuitiva

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

Nesta versão do Flash, a melhoria é significativa neste aspecto. Com outra forma de as paletas se expandiram e se agruparem nos extremos do ecrã, trabalhar com o Flash deixou de ser stressante.

Outra melhoria muito bem vinda é uma paleta de propriedades ao estilo do Dreamweaver. As suas opções variam consoante o objecto selec-cionado, condensando múltiplas paletas numa só, poupando espaço de trabalho precioso.

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

Page 16: Flash Mx - Apostila

16 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Melhorias ao nível da timeline

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

Uma novidade nesta versão MX foi a introdução de pastas de layers. Estas permitem agrupar layers, como conseguíamos fazer antes para os símbolos na Library. Torna-se assim mais fácil trabalhar com filmes complexos a nível de design.

Distribute to Layers

Se tivermos um grupo de objectos numa layer, e pretendermos fazer animações independentes para cada um deles, é necessário colocá-los em layers também elas independentes. Um objecto em cada layer.

O novo comando Distribute to Layers’ faz isso automaticamente, e ainda atribui o nome a cada uma das layers criadas, poupando tempo e traba-lho aos designers.

Page 17: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 17

Suporte para versões anteriores do Flash

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

No entanto, podemos usar a facilidade de gravar os filmes no formato da versão 5, por questões de compatibilidade.

Desta forma, não poderemos usar as capacidades novas. O Flash in-forma quais as actions que são ’proibidas’ assinalando-as a amarelo no painel Actions.

Suporte para diversos Sistemas Operativos

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

Page 18: Flash Mx - Apostila

18 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 19: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 19

Pixel Snapping

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

Gestão e selecção de cores

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

Máscaras dinâmicas

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

3. Suporte Multimedia

Suporte vídeo

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

Page 20: Flash Mx - Apostila

20 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Carregamento dinâmico de som e imagens

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

4. Texto

Substituição de fontes em falta

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

Page 21: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 21

Colocação de texto na vertical

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

Suporte Multilingue

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

Permite também uma mais fácil compatibilidade com aplicações externas que ‘falem’ Unicode, tal como com algumas aplica-ções de gestão de conteúdos.

Page 22: Flash Mx - Apostila

22 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

5. Recursos de ajuda

Templates

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

Painel Answers

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

Page 23: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 23

Exemplos e tutoriais

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

6. Publicação e navegação

Desenvolvimento de conteúdo acessível

A acessibilidade dos conteúdos a indivíduos com necessidades espe-ciais é um tema que tardiamente começou a ser tomado em conta. O Flash suporta agora ferramentas como os leitores de ecrã. É possível adicionar ajudas aos filmes para serem interpretadas por essas fer-ramentas.

Suporte em ambientes diferenciados

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

A Macromedia está absolutamente empenhada em tornar cada vez mais abrangente o Flash Player no que toca a plataformas existentes e futuras.

Named Anchors

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

Page 24: Flash Mx - Apostila

24 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Compressão SWF melhorada

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

Empenhamento na minimização do Flash Player

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

Nesta versão, embora o player tenha obrigatoriamente crescido, devido ao suporte vídeo, manteve-se nuns simpáticos 380 Kb. Pouco mais de 1 minuto de download para um modem de 56 Kbps.

7. Painel Actions melhorado

Edição do Actionscript mais fácil

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

Codificação por cores, ajudas sensíveis ao contexto, opções de procura e substituição, guia hierárquico do código, com suporte Drag-and-Drop, e um excelente material de consulta fazem o processo de aprendizagem tornar-se simples e dão preciosas ajudas mesmo a peritos em action-scripting.

Page 25: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 25

Editor parametrizável

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

Page 26: Flash Mx - Apostila

Dicas de código (code-hinting) e preenchimento automático

Enquanto se está a escrever o código, o Flash detecta o tipo de objecto que estamos a utilizar, e lista numa caixa drop-down os métodos, propri-edades e eventos para esse objecto.

É possível, a partir dessa lista, utilizando a tecla TAB, o preenchimento automático da instrução seleccionada. Aparecem ainda referências aos parâmetros necessários ao completar da instrução.

Painel de referência

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

Funcionamento interno melhorado

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

Page 27: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 27

Debugger melhorado

A detecção de erros de código é agora mais fácil. O debugger foi me-lhorado, tendo agora novas capacidades como os breakpoints.

8. Novos comandos Actionscript

SetInterval e ClearInterval

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

Novo modelo de objectos e eventos

Novos objectos, novos eventos associados não só aos botões e movie-clips, mas a quase todos os objectos, permitem que seja mais fácil associar código a cliques do rato ou a teclas, ao load e unload de dados de vários tipos, ao redimensionar da janela do Flash, etc.

Page 28: Flash Mx - Apostila

28 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Instrução Switch

Anteriormente, a única instrução condicional era o IF, que embora fosse eficiente, em muitos casos se existissem múltiplas hipóteses a testar tornava-se pouco prático. Para resolver este problema, surge a instru-ção SWITCH.

Já existente noutras linguagens segue um estilo sintáctico muito seme-lhante ao Javascript, tal como todo o Actionscript a partir da versão 5.

Controlo dinâmico do layout do filme

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

Objectos TextField e Button

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

Também o comportamento de um botão, como a ordem de tabulação, o bloqueamento, e até as actions associadas a este, são controláveis por Actionscript utilizando o objecto Button.

Drawing API

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

Page 29: Flash Mx - Apostila

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX 29

Controlo de som melhorado

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

Componentes

Com os componentes pré-definidos é possível criar formulários com bo-tões de selecção, caixas drop-down, caixas de selecção múltipla, etc.

Existem também componentes para facilmente se adicionar scrollbars a caixas de texto.

A área de componentes é completamente personalizável, existindo algumas empresas que se dedicam à produção de componentes para diversos fins.

No site www.macromedia.com/exchange é possível encontrar alguns destes componentes, puxá-los e instalá-los utilizando o Macromedia Ex-tension Manager, incluído no Flash.

Page 30: Flash Mx - Apostila

30 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

9. Links Interessantes

Documentação e Recursos

• www.macromedia.com/software/flash/productinfo/features/index.html#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

Page 31: Flash Mx - Apostila

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

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

O Flash MX permite construir páginas de Internet completas e não apenas as partes animadas. Permite elaborar sites que contenham interacções com os utilizadores, de forma animada, com uma interface gráfica sofisticada, sons e outros elementos multimedia.

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

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

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

adequada a um tipo de browser e/ou sistema operativo (Netscape, Explorer ou Mozilla para

Windows, MacOS ou Linux).

Page 32: Flash Mx - Apostila

32 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

A interface gráfica

Logicamente, a primeira parte a abordar neste livro refere-se à interface gráfica do Macromedia Flash MX, para que possa conhecer os cantos à casa, significativamente modificados em relação à versão anterior.

A primeira diferença que se nota na interface, ao correr o Flash MX, em comparação com as versões anteriores, é que as suas janelas estão to-das encaixadas umas nas outras e podem ser destacadas para se tor-narem independentes e encaixadas novamente no todo.

Outra diferença que verificará é que a interface pode ser configurada consoante o perfil do utilizador: designer, utilizador genérico (general) ou programador (developer).

Para proceder à escolha vá ao menu WINDOW > PANEL SETS e verá sete opções: DEFAULT LAYOUT, três opções de resolução para DESIGNER e três para DEVELOPER.

Estes ajustes pré-definidos arrumam as diversas janelas de proprieda-des do Flash de acordo com aquilo que se entende necessário estar vi-sível ou não para um determinado perfil.

Pode-se entender mais facilmente esta explicação quando se vê que o Flash possui diversas janelas de propriedades e que nem todas são necessárias para todos os tipos de utilizador.

Page 33: Flash Mx - Apostila

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

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

DEFAULT LAYOUT

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

Page 34: Flash Mx - Apostila

34 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Não se preocupe se não conseguir ler os elementos contidos na imagem, devido ao seu tamanho reduzido. Usaremos a imagem apenas

como referência e vamos abordar cada parte desta em se-parado.

Se olharmos para o lado esquerdo da interface do Flash, veremos a barra de ferramentas (Tools) vista na figura ao lado.

Arrow Tool

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

A primeira (Arrow Tool2), quando accionada, coloca o programa em modo de selecção de objectos. Neste modo, poderá seleccionar os objectos criados, como por exemplo, círculos, quadrados, elipses, etc.

Esta ferramenta também poderá ser utilizada para fazer modificações nas formas dos objectos criados. Poderá utilizá-la para fazer modificações nas curvaturas das linhas que formam os objectos.

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

cima.

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

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

Page 35: Flash Mx - Apostila

I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS 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 compo-nentes dos objectos em si, como por exemplo, os pontos que formam um círculo. Veja a figura abaixo.

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

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

ANTES DEPOIS

Page 36: Flash Mx - Apostila

36 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Line Tool

Logo a seguir na barra de ferramentas, a ferramenta para criação de linhas (Line Tool), representada pelo ícone de uma linha recta em diagonal.

Para criar uma linha, seleccione o Line Tool, carregue com o rato na área de desenho, mova o cursor para outro sítio e liberte o botão do rato. Se usar o SHIFT enquanto desenha, poderá fazer linhas horizon-tais, verticais ou a 45º.

Page 37: Flash Mx - Apostila

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

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

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

Estão disponíveis diversos estilos de linha, tracejadas, pontilhadas, sólidas, etc. Também poderá carregar no botão CUSTOM e fazer ajus-tes mais detalhados.

Ao abrir a janela vai ver uma caixa nomeada TYPE (tipo) de onde pode regular os estilos.

Page 38: Flash Mx - Apostila

38 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 39: Flash Mx - Apostila

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á-

Page 40: Flash Mx - Apostila

40 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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-

Page 41: Flash Mx - Apostila

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

Page 42: Flash Mx - Apostila

42 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Na primeira opção, THICKNESS, é possível ajustar a espessura das linhas produzidas no padrão. Da mais fina para a mais grossa, as opções são: HAIRLINE, THIN, MEDIUM e THICK.

No campo SPACE é possível regular o espaçamento entre as linhas produzidas no padrão. A começar pelo menos espaçado, temos as se-guintes opções neste campo: VERY CLOSE, CLOSE, DISTANT e VE-RY DISTANT.

Em JIGGLE podemos ajustar o padrão de distribuição vertical e hori-zontal das linhas. Da opção menos para a mais caótica as opções são: NONE, BOUNCE, LOOSE e WILD.

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

Temos também o campo CURVE, onde é possível ajustar a curvatura das linhas produzidas. Da menos curva para a mais curva as opções são: STRAIGHT, LIGHT CURVE, MEDIUM CURVE, VERY CURVED.

Em LENGTH podemos ajustar o comprimento das linhas. Com isso é possível criar variações verticais de tamanho. As opções são: EQUAL ,

Page 43: Flash Mx - Apostila

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

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

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

Lasso Tool

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

Page 44: Flash Mx - Apostila

44 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 45: Flash Mx - Apostila

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

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

Utilize a Arrow Tool e carregue com o rato duas vezes em cima da cur-va para a seleccionar. Na janela de propriedades da curva, que pode ser vista na parte central inferior do ecrã, encontrará os parâmetros que poderão ser modificados.

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

Page 46: Flash Mx - Apostila

46 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 47: Flash Mx - Apostila

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âmetros4.

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.

Page 48: Flash Mx - Apostila

48 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 49: Flash Mx - Apostila

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

ESPAÇAMENTO DE CARACTERES

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

TIPO DE LETRA e TAMANHO

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

POSIÇÃO DOS CARACTERES

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

Page 50: Flash Mx - Apostila

50 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

SUPERSCRIPT: x2 + y2 = z2

SUBSCRIPT: x1 + x2 = z1

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

AJUSTE DE COR, BOLD e ITÁLICO

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

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

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

Se carregar neste ícone poderá escolher uma das seguintes opções: HORIZONTAL, VERTICAL, LEFT TO RIGHT e VERTICAL, RIGHT TO LEFT.

Na primeira, o texto é escrito normalmente, da esquerda para a direita, conforme imagem seguinte.

Page 51: Flash Mx - Apostila

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.

Page 52: Flash Mx - Apostila

52 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 53: Flash Mx - Apostila

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.

Page 54: Flash Mx - Apostila

54 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

OPÇÕES DE FORMATAÇÃO

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

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

Page 55: Flash Mx - Apostila

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 SPACING (espaçamento entre as linhas de texto), LEFT MARGIN (margem esquerda) e RIGHT MARGIN (margem direita). Estes dois últimos valores referem-se às margens entre a caixa de texto e o texto em si.

AUTO KERN

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

W, H, X e Y

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

URL

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

O endereço de Internet deve ser escrito neste campo na forma tradi-cional, ou seja, http://www.pagina.com

ALVO DA URL

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

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

ponto de vista gráfico.

Page 56: Flash Mx - Apostila

56 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

O TEXTO PODE SER SELECCIONADO?

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

USE DEVICE FONTS

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

Se marcar a opção USE DEVICE FONTS indicará ao Flash para que este não armazene internamente as informações relativas às letras utilizadas nas animações e tente utilizar as fontes que existam na máquina onde estiver a correr, que mais se assemelhem às que utilizou.

Geralmente não é indicado que seleccione esta opção, a não ser que tenha absoluta certeza de que as fontes são exactamente as mesmas.

Page 57: Flash Mx - Apostila

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.

Page 58: Flash Mx - Apostila

58 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

Page 59: Flash Mx - Apostila

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

BOTÃO HTML

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

Os seguintes tags em HTML são suportados: <A>, <B>, <FONT COLOR>, <FONT FACE>, <FONT SIZE>, <I>, <P> e <U>. Também são suportados os

seguintes atributos: LEFTMARGIN, RIGHTMARGIN, ALIGN, INDENT e LEA-

DING.

Poderá preservar as características de formatação e estilo dos textos HTML pelo uso de variáveis das caixas de texto ou uso do nome da instância da caixa de texto.

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

ü crie uma caixa de texto do tipo DYNAMIC ou INPUT; ü nomeie o campo VARIABLE dessa caixa na janela de proprie-

dades como “texto” por exemplo.

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

Ajuste a variável do campo de texto para um valor que inclua alguns “tags” de HTML.

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

txt = “<B>apenas um teste</B>” e accionar o botão HTML, então o texto será mostrado em negrito, uma vez que o accionamento deste botão faz o Flash seguir as instruções

Page 60: Flash Mx - Apostila

60 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

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

Se por outro lado quiser preservar as características dos textos HTML pelo uso do nome da instância da caixa de textos, faça o seguinte:

ü crie uma caixa de texto do tipo DYNAMIC ou INPUT; ü nomeie o campo VARIABLE dessa caixa na janela de proprie-

dades como “texto”, por exemplo.

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

InstanciaUm.html = “true”;

Ajuste a variável do campo de texto, no painel ACTIONS, para um valor que inclua alguns tags de HTML.

Agora, se a instância da caixa se chamar InstanciaUm, use o comando abaixo de ActionScript para fazer o Flash finalizar o texto a utilizar os tags de HTML que inseriu.

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

MOSTRAR BORDA

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

Page 61: Flash Mx - Apostila

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

Input Text

Este tipo de caixa de textos é indicado para a criação de formulários. São campos que podem conter valores previamente preenchidos mas que podem ser modificados pelo utilizador. As propriedades deste tipo de caixa são as mesmas já observadas para as caixas do tipo STATIC e DYNAMIC.

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

TIPO DE LINHA

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

Oval Tool & Rectangle Tool

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

O procedimento para criação de uma forma destas é simples. Carregue com o rato num ponto na área de desenho, movimente o cursor para outro sítio e liberte o botão.

DICA

Page 62: Flash Mx - Apostila

62 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 63: Flash Mx - Apostila

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

Seleccione um gradiente qualquer.

Verá que, no lado direito da interface do Flash, existe uma janela cha-

mada COLOR MIXER, vista na figura abaixo6 e que contém os parâme-tros relativos ao gradiente escolhido.

Na parte superior esquerda da janela tem duas caixas de selecção de cor. A primeira delas está ao lado do ícone de um lápis, a indicar que se trata da cor da linha. A segunda está ao lado do ícone do balde de pre-

enchimento, logo, trata-se da cor de FILL7.

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.

Page 64: Flash Mx - Apostila

64 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

objecto com cor, preencher com uma única cor, colocar um degrade vertical ou horizontal ou preencher o objecto com uma imagem, respec-tivamente.

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

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

Na parte à direita do color mixer poderá ver caixas nomeadas de R, G e B onde será possível regular directamente os valores das três cores

básicas, ou seja, Red, Green e Blue (vermelho, verde e azul)8.

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

Na parte inferior da janela do color mixer pode ver dois quadrados e um rectângulo vertical. No primeiro é mostrada a cor que foi escolhida no quadrado do meio. No rectângulo vertical à direita é possível regular o nível de brilho da cor que estiver a trabalhar.

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

que é o sistema hexadecimal.

Page 65: Flash Mx - Apostila

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 HTML9 é 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.

Page 66: Flash Mx - Apostila

66 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Gradientes

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

Existem dois tipos de gradientes no Flash: linear e radial. Melhor do que explicar o que cada um significa, mostramos duas imagens que repre-sentam cada um destes dois tipos.

GRADIENTE LINEAR

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

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

branco equivale a 255, 255, 255.

11 HSB = Hue Saturation Brightness (tom, nível de cor e brilho). Neste sistema, as cores são definidas pelo seu brilho, que pode variar de 0 (negro) a 100% (brilho máximo), pelo seu nível de

cor, que varia segundo a mesma escala e pelo seu tom, definido por graus de rotação, onde o

ângulo 0 corresponde ao vermelho, o 120 ao verde e o 240 ao azul. Normalmente este sistema é denominado de HLS (Hue Luminance Saturation), que é o termo pelo qual normalmente é

conhecido no mundo profissional.

Page 67: Flash Mx - Apostila

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

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

GRADIENTE RADIAL

Depois de reduzidas as cores da imagem acima para apenas 10, tere-mos a imagem abaixo.

Page 68: Flash Mx - Apostila

68 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 69: Flash Mx - Apostila

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.

Page 70: Flash Mx - Apostila

70 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Pencil Tool

Ao voltar à barra de ferramentas do Flash, vemos o ícone a seguir ao quadrado. É o lápis (PENCIL TOOL). Ele permite fazer linhas à mão livre, sem a necessidade de se ter que marcar pontos.

Seleccione esta ferramenta. Ao fazê-lo, notará que na parte inferior da barra de ferramentas, na área nomeada como OPTIONS, surge o ícone

de selecção do modo do lápis (PENCIL MODE). Carregue neste ícone e uma segunda janela será vista. Veja a figura ao lado.

Imediatamente poderá ver três novas opções: STRAIGHTEN, SMOOTH e INK, que possibilitam a criação de linhas rectas, suaves ou à mão livre. A diferença é que, apesar dos dois primeiros modos também permitirem

que se desenhe à mão livre, farão uma transformação na forma final para corresponder ao modo escolhido.

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

As linhas geradas pelo modo de desenho à mão livre com o lápis são para o Flash, depois de criadas, exactamente o mesmo tipo de objecto que uma linha comum. Logo, também possuem uma janela de proprie-dades, na parte central inferior do ecrã, com os mesmos parâmetros das linhas comuns; parâmetros estes descritos anteriormente.

Page 71: Flash Mx - Apostila

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

Brush Tool

Ao lado do lápis, vemos na barra de ferramentas do Flash um pincel (BRUSH TOOL). A função do pincel é a mesma do lápis, ou seja, desenhar à mão livre. Porém, produz linhas de diâmetro largo.

Assim como o lápis, uma vez seleccionado, o pincel faz aparecer uma janela de OPTIONS, na parte inferi-or da barra de ferramentas, que pode ser vista na figu-ra ao lado.

O primeiro ícone de cima é o BRUSH MODE e fornece-nos diferentes modos para o pincel: PAINT

NORMAL , PAINT FILLS, PAINT BEHIND, PAINT SELECTION e PAINT INSIDE. Estes modos permitem os tipos de pintura a seguir.

PAINT NORMAL – Este é o modo normal de pintura. À medida em que desloca o pincel, ele vai pintar todas as regiões por onde passar com a cor seleccionada.

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

PAINT BEHIND – Se for seleccionado faz com que o brush apenas desenhe por detrás dos objectos.

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

PAINT INSIDE – Apenas pinta as regiões de fill que sejam as mesmas correspondentes ao primeiro ponto onde o brush tocou. Isso quer dizer que, se o brush tiver começado a pintar, por exemplo, na área de fill de um círculo, não poderá pintar nada que esteja fora desta área.

Na figura seguinte poderá ver os cinco exemplos de modos de brush e o tipo de efeitos que causam. Em todos os casos, pintamos uma linha ver-tical, de cima para baixo.

Page 72: Flash Mx - Apostila

72 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

OBSERVAÇÃO

Um objecto geralmente é formado pela sua linha exterior (LINE) e sua região de preenchimento de cor (FILL).

Se escolher a ferramenta de selecção de objectos (ARROW TOOL) e carregar duas vezes na linha exterior

deste objecto, seleccionará apenas esta linha. Se por outro lado carregar duas vezes no FILL, seleccionará

ambas as partes do objecto, LINE e FILL.

Page 73: Flash Mx - Apostila

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

Page 74: Flash Mx - Apostila

74 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

Page 75: Flash Mx - Apostila

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

Free Transform Tool

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

Esta ferramenta permite ajustar ou transformar a largura, altura ou rotação do objecto e também distorcê-lo em ambas as direcções.

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

Page 76: Flash Mx - Apostila

76 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 77: Flash Mx - Apostila

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.

Page 78: Flash Mx - Apostila

78 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 79: Flash Mx - Apostila

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

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

Se quer por exemplo fazer um furo num círculo, desenhe o objecto cor-respondente ao furo na posição desejada, seleccione-o e apague-o.

Objecto original

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

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

Page 80: Flash Mx - Apostila

80 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

UNIÃO DE FORMAS

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

Primeiro desenhamos o objecto visto na figura abaixo.

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

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

Page 81: Flash Mx - Apostila

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.

Page 82: Flash Mx - Apostila

82 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Fill Transform Tool

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

Crie um objecto e preencha-o com um gradiente. Seleccione a função FREE TRANSFORM TOOL e carregue na região de fill do objecto. Um círculo aparecerá à volta do objecto, tendo como centro a região central do gradiente. Este círculo possui quatro elementos: um quadrado e três pequenas bolas, que realizam as funções indicadas na figura abaixo.

Page 83: Flash Mx - Apostila

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

inicial14.

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.

Page 84: Flash Mx - Apostila

84 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 85: Flash Mx - Apostila

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

OBSERVAÇÃO

Nesta altura devemos falar do cadeado que se encontra na parte inferior esquerda da janela OPTIONS na barra de ferramentas. Esta ferramenta é o LOCK FILL e é bastante útil quando estamos a lidar com gradientes.

Se olhar para a figura anterior vai ver que um objecto colorido com um gradiente pelo balde de pintura muda de aparência consoante o ponto onde o balde tocou no momento da criação do gradiente.

Com a função LOCK FILL ligada, o Flash passa a considerar toda a área de desenho como área de preenchimento para o gradiente, em vez de considerar cada objecto em particular. Logo, o objecto será preenchido com a cor que lhe couber conforme a sua posição horizontal e vertical. Veja as figuras abaixo.

LOCK FILL DESLIGADO

LOCK FILL LIGADO

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

Page 86: Flash Mx - Apostila

86 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Eyedropper Tool

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

Eraser Tool

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

Page 87: Flash Mx - Apostila

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

No ERASE MODE, pode ver que existem diversos modos. São eles:

ERASE NORMAL – Este é o modo normal. À medida em que desloca o pincel, ele vai apagar todas as regiões por onde passar.

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

ERASE LINES – Este é exactamente o inverso do anterior, ou seja, as linhas de contorno são apagadas e as áreas de fill são deixadas in-tactas.

ERASE SELECTED FILLS – Apenas apaga as regiões de fill dos objec-tos que estejam seleccionados.

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

Outra janela que se desdobra do OPTIONS é a ERASER SHAPE. Nela poderá escolher a forma da borracha, redonda ou quadrada, em diver-sos tamanhos.

Também está presente o ícone de uma torneira (FAUCET). Com ele poderá apagar de uma vez, ou linhas ou áreas de fill. Seleccione-o e experimente carregar numa área destas. De uma vez só a área selec-cionada desaparece.

DICA

Se quer apagar todos os objectos da área de desenho de uma só vez, carregue duas vezes no

ícone do ERASER TOOL.

Page 88: Flash Mx - Apostila

88 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Hand Tool

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

Zoom Tool

O ZOOM TOOL permite fazer zoom, ou seja, tornar maior ou menor a área de trabalho e permitir a visualização de elementos diminutos.

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

A sua utilização é simples. Basta escolher uma das duas opções menci-onadas no parágrafo anterior e carregar na área de desenho. Veja a figura abaixo.

Page 89: Flash Mx - Apostila

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

Color Swatches

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

Nesta janela encontrará várias cores em pequenos quadrados. São cores pré-ajustadas, prontas a utilizar. Poderá acrescentar as suas próprias cores (ou swatches) a esta janela, para tê-las prontas a usar.

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

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

Se carregar no ícone no canto superior

Page 90: Flash Mx - Apostila

90 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

DUPLICATE SWATCH – poderá duplicar um swatch seleccionado se utilizar esta função.

DELETE SWATCH – poderá eliminar o swatch seleccionado.

ADD COLORS – Interessante esta função... com ela poderá acrescentar à janela de swatches cores que venham de tabelas de cores ou de imagens indexadas como GIF´s. É excelente se precisar trabalhar numa animação que deva ter cores precisamente escolhidas.

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

LOAD DEFAULT COLORS – Faz a janela de swatches voltar ao estado normal ajustado de fábrica. Porém as cores “default” podem ser muda-das pelo utilizador como veremos a seguir...

SAVE COLORS – grava num ficheiro as cores que estão na janela de swatches. Pode mais tarde recuperá-las através das opções ADD COLORS ou REPLACE COLORS.

SAVE AS DEFAULT – faz o mesmo, porém as cores gravadas passam a ser as cores “de fábrica”, o que modifica a função LOAD DEFAULT COLORS, que a partir do uso desta função passa a chamar às cores gravadas cores “default”.

CLEAR COLORS – elimina todas as cores dos swatches.

WEB 216 – Ajusta os swatches para as famosas 216 cores da Web Safe Palete. Veja o Anexo 2.

SORT BY COLOR – Ordena os swatches pelas cores.

Page 91: Flash Mx - Apostila

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.

Page 92: Flash Mx - Apostila

92 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Page 93: Flash Mx - Apostila

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.

Page 94: Flash Mx - Apostila

94 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 95: Flash Mx - Apostila

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.

Page 96: Flash Mx - Apostila

96 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Todos os templates vêm acompanhados de um layer com as instruções para que entenda o funcionamento do referido template e o saiba usar. Este layer pode ser apagado sem afectar o funcionamento do template.

Open As Library

A seguir, no menu FILE, pode ver a opção OPEN AS LIBRARY. Deve utilizá-la sempre que pretender abrir uma animação ou objectos que te-nha previamente criado, para importar para o trabalho que estiver a cri-ar. Com esta opção, o Flash importa o ficheiro aberto para a biblioteca e de lá poderá trazer aquilo que lhe interessar para o trabalho actual.

NOTA

A biblioteca do Flash é uma área onde estão armazenados todos os símbolos (objectos) criados, além dos ficheiros que forem importados,

como imagens, sons, vídeos e artes vectoriais.

Vista a janela poderá arrastar os objectos lá existentes para a área de trabalho. Inclusive no Flash é conveniente fazer sempre o menor número possível de

objectos e sempre que possível aproveitar os que já tenha criado para diferentes partes da mesma animação. Se, por exemplo, pretende colocar três rectângulos,

um de cada cor, crie apenas um e da biblioteca arraste-o para a sua área de desenho e mude a cor de cada um. Desta forma, na animação final o Flash

armazenará apenas um símbolo, o que tornará o ficheiro menor.

Cada trabalho que criar possui automaticamente a sua própria biblioteca, mas, enquanto estiver a criar pode ter mais de uma biblioteca aberta, se usar o

comando OPEN AS LIBRARY. Por outro lado, o comando IMPORT TO LIBRARY traz todos os objectos da animação que está a importar para a biblioteca do

trabalho que está a realizar.

Page 97: Flash Mx - Apostila

I.2. OS MENUS 97

Import & Export Movie

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

Esta função é bastante útil quando se está a utilizar o Flash em conjunto com algum software de edição de vídeo como o Adobe Premiere ou de efeitos visuais como o Combustion ou o After Effects.

QUICKTIME

Por exemplo, se tiver que importar filmes QuickTime para as suas ani-mações Flash, primeiro deve certificar-se que tem instalado no seu computador o QuickTime Player. Caso contrário será impossível ao Flash importar filmes neste formato. Para fazer download do Player QuickTime deve ir ao site da Apple (www.apple.com) e carregar no link correspondente (visto logo na primeira página).

Logo em seguida deve ir ao menu FILE > IMPORT e carregar no ficheiro QuickTime (extensão MOV) para o poder importar.

Surgirá a janela abaixo.

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

Page 98: Flash Mx - Apostila

98 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 99: Flash Mx - Apostila

I.2. OS MENUS 99

A caixa que diz SYNCHRONIZE VIDEO TO MACROMEDIA FLASH DOCUMENT FRAME RATE sincroniza ou não o vídeo importado à taxa de frames por segundo (frame rate) da animação Flash onde está a ser importado.

Logo abaixo uma outra caixa permite ajustar o número de frames de vídeo a ser codificados por frames da animação Flash (NUMBER OF VIDEO FRAMES TO ENCODE PER NUMBER OF MACROMEDIA FLASH FRAMES).

Geralmente, assim que carregar em OK na janela anterior e iniciar o processo de importação do filme, verá a seguinte janela.

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

FREEHAND

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

Page 100: Flash Mx - Apostila

100 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Na secção PAGES da janela poderá definir que páginas do ficheiro FreeHand pretende importar, todas (ALL) ou um número definido de páginas, se utilizar os campos FROM e TO.

Page 101: Flash Mx - Apostila

I.2. OS MENUS 101

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

INCLUDE INVISIBLE LAYERS, INCLUDE BACKGROUND LAYER e MAINTAIN TEXT BOXES.

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

Publish Settings

Do menu FILE esta opção é a mais importante, no que diz respeito à produção das animações em Flash. É nela que deverá ajustar todos os parâmetros que devem ser seguidos para a criação dos ficheiros finais correspondentes ao trabalho que criar. Quando a seleccionar vai ver a janela abaixo.

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

Page 102: Flash Mx - Apostila

102 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

OPÇÃO FORMATS – JANELA PUBLISHING

Nesta primeira divisão, deverá marcar os formatos que pretende produzir. Por defeito, o Flash produz sempre o filme final em SWF e também a página HTML com os comandos para chamar o filme.

Deverá notar que enquanto está a trabalhar na sua animação em Flash o ficheiro é guardado no disco no formato FLA. Quando finaliza a ani-mação e a publica, o ficheiro tem o formato SWF. É exactamente este formato o que é visualizado pelo Flash Player directamente no browser.

Além disso, pode pedir a produção de uma imagem GIF, JPEG ou PNG equivalente ao primeiro frame do seu filme.

Page 103: Flash Mx - Apostila

I.2. OS MENUS 103

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

OPÇÃO FLASH – JANELA PUBLISHING

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

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

Page 104: Flash Mx - Apostila

104 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 105: Flash Mx - Apostila

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.

Page 106: Flash Mx - Apostila

106 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Logo a seguir vê o campo DIMENSIONS onde pode regular o tamanho do filme, caso pretenda publicar um filme me-nor do que o tamanho que criou3.

A próxima secção da janela é a PLAYBACK e possui quatro opções: PAUSED AT START, DISPLAY MENU, LOOP e DEVICE FONT.

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

DISPLAY MENU indica se deve ou não ser mostrado o menu que surge quando o botão da direita do rato é carregado em cima de uma animação. Veja a figura ao lado.

LOOP – indica se o filme deve ser repetido quando chegar ao fim (caso não possua ins-

trução no próprio filme para parar ou fazer outra coisa).

DEVICE FONT – Por defeito, o Flash armazena dentro da própria animação todos os tipos de letra que estiverem a ser utilizados. Se marcar esta opção, o Flash passa a não embeber as letras dentro da animação. O problema é que se estiver a utilizar na sua animação um tipo de letra que não exista na máquina do utilizador, o Flash será obrigado a escolher um tipo qualquer de letra, das disponíveis no sistema onde estiver a correr, para colocar no lugar da letra original. Esta opção não é aconselhável de se usar pois pode destruir o visual de 3 Como os filmes em Flash são ficheiros vectoriaisl, estes não possuem um tamanho específico e

podem ser desenhados a qualquer escala. Logicamente, quanto maior o filme, mais a máquina es-

tará a trabalhar, para conseguir manter o filme em PLAY na velocidade correcta. Então, como não é possível delimitar o tamanho do filme pelo próprio filme em si, é preciso delimitá-lo pelo HTML de

onde será executado.

Page 107: Flash Mx - Apostila

I.2. OS MENUS 107

uma animação, caso a letra seja muito diferente da original. Só a use caso tenha a certeza absoluta de que isto não vai acontecer. A vanta-gem é a diminuição do tamanho final do ficheiro SWF.

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

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

AUTO LOW – esta opção faz o filme carregar inicialmente em baixa qualidade e passar à média ou alta qualidade consoante o potencial da máquina onde estiver a ser executado.

AUTO HIGH – este comando é idêntico ao anterior, porém o filme é carregado inicialmente a alta qualidade que será reduzida caso veja que a máquina não é capaz de visualizar o filme à qualidade indicada.

MEDIUM – o filme é executado em média qualidade independente da máquina. Se esta for muito lenta o filme pode não conseguir ser mos-trado como pretendido.

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

Publish

Esta é a próxima opção do menu FILE. Uma vez ajustados os parâmetros que pretende na opção PUBLISH SETTINGS, é hora de carregar nesta opção e fazer com que o Flash crie os ficheiros.

É aconselhável antes de fazer PUBLISH gravar o ficheiro de trabalho em alguma directoria, pois, caso contrário, o Flash irá “publicar” o seu ficheiro numa directoria interna do próprio programa.

Page 108: Flash Mx - Apostila

108 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

VIEW

No menu VIEW vai encontrar alguns comandos interessantes, dos quais destacamos os mais relevantes.

GoTo

No caso de haver mais de uma cena na sua animação Flash, esta função irá permitir que se desloque directamente para a cena desejada.

As opções que irá encontrar neste menu são, além dos nomes das cenas que tiver criado, FIRST, PREVIOUS, NEXT e LAST, que lhe permitirão ir para a primeira cena, cena anterior, cena posterior e última cena respectivamente.

Zoom In, Zoom Out e Magnification

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

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

Outlines, Fast, Antialias, Antialias Text

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

OUTLINES faz os objectos serem vistos apenas pelo desenho dos seus contornos;

Page 109: Flash Mx - Apostila

I.2. OS MENUS 109

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

ANTIALIAS mostra os objectos com qualidade óptima mas mantém to-do o texto em baixa qualidade;

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

RULERS, GRID e GUIDES

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

RULERS (réguas) – Por defeito, as réguas horizontal e vertical estão vi-síveis no ecrã. Estas réguas ajudam a que tenha uma ideia do tamanho do objecto que estiver a criar. Veja a figura abaixo.

GRID (grelha) – O grid é um auxiliar de desenho no qual é activada uma grelha sobre a área de desenho para lhe ajudar a criar os objectos enquanto os estiver a desenhar. Dentro deste submenu vai encontrar três outras funções: VIEW GRID, SNAP TO GRID e EDIT GRID.

Se accionar o VIEW GRID, vai ver que a sua área de desenho fica com uma grelha como vista na figura abaixo.

Page 110: Flash Mx - Apostila

110 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 111: Flash Mx - Apostila

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.

Page 112: Flash Mx - Apostila

112 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

MODIFY

O menu MODIFY do Flash MX fornece-nos diversas ferramentas para manipular e transformar os objectos (SHAPES). Encontraremos ferramentas para suavização, simplificação, conversão de imagens para vectores e muito mais. Vamos a elas.

Shape - Soften Fill Edges

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

Crie então uma forma qualquer, por exemplo, um círculo no meio da área de desenho, e carregue duas vezes na sua área interna para o seleccionar. Vá ao menu MODIFY > SHAPE > SOFTEN FILL EDGES.

Surgirá então a janela a seguir.

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

Veja então o que acontece com o círculo, quando aplicamos uma suavização com DISTANCE =20 px, NUMBER OF STEPS = 6 e DIRECTION = INSET.

Page 113: Flash Mx - Apostila

I.2. OS MENUS 113

Se observar a borda com mais cuidado verá o seguinte

Page 114: Flash Mx - Apostila

114 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 115: Flash Mx - Apostila

I.2. OS MENUS 115

Expand Fill

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

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

OBSERVAÇÃO

Algumas formas com cantos em bico ou larguras muito finas não se saem bem durante uma expansão ou

compressão.

Smooth

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

OBSERVAÇÃO

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

Page 116: Flash Mx - Apostila

116 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Depois de repetidos SMOOTHs as letras ficaram da seguinte forma.

OBSERVAÇÃO

Para transformar uma letra numa forma e assim poder fazer as operações existentes para as formas, é preciso seleccioná-las e quebrá-las duas

vezes com o comando MODIFY > BREAK APART .

Straighten

Ainda no menu MODIFY encontramos outra função designada STRAIGHTEN, que faz exactamente o oposto do SMOOTH, ou seja, tira a suavização. Linhas outrora curvas e suaves passam a rectas em ân-gulos agudos.

Veja o que aconteceu às letras ABCD depois de accionarmos seguidas vezes o comando STRAIGHTEN.

Page 117: Flash Mx - Apostila

I.2. OS MENUS 117

Optimize

No mesmo menu MODIFY também encontramos o comando OPTIMI-ZE. Com ele é possível simplificar uma forma existente para algo com menos pontos e consequentemente mais leve.

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

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

Pode ver uma barra deslizante (slider) no meio da janela de SMOOTHING. Esta barra regula o grau de suavização que o SHAPE terá durante a optimização. Se a deslocar para a esquerda nenhuma optimização será feita, e para a direita teremos o grau máximo de opti-mização.

A seguir vemos um quadro que diz USE MULTIPLE PASSES (SLOWER). Ao marcá-lo obrigará o Flash a fazer várias optimizações

Page 118: Flash Mx - Apostila

118 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

até ao resultado final. Esta opção, conforme indicada, faz o processo demorar bem mais a finalizar.

O último quadro diz SHOW TOTALS MESSAGE e quando marcado obriga o Flash a mostrar uma janela final com o resumo do que foi feito.

Este comando deve ser usado por tentativa e erro, já que fornece resul-tados consoante a forma submetida à optimização.

Trace Bitmap

Esta é uma das mais importantes funções encontradas no menu MODIFY. Com ela poderá transformar imagens em formas, que poderá modificar no Flash. Além do mais, é muito mais conveniente para o Flash se tiver de lidar com formas e não com imagens.

O que este comando faz é analisar a imagem, e de acordo com o contraste da imagem e com as diferenças de cor tentar descobrir e isolar cada um dos objectos e criar com isso objectos para representar a imagem original.

Importe uma imagem qualquer na área de desenho e accione o coman-do. Verá então a janela a seguir.

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

Page 119: Flash Mx - Apostila

I.2. OS MENUS 119

COLOR THRESHOLD – Neste campo é possível regular o nível de transição das cores, de 1 a 500. A finalidade deste campo é permitir a produção de traçados mais perfeitos para os casos de imagens pouco ou muito contrastadas.

MINIMUM ÁREA – Neste campo poderá ajustar o número de pixéis que o Flash considerará durante o cálculo, de 1 a 1000. Quanto menor o número, maior a precisão do traçado e, consequentemente, mais pesa-do será o objecto final.

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

CORNER THRESHOLD – Neste caixa poderá regular a quantidade de esquinas ou bicos nas formas. As opções são: MANY CORNERS, NORMAL e FEW CORNERS, ou seja, muitos cantos, normal e poucos cantos, respectivamente.

Digamos então que importa a imagem abaixo e a transforma com os parâmetros vistos na janela anterior.

Page 120: Flash Mx - Apostila

120 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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-

Page 121: Flash Mx - Apostila

I.2. OS MENUS 121

reu porque é inerente à função TRACE BITMAP. Mesmo que os valores da precisão fossem aumentados, haveria sempre uma degradação na qualidade final, uma vez que esta função é adequada à transformação principalmente de desenhos, logótipos, etc.

Transform

Ainda no menu MODIFY, encontramos o comando TRANSFORM, que fornece muitas das funções que já conhecemos as quais são acciona-das pela barra de ferramentas.

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

As primeiras seis funções deste menu são nossas conhecidas, disponí-veis por ícones na barra de ferramentas sobre os quais falamos ante-riormente.

ROTATE 90º CW e ROTATE 90º CCW permitem rodar um objecto 90 graus no sentido horário ou anti-horário, respectivamente.

FLIP VERTICAL e FLIP HORIZONTAL permitem girar o objecto 180 graus em relação a um eixo imaginário vertical ou horizontal, respectiva-mente, que passe pelo centro do objecto. Por outras palavras, cor-responde a espelhar em relação a estes eixos.

Page 122: Flash Mx - Apostila

122 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Arrange

Este é o próximo item encontrado no menu MODIFY. Dentro deste item do menu encontraremos diversas opções para manipular objectos que estejam a ser desenhados todos no mesmo layer.

BRING TO FRONT – Esta opção permite trazer um objecto para a fren-te de todos os objectos dentro de um layer.

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

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

SEND TO BACK – Faz um objecto ir imediatamente para a posição mais abaixo de todos os outros.

Page 123: Flash Mx - Apostila

I.2. OS MENUS 123

LOCK – Este comando “trava” um objecto num determinado degrau, e impede que este seja modificado.

UNLOCK ALL – liberta todos os objectos que estavam travados.

Align

O próximo item encontrado no menu MODIFY é o ALIGN. Com este item é possível fazer o alinhamento de diversos objectos que se encon-trem dispostos no mesmo layer ou em layers diferentes.

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

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

A seguir explicamos cada comando visto na janela.

LEFT - Alinha todos os objectos seleccionados pelos seus pontos mais à esquerda. Toma como referência para o alinhamento o objecto que

Page 124: Flash Mx - Apostila

124 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

mais à esquerda estiver. Caso TO STAGE esteja ligado, então os objec-tos seleccionados são alinhados à esquerda da área de desenho.

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

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

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

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

BOTTOM - Alinha todos os objectos seleccionados pelos pontos inferiores de cada objecto. Caso TO STAGE esteja ligado, então os objectos são alinhado ao fundo da área de desenho.

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

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

Page 125: Flash Mx - Apostila

I.2. OS MENUS 125

de desenho passa a ser a quantidade de pixéis disponíveis para espaçar os objectos.

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

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

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

Também existe outro menu no Flash onde poderá encontrar os mesmos comandos de alinhamento sobre os quais acabamos de falar. Basta que vá ao menu WINDOW e escolha a opção ALIGN, depois do que verá surgir a janela que colocamos na figura abaixo juntamente com as explicações de cada ícone.

É até preferível que passe a utilizar o ALIGN disponível pelo acciona-mento deste comando, uma vez que este contém mais opções dispo-níveis.

Page 126: Flash Mx - Apostila

126 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 127: Flash Mx - Apostila

I.2. OS MENUS 127

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

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

Group & Ungroup

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

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

Este comando também é útil quando tem vários objectos criados no mesmo layer e quer agrupá-los no sentido de os animar mais facil-mente. Se a qualquer instante os quiser desagrupar, basta utilizar o co-mando UNGROUP no mesmo ponto no menu MODIFY.

Break Apart

Se aplicar este comando a um grupo terá a quebra deste grupo e a transformação de cada elemento na sua forma mais básica, ou seja, cada objecto volta a ser a sua borda e área de cor (line & fill).

Este comando é essencial para os casos de desejar fazer operações com letras e formas, como utilizar o formato da letra para fazer um furo num objecto. Se for este o caso, deverá partir antes as letras em LINE e FILL com o uso desta função.

Deve notar que quando faz o primeiro BREAK APART numa palavra, primeiro obtém a separação de cada letra da palavra, que se torna uma forma em separado. O segundo BREAK APART transforma tudo em LINE & FILL. Uma vez que a letra tenha sido transformada na sua forma

Page 128: Flash Mx - Apostila

128 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

OBSERVAÇÃO

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

desenhar esta letra.

Uma letra partida em LINE e FILL com a função BREAK APART ocupa mais espaço no ficheiro final da animação, pois o

Flash precisa armazenar todos os pontos da forma para conseguir desenhar o objecto correctamente.

Distribute to Layers

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

Page 129: Flash Mx - Apostila

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

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

Layers

O Flash utiliza na sua forma de trabalho o conceito dos objectos dispostos em layers, como é comum nos melhores softwares de dese-nho e edição gráfica disponíveis no mercado.

Os layers são como folhas de acetato transparentes, sobrepostas, onde poderá criar objectos estáticos ou animados. Desta forma, cada layer fica independente de todos os outros.

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

Page 130: Flash Mx - Apostila

130 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

Page 131: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 131 Também poderá guardar os layers em pastas, dentro da janela do timeline e assim organizar melhor os seus trabalhos, principalmente quando estiver a lidar com um número grande de layers. Inclusive pode-rá ter pastas dentro de pastas! Para criar uma, carregue no terceiro íco-ne no canto inferior esquerdo do timeline.

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

Page 132: Flash Mx - Apostila

132 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 133: Flash Mx - Apostila

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

OLHO (show/hide layer)

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

CADEADO (lock/unlock layer)

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

Page 134: Flash Mx - Apostila

134 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

QUADRADO COLORIDO (show layer as outline)

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

Objectos como estes...

ficam assim...

Page 135: Flash Mx - Apostila

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 segundo1, tem a impressão de que está a ver movimentos contínuos como na vida real.

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

Page 136: Flash Mx - Apostila

136 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 tamanho3.

A representação dos keyframes é feita no timeline e é simbolizada por uma pequena bolinha ou ponto no frame onde está situado. Na figura abaixo pode ver que o objecto no Layer1 tem dois keyframes , um no frame 1 e outro no frame 30.

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

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

conhecido como “tweening”.

Page 137: Flash Mx - Apostila

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

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

LABELS – representação no timeline

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

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

Para acrescentar um label a um frame simplesmente posicione o rato num frame ou região que já exista no timeline e vá à janela de proprie-dades.

Page 138: Flash Mx - Apostila

138 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 139: Flash Mx - Apostila

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

A Animação frame-a-frame

Pode pensar na primeira animação que irá realizar aquela na qual deter-mina a posição de todos os objectos em cada um dos frames da anima-ção. Assim, se tem três frames no total, deve mostrar ao Flash onde quer cada objecto para que a animação seja feita correctamente.

Então podemos começar por algo simples. Imagine que deseja fazer um quadrado a girar e diminuir de tamanho sem que mude de lugar.

Comece então por desenhar um quadrado com a ferramenta RECTAN-GLE TOOL da barra de ferramentas no meio da área de desenho. Assim que tiver terminado terá criado o que é tecnicamente definido pelo Flash com uma forma (shape).

A próxima etapa é transformar esse shape que criou em símbolo4. Para fazer isso seleccione a Arrow Tool na barra de ferramentas, posicione o cursor no meio da figura que criou e clique duas vezes para seleccionar as duas partes que formam o quadrado5 e vá ao menu INSERT > CON-VERT TO SYMBOL. Verá então uma janela surgir que deve preencher e marcar conforme mostrado na figura abaixo.

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

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

preenchimento de cor (line & fill).

Page 140: Flash Mx - Apostila

140 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Nesta janela pode ver o item REGISTRATION que indica onde quer colocar o ponto de transformação do objecto. Por defeito, é ajustado ao centro mas pode colocar em qualquer dos nove pontos indicados. Em relação a este ponto é que todas as transformações serão feitas (esca-las, translações, rotações, etc.).

Seleccione agora o objecto clicando uma vez com a Arrow Tool em ci-ma deste e com o botão carregado mova-o para que fique no centro da área de desenho.

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

Mova o rato até ao frame 2 no timeline e clique com o botão da direita. Surgirá um menu flutuante. Escolha a opção INSERT KEYFRAME, con-forme mostrado abaixo.

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

Page 141: Flash Mx - Apostila

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

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

Repare que existe uma bolinha a marcar o frame 1 e outra a marcar o 2. É sinal de que existem dois keyframes criados para o objecto neste lay-er.

Utilize agora a FREE TRANSFORM TOOL da barra de ferramentas e com ela clique em cima do objecto. Posicione o rato no canto inferior direito do quadrado até que surja o símbolo representativo de que está prestes a efectuar uma rotação no objecto, conforme visto a seguir.

Page 142: Flash Mx - Apostila

142 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

Page 143: Flash Mx - Apostila

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

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

Se arrastar o quadrado rosa indicador do frame actual ao longo dos frames criados vai poder ver a sua animação. Também poderá ver a animação a correr em tempo real se colocar o Flash no modo TEST MOVIE (CONTROL > TEST MOVIE).

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

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

de modelar.

Page 144: Flash Mx - Apostila

144 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

animação7. Então, se o seu filme está a correr a uma taxa de 12 fps, terá de criar 12 imagens para ter 1 segundo de filme.

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

A Animação Motion Tween

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

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

Carregue em FILE > NEW para iniciar um novo filme.

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

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

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

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

Page 145: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 145 Quando fizer isso vai ver uma janela conforme indicado na figura abai-xo.

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

Carregue com o rato em cima da bolinha do keyframe 30, para selec-cionar o objecto na área de desenho neste frame.

Vá à barra de ferramentas e escolha o FREE TRANSFORM TOOL na barra de ferramentas, para poder fazer algumas alterações no tamanho e na aparência do objecto. Se olhar agora para a área de desenho vai ver que o círculo está seleccionado e que um quadrado preto com pon-tos está à volta. Veja a seguir.

Page 146: Flash Mx - Apostila

146 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

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

Carregue na bolinha correspondente ao frame 1 (início da animação) e nas propriedades do objecto visíveis na parte central inferior do ecrã, mude o campo TWEEN para MOTION. Veja a figura abaixo.

Page 147: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 147 Deve ter observado que o campo TWEEN tem outra opção chamada SHAPE, a ser vista mais adiante.

Verá que agora a linha do timeline ficou lilás e com uma seta a indicar uma animação do frame 1 ao 30, conforme figura abaixo.

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

NOTA IMPORTANTE

Cuidado que este tipo de animação só funciona se no layer em questão estiver um único objecto ou grupo

de objectos, como fizemos neste exemplo. No entanto, a situação ideal é usar um único símbolo da

Library que será estudada mais tarde.

Ease In & Ease Out (o controlo do movimento)

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

Page 148: Flash Mx - Apostila

148 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

Digamos que no frame 1 tem um círculo com um tamanho de 1 e dez frames depois aumentou para 30. Então, a cada frame da animação o Flash vai aumentar o tamanho em 3, o que significa...

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

... no frame 2 o tamanho do círculo = 4

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

... ... no frame 10 o tamanho do círculo = 30

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

Page 149: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 149 Se agora posicionar o controlo de EASE todo para cima, na direcção de EASE = 100 terá modificado o gráfico para o visto abaixo.

Se olhar atentamente para o gráfico acima, verá que não há mais linea-ridade de movimento ao longo do tempo. Agora o movimento começa rápido e em seguida desacelera.

Se ajustar o EASE para –100 vai ter exactamente o inverso: o movi-mento começa devagar e depois acelera, conforme pode observar abai-xo.

Page 150: Flash Mx - Apostila

150 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

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

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

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

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

Page 151: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 151 Digamos, por exemplo, que deseja realizar uma animação de um carrinho que deita fumo pelo tubo de escape e esteja sempre a buzinar. O fumo sai do escape, sobe e desaparece nos cinco primeiros frames. Logo em seguida, a buzina toca e encerra no frame 15. Depois disso, a animação retorna ao primeiro frame e o processo repete-se.

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

FRAME(S) ACÇÃO 1 até 5 O fumo começa a sair do tubo de

escape no frame 1 e encerra no 5 6 até 15 A buzina toca até ao frame 15 e

encerra.

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

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

Page 152: Flash Mx - Apostila

152 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

Digamos, por exemplo, que fez uma animação a usar o desenho de uma paisagem campestre de fundo. Por cima deste desenho cria a animação de um sol a nascer e a pôr-se. Esta animação tem 200 fra-

Page 153: Flash Mx - Apostila

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

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

Animação de formas (shape animation)

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

As animações desse tipo, na realidade, ocorrem por uma animação de movimento dos pontos (sub-objectos) que formam os objectos.

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

Para começar uma animação de forma, inicie um novo filme em branco (FILE > NEW) e com a ferramenta de criação de ovais crie um círculo de médio tamanho no centro da área de desenho.

Page 154: Flash Mx - Apostila

154 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Carregue com o rato em cima da bolinha do keyframe 30, para selec-cionar o objecto na área de desenho onde então modificaremos a apa-rência deste.

Seleccione o SUBSELECTION TOOL na barra de ferramentas e com o rato carregue em cima da linha de borda do círculo. Surgirá então uma forma circular delimitada por uma linha fina azul que tem exactamente oito pontos à volta. Estes pontos são os que formam o círculo10.

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

Page 155: Flash Mx - Apostila

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-

Page 156: Flash Mx - Apostila

156 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

line e desloque-o para a direita e esquerda. Vai ver que foi criada uma suave animação na forma do objecto.

No caso da animação de forma também é possível ajustar o EASE IN e OUT da curva de distribuição de movimento, da mesma forma que foi descrita na secção anterior.

DICA

Para ser possível aplicar uma animação de forma a grupos, instâncias ou objectos com imagens, primeiro terá de “quebrar” estes grupos com a função BREAK

APART (MODIFY > BREAK APART), para que passem a ser objectos comuns. As letras são

consideradas grupos e devem passar por esse processo para que possam ser animadas

correctamente.

Shape Hints

Quando faz uma animação de forma, basicamente define dois shapes e deixa ao Flash a tarefa de animar a metamorfose da maneira que mais lhe convier. Porém, nem sempre esta é a solução ideal. Por vezes ocorrem problemas na transformação ou é preciso ter controlo sobre uma determinada maneira específica de realizar a transformação. É en-tão que entram em cena os SHAPE HINTS!

Vamos a um exemplo. Digamos que criou o objecto da esquerda, na fi-gura abaixo, e quer fazer uma animação de forma (shape animation) de modo a transformá-lo no objecto da direita.

Page 157: Flash Mx - Apostila

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.

Page 158: Flash Mx - Apostila

158 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Se reparar nos frames de 6 a 9, vai ver que houve um problema na transformação. Parte do shape entra sobre si mesma, criando buracos. Além do mais, a animação ocorre de forma pouco agradável. O objecto fica estranho, amassado, durante o processo. A única maneira de resolver isso é inserir SHAPE HINTS, para mostrar ao Flash de que forma deve ser feita a transformação.

O SHAPE HINT funciona segundo a seguinte filosofia: vai-se ao primeiro frame de uma animação de forma e posiciona-se um SHAPE HINT para indicar uma determinada região de um objecto. Depois, vai- -se ao frame final da mesma transformação e move-se o SHAPE HINT para a região final. Desta forma, o Flash saberá que a região marcada com o SHAPE HINT no primeiro frame é a que deve ser transformada para a indicada no mesmo SHAPE HINT no frame final.

Os SHAPE HINTS, quando acrescentados, são representados por pe-quenos círculos coloridos com uma letra no interior. As cores utilizadas são o amarelo para representar o HINT inicial e o verde para represen-tar o final. Caso esteja vermelho significa que o HINT em questão está mal posicionado.

Vamos então à correcção da animação anterior pelo uso de SHAPE HINTS.

CRIAÇÃO DO SHAPE HINT...

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

Page 159: Flash Mx - Apostila

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

Page 160: Flash Mx - Apostila

160 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

No Shape final

A ordem pela qual acrescenta os HINTS é importante porque é nesta ordem que o Flash os vai nomear.

Se agora movimentar a linha de tempo no timeline vai ver que a trans-formação ocorre sem problemas, como na figura abaixo. Repare que já não existe o problema da primeira animação, dos furos no shape, pois ao colocarmos os hints D, E e F, fizemos de forma a indicar a maneira pela qual as regiões deveriam “andar” na transformação.

Além do mais de notar que a transformação agora não está mais amas-sada e tem uma aparência bonita e suave.

Page 161: Flash Mx - Apostila

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

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

Para os pontos A, B e C...

Page 162: Flash Mx - Apostila

162 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Animação com Motion Guide

MOTION GUIDE é uma possibilidade interes-sante que o Flash nos oferece para a criação de animações: fazer com que objectos sigam caminhos (paths) específicos definidos por curvas.

Digamos então que tem o objecto ao lado e que gostaria de o fazer percorrer o caminho indicado na figura seguinte.

Page 163: Flash Mx - Apostila

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.

Page 164: Flash Mx - Apostila

164 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

O timeline deve ficar como indicado abaixo.

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

NOTA

Não há necessidade do frame 30 para o guia do avião para que a animação funcione correctamente quando finalizada. Porém , é importante que este frame esteja presente durante a construção da animação, para que possa visualizar correctamente o caminho. Assim que for finalizar o filme, elimine

os frames desnecessários do guia mantendo apenas o primeiro.

Assim, o timeline ficará com a aparência abaixo.

Page 165: Flash Mx - Apostila

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

NOTA

Por acaso, quando finalizado este exemplo, verificou-se que no último frame o avião virava ao contrário. Se por acaso isso acontecer quando

terminar de fazer o exemplo, basta reposicionar neste último frame o avião para a posição correcta.

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

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

Page 166: Flash Mx - Apostila

166 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Máscaras

As máscaras são objectos colocados em layers especiais que limitam a visibilidade de um determinado layer.

Digamos que possui o objecto mostrado na figura abaixo e que ele está presente na sua animação por diversas vezes.

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

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

Page 167: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 167 mentar o tamanho do ficheiro final Flash. Então, o que pode fazer é utilizar uma máscara oval para indicar o que deve ficar visível no objecto original.

NOTA

Imagine que em cima do desenho coloca uma folha de acetato e pinta com uma cor sólida as áreas deste objecto que deseja deixar visíveis,

sendo que, as áreas não pintadas passariam a ficar invisíveis.

Veja a figura abaixo.

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

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

Page 168: Flash Mx - Apostila

168 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Page 169: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 169 Veja como agora o layer da máscara e do objecto subordinado mudaram de ícone. Também ambos estão com os cadeados acciona-dos. Aliás, a máscara só actua no objecto se os cadeados estiverem neste estado.

O objecto das casas com a máscara oval cabe agora dentro do espaço determinado.

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

Page 170: Flash Mx - Apostila

170 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Page 171: Flash Mx - Apostila

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

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

Pode ver pelo campo TYPE que existem diversos tipos de layer, dos quais já falamos, com a excepção do GUIDE.

Este tipo de layer não é visível na animação final. Só é visto durante a construção. É exactamente o que o nome diz, um GUIA, para criar as suas animações, como linhas para orientação ou imagens/objectos que precise colocar em cena apenas para que o possam orientar durante a criação da animação.

LAYER DE SOM

Quando colocar um som, música ou banda sonora nos seus objectos ou filmes Flash, primeiro terá de importar o referido ficheiro sonoro para a biblioteca (IMPORT TO LIBRARY) e depois arrastar para um determina-do layer em branco.

Assim que o fizer, a janela dos layers mostra a forma de onda do som.

Page 172: Flash Mx - Apostila

172 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Repare que a caixa SOUND mostra o nome do ficheiro.

Effect (efeitos sonoros)

Na caixa EFFECT vê a palavra NONE. As opções nesta caixa são:

LEFT CHANNEL, RIGHT CHANNEL, FADE LEFT TO RIGHT, FADE RIGHT TO LEFT, FADE IN, FADE OUT e CUSTOM, cujas explicações se encontram a seguir.

LEFT CHANNEL – faz com que somente o canal esquerdo seja ouvido (no caso de ser um ficheiro estéreo).

RIGHT CHANNEL – faz com que somente o canal direito seja ouvido (no caso de ser um ficheiro estéreo).

FADE LEFT TO RIGHT – faz com que o som comece no canal esquer-do e progressivamente vá passando ao direito onde terminará.

Page 173: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 173 FADE RIGHT TO LEFT – faz com que o som comece no canal direito e progressivamente vá passando ao esquerdo onde terminará.

FADE IN – o som começa com volume zero e vai progressivamente au-mentando até ao seu volume normal.

FADE OUT – o som começa com o seu volume normal e vai progres-sivamente diminuindo até zero.

CUSTOM – Nesta opção poderá editar de que forma o som se com-portará. Assim que escolher esta opção verá a janela abaixo, chamada EDIT ENVELOPE, onde poderá determinar o efeito que pretende.

Na janela acima tem o desenho de duas formas de onda. Como o som utilizado se trata de um ficheiro estéreo, a curva de cima corresponde ao canal esquerdo de som e a de baixo ao direito.

Na parte inferior da janela, no lado direito, pode ver quatro ícones perto do botão HELP. São eles: uma lupa com sinal de mais, uma lupa com sinal de menos, um relógio e o desenho de um filme, e permitem ver a curva mais de perto (ZOOM IN), ver a curva mais de longe (ZOOM OUT), ver no eixo horizontal os intervalos em segundos e ver os mes-mos intervalos em frames, respectivamente.

Page 174: Flash Mx - Apostila

174 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Do lado esquerdo na mesma linha, pode ver dois ícones, um quadrado e um triângulo, para que possa parar (STOP) ou ouvir (PLAY) o som.

Se observar com cuidado verá uma linha em diagonal por cima da for-ma de onda. Com esta linha poderá desenhar o envelope à onda, para causar o efeito pretendido.

Mova então o rato até um ponto qualquer desta linha diagonal e arraste a linha para baixo. Um novo ponto será criado na curva que modificou e na outra. Crie outros pontos e movimente-os. Crie um padrão como o visto abaixo.

A explicação para o que acontece na figura acima é a seguinte.

CANAL ESQUERDO - O volume começa a zero e sobe até ao máximo, decaindo em seguida até um valor baixo, onde fica constante até 0,5s e torna a subir até ao máximo, mantendo-se constante até ao final.

CANAL DIREITO – O volume começa a zero e sobe até ao máximo, de-caindo em seguida até aproximadamente 70% do máximo, onde per-manece até ao final.

Page 175: Flash Mx - Apostila

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

DICA

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

Sync (tipo de sincronismo de som)

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

EVENT

Esta é a opção escolhida por defeito pelo Flash quando insere um ficheiro sonoro num layer em branco. O som ajustado desta forma é tocado assim que o seu primeiro keyframe é mostrado, seja no filme ou no objecto onde está localizado. Então, por exemplo, se no frame 37 de uma determinada animação existir um som, quando a animação aí chegar, o som começa a tocar, independentemente do filme parar ou ir para outro frame. O som ajustado como EVENT é sempre tocado até ao fim, uma vez iniciado.

A opção loops permite-nos dizer quantas vezes vai ser tocado um som depois de iniciado. Por exemplo, se quiser colocar um loop a servir de música de fundo deverá escrever um valor muito elevado, para estar continuamente a tocar.

Outra propriedade do som ajustado como EVENT é a permissão da simultaneidade, o que significa, por exemplo, que se houver um som associado ao clique de um botão e um utilizador carregar diversas ve-zes sobre o botão, ouviremos então vários sons do clique, uns por cima dos outros, misturados.

Page 176: Flash Mx - Apostila

176 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

START

O som ajustado como START também é tocado até ao fim, uma vez tendo iniciado, porém, não permite a simultaneidade e enquanto estiver a ser tocado não permite que outro som igual seja tocado.

Quando dizemos isso referimo-nos aos sons iguais. Se, por exemplo, tivermos o desenho de uma porta e um botão de campainha, a este botão temos associado o som de uma campainha musical. Quando carregarmos no botão, ouviremos a melodia. Se durante o PLAY carregarmos seguidamente no botão, não ouviremos vários sons da campainha misturados como no EVENT. Somente será possível ouvir outra vez a melodia quando a primeira tiver terminado. Entretanto, se na mesma cena tivermos o desenho de um cão a ladrar, este som será ouvido em conjunto com o da campainha, se assim tiver de ser.

STOP

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

STREAM

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

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

Page 177: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 177 ta e o áudio a engasgar. Quando o vídeo falha ligeiramente, o utilizador tem a impressão de que algo se passou no próprio computador. Quando o áudio está a ter problemas, o mesmo utilizador pensa que a animação foi mal dimensionada e é “pesada” demais para ser vista no seu compu-tador.

Outro problema que pode ocorrer pela falta de sincronia é ter o áudio a acabar muito antes do vídeo, caso a máquina não seja rápida o sufici-ente para mostrar a animação como idealizada. Por isso, deve colocar sempre o áudio como STREAM quando precisar de sincronia perfeita.

Estes sons são carregados à medida que o filme é carregado. Inicial-mente são carregados apenas 5 segundos de som, que servem de ‘almofada’ (buffer) para se manterem em memória; à medida que o filme decorre, o resto do som é carregado. É particularmente útil para músi-cas de fundo pesadas.

Como testar as suas animações

Para saber se as suas animações estão a funcionar correctamente, deve sempre testá-las por meio da função TEST MOVIE no menu CONTROL. Também encontrará por lá o comando TEST SCENE, que permite apenas o teste de uma das cenas da animação, caso possua mais de uma.

O TEST MOVIE permite visionar a animação final na forma em que será vista pelo utilizador, seja pela Internet, seja através de um CD-ROM ou DVD-ROM que distribuiu.

Enquanto que em HTML tradicional o que conta é o tamanho final do ficheiro, já que basicamente se trabalham com elementos de tamanho fixo, no Flash além desta variável deve ter também em consideração o “peso” que a sua animação pode representar para a máquina em que for correr. Como tudo o que é gerado em Flash é convertido para informações vectoriais, é preciso usar maior capacidade da máquina para poder desenhar todos os elementos correctamente e nos tempos certos das animações; ainda mais se contiverem músicas ou sons que

Page 178: Flash Mx - Apostila

178 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

precisem estar síncronos. Logo, todas as animações em Flash reque-rem em menor ou maior grau poder de processamento da máquina. Elementos de tamanhos grandes e com efeitos de transparências ou degradés, por exemplo, irão requisitar mais processamento da máquina.

Se possível teste as suas animações na máquina mais modesta que tiver por perto. Se ela conseguir mostrar tudo correctamente é um ópti-mo sinal de que em máquinas mais sofisticadas tudo correrá bem.

BANDWIDTH PROFILER

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

Então poderá correr o Bandwidth Profiler para analisar a carga da animação em cada frame. Para isso, primeiro accione o modo de TEST MOVIE do Flash, conforme explicado na secção anterior, e então no menu VIEW escolha BANDWIDTH PROFILER.

Page 179: Flash Mx - Apostila

I.3. LAYERS, TIMELINE E ANIMAÇÃO 179 Na figura atrás pode ver que a animação em questão tem três frames, representados pelos pequenos traços verticais na parte de cima das colunas. Cada uma dessas colunas representa a carga do filme em cada um desses frames. A primeira coluna atinge o valor de 8 Kbytes, a segunda atinge aproximadamente 3 Kbytes e a terceira menos de 1 Kbyte. Na secção esquerda da janela pode ver as informações sobre o filme: tamanho em pixéis, taxa de fps, tamanho do ficheiro, quantidade de frames totais da animação e o tempo de carga total do ficheiro (neste caso, 2,6 segundos).

No menu DEBUG poderá ajustar a velocidade do MODEM ou LINK, para que possa ver como a sua animação seria carregada em diferentes velocidades de download.

A linha vermelha que corta horizontalmente os gráficos na marca dos 400 Bytes indica o máximo de bytes que poderiam ser trazidos por download para que o frame fosse visto em tempo real. Na prática, isso significa que se cada frame da animação tivesse no máximo 400 bytes, então a animação poderia ser puxada da Internet em play normal sem existir nenhum abrandamento na animação. Qualquer valor acima disso causaria um abrandamento do play. Logicamente poderá notar isso pelas informações da coluna da esquerda pois, se a animação tem 3 frames e o Flash está ajustado para PLAY a 12 fps, então o tempo total de download deveria ser 3/12 segundos. Porém, a janela diz-nos que o tempo total de carga é de 2,6 segundos.

Por defeito, o Bandwidth Profiler mostra o gráfico de carga pelo modo STREAMING, ou seja, a distribuição de carga à medida em que é feito o download do filme. Se for ao menu VIEW e escolher a opção FRAME BY FRAME GRAPH, verá então a carga por frame. Outra opção neste menu é SHOW STREAMING. Se a accionar vai ver o Flash simular o download do filme na velocidade do MODEM escolhida no menu DE-BUG.

O primeiro frame de qualquer animação, pela própria forma como o Flash funciona, é geralmente grande. Neste frame são armazenados todos os objectos e símbolos que estarão presentes no filme.

Page 180: Flash Mx - Apostila

180 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Page 181: Flash Mx - Apostila

I.4. SÍMBOLOS, EFEITOS e BIBLIOTECAS

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

As suas próprias bibliotecas

Sempre que estiver a criar páginas ou animações em Flash de qualquer tipo, deve sempre ter por objectivo conseguir um ficheiro com o menor tamanho possível que corresponda ao seu trabalho, pois ficheiros me-nores são mais rápidos a correr e a carregar. Se a animação vai ser vista via Internet mais uma razão para sempre seguir essa regra.

Para conseguir isso, deverá quase que obrigatoriamente criar e reuti-lizar objectos das bibliotecas. Praticamente, todo o trabalho em Flash permite o uso repetido de objectos previamente criados no mesmo projecto. Se vai usar um rectângulo várias vezes num determinado projecto deve criar um rectângulo na biblioteca e de lá arrastá-lo para todos os pontos onde o for utilizar. Desta forma optimizará e minimizará o tamanho dos seus projectos em Flash, tornando-os menores e mais rápidos.

Assim como o Flash tem bibliotecas de objectos, você também poderá ter as suas. A vantagem de as ter é poder reutilizar objectos previa-mente criados nas suas animações em qualquer momento.

Page 182: Flash Mx - Apostila

182 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Sempre que reutiliza um objecto num projecto, o Flash cria uma instân-cia deste, que equivale apenas a armazenar informações acerca de onde e como o objecto está a ser utilizado. Logo, há uma economia de espaço uma vez que não precisa armazenar as definições da forma do objecto.

Todos os objectos (símbolos) que criar num determinado projecto são automaticamente colocados numa biblioteca própria referente ao projecto em que estiver a trabalhar. Assim, ao iniciar um novo projecto, poderá abrir a biblioteca de um projecto anterior e importar os objectos desejados.

Se observar no menu FILE, vai ver um item nomeado OPEN AS LIBRA-RY. Se o utilizar poderá abrir um projecto como uma biblioteca. Faça isso e verá surgir automaticamente a janela correspondente, de onde poderá arrastar objectos para o seu projecto actual.

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

Page 183: Flash Mx - Apostila

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

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

Graphics, Button e Movie Clips

Como dissemos, as bibliotecas do Flash MX permitem o armazena-mento de três tipos de símbolos: graphics, movie clips e buttons (gráfi-cos, filmes ou botões).

Quando cria formas na área de desenho e sabe que não terão movi-mento, deve criá-las como sendo GRAPHIC. Os gráficos são símbolos estáticos como logótipos, imagens de fundo ou elementos que não terão movimento, ou seja, um logótipo estático pode ser um caso de GRAPHIC mas um boneco a dançar não, já que a imagem do boneco modifica-se ao longo do tempo. Um símbolo do tipo GRAPHIC pode en-tretanto ser animado em tamanho, posição, transparência ou cor.

Um símbolo do tipo MOVIE CLIP, por outro lado, já permite animações. Enquanto que os GRAPHIC possuem apenas um frame, os MOVIE CLIPS podem ter qualquer quantidade de frames. Então, se imaginar um MOVIE CLIP como um boneco com as pernas a mexer poderá animá-lo a deslocar-se ao longo do ecrã sem se preocupar com o movi-mento das pernas, que já é intrínseco ao próprio objecto em si.

Os símbolos do tipo BUTTON são os botões ou qualquer outro elemen-to que deva ter a propriedade de poder ser clicado. Quando o rato encontrar qualquer símbolo deste tipo numa animação automaticamente mostrará que se trata de um elemento clicável.

A definição do tipo do símbolo é feita no momento da sua criação ou conversão (INSERT > NEW SYMBOL ou INSERT > CONVERT TO SYMBOL), conforme visto na janela a seguir.

Page 184: Flash Mx - Apostila

184 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Veja as figuras abaixo.

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

Page 185: Flash Mx - Apostila

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

Graphic (gráficos)

Para criar um símbolo do tipo GRAPHIC no Flash MX, basta ir ao menu INSERT > NEW SYMBOL e, em seguida, desenhar o objecto pretendi-do. Automaticamente estará a criar uma nova entrada na biblioteca.

Em seguida, vá a WINDOW > LIBRARY, e faça surgir a janela da bibli-oteca vista abaixo com os objectos que criamos.

Agora arraste da biblioteca para a área de desenho os objectos que tiver criado. Modifique o tamanho, crie efeitos de distorção, animações, etc. Vai ver que pode fazer com eles o que quiser, com excepção de mudar as cores, com o balde de pintura/tinteiro, ou a forma pelo uso das ferramentas de selecção. Se fizer isto estará a modificar o objecto em si, e todas as cópias deste passarão a ficar com a nova aparência.

Caso precise mudar a cor de uma instância, a única forma possível é pelo uso de um efeito, que veremos mais adiante. Porém, o efeito muda a cor do objecto todo em conjunto, ou seja, se possui um objecto com

Page 186: Flash Mx - Apostila

186 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Button (botão)

Criar um botão no Flash é um trabalho deveras fácil. Em poucos passos terá o seu a funcionar. Para que seja possível esta criação basta ape-nas que tenha em mente a forma como o Flash MX trata este tipo de objecto e assim fornecer as imagens de que necessitará.

Um botão no Flash possui três estados: UP, OVER e DOWN.

O estado UP equivale à aparência que o botão tem quando está normal. Assim que o rato passa por cima deste é assumida a aparência indicada no estado OVER. O estado DOWN representa a aparência que o botão tem quando nele carregar.

Carregue em INSERT > NEW SYMBOL para criar um novo símbolo. Na janela que se seguirá nomeie o objecto como “botão” e ajuste o campo BEHAVIOR para BUTTON.

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

Page 187: Flash Mx - Apostila

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

Repare que a linha vertical está posicionada em UP e uma bolinha em branco, ou seja, um keyframe em branco (blank keyframe) está a repre-sentar o estado que se está a criar.

Então, crie um desenho para representar o estado normal do botão. Cri-amos algo como na figura abaixo.

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

Page 188: Flash Mx - Apostila

188 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Desenhe então neste estado a mesma figura acima, porém com a seta a apontar para o lado direito.

Repita a operação para o campo DOWN, e volte a modificar a seta para que esta aponte para baixo.

Fica então com três desenhos diferentes, cada um a representar um es-tado do botão.

Falta agora definir o campo que diz HIT, sobre o qual ainda não havía-mos falado.

Neste campo irá indicar ao Flash que área do botão está activa para clicar, ou seja, se quiser que toda a área do botão esteja activa, então deverá na área de HIT desenhar um círculo que cubra toda a superfície deste. Poderá definir a área que desejar. Definimos esta área como sendo toda a superfície do botão.

O nosso botão tem agora os seguintes estados:

UP OVER DOWN HIT

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

Page 189: Flash Mx - Apostila

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

Faça surgir a biblioteca (WINDOW > LIBRARY) e arraste de lá o botão para a sua área de desenho. Coloque o Flash MX no modo de teste (CONTROL > TEST MOVIE) e vai ver que o botão funciona perfeita-mente.

Se quer acrescentar um som ao botão, basta criar um layer novo, colocar um keyframe em branco na coluna correspondente ao estado em que quer colocar o som e arrastar o som para a janela de desenhos. Então, por exemplo, poderá ter um som a ser tocado quando o botão entrar no estado UP, outro para o estado OVER e um terceiro para o es-tado DOWN.

Movie Clips

Um movie clip é um símbolo que em si próprio já é um filme, ou seja, possui movimento próprio.

Digamos que gostaríamos de criar o movimento de uma bola a saltar conforme a figura abaixo.

Page 190: Flash Mx - Apostila

190 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

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

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

Page 191: Flash Mx - Apostila

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

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

Efeitos de Cor e Transparência

Existem diversos tipos de efeitos que poderá aplicar num determinado objecto da biblioteca, assim que o trouxer para a sua animação.

Basicamente, os efeitos relacionam-se com as cores ou com a transpa-rência do objecto.

Se trouxer um objecto da biblioteca para a sua área de desenho e o seleccionar, deverá observar o campo COLOR na janela de proprie-dades, conforme visto na imagem abaixo.

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

Page 192: Flash Mx - Apostila

192 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Brightness

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

Se ajustar o brilho totalmente a 100% fará com que o objecto fique completamente branco. Se o ajuste for feito a –100% o objecto ficará completamente negro. Em 0% o objecto tem a aparência normal.

Tint

Se ajustar o campo COLOR com a opção TINT, poderá acrescentar uma cor a ser somada à cor do objecto em si.

Ao seleccionar esta opção, vê o campo COLOR da janela de proprie-dades transformar-se conforme imagem abaixo.

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

Page 193: Flash Mx - Apostila

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

100% à cor do objecto original, o que significa que este passa a ter a nova cor. Se colocar 0%, significa que o objecto mantém a sua cor original e não sofre efeito algum de TINT.

Alpha

O nome ALPHA vem de ALPHA CHANNEL (canal alfa), que é a designação mais antiga de que se tem notícia para nomear a informa-ção de transparência de um material.

Se escolher ALPHA como opção de efeito, verá a janela de proprieda-des com a aparência abaixo.

Na caixa ao lado do nome ALPHA, poderá regular o grau de transpa-rência do objecto. Os valores podem estar entre 0 e 100%, sendo o primeiro equivalente ao objecto completamente transparente e o segun-do a completamente opaco.

Advanced

Esta opção do menu COLOR realmente é a mais completa e combina várias das opções anteriores numa só interface.

Assim que a escolher, vai ver que a janela de propriedades assume a aparência abaixo.

Page 194: Flash Mx - Apostila

194 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 195: Flash Mx - Apostila

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

BUTTONS

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

Arcade Buttons

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

Page 196: Flash Mx - Apostila

196 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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!

Page 197: Flash Mx - Apostila

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.

Page 198: Flash Mx - Apostila

198 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 199: Flash Mx - Apostila

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.

Page 200: Flash Mx - Apostila

200 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 cor2. 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.

Page 201: Flash Mx - Apostila

I.5. COMPONENTES

Neste capítulo vamos falar sobre uma das grandes inovações no Flash, os COMPONENTES. Estes objectos agora disponibilizados pela Macro-media são a resposta aos anseios dos utilizadores ao longo dos últimos anos, reunidos em objectos sofisticados e de relativa facilidade de uso.

Convém saber que estes novos componentes do Flash têm a sua maior utilidade quando acompanhados do apropriado código em JavaScript, que é o que realmente os faz funcionar. Neste capítulo abordaremos a explicação de cada um deles, já que sobre o ActionScript falaremos mais adiante.

Se olhar para a interface gráfica do Flash MX, a seguir aos SWATCHES vai ver uma janela de COMPONENTS. Nela encontrará os componen-tes fornecidos para a criação de interfaces gráficas.

Page 202: Flash Mx - Apostila

202 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

A utilização destes componentes só é plenamente aproveitada se tiver subrotinas em ActionScript1 a correr, para ler as propriedades resultan-tes da interacção dos utilizadores com os componentes e daí derivar acções que tornem a página mais interessante.

Também com ActionScript é possível criar componentes “on the fly”, ou seja, apenas pelo uso da linguagem de programação, sem que estes te-nham que estar presentes graficamente nos filmes Flash.

A seguir veremos então cada um destes componentes e as suas fun-ções2.

CheckBox

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

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

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

para permitir virtualmente qualquer tipo de criação. 2 Logicamente neste capítulo apenas vamos demonstrar a funcionalidade de cada objecto. O uso

avançado será abordado na segunda parte deste livro, onde falaremos de ActionScript.

Page 203: Flash Mx - Apostila

I.5. COMPONENTES 203

RadioButton

O RadioButton tem praticamente a mesma função do CheckBox, porém, não permite a marcação de mais de um controlo de mesmo tipo. Assim, se tiver três componentes RadioButton num formulário, apenas um po-derá estar activo num dado momento.

Se observar a figura abaixo e a comparar com a anterior vai entender o significado disso.

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

PushButton

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

Page 204: Flash Mx - Apostila

204 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

ListBox

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

Page 205: Flash Mx - Apostila

I.5. COMPONENTES 205

ComboBox

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

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

3 Conhecido em muitos programas como DROP DOWN MENU.

Page 206: Flash Mx - Apostila

206 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

ScrollPane

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

Para aguçar o seu apetite, enquanto não entramos na secção de ActionScript, vamos à explicação de como foi feita esta ScrollPane.

Logicamente, a primeira coisa é criar a ScrollPane; o que é feito arras-tando-se o componente da janela “components” para a área de dese-nho. Vai ver então a seguinte figura.

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

deslocar textos ou imagens para os lados. 5 Formato SWF

Page 207: Flash Mx - Apostila

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.

Page 208: Flash Mx - Apostila

208 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

A seguir, escolha a ferramenta de criação de textos, o TEXT TOOL (T), posicione o rato num ponto na parte média esquerda da área de dese-nho. Carregue no botão do rato e arraste-o para a direita. Vai ver que surge uma caixa para escrita. Escreva o texto pretendido.

No canto superior direito da área de desenho carregue no ícone cor-respondente a uma claquete e escolha a opção Scene 1, para voltar à cena principal.

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

Page 209: Flash Mx - Apostila

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

ScrollBar

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

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

Page 210: Flash Mx - Apostila

210 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Com o rato na área de desenho, crie uma região rectangular para colo-car o texto que pretende. Coloque nesta área uma quantidade de texto maior do que a caixa poderia permitir.

Vai ver que a caixa aumenta de tamanho e ultrapassa a fronteira da área de desenho do Flash, como na figura abaixo.

Seleccione a caixa do texto que inseriu. Uma linha azul aparecerá à volta a indicar a selecção activa. Carregue duas vezes com o rato em cima dessa caixa marcada a azul, para entrar no modo de edição de texto.

A caixa azul então muda de cor, ficando negra, e aparece um quadrado no canto inferior direito. Arraste este quadrado para diminuir o tamanho da caixa, voltando a colocá-la dentro da área de desenho do Flash.

Page 211: Flash Mx - Apostila

I.5. COMPONENTES 211

Escolha a ferramenta de selecção de objectos na barra de ferramentas e volte a seleccionar a caixa de textos7. 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 vertical8. Deve fazê-lo numa área próxima ao border, desde que seja no interior da caixa.

Vai ver que o Flash faz aderir imediatamente a barra à caixa de textos, já ficando esta com o tamanho exacto.

Teste o filme (CONTROL ENTER). Vai ver que tudo está a funcionar perfeitamente.

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

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

Page 212: Flash Mx - Apostila

212 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Page 213: Flash Mx - Apostila

I.5. COMPONENTES 213

Actions (ActionScript)

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

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

Objectos encapsulados

Para melhor visualizarmos a forma pela qual o Flash trata todos os objectos, podemos considerar, por exemplo, o caso da colocação de um botão numa página que responda às acções de clique dos utilizadores.

As páginas construídas em Flash podem ser consideradas como aplica-ções9, já que na sua essência são exactamente isso. Normalmente são

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

exactamente isso.

Page 214: Flash Mx - Apostila

214 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

ficheiros que reúnem todo o seu conteúdo no seu interior (áudio, vídeo, texto, etc.), ao contrário das páginas normais de Internet em HTML, que precisam referenciar todos os ficheiros necessários à boa visualização, já que não têm a capacidade de armazenar nada no seu interior que não seja texto.

O Flash com o ActionScript forma um ambiente de programação orien-tada ao objecto. Por outras palavras, isto significa que qualquer soft-ware criado por meio do uso desta linguagem é composto por vários objectos menores independentes que interagem entre si. Pela indepen-dência de cada objecto e por conterem no seu interior todo o código ne-cessário ao seu funcionamento, são chamados objectos encapsulados (encapsulated objects).

Além de ter diversas propriedades, cada objecto é dotado da pos-sibilidade de reagir a determinados eventos com acções que podem ser designadas pelos programadores.

Cada um destes eventos dá aos programadores a possibilidade de fazer interacções e combinações e permite a criação de aplicações sofistica-das e intrincadas.

Imagine, por exemplo, que possui no Flash um objecto que é uma lâm-pada. Esta lâmpada possui uma propriedade chamada “ESTADO”, que pode ser ajustada com apenas dois valores: 0 ou 1. Se o ESTADO for colocado em “1” a lâmpada liga e em “0”, desliga.

Então, o fabricante da lâmpada resolve sofisticar o objecto e cria um evento chamado “QuandoLigado10”. Permite então que este evento pos-sa ser associado a uma determinada acção11 a ocorrer todas as vezes que a propriedade da lâmpada passe de 0 a 1. Então pode associar a este evento uma acção, como por exemplo, fazer aparecer o cão e apagar a luz. 10 Usamos esta notação porque aproxima-se mais da forma como vai ver as propriedades e

eventos dos objectos quando com eles se deparar.

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

Internet.

Page 215: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS

No site do fabricante do Flash MX, a Macromedia, descobrimos alguns ‘brinquedos’ interessantes que poderá acrescentar ao seu programa e fazê-lo brilhar!! Os ‘brinquedos’ são alguns componentes adicionais pa-ra a criação de interfaces gráficas e outros para páginas em geral.

Para instalá-los é preciso utilizar um programa da própria Macromedia, disponível no site, chamado EXTENSION MANAGER, que é um painel de controlo, para a instalação de novos componentes ao Flash MX. Veja no Anexo III como obter o programa, as extensões e como fazer para as instalar.

Tendo já feito a instalação das extensões, o primeiro grupo de componentes novos que encontrará no seu Flash MX chama-se Flash UI COMPONENTS SET 2, que são componentes adicionais à criação de interfaces gráficas avançadas. O segundo grupo é o Flash CHAR-TING COMPONENTS, que são controlos para a criação de gráficos nas suas páginas ou aplicações Flash. Vamos então a partir de agora, à análise dos componentes.

Flash UI Components Set 2

CALENDAR

O primeiro componente do grupo é o CALENDAR (calendário). É exactamente o que o nome diz. Um calendário completo a funcionar pa-ra utilizar nos seus programas e páginas Flash.

Page 216: Flash Mx - Apostila

216 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Na janela acima, a primeira propriedade chama-se Selection Type e está preenchida com “SINGLE”. Se carregar duas vezes sobre a palavra SINGLE vai ver que duas outras escolhas são oferecidas: RANGE e MULTIPLE. Esta propriedade controla de que forma o calendário funcio-nará quando estiver na sua página Flash.

Se a propriedade estiver em SINGLE, o utilizador apenas poderá esco-lher um dia de cada vez no calendário. Em MULTIPLE, será permitido ao utilizador escolher vários dias e em RANGE uma faixa de dias pode ser escolhida. Logicamente, saber o que foi escolhido pelo utilizador e

Page 217: Flash Mx - Apostila

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 correspondentes1. Se carregar sobre cada um dos nomes dos meses pode mudá-los para a língua que desejar. As setas para cima e para baixo mudam uma determinada linha da tabela (mês) para cima ou para baixo dentro da tabela. O sinal de mais e de menos acrescentam e apagam, respectivamente, meses na tabela.

De volta às propriedades do controlo, vai encontrar uma propriedade chamada DaysOfWeek (dias da semana). Se carregar uma vez sobre a lista de nomes desta propriedade vai ver a janela a seguir.

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

OCTOBER, NOVEMBER e DECEMBER.

Page 218: Flash Mx - Apostila

218 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 coluna2.

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.

Page 219: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 219 DRAGGABLEPANE

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

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

Page 220: Flash Mx - Apostila

220 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

As últimas quatro propriedades da janela são: Has Close Box, Is Scrolling, Resizable e Has Shader. Elas representam o seguinte:

HAS CLOSE BOX – indica se a janela tem ou não o X no canto superior direito para permitir que seja fechada pelo utilizador.

IS SCROLLING – indica se a janela tem ou não barras de desloca-mento (scroll bars) na horizontal e vertical.

RESIZEABLE – indica se o tamanho da janela pode ser modificado pelo utilizador.

HAS SHADER – indica se a janela tem ou não o botão no canto supe-rior esquerdo para minimizar.

Se está atento, notou que passamos à frente uma propriedade, a SCROLL CONTENT . Com essa propriedade, a exemplo do que fez nos exemplos do ScrollBar e do ScrollPane, vai indicar aquilo a fazer scroll dentro da janela. De facto, esta propriedade refere-se a um objecto que poderá conter outros tantos, textos, imagens, sons, vídeos, etc.

Se for um texto, faça o seguinte: Crie um novo símbolo e na janela que se seguirá nomeie-o como “texto”. Ainda nesta janela marque campo que diz BEHAVIOR como GRAPHIC, marque o quadro que diz EX-PORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque também a palavra “texto”. Carregue em ENTER.

Page 221: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 221

Siga o mesmo procedimento que utilizou no componente ScrollPane para criar uma caixa de texto dinâmica.

Na janela do componente DraggablePane, marque o campo ScrollContent com o que preencheu no campo IDENTIFIER da janela acima, ou seja, “texto”. Coloque o Flash no modo de teste e verifique que o texto está perfeitamente dentro da janela, pelo menos teorica-mente...3

Caso seja uma imagem que pretende colocar dentro da janela, siga exactamente o mesmo procedimento, mas após a criação do novo sím-bolo importe uma imagem da biblioteca ou do disco para este novo objecto.

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

quando se desloca a barra de scroll vertical da janela toda para baixo, o texto aparece fora da

janela na parte de cima. Com imagens isso não acontece.

Page 222: Flash Mx - Apostila

222 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 223: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 223 Se usar esse princípio, poderá colocar qualquer coisa dentro da janela!

ICONBUTTON

Com este componente poderá criar botões, prontos a usar, e que permitem a colocação de imagens à face.

Para criar um botão com este componente basta arrastá-lo para a área de desenho. Em seguida, deve criar um novo símbolo, com uma ima-gem qualquer (utilizamos uma gaivota), pelo mesmo procedimento utili-zado no exemplo anterior e dar ao IDENTIFIER deste símbolo o nome “gaivota”.

Carregue no IconButton que está na área de desenho e na janela das propriedades ajuste o campo que diz ICON para “gaivota”.

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

Page 224: Flash Mx - Apostila

224 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

As outras propriedades do IconButton são as seguintes.

LABEL – permite a colocação de um título (frase) que fica agregada à imagem que inserir para a face do botão.

LABEL PLACEMENT – permite escolher em que posição relativa à imagem deve ficar posicionada o tal LABEL acima. As posições pos-síveis são: LEFT, RIGHT, TOP e BOTTOM, ou seja, à esquerda, à direi-ta, acima e abaixo da imagem, respectivamente.

TOGGLE – esta propriedade ajusta a forma de funcionamento do botão. Normalmente o botão funciona da seguinte forma. Chamemos de estado A o estado no qual o botão está em repouso e B o estado no qual ele está quando nele se clica. Assim, o botão que está em A só fica no estado B enquanto estiver a carregar com o rato sobre ele. Logo que liberta o botão do rato o botão volta ao estado A.

Porém, a propriedade TOGGLE altera essa forma de funcionamento. Esta propriedade está ajustada por defeito como FALSE e neste estado corresponde ao modo de funcionamento normal descrito no parágrafo anterior. Se alterar esta propriedade para TRUE, fará o botão funcionar da seguinte forma: inicialmente estaria no estado A e assim que clicasse sobre ele faria que ele assumisse o estado B, assim permane-cendo mesmo depois de libertado o botão do rato. Seria preciso outro clique para o fazer voltar ao estado A e assim sucessivamente.

INITIAL VALUE – O valor normal desta propriedade é FALSE, o que faz o botão inicialmente ser mostrado em repouso com a aparência (A) e com a aparência (B) enquanto estiver a carregar sobre ele. Se passar a propriedade a TRUE, inverterá esta condição.

BACKGROUND – Esta propriedade é surpreendente! Não satisfeitos em permitir a colocação de uma imagem na face do botão, também permitiram a colocação de outra imagem para o fundo do botão. O pro-cedimento para agregar outra imagem a esta propriedade é o mesmo que foi descrito para o campo ICON.

Page 225: Flash Mx - Apostila

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.

Page 226: Flash Mx - Apostila

226 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 defeito4: QUESTION, INFO, WARNING e ERROR, que são vistos abaixo nesta ordem.

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

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

Page 227: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 227 O procedimento de criação de linhas – neste caso, botões, nesta janela, é o mesmo visto no Calendar.

CLOSE HANDLER – Neste campo deverá colocar uma string5 que corresponda à subrotina6 a ser executada quando a caixa se fechar, ou seja, assim que o utilizador carregar em algum botão e a caixa se fe-char, automaticamente o Flash executará a subrotina cujo nome estiver indicado neste campo.

BUTTON WIDTH – neste campo pode ajustar em pixéis a largura dos botões.

TITLEBAR HEIGHT – e aqui, a altura da barra do título.

VISIBLE – é onde pode ajustar a visibilidade e invisibilidade da caixa de mensagens por ActionScript. Pode ter dois valores, TRUE ou FALSE. O primeiro corresponde à caixa visível e o segundo a ela invisível.

Para finalizar este componente, devemos dizer que encontramos um bug que torna o uso deste componente dentro de uma janela Dragging-Pane impossível.

No fim, depois dos ajustes acima descritos, poderá ter uma caixa assim.

5 String = sequência de textos, números ou quaisquer outros caracteres, que para o programa são

tratados como texto. 6 Conjunto de linhas de programação que fazem determinada função.

Page 228: Flash Mx - Apostila

228 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

SPLITVIEW

O SplitView é um componente fantástico que permite dividir uma área em duas outras independentes, tanto na vertical, quanto na horizontal. Digamos que precisa colocar dois filmes numa área na sua página Flash, mas o espaço mal é suficiente para a colocação de um. Pode então usar o SplitView para dividir a área, e em cada parte colocar in-tegralmente aquilo que pretende.

Então, ambas as informações estarão no mesmo sítio, divididas por uma barra que poderá ser deslocada para um lado e para o outro7 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...

Page 229: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 229 Se carregar no componente vai ver que a janela de propriedades é igual à da figura abaixo.

Vai ver cinco propriedades no comando as quais descrevemos abaixo.

TOP/LEFT CONTENT – Se estiver a utilizar uma barra divisória vertical, então esta propriedade refere-se ao nome do objecto que estará na parte esquerda (LEFT) da divisória. Se estiver a utilizar uma barra divi-sória horizontal, então este campo refere-se ao nome do objecto exis-tente na parte de cima (TOP) da divisória.

BOTTOM/RIGHT CONTENT – De forma análoga, esta propriedade refere-se ao objecto que vai estar na parte de baixo (BOTTOM) ou na direita (RIGHT) da divisória, consoante esteja a utilizar uma barra divi-sória horizontal ou vertical, respectivamente. Vai ver que já preenche-mos este campo como “outro”.

NOTA

“gaivota” é o nome do objecto correspondente à fotografia do pássaro que estará na metade esquerda da

divisória.

“outro” é o nome do objecto que estará na metade direita da divisória (neste caso é um texto).

Page 230: Flash Mx - Apostila

230 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 231: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 231

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

Page 232: Flash Mx - Apostila

232 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 233: Flash Mx - Apostila

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.

Page 234: Flash Mx - Apostila

234 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

... e toda à direita ...

O Componente SplitView tem ainda duas propriedades interessantes: T/L COMPONENTE BEHAVIOR e R/B COMPONENT BEHAVIOR.

Cada uma destas propriedades permite três escolhas: STICK TO BAR , STICK TO PANE e RESIZE. Por defeito, estão ajustadas na opção STICK TO BAR. Se as colocar em STICK TO PANE as imagens pas-sam a ficar estáticas em relação ao fundo enquanto desloca a barra

Page 235: Flash Mx - Apostila

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

NOTA

Pode mudar o BEHAVIOR de cada metade da janela de forma independente. Pode, por exemplo, colocar STICK

TO PANE numa metade e RESIZE na outra!

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

TICKER

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

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

Page 236: Flash Mx - Apostila

236 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

A seguir vamos a uma descrição detalhada de cada uma das proprie-dades.

ORIENTATION – permite duas escolhas: HORIZONTAL e VERTICAL e corresponde ao sentido de deslocamento da frase na caixa.

SCROLL DIRECTION – permite duas escolhas: DECREMENTAL e INCREMENTAL. Se a orientação da caixa for horizontal, e colocar esta propriedade como INCREMENTAL, vai ver a frase a deslocar-se da esquerda para a direita e pode inverter este sentido de deslocamento se colocar a propriedade como DECREMENTAL. Se a orientação da caixa for vertical, então a frase irá deslocar-se de cima para baixo ou de baixo para cima, consoante a propriedade esteja INCREMENTAL ou DECRE-MENTAL, respectivamente.

SPEED – representa a velocidade com que a frase se move, medida em pixéis por segundo.

SMOOTHNESS – representa a quantidade de pixéis que a frase se move a cada ciclo. Este campo tem relação directa com o SPEED. Isto significa o seguinte: se a velocidade estiver a 10 e o SMOOTHNESS estiver a 1, então a frase desloca-se a 10 pixéis por segundo. Porém, se ajustar SMOOTHNESS com o valor 2, a velocidade passa a ser 20 pixéis por segundo, pois a cada deslocamento da frase ela salta 2 pi-

Page 237: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 237 xéis. Logicamente, quanto menor este número, mais suave é o movi-mento aos olhos, por isso o campo tem esse nome8.

SPACING – É a quantidade de pixéis entre cada um dos itens a ser mostrado na caixa9.

STOP ON FOCUS – Se ajustar esse valor como TRUE, de cada vez que o utilizador passar o rato sobre a caixa, o movimento encerra, voltando ao normal à saída do cursor. Pode ser útil para quando deseja colocar links a deslocar-se pela caixa e permitir que possam ser clica-dos facilmente. Se ajustar como FALSE, o movimento não se altera à passagem do rato.

SCROLL LOCATION – Permite regular a posição das setas de scroll (deslocamento) da caixa. As opções disponíveis são: NONE, TOP, BOTTOM, LEFT e RIGHT, correspondentes a nenhuma seta, setas em cima, setas em baixo, setas à esquerda e setas à direita, respectiva-mente. Na figura da caixa, no início desta secção, a caixa está ajustada com a opção BOTTOM.

FRAME WIDTH – indica a espessura em pixéis da borda da caixa. Se escrever zero, a caixa fica sem border.

FRAME COLOR – pode nesta caixa regular a cor do border.

HIGHLIGHT COLOR – nesta caixa pode indicar a cor do highlight, ou seja, quando o cursor do rato passa em cima da caixa com o texto em movimento, uma caixa colorida ilumina a região do texto imediatamente abaixo do cursor, para indicar que está seleccionada esta região. Pode-se então, por meio desta propriedade, regular a cor da iluminação.

DATA PROVIDER – indica o nome de um objecto em ActionScript res-ponsável pelo fornecimento dos textos a serem mostrados na caixa.

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

independente do tipo de deslocamento, horizontal ou vertical.

Page 238: Flash Mx - Apostila

238 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

DATA ARRAY – Indica uma matriz de elementos a serem mostrados na caixa. Pode ver na imagem que este campo contém a frase que apare-ce na primeira imagem a falar do Ticker. Se carregar uma vez com o rato sobre a região onde está a frase vai ver uma janela onde poderá inserir todos as frases que deseja mostrar.

HEADER TEXT – O texto que preencher neste campo será mostrado como sendo o título da caixa.

HEADER LOCATION – Nesta caixa poderá ajustar a posição em que o título da caixa vai estar. As escolhas possíveis são: NONE, TOP, BOTTOM, LEFT e RIGHT, que correspondem a nenhuma, em cima, em baixo, à esquerda e à direita, respectivamente.

HEADER WIDTH – indica a largura do título em pixéis.

HEADER HEIGHT – indica a altura do título em pixéis.

DATA WITDH – indica a largura dos itens na caixa em pixéis. Esta propriedade faz mais sentido no caso de caixas de deslocamento hori-zontal, pois irão espaçar as frases na horizontal de forma a não se con-fundirem.

DATA HEIGHT – esta propriedade indica a altura em pixéis das frases.

Deixamos para o fim os dois últimos componentes do primeiro grupo, o TREE e o PROGRESS BAR. Não nos estenderemos nas explicações acerca destes componentes nesta secção, por se tratarem de elemen-tos que apenas podem funcionar quando programados por ActionScript.

TREE

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

Page 239: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 239

PROGRESSBAR

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

As propriedades deste componente são:

CHANGE HANDLER – Deve colocar neste campo o nome da função (subrotina) em ActionScript (no mesmo timeline) a ser executada à me-dida que a barra progride.

DISPLAY GRAPHICS – É uma propriedade que pode ser ajustada para TRUE ou FALSE. Se for colocada em true, que é o modo por defeito, é mostrado o desenho da barra a progredir. Se colocado em false, faz o desenho ficar invisível.

Page 240: Flash Mx - Apostila

240 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Flash charting components

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

BAR CHART

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

Page 241: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 241 Para conseguir um gráfico similar ao visto acima, preenchemos as propriedades do componente conforme visto abaixo.

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

CharTitle – Esta propriedade representa o texto que será o título do gráfico. No caso “GRÁFICO DE VENDAS”.

XAxisTitle – Neste campo deverá colocar o título correspondente ao eixo horizontal (X). No caso, “MESES”.

YAxisTitle – Neste campo deverá colocar o título correspondente ao eixo vertical (Y). No caso, “EUROS”.

Page 242: Flash Mx - Apostila

242 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Margin – Corresponde ao valor em pixéis da margem, ou seja, em relação ao tamanho total do controlo, quantos pixéis de margem deseja estabelecer em todas as direcções.

Se aumentar muito a margem e, consequentemente, diminuir o espaço interno dentro do controlo, pode ser que o Flash automaticamente ajus-te a rotação dos textos para tentar encaixar o gráfico dentro do compo-nente. Veja na figura abaixo o gráfico que foi comprimido na vertical, com a retirada das linhas de 25 e 75 e a rotação realizada nas strings dos nomes dos meses.

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

Page 243: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 243

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

LINE CHART

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

Page 244: Flash Mx - Apostila

244 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 245: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 245

A primeira opção é a Chart Title e representa o título do gráfico. Vamos preenchê-la com a frase “RESUMO DE VENDAS”.

A seguir vemos as propriedades Xaxis Title e Yaxis Title , que cor-respondem ao título a colocar para o eixo horizontal e vertical, respec-tivamente. Preenchemos estes campos com as frases “valores em euros” e “meses”, respectivamente.

As opções a seguir são: LineColor e LineWeight que permitem o ajus-te da cor e da espessura da linha.

Vemos também o campo ShowHighlights, que indica a presença (TRUE) ou não (FALSE) de pequenos círculos de cor diferente a desta-car os pontos do gráfico.

Os campos a seguir, MARGIN e XLabelMaxHeight assemelham-se aos do BAR CHART e têm a mesma funcionalidade explicada anterior-mente.

Page 246: Flash Mx - Apostila

246 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Line Chart – Chart Event Handlers

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

Terá de preencher a coluna VALUE com strings que representem o nome das funções em ActionScript a executar, quando cada um dos quatro eventos acontecer. Neste caso, os eventos são:

Press (quando o botão do rato for carregado em cima de um ponto do gráfico), Release (quando o botão do rato for libertado depois de ter sido carregado em cima de um ponto do gráfico), RollOver (quando o cursor do rato passar por cima de um ponto do gráfico) e RollOut (quando o cursor do rato sair de cima de um ponto do gráfico, depois de ter entrado).

Page 247: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 247 Line Chart – Category Labels

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

Line chart – data values

A próxima propriedade do LINE CHART chama-se DATA VALUES. Por defeito, quando criar o objecto vai ver que está preenchido com os valo-res 58, 25, 50, 34 e 80, que correspondem aos valores que os pontos do gráfico vão ter no eixo vertical. Carregue nestes números e vai ver uma janela onde poderá regular estes pontos. Nesta etapa deixamos os valores como estavam.

Feitos todos esses ajustes, terá transformado o gráfico no que pode ser visto a seguir.

Page 248: Flash Mx - Apostila

248 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Repare nos highlights à volta dos pontos.

As questões discutidas no BAR CHART referentes à margem e ao com-portamento do componente à medida que altera os seus valores, tam-bém são válidas para o LINE CHART.

Pie Chart

O PIE CHART é o próximo componente sobre o qual iremos falar.

Com ele é possível fazer gráficos PIZZA ou TARTE10 conforme visto na figura abaixo que é criada automaticamente no momento em que insere um componente PIE CHART na sua área de desenho.

10 Escolha o nome conforme o seu apetite... ☺

Page 249: Flash Mx - Apostila

I.6. COMPONENTES AVANÇADOS 249 Ao carregar no componente, depois de o ter arrastado para a sua área de desenho, vai ver as seguintes propriedades:

Pie Chart – Layout options

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

Os parâmetros vistos nesta janela são:

CHART TITLE - que corresponde ao título do gráfico.

MARGIN – que pode regular a margem interna do componente (ver ex-plicação dada para o BAR CHART).

Page 250: Flash Mx - Apostila

250 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

SHOW LEGEND – variável que pode assumir os valores TRUE ou FALSE, correspondentes respectivamente ao gráfico ter ou não a legen-da lateral ao lado direito.

As três próximas propriedades, ou seja, CHART EVENT HANDLERS, CATEGORY LABELS e DATA VALUES têm um funcionamento igual ao explicado para o caso do componente LINE CHART.

Pie Chart – Pie Colors

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

Page 251: Flash Mx - Apostila

IIª PARTE

A PROGRAMAÇÃO NO

MACROMEDIA FLASH MX

Page 252: Flash Mx - Apostila
Page 253: Flash Mx - Apostila

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

Linguagens Processuais ou Procedimentais

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

LINGUAGENS ORIENTADAS POR OBJECTOS

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

Page 254: Flash Mx - Apostila

254 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

No Flash MX as funções e as estruturas de dados estão agrupadas em classes que podem ser definidas pelo construtor de funções (constructor function). Um construtor de funções é um conjunto de instruções que define as propriedades e os métodos de uma classe. É possível criar múltiplas instâncias de uma classe, cada uma delas denominada por objecto, para reutilizar através do código. Por exemplo, para obter informações acerca da taxa de IVA de diversos artigos, criamos um construtor através da declaração de uma função (iva) que possui duas propriedades (preco,taxa) e através destas cria-mos um método (calcTotal) que calcula e devolve o preço do produto com IVA. function iva (p, t) { this.preco = p; this.taxa = t; this.calcTotal = function() {return (this.preco * this.taxa)+ this.preco;}; } Esta função necessita de dois parâmetros (t, d). Assim, a partir desta classe podemos criar instâncias deste objecto em que os parâmetros variam. almoco = new iva (5, 0.05); computador = new iva (1000, 0.17); O operador new foi usado para criar duas novas instâncias do objecto iva, às quais atribuímos os nomes almoco e computador e para onde passamos os parâmetros que se encontram entre parêntesis. A utilização do operador new é similar a arrastar um movie clip da biblioteca para o palco, ou seja, criar uma nova instância de um símbolo (objecto). Nas linguagens orientadas por objectos as classes podem receber propriedades e métodos umas das outras de acordo com uma ordem específica. A esta característica denomina-se herança (inheritance).

Page 255: Flash Mx - Apostila

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

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

Page 256: Flash Mx - Apostila
Page 257: Flash Mx - Apostila

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ída pela dot sintax. Na slash sintax os caminhos são muito semelhantes aos utilizados em HTML. O caminho pode ser absoluto, começando pela _root (timeline do filme principal) ou relativo se começar numa instância e seguindo o caminho até ao target (movie clip). Em HTML a ( / ) representa a raiz (_root) e quando se possui um caminho relativo para, por exemplo, subir um nível na hierarquia este é representado por ( ../ ). Em Flash a ( / ) simboliza o palco e para atribuir uma action a um botão que afecte um movie clip chamado bola, no palco, basta digitar /bola. No caso inverso, se possuir um movie que vai accionar uma ordem para o palco, então no movie deverá aparecer ape-nas / A dot syntax foi introduzida no actionscripting do Flash 5. É o método preferencial para identificar o caminho para um movie clip ou para uma variável. Se ainda trabalhar em Flash 5, a slash sintax deve ser evitada pois foi totalmente substituída pela dot sintax no Flash MX. A dot sintax é muito semelhante à slash sintax, mas as barras foram substituídas por pontos. Os caminhos podem ser absolutos e relativos e existem duas referências especiais, _root e _parent. A _root num ca-minho absoluto refere-se à timeline principal (raiz), da mesma maneira

Page 258: Flash Mx - Apostila

258 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Timeline principalroot

Escritório Quarto

Figura001 - Target Paths

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

Terminologias utilizadas no Actionscripting

Actions – São declarações que instruem a animação a desempenhar determinada tarefa.

Boolean – É um valor que apenas pode assumir true ou false.

Page 259: Flash Mx - Apostila

II.2. CONCEITOS BASE 259

Class (classe): Tipo de dados que podem ser utilizados para definir um novo objecto.

Constantes – São elementos imutáveis durante toda a animação.

Constructor - Função utilizada para definir as propriedades e os méto-dos de uma classe.

Eventos - O evento é a acção que ocorre enquanto a animação está a decorrer. Os eventos podem ocorrer quando um movie clip carrega, ou quando o utilizador faz clique sobre um botão.

Function (função): Bloco de código reutilizável cujos argumentos (parâmetros) podem ser passados e de onde os seus valores podem ser extraídos.

Identifier (identificador): Nome utilizado para identificar uma variável, propriedade, objecto, função ou método. O primeiro caracter de um identificador deve ser uma letra, underscore (_), ou sinal $. Cada ca-racter subsequente deve ser uma letra, underscore (_), sinal $ ou núme-ro.

Keywords – Palavras reservadas que possuem uma função pré-definida no Flash.

Method (método): Função associada a um objecto. Depois da função associada, pode ser chamada método desse objecto.

Object (objecto): Uma instância de uma classe. Cada instância contém todas as propriedades e métodos da classe. Instâncias também podem conter propriedades e métodos adicionais não definidos na classe.

Nome da instância – Nomes únicos que permitem identificar determina-dos elementos na animação, como movie clips ou variáveis.

Property (propriedade): Características que definem um objecto.

Parâmetros ou argumentos – São contentores que permitem passar va-lores para dentro de uma função. Por exemplo, o código seguinte passa o parâmetro cor para a função cores.

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

Page 260: Flash Mx - Apostila

260 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Painel Actions

No Flash é utilizado o painel Actions para se escrever os scripts. Este painel pode ser acedido através do comando WINDOW > 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

Page 261: Flash Mx - Apostila

II.2. CONCEITOS BASE 261

No modo Expert o utilizador introduz os scripts da mesma forma mas também o pode fazer digitando-os directamente no painel; para tal deve possuir já bons conhecimentos de actionscripting, sendo este modo aconselhado a utilizadores mais experientes. A área superior do painel que estava presente em modo Normal desaparece, mas ao digitar os comandos surge uma janela de auxílio com as keywords do programa.

Figura003 - Painel Actions em Expert Mode

INSERIR UMA ACTION

Pode utilizar vários métodos para aplicar actions a uma frame ou instân-cia. Primeiro, seleccione o frame ou instância onde irá aplicar a action e active o painel actions através do comando WINDOW > ACTIONS ou com a tecla F9. No lado esquerdo do painel as actions apresentam-se divididas por categorias. Para aceder a determinada categoria basta fazer clique uma vez sobre a mesma e para aplicar a action pretendida deverá fazer duplo clique sobre a sua designação. O código aparecerá imediata-mente no lado direito do painel. Algumas actions possuem parâmetros que podem ser de seguida configurados na área à direita. Ver figura 002.

Page 262: Flash Mx - Apostila

262 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 263: Flash Mx - Apostila

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

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

Page 264: Flash Mx - Apostila

264 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 WINDOW > MOVIE EXPLORER.

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

Page 265: Flash Mx - Apostila

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

Page 266: Flash Mx - Apostila

266 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

PARA VISUALIZAR O PAINEL REFERENCE

Para visualizar o painel Reference, seleccione o comando WINDOW >

REFERENCE. Se já existir uma linha de código seleccionada no painel Actions pode fazer clique sobre o ícone reference que aparece no canto superior direito da janela, que acede directamente ao painel Reference já na descrição da action seleccionada.

Figura012 – Icon Reference no painel Actions

PARA ALTERAR A DIMENSÃO DA FONTE NO PAINEL REFERENCE

Seleccione a opção Large, Medium ou Small do menu pop-up do painel Reference.

ASSOCIAR ACTIONS NA TIMELINE

Ao associar uma action na timeline a acção acontecerá assim que a ani-mação atingir essa keyframe. Para associar uma action a uma frame comece por adicionar um novo layer na animação. Se a action for para uma frame, que não seja a primeira da animação, deve ser inserida uma blank keyframe na layer Actions (F7). De seguida com a keyframe seleccionada, active o painel Actions e introduza o código pretendido.

Figura013 – Associar actions a um keyframe

Page 267: Flash Mx - Apostila

II.2. CONCEITOS BASE 267

ASSOCIAR ACTIONS A SÍMBOLOS

Podemos associar actions a frames, timelines de movie clips e botões e directamente às instâncias dos movies e botões. Algumas actions são exclusivamente para aplicação em instâncias de movie clips e outras apenas podem ser associadas a instâncias de botões. Ao criar um símbolo na biblioteca (library) e arrastar uma cópia para o palco acabamos de criar uma instância do símbolo. Ao associar as actions às instâncias em vez de directamente no símbolo, podemos utilizar várias instâncias do símbolo em que cada uma pode conter o seu conjunto de actions, reaproveitando recursos no filme. Para aplicar uma action a um símbolo, basta seleccioná-lo e atribuir a action que pretendemos.

Figura014 – Símbolo Button na livraria e uma instância no palco

Eventos

Ao associar uma action a um símbolo surge sempre uma linha adicional para especificar o evento. O evento é a acção que ocorre enquanto a animação está a decorrer. No Flash, os eventos são normalmente de teclado ou de rato e diferem entre movie clips e botões. Cada instância pode conter mais do que um evento.

Page 268: Flash Mx - Apostila

268 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

EVENTOS ASSOCIADOS A BOTÕES

Figura015 – Eventos associados a uma instância dum botão

Press – Ao premir o botão do rato, mas antes de o soltar.

Release – Quando se solta o botão do rato. Este evento acontece sem-pre depois do evento Press.

Release Outside – Soltar o rato fora da área hit do botão.

Roll Over – Passar o rato por cima do botão, mas sem possuir o botão do rato premido.

Roll Out – Retirar o rato de cima do botão, sem o premir.

Drag Over – Passar o rato por cima do símbolo, mantendo o botão do rato premido. Esta operação é normalmente designada por “arrastar”.

Drag Out – Retirar o rato de cima do botão ou movie, mantendo o botão premido.

Keypress – Acontece quando o utilizador prime uma determinada tecla.

EVENTOS DE MOVIE CLIPS

Load – Ocorre apenas uma vez, assim que a instância acaba de ser carregada.

EnterFrame – A acção está constantemente a ser despoletada à veloci-dade do filme. As acções associadas a este evento acontecem antes de qualquer action da timeline do movie clip.

Page 269: Flash Mx - Apostila

II.2. CONCEITOS BASE 269

Unload – A acção é iniciada no primeiro frame, depois do movie clip ser removido da timeline.

Mouse Down – Ao premir o botão do rato sobre a instância.

Mouse Up – Ao soltar o botão do rato sobre a instância.

Mouse Move – A acção é iniciada sempre que o rato é movido. Deve utilizar as propriedades _xmouse e _ymouse para determinar a posi-ção do rato.

Key Down – Acontece assim que uma tecla é premida. Deve ser utilizada a propriedade Key.getCode para determinar qual foi a última tecla premida.

Key Up – Ao soltar uma tecla. Utilizar a propriedade Key.getCode para identificar a última tecla a ser premida.

Data – A acção é iniciada assim que entram dados no movie através da action LoadVariables ou LoadMovie.

Ao ser especificada através da acção LoadVariables o evento apenas acontece uma vez, enquanto que através da action LoadMovie o even-to acontece repetidamente à medida que os dados são recebidos.

Figura016 – Eventos associados a uma instância dum movie clip.

Page 270: Flash Mx - Apostila
Page 271: Flash Mx - Apostila

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 WINDOW > COMMON LIBRARIES > BUTTONS, seleccione da categoria Playback um botão para parar o filme, um para retomar a ani-mação e mais dois para recuar e avançar o filme frame-a-frame.

Page 272: Flash Mx - Apostila

272 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Figura018

Seleccione a primeira keyframe da layer actions e active o painel Actions (F9). Na categoria actions escolha a opção movie control e a action stop. stop(); De seguida, seleccione o botão que irá fazer a animação arrancar e es-colha no painel ACTIONS > MOVIE CONTROL > PLAY. Para o botão que pára o filme aplique de novo a action Stop.

Figura019 – Action Stop

Repare que nenhuma destas duas actions possui argumentos. Tanto a action stop como a play actuam sobre a timeline em que estão inseridas, mas não afectam directamente movie clips presentes dentro da mesma. Assim, se existissem movies no palco nenhum seria afec-

Page 273: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 273

tado pelas actions que acabamos de inserir, pois as timelines dos movie clips são independentes da animação criada no palco. Restam os botões para fazer o filme recuar ou avançar frame a frame. Para estes utilizaremos a action goto, mas os parâmetros deverão ser alterados. Assim, teremos:

Figura020 – Actions do filme

CRIAR LINKS PARA PÁGINAS HTML

Para criar um link para uma página HTML utilizamos a action GetURL. É possível criar links relativos e absolutos, assim como passar variáveis, no caso do envio dum formulário, através desta action. Para criar um link num botão, seleccione o botão e aplique a action Get-URL que se encontra na categoria ACTIONS > BROWSER NETWORK.

Figura021 – Action getURL

Page 274: Flash Mx - Apostila

274 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 275: Flash Mx - Apostila

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: [email protected] "); } Se pretendermos preencher também o assunto basta completar com: on (release) { getURL("mailto:[email protected]?subject=Opinião"); }

Figura025 – Mensagem criada através do link e-mail

Page 276: Flash Mx - Apostila

276 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

CARREGAR FILMES DE FLASH EXTERNOS

Num site totalmente em Flash, os filmes podem tornar-se muito exten-sos e pesados. Nas animações mais complexas começa também a ser difícil organizar todo o fluxo de trabalho por cenas e muitas vezes é ne-cessário recorrer à separação do conteúdo em diversos filmes. Estes filmes por serem mais pequenos, são mais fáceis de organizar e podemos sempre optar por removê-los da animação principal em qual-quer altura ou substituí-los quando não estão a ser visualizados pelo uti-lizador. Um exemplo clássico será um site que possui como área fixa uma navegação de botões que pretendemos se mantenha constantemente visível, enquanto uma segunda área acomodará todas as animações re-ferentes a cada um destes botões. Ver figura 026.

Figura026 – Interface principal do filme

Para carregar filmes de Flash sobre outro filme é necessário que a animação que vai ser carregada esteja já exportada em formato swf. A animação que carrega os filmes secundários estará no nível inferior. Cada nível só pode possuir um filme, logo, ao carregar um filme num nível ocupado, a animação que lá se encontra é automaticamente remo-vida.

Page 277: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 277

Figura027 - Carregamento de filmes swf

Os filmes secundário herdam do principal as seguintes características: Velocidade – A velocidade do filme principal sobrepõe-se à das anima-ções secundárias.

Dimensões – O canto superior esquerdo dos filmes secundários irá coincidir com a coordenada (0,0) do filme principal. O restante será cor-tado se estes forem maiores e nunca redimensionado.

Cor de fundo - Os filmes secundários irão possuir fundo transparente. Para um fundo opaco devemos criar uma layer onde desenhamos um rectângulo com a cor de preenchimento pretendida.

Para carregar um filme secundário vamos começar por exportá-lo para o formato .swf através do comando FILE > EXPORT MOVIE. Tivemos o cuidado de dar a este ficheiro a mesma dimensão do filme principal e de construir a animação do lado direito para não interferir com a navega-ção. Ver figura 028.

Page 278: Flash Mx - Apostila

278 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Figura028 - Filme secundário

Guardamos este ficheiro na mesma pasta onde se encontra guardado o filme principal, pois o caminho necessita de ser especificado na altura do carregamento e é mais fácil se ambos se encontrarem na mesma lo-calização.

Figura029 - Exportar o filme

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

Page 279: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 279

Figura030 – Action Load Movie

Na opção URL digitamos o nome do ficheiro exportado anteriormente. O nível deverá ser superior a 0 pois este é o do filme principal e se o man-tivermos o filme principal desaparece para dar lugar ao filme secundá-rio.

Figura031– Filme swf carregado sobre o principal

Qualquer outro filme que seja agora carregado em nível 1 fará automa-ticamente a remoção do filme existente (clientes.swf ). No caso de pretendermos remover um determinado filme, basta utilizar a action UnloadMovie e referi-lo através do nível onde se encontra car-regado.

Page 280: Flash Mx - Apostila

280 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Figura032 – Remover um filme

CONTROLAR FICHEIROS EXECUTÁVEIS COM O FSCOMMAND

O Flash exporta ficheiros executáveis para a criação de CD-ROMs inte-ractivos. A action Fscommand permite aceder e alterar algumas carac-terísticas nos ficheiros executáveis criados pelo Flash. Para exportar um ficheiro executável seleccione a opção FILE > PUBLISH

SETTINGS e escolha a opção Windows Projector, no caso de pretender um executável para correr em sistemas Windows ou a opção Macintosh Projector, para ficheiros que correm em sistemas Apple. Para alterar o nome que o programa atribui por defeito ao ficheiro inactive a opção Use default Names.

Figura033 – Exportar um executável

Page 281: Flash Mx - Apostila

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

Page 282: Flash Mx - Apostila

282 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Trapallkeys – Converte todos os eventos de teclado (KeyUp e Key-Down) em eventos de movie clip (onClipEvent).

Exec – Executa outro ficheiro exe. O caminho para o ficheiro deve ser especificado na caixa parâmetros.

Quit – Fecha a janela do projector.

Figura036 – Icon de projector

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

SÍMBOLOS

Recapitulando alguns pontos-chave em relação aos símbolos, que se-rão importantes para compreender a sua integração com as actions em Flash: - As instâncias dos movie clips e botões podem possuir nomes.

Figura037- Nomear movies

- As timelines dos movie clips são independentes da timeline do filme principal, ou seja, um filme pode estar parado, mas os movie clips po-dem manter as suas animações.

Page 283: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 283

- Uma caixa de texto dinâmico ou input pode possuir nome. No entanto, devemos ter em atenção uma diferença importante entre nomear a instância de texto e atribuir-lhe um nome de variável.

Figura038 – Nome da instância de texto

Ao atribuir um nome de instância é possível aceder a métodos e propri-edades da caixa de texto. Esta opção é portanto mais poderosa que a atribuição do nome da variável à qual apenas podemos alterar o seu va-lor.

Figura039 - Nome da variável de texto

Os símbolos podem estar incluídos dentro de outros símbolos, que por sua vez podem possuir outros símbolos dentro das suas timelines. A localização destes símbolos é dada por uma hierarquia em forma de árvore para a qual os nomes das instâncias contribuem para identificar a sua localização. Esta localização é conhecida por caminho (target path) do movie clip.

Figura040 – Hierarquia dos símbolos

Page 284: Flash Mx - Apostila

284 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Para nos referirmos aos métodos de um objecto a forma é análoga à utilizada para as instâncias. Os métodos possuem argumentos ou parâ-metros, que são suportes para valores transportados para o método. Estes argumentos seguem o nome do método entre parêntesis, utilizan-do a sintaxe nomedométodo (argumentos). Para utilizar a dot sintax na referência a um método de um objecto, será preciso primeiro referenciar o nome do objecto (ou o caminho de um movie clip) seguido de um ponto e de seguida o método. Para referenciar o método (play) de um movie clip (boneco) utilizando a dot sintax: boneco.play()

ATRIBUIR NOMES A INSTÂ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

Page 285: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 285

CAMINHOS RELATIVOS E ABSOLUTOS

Tal como já foi referido no primeiro capítulo desta segunda parte do livro, existem duas formas de fazer referência ao target path (caminho) dum movie clip. Através de referências absolutas e relativas.

CAMINHOS ABSOLUTOS

A timeline principal do filme, referida como _root no Flash. Todos os movie clips são instâncias localizadas na timeline principal e são dependentes da _root. Logo, para iniciar a animação dum movie cha-mado modelo no palco teremos: _root.modelo.play() Ao utilizar este método a action pode ser dada de qualquer timeline no filme, pois o Flash espera encontrar no palco uma instância com o nome modelo e apenas actuará sobre esta.

Figura042– Target path absoluto

CAMINHOS RELATIVOS

No método relativo a referência _parent diz respeito à timeline onde o movie clip ou botão está inserido; esta pode ser o palco ou outro movie clip. Numa estrutura do tipo representado na figura042, para aceder ao palco através do movie clip vestido teremos algo do tipo: _parent._parent

Page 286: Flash Mx - Apostila

286 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Figura043 – Target path relativo

Ainda no método relativo surge-nos a referência this que simboliza a timeline em que estamos. Se estivermos na timeline modelo e nos qui-sermos referir a ela no código bastará escolher a opção this ou deixar o campo target em branco.

Figura044 – Movie clips dentro de outro movie clip

CONTROLAR INSTÂNCIAS DE SÍMBOLOS

Utilizando a dot sintax e os target paths conseguimos não só associar actions a instâncias, mas também alterar as suas propriedades e aceder aos seus métodos.

Page 287: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 287

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

Figura045 – Animação do movie clip pacman

Crie de seguida um botão (seta) para a interface. Deste símbolo aplica-remos quatro instâncias, que serão rodadas no palco uma para cada di-recção do movimento do personagem.

Vamos começar por criar a action que rodará o movie na direcção dese-jada. Para tal, basta-nos controlar a propriedade _rotation.

No palco atribua um nome à instância do pacman e seleccione no painel ACTIONS > PROPERTIES > _ROTATION.

Para completar o comando faça clique na linha de código e complete com o nome do movie clip, seguido de um ponto. Ver figura 046.

Para os restantes valores complete as actions mudando apenas o valor da rotação do movie clip.

Figura046 – Valores de rotação para as setas

Page 288: Flash Mx - Apostila

288 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

PROPRIEDADES DOS MOVIE CLIPS

_alpha – Altera a transparência das instâncias. Assume valores entre 0 e 100, em que o valor 0 simboliza a transparência máxima da instância.

Figura047 – Alpha 100 e alpha 50

_currentframe – Simboliza a frame actual onde a animação da instân-cia se encontra.

_droptarget – Representa a posição onde a instância é largada no caso de estar a ser usada a action startdrag.

_focusrect – Determina se um movie clip possui um rectângulo amarelo à sua volta no caso do utilizador navegar na animação com a tecla TAB.

_framesloaded – A quantidade de frames já carregados da instância.

_height – Altura em pixéis de uma instância.

_name – Nome da instância.

_quality – Qualidade com que é exibida determinado movie clip. Os va-lores possíveis são:

LOW – Gráficos apresentam-se sem anti-aliasing.

MEDIUM – Gráficos com anti-alising utilizando uma grelha de 2 x 2 pixéis, mas os bitmaps não possuem suavização. Ideal para filmes sem texto.

HIGH – Boa qualidade. Gráficos com anti-alising utilizando uma grelha de 4 x 2 pixéis, e os bitmaps são suavizados se a animação estiver parada. Esta é a qualidade por defeito do Flash.

BEST – Muito boa qualidade. Igual à qualidade high, mas os bit-maps estão sempre suavizados.

Page 289: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 289

Figura048 – Low quality vs High Quality

_rotation – Valor da rotação de uma instância.

Figura049 - Propriedade Rotation

_soundbuftime – Tempo em segundos antes do filme começar uma animação stream.

_target – Retorna o valor do target path do movie clip.

_totalframes – Devolve o número total de frames de um movie clip.

_url – Dá o endereço URL do filme SWF de onde o movie clip fez down-load.

_visible – Visibilidade da instância. Quando o seu valor é false a instân-cia ficará invisível, no caso de true a instância fica visível. Por defeito, o valor está configurado para true.

_width – Largura dada em pixéis de uma instância.

_x – Coordenada do centro de um movie clip visualizada na régua horizontal do Flash. De notar que a coordenada (0,0) no palco é o canto superior esquerdo, enquanto que dentro de um movie clip é o centro do mesmo.

Page 290: Flash Mx - Apostila

290 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

_xmouse – Coordenada do ponteiro do rato no eixo x.

_xscale – Valor em percentagem da largura dum movie clip.

_y – Coordenada do centro de um movie clip visualizada na régua verti-cal do programa.

_ymouse – Coordenada do ponteiro do rato no eixo y.

Figura050 - _xmouse e _ymouse

_yscale – Valor em percentagem da altura dum movie clip. O valor 100 representa a dimensão do movie clip que se encontra na biblioteca.

Figura051 - _xscale e _yscale

MÉTODOS MAIS UTILIZADOS NOS MOVIECLIPS

starDrag e stopDrag A capacidade de arrastar movie clips dentro de uma animação é sem dúvida uma das capacidades mais utilizadas pelos designers do Flash. Esta operação é desempenhada através da utilização de um método denominado startDrag.

Page 291: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 291

Uma das formas mais simples para deslocar um movie clip é atribuir o método directamente na instância no evento onLoad. Esta situação pode ser interessante quando pretendemos criar um rasto de movies a seguir o cursor do rato.

Figura052– Método startDrag

A opção Lock mouse to Centre coloca o centro da instância a coincidir com o ponteiro do rato. Se não especificarmos Target este será inter-pretado com aquele onde a action está a ser aplicada. Para restringir o movimento a uma área mais pequena, utilize a opção Constrain to rectangle.

Figura053 – Constrain to rectangle

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

Page 292: Flash Mx - Apostila

292 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Para esta situação teremos de aplicar o método stopDrag, mas que apenas será chamado quando o utilizador soltar o botão do rato. Uma das formas de obter este efeito é criar primeiro um botão que contém o actor a arrastar e de seguida colocar esse botão dentro de um movie clip que será colocado no palco. Seleccione o botão dentro do movie e escolha ACTIONS > MOVIE CLIP

CONTROL > STARTDRAG.

Figura054 – Actions para drag and drop do movie clip

O botão que colocamos dentro do movie clip possuirá então a progra-mação para arrastar e largar a instância, mas em eventos diferentes. Ver figura 054. Não é necessário especificar Target pois como o botão está dentro do movie clip este é automaticamente assumido como o movie que deve ser arrastado. A instância do movie clip é colocada no palco e estará pronta a funcionar.

DuplicateMovieClip e RemoveMovieClip

Estes dois métodos permitem duplicar um movie clip e remover movie clips que tenham sido criados através do método DuplicateMovieClip. Começamos por nomear o movie clip no palco, através do painel PROPERTIES.

Page 293: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 293

Figura055 – Nomear o movie clip

De seguida para testar seleccionamos o primeiro keyframe da timeline no palco e aplicamos a action MOVIE CLIP CONTROL > DUPLICATE

MOVIECLIP. Nos parâmetros atribuímos o nome do movie a ser duplicado, o nome do novo movie clip e a profundidade (depth) onde será duplicado. Ape-nas pode existir um movie clip por profundidade. Como o duplicado fica sobre o original, usaremos a propriedade _x para mover o segundo movie para a direita.

Figura056 – Duplicar movies

Para remover movie clips criados através do método Duplicate-MovieClip, aplicamos o método RemoveMovieClip onde só é necessário indicar o nome do movie que pretendemos remover. removeMovieClip("sol2"); Como exemplo vamos criar um simples mouse trail.

Page 294: Flash Mx - Apostila

294 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 295: Flash Mx - Apostila

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO 295

Figura058 – Duplicar o movie

Como não queremos mais de seis movies atrás do ponteiro começamos a remover todos os movies anteriores. Para funcionar o palco deve ter pelo menos duas frames. Acrescente uma frame com a tecla F5. Esta segunda frame faz com que o filme entre em loop e duplique novos movie clips sempre que volta a passar pela primeira keyframe.

Figura059 – Script completo

LoadMovie e Unload Movie

Estes dois métodos são especialmente importantes quando preten-demos carregar um filme de Flash externo ou um ficheiro de imagem jpeg numa determinada localização do filme principal.

Tal como foi referido no capítulo anterior, nas actions LoadMovie e UnloadMovie um filme carregado sobre a animação principal fica sem-pre encostado ao canto superior do filme principal. A solução para o colocar noutra posição do palco é utilizar um movie clip como referência e carregá-lo para dentro deste.

Imagine por exemplo que na animação principal possui um televisor com vários botões, cada um deles irá carregar uma animação diferente.

Page 296: Flash Mx - Apostila

296 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Figura060 – Filme Principal

Depois de criar as animações secundárias com a dimensão do monitor do televisor, exportamos cada uma delas para formato swf. No nosso caso chamamos ao filme secundário exportado programa1.swf . No filme principal vamos criar um movie clip na biblioteca com nome ecrã, mas completamente vazio. Este filme só vai servir de referência para posicionar o filme que iremos carregar.

Figura061 - Filme secundário

De seguida posicionamos o movie no palco sobre o televisor, tendo em atenção que quando carregados sobre um movie clip os filmes apare-cem com o seu canto superior esquerdo posicionado no centro do movie clip, ou seja na coordenada (0,0). Assim, colocando o centro do movie clip no canto do televisor, sabemos que coincide com o canto superior esquerdo do filme que vai ser carregado.

Figura062 – Posicionar o movie clip

Page 297: Flash Mx - Apostila

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

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

Page 298: Flash Mx - Apostila

298 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 WINDOW 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

Page 299: Flash Mx - Apostila

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 >

GETBYTESLOADED. Efectua a contagem do número de bytes carregados do filme. _root.getBytesTotal – OBJECTS > MOVIE > MOVIE CLIP > METHODS >

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

Page 300: Flash Mx - Apostila

300 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Finalmente testamos o valor da variável “percent” e se este for igual a 100 o filme avança para a próxima cena. Caso contrário prossegue nes-ta cena. Daí que seja necessário incluir mais uma keyframe com uma action que obriga a animação a regressar até à frame 1 da cena do pre-load, senão saltaria antes de tempo para o filme.

Figura069 – Actions do primeiro frame do preload

Para testar o filme seleccione a opção CONTROL > TEST MOVIE e de seguida na janela de teste, escolha a opção VIEW > SHOW STREAMING.

Page 301: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO

SINTAXE DO ACTIONSCRIPTING

Chavetas { } São utilizadas para agrupar blocos de código relacionado. on (release) { play(); } Ponto e vírgula (;) – Todas as declarações terminam desta forma, embora o Flash consiga interpretar e completar o script sem a sua presença, é boa prática utilizá-los. Também pode utilizar o botão auto-format do painel Actions para acrescentar estes caracteres automatica-mente, desde que o código não contenha erros de sintaxe. Pontos = 0; Tempo = 0; Parêntesis () Tem diversas funções dentro do código. A principal utilização é agrupar os parâmetros de uma função. function empregado (nome, idade){ ... } Permitem também alterar a ordem de precedência do actionscriptig e ainda facilitar a leitura do código.

Page 302: Flash Mx - Apostila

302 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Tem o poder de avaliar uma expressão no lado esquerdo dum ponto na dot sintax. Por exemplo, no script seguinte os parêntesis permitem avaliar o new Cor(this) e criar um novo objecto de cor. onClipEvent(enterFrame) { (new Cor(this)).setRGB(0xffffff); } Caso contrário seria necessário utilizar o seguinte script para determinar o valor e criar o objecto: onClipEvent(enterFrame) { myCor = new Color(this); myCor.setRGB(0xffffff); } Maiúsculas e minúsculas O actionscripting não é sensível à capitalização do texto (case-sensi-tive). Apenas as palavras inerentes à linguagem (keywords) possuem limitações neste campo. Keywords Palavras reservadas que não podem ser atribuídas a nomes de variá-veis e que possuem uma função determinada pela própria aplicação. break else instanceof typeof case for new var continue function return void default if switch while delete in this with Comentários (//) Permite adicionar notas ao código. Estas notas são especialmente importantes quando o código é muito extenso ou quando várias pessoas partilham o mesmo projecto de Flash.

Page 303: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 303

Figura070 – Comentários no código

Variáveis

Uma variável é um contentor de informação. Essa informação pode ser alterada durante a animação, tanto para gravar informação acerca do utilizador como por exemplo para guardar valores à medida que o filme muda. Aconselha-se a iniciar o valor duma variável antes de a utilizar. Os nomes das variáveis não podem ser palavras reservadas ou valores booleanos como true e false e devem ser nomes únicos no scope (es-paço) de modo a evitar colisões.

DATA TYPES

Um data type descreve o tipo de dados que as variáveis podem conter. Existem dois tipos de data types: primitive e reference. O data type primitive engloba as categorias number, string e boolean, enquanto os reference data types são object e movieclip. Existem ainda dois tipo especiais de data types: null e undefined. O tipo de dados de uma variável afecta o modo como uma variável muda o seu valor quando associada a um script.

Page 304: Flash Mx - Apostila

304 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Number: Um número pode ser manipulado utilizando operadores aritméticos como a adição (+), subtracção (-), multiplicação (*), divisão (/), modulo (%), incremento (++) e decremento (- -). String: Uma sequência de caracteres tais como letras, números e pontuações. Em actionscripting cria-se uma string envolvendo um determinado valor em aspas. Assim, o seu valor é tratado como caracter e não como uma variável. O operador + passa a actuar como união en-tre as duas variáveis. nome= “Ana” + apelido Boolean: Um valor que pode ser apenas true ou false. If (utilizador==true && password==true){ … } Object: Uma colecção de propriedades. Cada propriedade tem um nome e um valor. O valor pode ser qualquer tipo de dados e os objectos podem estar contidos dentro de outros. Por exemplo, para aceder à propriedade da visibilidade de um movie clip, teremos: carro._visible movieclip: Um apontador a um símbolo movie clip que permite controlar os seus métodos. movie.startDrag(true); Null: Apenas possui o valor null, que simboliza que a variável está vazia. Undefined: Tal como o null apenas possui um valor, o undefined, significa que ainda não lhe foi atribuído nenhum valor.

Page 305: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 305

SCOPE DA VARIÁVEL

O scope de uma variável é a área em que a variável é conhecida e pode ser referenciada. As variáveis podem existir dentro de timelines de instâncias. A variável pode ser local para essa timeline ou pode ser es-pecificada como variável global e ser utilizada por todas as timelines do filme. Existem três tipos de scope para as variáveis:

Variáveis locais

As que estão disponíveis apenas dentro do bloco de código onde foram inseridas.

Variáveis de Timeline

Válidas para qualquer timeline desde que indicadas no código através dum caminho.

Variáveis Globais

Existem em todas as timelines mesmo que não seja especificado um caminho até elas.

DECLARAR VARIÁVEIS

Ao declarar uma variável local deve utilizar o comando var dentro do bloco de código onde esta ficará inserida. Uma variável local não defini-da, expira no fim do script. var pontos=0 Para declarar variáveis de timeline, basta utilizar o comando set variable ou apenas indicar o nome da variável e usar o sinal de igual para atri-buição do seu valor. X=20 No caso da declaração de uma variável global o nome desta deve ser antecedido do identificador _global.

Page 306: Flash Mx - Apostila

306 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 307: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 307

Na segunda cena do filme (filme), colocamos também uma action stop(), logo no início de modo a que o filme fique parado na primeira frame. Desenhamos uma caixa de texto dinâmico à qual atribuímos um nome (user).

De seguida seleccionamos o botão da cena entrada e atribuímos as seguintes actions.

Figura073 – Actions do botão

Foi atribuída à variável user que aparece na cena filme o valor da variável utilizador da cena entrada, e concatenada com o texto entre as-pas através do operador +.

Figura074 – Resultado

Page 308: Flash Mx - Apostila

308 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

TESTAR O VALOR DAS VARIÁVEIS

Para testar o valor duma variável utilize a action Trace (ACTIONS >

MISCELLANEOUS ACTIONS > TRACE ) para abrir uma janela de output sempre que o filme for testado e mostrar o valor da variável que digitar-mos entre parêntesis. pontos = pontos+1; trace(pontos); Uma forma alternativa de testar os valores das variáveis é utilizar o Debugger. Para visualizar o debugger basta testar o filme através do comando CONTROL > DEBUG MOVIE. Este comando além de testar o filme abre o painel Debbuger onde basta seleccionar o separador Variables e escolher o nível do filme ou o movie clip onde se encontra a variável. A animação surge sempre parada no início. Para começar basta clicar sobre o botão play para dar início ao filme. No separador PROPERTIES é possível ainda observar as propriedades da _root ou do movie clip que se encontrar seleccionado acima. O separador variables mostra as variáveis criadas no filme e os seus valores.

Figura075 – Painel Debugger

Page 309: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 309

OPERADORES

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

Prioridade dos operadores

Em qualquer cálculo, o operador de multiplicação (*) e divisão (/) possuem prioridade sobre a soma (+) e a subtracção (-). No entanto, se uma determinada operação for envolvida em parêntesis, terá prioridade sobre as restantes. pontos= 7 + 3 * 2 O resultado da operação é 13. Primeiro é calculada a multiplicação e só depois será efectuada a soma. pontos= (7 + 3) * 2 O resultado desta forma será 20, pois a soma será realizada antes da multiplicação por se encontrar entre parêntesis.

Tipos de operadores

Operadores Numéricos Desempenham diversas operações aritméticas mais comuns tais como: + Soma * Multiplicação / Divisão - Subtracção % Módulo (resto da divisão) ++ Incremento -- Decremento

Page 310: Flash Mx - Apostila

310 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 311: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 311

Operadores lógicos Estes operadores comparam valores booleanos (true / false) e devol-vem um outro valor booleano. && e || ou ! negado If (nome==”Cristina” && idade>25) { gotoAndStop(2); } Operadores de igualdade Determina se dois valores ou identidades são iguais. O valor devolvido é booleano. == igualdade === estritamente igual != diferente de !== estritamente diferente O operador === (estritamente igual) é semelhante ao operador de igualdade, mas não efectua conversão do tipo de dados. Assim, se os operandos forem de tipos diferentes, o resultado obtido será false. Operadores de atribuição O sinal de = funciona como operador de atribuição, para associar um valor a uma variável. login=”administrador”; = Atribuição

+= Soma e atribuição

-= Subtracção e atribuição

*= Multiplicação e atribuição

Page 312: Flash Mx - Apostila

312 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

%= Modulo e atribuição

/= Divisão e atribuição

<<= Mover para a esquerda e atribuição

>>= Mover para a direita e atribuição

=̂ XOR e atribuição

|= OR e atribuição

&= AND e atribuição

Vamos voltar ao exemplo do pacman que já tínhamos colocado a mudar de direcção através da propriedade _rotation. Agora para o movimento vamos acrescentar uma linha para incrementar o valor da deslocação do movie clip em 10 pixéis, sempre que o utiliza-dor fizer clique numa seta de direcção. Para tal vamos utilizar os opera-dores de atribuição.

Figura078 - Operadores de atribuição

CONDIÇÃO IF

Continuamos agora com o exemplo apresentado na figura 071. Supondo que é necessário testar se o utilizador introduziu ou não um valor na caixa de texto da cena de entrada. No caso afirmativo, o filme prossegue para a segunda cena, mas no caso negativo surge uma men-sagem, a solicitar a introdução do nome de utilizador. Começamos por acrescentar na primeira cena uma nova caixa de texto dinâmico, à qual chamamos mensagem.

Page 313: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 313

De novo no botão apagamos as actions anteriores e vamos à categoria ACTIONS > CONDITIONS/LOOPS > IF e dentro das aspas digitamos a se-guinte condição: if (utilizador==null){ } De seguida, na categoria ACTIONS > VARIABLES > VAR, vamos igualar a variável “mensagem” ao texto que irá aparecer se o utilizador não digitar nada no nome. var mensagem= "Preencha o nome de utilizador"; De novo na categoria ACTIONS > CONDITIONS/LOOPS > ELSE, iremos introduzir o código no caso de o utilizador realmente preencher o campo do nome. else { } Todas as instruções que seguirem a condição else serão executadas só no caso de preenchimento do campo utilizador. Como pretendemos que o filme passe para a segunda cena da anima-ção, teremos a action: gotoAndPlay(“filme”,1);

Para preencher o campo User com o nome introduzido, basta: User=”Benvindo(a), ” + utilizador;

Page 314: Flash Mx - Apostila

314 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 315: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 315

Figura081 – Programação do botão de entrada

Para completar a programação pretendemos que no caso de erro, para além da mensagem, os campos sejam limpos e o cursor volte ao campo utilizador. Isto será feito através da atribuição do valor undefined a ca-da um dos campos. Para o cursor aparecer a piscar no campo utiliza-dor, usamos o método setFocus do objecto selection. Assim o código ficará:

Figura082

A condição IF também pode ser utilizada para testar as propriedades dos movie clips. Por exemplo, ao testar a propriedade _droptarger

Page 316: Flash Mx - Apostila

316 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 317: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 317

Depois de colocar as várias instâncias no palco, criamos também um movie clip (saco) para onde estas serão arrastadas. Atribuímos nome ao movie clip e iremos agora acrescentar ao movie clip da fruta o código para testar a posição em que é largado.

Figura085

Seleccionamos a linha 5, e vamos continuar a programação a partir deste ponto, no painel ACTION > CONDITIONS / LOOPS > IF. Para condição digitamos: eval (this._droptarget) == _root.saco; A função eval é necessária neste caso, para converter o resultado da expressão this._droptarget, que obtém um valor em slash sintax (/saco). O eval converte este valor para dot sintax (_level0.saco). Dentro da condição if fazemos desaparecer o movie arrastado e incre-mentamos uma unidade à caixa de texto total.

Figura086 – Programação do movie maçã

Page 318: Flash Mx - Apostila

318 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Vamos agora optimizar o código do filme. Se for necessário aumentar o número de tipos de fruta na animação, cada novo botão terá a progra-mação apresentada na figura 086. Como a programação é exactamente igual para todos os botões, vamos criar um ficheiro de texto com o código actionscripting. Abra o bloco de notas e cole o código da figura 086.

Figura087 – Ficheiro de texto

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

Figura088 – Gravar o ficheiro

Na biblioteca edite o movie clip da laranja e seleccione o botão. Para aceder ao ficheiro externo basta digitar #INCLUDE DROP.AS. Nas actions encontra-se em MISCELLANEOS ACTIONS.

Page 319: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 319

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

Figura089 – Action #include

CONDIÇÃO CASE

Numa situação em que seja necessário testar mais de duas opções, a condição if torna-se insuficiente e confusa. Como alternativa, é possível usar a condição case nestas situações em que estão envolvidos vários testes. Como exemplo, vamos supor que possuímos um site de compras online e que os utilizadores irão obter preços diferentes consoante a quanti-dade de produtos que adquirem. Temos duas caixas de texto: A “quantidade” onde introduzimos previamente o valor 0 e que é do tipo input e o “preco” que é uma caixa de texto dinâmica.

Figura090

Page 320: Flash Mx - Apostila

320 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Seleccione o botão para cálculo do total e active o painel actions. Na categoria ACTIONS > CONDITIONS/LOOPS > SWITCH. Dentro dos parênte-sis coloque o nome da variável que vai ser testada (quantidade). Esta variável deve ser numérica; logo, para garantir que o Flash a interpreta-rá deste modo colocamos o seu nome dentro da Função Number. Na linha seguinte escolha no painel ACTIONS > CONDITIONS/LOOPS >

CASE, onde teremos de prever todos os valores possíveis. Assim, no có-digo, obtemos:

Figura091 – Script completo

Por cada hipótese terá de ser introduzida uma linha que deve sempre terminar com a action break, ou não voltará a funcionar da próxima vez que o botão for premido. A linha de default contempla todas as situações que ficaram fora dos valores definidos pelo case, ou seja, que não estejam no intervalo 0 a 2 inclusivé.

CICLO FOR

A função principal dos ciclos numa linguagem é repetir determinadas actions diversas vezes.

Page 321: Flash Mx - Apostila

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.

Page 322: Flash Mx - Apostila

322 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Condition – A condição que será testada antes de cada loop para saber se é verdadeira ou falsa. O loop terminará quando esta condição for falsa. Next – A expressão que será avaliada depois de cada loop. Normal-mente o incremento ou decremento do valor dado no parâmetro init. De seguida, na categoria ACTIONS > VARIABLES > SET VARIABLE, crie uma variável de nome n. Vamos envolver a expressão dentro do método Math.Round para arredondar o valor obtido. Seleccione ACTIONS >

OBJECTS > CORE > MATH > METHODS > ROUND.

Figura094 – Método Round

Para atribuir o valor à variável, seleccione OBJECTS > CORE > MATH >

METHODS > RANDOM. Este calcula um número aleatório entre 0 e 0,99999... . Para obter números entre 0 e 48 multiplicamos este método pelo valor 48 e como o valor 0 não nos interessa somamos uma unida-de ao resultado. Obtemos assim um intervalo de valores entre o 0 e o 48. n = Math.round(Math.random()*48+1); Finalmente, para atribuir estes valores a cada uma das caixas de texto, seleccione no painel ACTIONS > VARIABLES > SET VARIABLE.

Page 323: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 323

Figura095

CICLO WHILE

O ciclo while é mais utilizado em casos em que não sabemos qual o número de vezes que o loop irá correr. Supondo que pretendemos criar um menu dinâmico, que vai buscar as opções a um ficheiro de texto externo. Estas opções podem variar, con-soante o utilizador introduza ou apague no ficheiro de texto as variáveis. Começamos por criar o ficheiro de texto com quatro variáveis.

Figura096 – Ficheiro de texto

No filme de Flash criamos um botão para as opções do menu e colo-camos este botão dentro de um movie clip ao qual adicionamos uma caixa de texto dinâmico.

Page 324: Flash Mx - Apostila

324 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 325: Flash Mx - Apostila

II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO 325

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

LOADVARIABLES.

Figura100 - LoadVariables

Nos parâmetros em URL digitamos o nome do ficheiro de texto, que por se encontrar na mesma pasta do filme não é necessário indicar um ca-minho relativo apenas o nome do ficheiro basta. Location – Escolhemos Target e digitamos o valor _root, ou seja a ti-meline principal irá receber as variáveis do ficheiro externo. Acrescentamos uma linha para tornar o movie invisível. Fazemos isto através da propriedade _visible.

Figura101 – Actions primeira da keyframe do palco

Neste momento já podemos testar o filme e verificar no debbuger se as variáveis estão a ser carregadas para o filme. Utilizamos o comando CONTROL > DEBUG MOVIE, 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.

Page 326: Flash Mx - Apostila

326 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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)

Page 327: Flash Mx - Apostila

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ímos a cada caixa de texto o valor da variável respec-tiva e incrementamos o i. Para alterar o conteúdo e o número de opções o utilizador só tem de editar o ficheiro texto.txt

Figura104 – Menu gerado dinamicamente

Page 328: Flash Mx - Apostila
Page 329: Flash Mx - Apostila

II.5. FUNÇÕES

As funções são pedaços de código reutilizável. Quando se utiliza uma função é possível passar uma série de argumentos para dentro dela e retornar um valor. O Flash possui algumas funções que já fazem parte da sua programação e que podem ser utilizadas sem ser necessário o utilizador defini-las. Boolean getVersion parseInt escape isFinite String eval isNaN targetPath getProperty Number unescape getTimer parseFloat Função Eval Função para aceder a variáveis ou propriedades e extrair o seu valor. Se for utilizada para aceder a objectos e movie clips extrai uma refe-rência dos mesmos. produto1=”mel”; produto2=”açúcar”; resultado = eval (“produto”+n); Assim, se n=1, o resultado será mel, mas se n=2, o resultado será açúcar. O Eval avaliou a expressão “produto”+n e ao obter o valor de n concatenou-o com a palavra produto para extrair o seu valor. No caso da utilização da propriedade _droptarget a função eval é utilizada pelo Flash para converter o nome de um movie clip em notação slash sintax para a notação dot sintax. Ver figura 086.

Page 330: Flash Mx - Apostila

330 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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).

Page 331: Flash Mx - Apostila

II.5. FUNÇÕES 331

Também é possível definir funções globais através do identificador _global. _global.funcao = function (z) { return (z*5)-1; }

Função boolean

Converte uma expressão num valor Booleano. O valor retornado depen-de do tipo de expressão. Se a expressão é um valor booleano, o valor devolvido é “expression”. Se a expressão é um número, o valor devolvido é “true”, caso o número não seja 0. O valor zero devolverá “false”. Se a expressão é uma string, o método toNumber é invocado para con-verter a string num valor numérico. Se o resultado for diferente de zero é retornado true, caso o resultado seja zero, o valor é igual a false. Se a expressão é undefined o valor devolvido é false. Se a expressão é um movie clip ou um objecto, o valor devolvido é true. Boolean (expressão)

Função string

Converte uma expressão numa string. String (expressão) Se a expressão é um valor booleano, a string devolvida é true ou false, consoante o valor booleano apresentado pela expressão. Se a expressão se tratar de um número, o valor devolvido é uma repre-sentação em texto do valor numérico que era o resultado da expressão. Se a expressão é uma string o valor devolvido é expression. Se a expressão é um movie clip, valor é o target path para o movie clip em slash Sintax (/).

Page 332: Flash Mx - Apostila

332 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Se a expressão é undefined o valor devolvido é o de uma string vazia (“”)

Função escape Converte um parâmetro numa string e codifica-o num formato de URL onde os caracteres especiais são convertidos em sequências hexade-cimais. escape("parametro")

Função getProperty

Devolve o valor de uma propriedade de um movie clip. O código seguinte devolve o valor da coordenada y de um movie clip chamado carro. carro_y = getProperty(_root.carro, _y)

Função targetPath

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

Função unescape

Função que avalia um parâmetro como string, e descodifica-o de forma-to URL-encoded para uma string. Efectua o processo inverso da função Escape. Todas as sequências hexadecimais são convertidas numa string. unescape(parametro)

Page 333: Flash Mx - Apostila

II.5. FUNÇÕES 333

Função isFinite

Avalia uma expressão e devolve o valor true se o resultado for um nú-mero finito e false se o resultado for infinito. isFinite(expressão)

Função isNaN

Avalia um parâmetro e devolve o valor true se o resultado não for numé-rico, indicando que estamos na presença de um erro matemático. isNaN("carro") // devolve true

Função parseFloat

Converte uma string num número de vírgula flutuante. Se a string não começar por um número que possa ser convertido, a função devolve o valor NaN. Espaços que precedem números inteiros válidos são ignora-dos. parseFloat("-5") devolve -5 parseFloat("2.5") devolve 2.5 parseFloat("3.5e6") devolve 3.5e6, ou 3500000 parseFloat("chocolate") devolve NaN parseFloat(" 5.1") devolve 5.1 parseFloat("3.75relógio") devolve 3.75 parseFloat("0gatos") devolve 0

Função parseInt

Função que converte uma string num número inteiro. Se a string não for possível de converter em inteiro a função devolve NaN. Strings come-çadas por 0x são interpretadas como números hexadecimais.

Page 334: Flash Mx - Apostila

334 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Espaços em branco que antecedam valores inteiros válidos são ignora-dos assim como outros caracteres especiais. parseInt("3.5") // devolve 3.5 parseInt("chocolate") // devolve NaN parseInt("4foo") // devolve 4 Exemplo hexadecimal: parseInt("0x3F8") // devolve 1016 Exemplo binário: parseInt("1010", 2) // devolve 10 (a representação binária de 1010)

DEFINIR FUNÇÕES

Todas as funções começam com a palavra function e de seguida surge o nome da função. ACTIONS > USER-DEFINED FUNCTIONS > FUNCTION. function calcTotal

Figura107 – Definir uma função

Page 335: Flash Mx - Apostila

II.5. FUNÇÕES 335

Depois surgem os nomes dos argumentos a ser passados que apa-recem listados entre parêntesis. Os nomes dos parâmetros são separa-dos por vírgulas. function calcTotal (preco, iva) A seguir basta digitar entre chavetas o código da função. function calcTotal (preco, iva) {

// o código da função aparece aqui } A outra parte especial duma função é a acção return, que notifica a função para terminar e retornar um certo valor para o código que cha-mou a função. function calcTotal (preco, taxa) {

return (preco, iva); } Para chamar a função é necessário escrever algo semelhante a: calcTotal(50, 1.7); Vamos criar uma pequena função para converter valores de escudos para euros. Criamos duas caixas de texto. A caixa para os escudos (escudos) será do tipo input, enquanto que a que vai apresentar a conversão em euros (euros) será dinâmica.

Figura108 – Interface

Na primeira keyframe do filme vamos criar a função. Escolha no painel ACTIONS > USER DEFINED FUNCTIONS > FUNCTION. Defina o nome da função e o parâmetro que vai ser necessário (escudos).

Page 336: Flash Mx - Apostila

336 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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

Page 337: Flash Mx - Apostila

II.6. OBJECTOS

Os objectos são blocos de código designados para desempenhar deter-minadas tarefas. Cada objecto possui propriedades que podem ser ma-nipuladas. Estas propriedades são na realidade variáveis. Para além das propriedades, os objectos possuem ainda métodos que lhes permi-tem desempenhar determinada função. A grande vantagem dos objec-tos é a sua reutilização. As linguagens orientadas por objectos, como o Actionscript, vêm já com alguns objectos incorporados. Os objectos no Flash MX estão divididos em quatro categorias: Objectos nucleares (core) que são também comuns à especificação ECMA – Array, Boolean, Date, Function, Math, Number, Object e String. Objectos de Movie que são característicos do Actionscript - Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selec-tion, Sound, Stage, System, TextField e TextFormat Objectos Client / Server que são também específicos do Actionscript e que permitem comunicar entre cliente e servidor - LoadVars, XML, e XMLSocket. Objectos Authoring que permitem configurar o Flash - CustomActions e Live Preview.

Aceder às propriedades de um objecto

Para aceder às propriedades de um objecto utiliza-se o ponto (.) como operador. O nome do objecto surge do lado esquerdo separado pelo ponto e o nome da propriedade que pretendemos aceder.

Page 338: Flash Mx - Apostila

338 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Object.name Para associar uma propriedade a um objecto utiliza-se a action Set Variable. Objecto.name = “Helena”;

Invocar o método de um objecto

O operador ponto (.) também permite aceder aos métodos de um deter-minado objecto. No exemplo seguinte chamamos o método setRGB para o objecto Color. onClipEvent (load) { myColor = new Color(this); myColor.setRGB(0xFF66FF); }

Objectos da categoria core

UTILIZAR O OBJECTO DATE

Objecto que constrói uma nova data e/ou hora capturada através da data e hora do computador do utilizador. Para este exercício, comece por criar um movie clip na biblioteca que vai conter uma caixa de texto dinâmico chamada hora_txt.

Figura111

Page 339: Flash Mx - Apostila

II.6. OBJECTOS 339

Coloque uma instância do movie clip no palco e atribua-lhe as seguintes actions:

Figura112

Criamos uma nova variável e atribuímos-lhe o valor da data corrente através do objecto OBJECTS > CORE > DATE. Basta agora passar os parâmetros da data que necessitamos para dentro da caixa de texto do movie clip, utilizando os métodos getHours, getMinutes e getSeconds.

UTILIZAR O OBJECTO ARRAY

Um array é um objecto cujas propriedades podem ser acedidas através de um número que determina a sua posição no array. O primeiro ele-mento de um array é sempre o zero, o seguinte o 1 e assim sucessiva-mente. Para definir os valores de um array utiliza-se o operador [ ] no qual se envolve o número do elemento a que se pretende aceder. Por exemplo, o seguinte array possui quatro valores, associados a cada um dos números do array. O array deve ser sempre iniciado com o construtor new Array(). novoArray=New Array(); novoArray[0] = "Liliana"; novoArray[1] = "Manuela"; novoArray[2] = "Luisa"; novoArray[3] = "Sara"; O mesmo array também pode ser descrito de uma forma mais extensa do seguinte modo: novoArray=New Array("Liliana","Manuela","Luisa","Sara");

Page 340: Flash Mx - Apostila

340 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Para atribuir um valor do array basta simplesmente igualar o nome de uma variável a um dos elementos do array. n=novoArray[2]; Vamos agora completar o exemplo do relógio acrescentando mais um movie clip para conter a data completa. Dentro deste movie clip está outra caixa de texto à qual demos o nome de data_txt. Na primeira key-frame do filme criamos dois novos arrays.

Figura113 – Criar os arrays

Para a instância do movie clip que irá conter a data, teremos:

Figura114 – Actions da instância

UTILIZAR O OBJECTO MATH > MÉTODO MAX

Devolve o maior valor de dois valores ou resultados de expressões nu-méricas. Math.max(x,y) Parâmetros: x e y – Podem ser valores ou expressões numéricas. Os dois valores são avaliados e o resultado é o maior valor. Math.max(55,88) // resultado é 88

Page 341: Flash Mx - Apostila

II.6. OBJECTOS 341

UTILIZAR O OBJECTO MATH > MÉTODO MIN

Devolve o menor valor de dois valores ou resultados de expressões nu-méricas. Math.min(4,77) // resultado é 4 Parâmetros: x e y – Podem ser valores ou expressões numéricas. Os dois valores são avaliados e comparados e o resultado é o menor valor.

UTILIZAR O OBJECTO MATH > MÉTODO PI

Constante matemática equivalente ao valor do Pi, ou seja, 3.14159265358979... . Math.PI()

UTILIZAR O OBJECTO MATH > MÉTODO ROUND

Utilizado para arredondar uma expressão numérica ou um valor. O re-sultado da seguinte expressão numérica é 56. Math.round(55.98)

UTILIZAR O OBJECTO MATH > MÉTODO RANDOM

Retorna um número aleatório entre 0 e 0.9999... Math.random()

Page 342: Flash Mx - Apostila

342 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 343: Flash Mx - Apostila

II.6. OBJECTOS 343

Deve ser sempre usado o construtor new Color() para definir uma nova instância. Métodos do objecto Color.getRGB - Devolve o valor numérico RGB atribuído pelo último método setRGB.

Color.getTransform – Devolve a informação do último método set-Transform.

Color.setRGB – Altera o valor hexadecimal da cor de um determinado objecto.

Color.setTransform – Atribui um valor para alterar as cores a um objecto.

Por exemplo, imagine que queremos alterar a cor de um movie clip no palco através da introdução de valores RGB. Para isso vamos criar três caixas de texto, para as três cores primárias do modelo RGB.

Figura117 - Interface

Na primeira keyframe do filme iremos criar o construtor new Color(). alvo_color=new Color(alvo_mc); De seguida, seleccionamos o movie clip e atribuímos os valores das caixas à instância através do método setRGB.

Figura118 – Aplicar o método setRGB ao movie clip

Page 344: Flash Mx - Apostila

344 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Os valores devem ser introduzidos pelo utilizador em código hexa-decimal.

Figura119 – Inserir os valores

UTILIZAR O OBJECTO MOVIECLIP > MÉTODO HITTEST

Vamos usar o método hitTest para detectar quando um movie clip se encontra sobreposto com outro. movieClip.hitTest(target) Parâmetros: target – O target path da área de colisão com o movie clip. Continuamos no exemplo do filme pacman. Criamos um novo movie na biblioteca e colocamos uma instância no palco. Atribuímos um nome à instância (laranja) e na primeira keyframe do filme vamos criar uma fun-ção.

Figura120 – Nomear a instância

A função vai permitir-nos reutilizar código, pois os quatro botões vão ne-cessitar de testar a sobreposição do movie.

Page 345: Flash Mx - Apostila

II.6. OBJECTOS 345

Figura121 – Actions da keyframe

Nos botões basta acrescentar o código para chamar a função sempre que o movie clip é deslocado. Ver a figura 122.

Figura122

UTILIZAR O OBJECTO SOUND

O objecto Sound permite controlar o som de um filme. Ao utilizar este objecto sem especificar Target, todos os sons do filme serão contro-lados. Deve ser utilizado o construtor new Sound() para criar uma nova instância de som antes de ser possível utilizar os seus métodos. musica = new Sound(); Como exemplo, vamos criar uma animação para onde um som é car-regado e controlado através de dois botões. Um botão pára o som e ou-tro recomeça o som de novo a partir do início. Começamos por criar na primeira keyframe do filme um construtor para a nova instância de som. Logo de seguida carregamos um som externo, ou seja, que não foi importado para a biblioteca do filme.

Page 346: Flash Mx - Apostila

346 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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");

Page 347: Flash Mx - Apostila

II.6. OBJECTOS 347

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

Figura126

UTILIZAR O OBJECTO CAPABILITIES

Este objecto permite analisar características do sistema do utilizador, tais como resolução, cores e capacidades áudio ou vídeo. Para utilizá-lo é necessário usar também o objecto system . Por exemplo, para verificar se o sistema tem capacidades áudio: System.capabilites.hasAudio Propriedades do objecto capabilities: System.capabilities.hasAudioEncoder – Mostra os encoders de áudio suportados.

System.capabilities.hasAccessibility – Indica se o sistema possui os standards de acessibilidade requeridos.

System.capabilities.hasAudio – Se o sistema possui ou não capacida-des áudio.

System.capabilities.hasMP3 – Possibilidade de ler ou não MP3.

Page 348: Flash Mx - Apostila

348 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

System.capabilities.language – Indica a linguagem suportada pelo FlashPlayer.

System.capabilities.manufacturer – Indica o fabricante do Player do Flash.

System.capabilities.os – Indica o sistema operativo do computador que está a correr o Player do Flash.

System.capabilities.pixelAspectRatio – Indica a proporção dos pixéis do ecrã.

System.capabilities.screenColor – Indica se o monitor é a cores ou a preto e branco.

System.capabilities.screenDPI – Indica o número de pontos por pole-gada do ecrã.

System.capabilities.screenResolution.x – Mostra o tamanho horizon-tal do ecrã.

System.capabilities.screenResolution.y - Mostra o tamanho vertical do ecrã.

System.capabilities.version – Indica a versão mais antiga suportada pelo Player do Flash.

System.capabilities.hasVideoEncoder – Mostra os encoders instala-dos para vídeo.

Figura127

Para exemplificar, no palco desenhamos algumas caixas de texto, às quais atribuímos propriedades do objecto capabilities. O resultado do filme depois de testado aparece na figura 128.

Page 349: Flash Mx - Apostila

II.6. OBJECTOS 349

Figura128

Objectos da categoria client/server

UTILIZAR O OBJECTO LOADVARS

Este objecto é utilizado como alternativa à action LoadVariables, para transferência de dados entre um servidor e o filme de Flash. É necessário utilizar o construtor new LoadVars() antes de invocar os seus métodos. Métodos do objecto LoadVars:

LoadVars.load – Faz download de variáveis de um URL específico.

LoadVars.getBytesTotal – Devolve o número de bytes carregados através do método load ou sendAndLoad.

LoadVars.getBytesTotal – Devolve o número total de bytes aos quais será feito download através do método load ou sendAndLoad.

LoadVars.send – Publica as variáveis de um objecto LoadVars para um determinado URL.

LoadVars.sendAndLoad – Publica as variáveis de um objecto Load-Vars e faz download da resposta do servidor para um objecto.

LoadVars.toString – Devolve uma string de URL codificada que con-tém todas as variáveis enumeradas pelo objecto LoadVars.

Page 350: Flash Mx - Apostila

350 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Eventos do objecto LoadVars: LoadVars.onLoad – Invocado quando uma operação de load ou send-AndLoad é completada. Iremos criar um menu dinâmico, que vai buscar os valores das suas opções e links do botão a um ficheiro de texto externo.

Figura129 – Ficheiro texto

Começamos por criar um botão na biblioteca, que depois é colocado dentro de um movie clip, ao qual é acrescentado uma caixa de texto dinâmico, e dada uma action GetURL em que o link irá ser determinado através da variável “link”.

Figura130 – Botão dentro do movie com a caixa de texto

Arrastamos uma instância do botão para o palco e atribuímos-lhe o no-me botão1.

Page 351: Flash Mx - Apostila

II.6. OBJECTOS 351

Figura131 – Instância do movie no palco

Na primeira keyframe do filme iniciamos as actions criando um cons-trutor LoadVars ao qual atribuímos o nome dados_lVars. dados_lVars=new LoadVars(); Na segunda linha aplicamos a função “carregado” (que iremos descre-ver mais à frente) no evento onLoad, para que seja executada assim que o filme carrega. dados_lVars.onLoad=carregado; Agora é a vez de chamar o ficheiro de texto que contém os dados que necessitamos para criar o filme. dados_lVars.load("links.txt"); E vamos criar a função que atribui os valores carregados aos botões, que são gerados dinamicamente através de um ciclo While. Atribuímos ao primeiro botão o valor do primeiro texto e do link que lhe corresponde dentro do ficheiro de texto. botao1.botao_txt.text=dados_lVars.txt1; botao1.link=dados_lVars.link1;

Page 352: Flash Mx - Apostila

352 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Iniciamos a variável i no valor 2, para começar a duplicar os próximos movie clips. I=2; Iniciamos o ciclo while. Enquanto existirem novos textos no ficheiro externos é duplicado um novo botão e deslocado 40 pixéis na vertical: while(eval("dados_lVars.txt"+i)!=null){ eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i); eval("botao"+i)._y+=40; Finalmente são atribuídos ao botão duplicado o seu texto, o seu link e a variável i é incrementada em uma unidade, para criar a próxima ins-tância de botão. eval("botao"+i).botao_txt.text=eval("dados_lVars.txt"+i); eval("botao"+i).link=eval("dados_lVars.link"+i) i++; }

Figura132 – Script completo

UTILIZAR O OBJECTO XML

Utiliza-se para carregar, manipular e construir documentos de XML.

Page 353: Flash Mx - Apostila

II.6. OBJECTOS 353

É necessário criar primeiro um construtor new XML() antes de chamar os métodos do objecto. Antes de mais, e visto que estamos a tratar de um assunto relativa-mente recente, vamos falar um pouco da estrutura de um documento XML, através de um exemplo simples: <?xml version="1.0"?> <!DOCTYPE lista de pessoas> <pessoas>

<pessoa codigo=”E345”> <nome>José</nome> <Idade>54</idade>

</pessoa> <pessoa codigo=”F546”>

<nome>Maria</nome> <Idade>32</idade>

</pessoa> </pessoas> Neste exemplo, estamos a transmitir as características – nomeada-mente um código, o nome e a idade - de duas pessoas. Para quem co-nhece o HTML, decerto já notou as semelhanças. Qualquer documento XML, começa pela declaração da versão. De se-guida, a declaração do tipo de documento, que é opcional. A partir daí, surge a descrição dos dados. A estrutura é sempre a mesma. Cada bloco de dados está encarcerado entre uma etiqueta de declaração de início e outra de fim. No exemplo, os dados de cada pes-soa começam pela declaração <pessoa>, e terminam em </pessoa>. Dentro de cada pessoa, estão os dados que lhe pertencem. Se for necessário declarar elementos vazios, usa-se apenas uma eti-queta: <pessoa/>, que é equivalente a <pessoa></pessoa>. Desta estrutura resulta uma hierarquia de dados em “árvore” (figura 133). Cada uma das bifurcações, denomina-se nó (Node no Flash). Aos segmentos de informação chamam-se textos. Cada um dos nós pode conter atributos, ou sub-nós especiais – os de texto, que não contêm

Page 354: Flash Mx - Apostila

354 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

atributos, nem sub-nós. O texto é declarado entre as etiquetas de início e fim. No exemplo, temos o nome e a idade. Os atributos são declarados dentro da etiqueta de início. No exemplo, o código. Os nós são pais (parent) e filhos (child) uns dos outros. Por exemplo, pessoa é filho do documento, mas é pai de nome e idade.

Figura133 – Estrutura de um documento XML

Como exemplo, vamos criar uma agenda em Flash que acede aos dados contidos num ficheiro de XML. O nosso ficheiro encontra-se na mesma pasta do filme e contém a se-guinte estrutura.

Page 355: Flash Mx - Apostila

II.6. OBJECTOS 355

Figura134 – Ficheiro XML

Propriedades do objecto XML que iremos utilizar neste exemplo: xml.load – Verifica se o ficheiro XML foi carregado. xml.firstchild – Referência ao primeiro filho do nó especificado. xml.nextsibling – Refere-se à próxima linha dos filhos do nó especi-ficado. xml.nodevalue – Devolve o texto que se encontra dentro de um nó de texto.

Figura135 – Interface

Na primeira keyframe do filme começamos por criar o construtor: agenda_xml = new XML();

Page 356: Flash Mx - Apostila

356 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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.

Page 357: Flash Mx - Apostila

II.6. OBJECTOS 357

Figura136 – Botões de navegação no documento

Page 358: Flash Mx - Apostila
Page 359: Flash Mx - Apostila

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

Page 360: Flash Mx - Apostila

360 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

O painel PROPERTIES mostra a informação para configurar o compo-nente através da definição dos seus parâmetros. Cada componente é também por si só uma instância e deve-lhe ser atribuído um nome único no filme. Para alterar o aspecto de qualquer um dos componentes, basta alterar os movie clips que se encontram dentro da pasta Component Skins.

Fig139 – Painel Properties com um componente seleccionado

Os componentes podem ser visualizados tal e qual como aparecerão no filme publicado se o modo de visualização Live Preview (CONTROL >

LIVE PREVIEW) estiver activado. No entanto, os componentes não estão operacionais desta forma. Teste-os com o comando CONTROL > TEST MOVIE.

Figura140 – Sem live preview vs Live preview

Existem sete componentes no painel Components.

Checkbox

Permite adicionar caixas de verificação ao documento. As caixas permi-tem escolhas múltiplas. Parâmetros: Change Handler - String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função

Page 361: Flash Mx - Apostila

II.7. COMPONENTES 361

deve estar definida na mesma timeline da checkbox. Este parâmetro é opcional.

Initial Value - Indica se a caixa está ou não seleccionada de início.

Label - Texto que aparece ao lado da caixa.

Label Placement – Indica se o label aparece à direita ou à esquerda da caixa.

Figura141 – Opções Checkbox

ComboBox

Possibilita adicionar menus drop-down com várias opções. Estes menus podem ser editáveis ou estáticos. Cada item da caixa tem um valor, sendo o primeiro equivalente a 0. Parâmetros:

Change Handler - String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função deve estar definida na mesma timeline da checkbox e o nome da com-bobox pode ser aceite como parâmetro.

Data – É um array de strings de texto que especificam os valores as-sociados a cada uma das entradas do menu.

Editable – Determina se a caixa é editável ou não.

Labels – Títulos que surgem para escolha dentro do menu.

Row Count – Número de itens listados no menu.

Figura142 – Opções ComboBox

Page 362: Flash Mx - Apostila

362 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

ListBox

Permite adicionar listas de escolha única ou múltipla. Estas listas podem possuir scrollbars. Parâmetros: Change Handler – String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função deve estar definida na mesma timeline da checkbox. Este parâmetro é opcional e só é necessário incluir se pretendermos que algo aconteça quando um item é seleccionado.

Data – É um array de strings de texto que especificam os valores as-sociados a cada uma das entradas da lista.

Labels – Títulos que surgem para escolha dentro da caixa.

Select Multiple – Especifica se a lista permite ou não escolha múltipla. Se a opção False for seleccionada, a lista não permite escolhas múlti-plas; este é o valor por defeito.

Figura143 – Opções ListBox

PushButton

Adiciona botões simples ao filme. Podem ser associadas actions ao evento onClick. Parâmetros: Click Handler - String de texto que permite indicar a função que deverá ser executada quando o botão é premido.

Label – Títulos que surgem para escolha dentro da caixa.

Page 363: Flash Mx - Apostila

II.7. COMPONENTES 363

RadioButton

Permite adicionar botões de escolha única ao documento. Parâmetros: Change Handler – String de texto que permite indicar a função que deverá ser executada quando o valor do radio button é alterado. A fun-ção deve estar definida na mesma timeline do radio button.

Este parâmetro é opcional e só é necessário incluir se pretendermos que algo aconteça quando um item é seleccionado.

Data – É um array de strings de texto que especificam os valores as-sociados a cada uma das entradas da lista.

Group Name – Especifica a que grupo de botões pertence o botão. Vá-rios botões podem pertencer ao mesmo grupo.

Initial State – Indica se o botão está ou não seleccionado de início.

Label - Texto que aparece ao lado do botão.

Label Placement – Indica se o label aparece à direita ou à esquerda do botão.

Figura144 – Opções ComboBox

Scrollbar

Permite adicionar um scrollbar vertical ou horizontal ao documento. É a forma mais simples de adicionar scrollbars a caixas de texto.

Para adicionar um scrollbar a uma caixa de texto, crie uma caixa de texto do tipo dinâmico ou input. Escolha a opção multiline para poder escrever em várias linhas.

Page 364: Flash Mx - Apostila

364 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

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

Teste o filme.

Figura145 – Scrollbar

Parâmetros:

Horizontal – Especifica se o scrollbar é horizontal ou vertical.

Target text Field – Especifica o nome da instância do campo de texto para o scrollbar. Assim que o scrollbar adere a um campo de texto este campo é preenchido automaticamente.

Figura146 – Opções Scrollbar

ScrollPane

Permite adicionar janelas com scrollbars horizontais e verticais para mostrar movie clips. É especialmente indicado para mostrar muita infor-mação em pouco espaço de documento. Parâmetros:

Drag Content – Indica se o utilizador pode arrastar o conteúdo do pai-nel, ou tem de utilizar as scrollbars.

Page 365: Flash Mx - Apostila

II.7. COMPONENTES 365

Horizontal Scroll – Determina se a barra horizontal está a ser mostrada ou não. O valor por defeito é auto, em que apenas é mostrada se for ne-cessária.

Scroll Content – String de texto que especifica a identificação linkage do símbolo que irá aparecer no painel. Para atribuir o nome de linkage a um símbolo, faça clique com o botão direito do rato sobre o movie clip na biblioteca e escolha a opção Linkage.

Figura147 – Linkage

Vertical Scroll – Determina se a barra vertical está a ser mostrada ou não. O valor por defeito é auto, em que apenas é mostrada se for ne-cessária.

Figura148 – ScrollPane

Depois de configurados os componentes necessitam que seja adicio-nado actionscripting para ficarem a funcionar convenientemente. No Painel Actions encontramos uma categoria totalmente vocacionada para os métodos dos componentes.

Page 366: Flash Mx - Apostila

366 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Figura149

Para exemplo, vamos criar um formulário simples em que o utilizador ao clicar no botão Enviar passa informações através de componentes.

Fig150 – Formulário

Nomes das instâncias: Checkbox = participa Combobox = viagem com três opções:

Maldivas Istanbul Cuba

Radio button 1= Meio_av Radio button 2= Meio_comb Para capturar os valores de todos os campos criamos uma função na timeline do filme e associamos essa função ao botão Enviar. Começamos por nomear a instância do botão e digitamos em Click Handler o nome da função que será chamada quando o botão for premi-do.

Page 367: Flash Mx - Apostila

II.7. COMPONENTES 367

Figura151

Agora na primeira keyframe do filme criamos a função que vai ficar as-sociada ao botão. function clicar (enviar) { } Começamos por recolher os dados da checkbox. Em ACTIONS > FLASH

UI COMPONENTS > FCHECKBOX > METHODS > GETVALUE function clicar (enviar) {

trace(participa.getValue()); } Para recolher os dados do grupo de radio buttons: function clicar (enviar) {

trace(participa.getValue()); trace(RadioGroup.getValue()); } Para recolher o nome do label seleccionado na combobox, acrescen-tamos ainda: function clicar (enviar) {

trace(participa.getValue()); trace(RadioGroup.getValue()); trace(viagem.getSelectedItem().label); } O resultado depois de fazer CONTROL > TEST MOVIE:

Page 368: Flash Mx - Apostila

368 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Fig152 – Resultado

Page 369: Flash Mx - Apostila

Anexo 1. SISTEMA HEXADECIMAL

Este sistema de numeração foi inventado para "simplificar" o trabalho de lidar com números muito grandes.

Nós, humanos, utilizamos um sistema de numeração de base 10, decorrente do facto de termos dez dedos. No nosso sistema, a posição de um determinado algarismo é relevante, ao contrário, por exemplo, dos números romanos onde isto não acontece.

Outra particularidade do nosso sistema de numeração é que cada casa decimal apenas pode variar de 0 a 9. Quando precisamos representar números acima da faixa que uma determinada casa decimal pode repre-sentar, colocamo-la a zero e somamos "um" à casa decimal imediata-mente à esquerda da que estamos a considerar. Assim, se estamos a contar a partir de zero e chegamos a 9 teremos de somar "um" ao dígito imediatamente à esquerda do 9. Como neste caso o 9 também pode ser visto como 09, então devemos passar o 9 a 0 e o 0 a 1, criando assim o número 10.

Imagine o contador de quilómetros de um automóvel. Se o colocar a zero, à medida que o automóvel se desloca, o primeiro dígito da direita sobe progressivamente de 0 a 9, voltando em seguida a 0, e nesta volta causando o incremento do dígito imediatamente à sua esquerda, que passa então de 0 a 1, passando assim a representar o número 10. Processo similar ocorre quando estes dois dígitos atingirem o valor 99 quando então passarão a 00 e acrescentarão 1 ao dígito da esquerda, passando a 100.

Agora pense que o seu contador está a trabalhar na base 16. Ele pode contar de 0 a 15 antes de ter de incrementar 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

Page 370: Flash Mx - Apostila

370 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

deveremos criar “símbolos” para representar todos os algarismos de 0 a 15. Já temos porém os dez primeiros que podemos pedir emprestados à base 10, ou seja, 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para os números de 10 a 15 foi decidido utilizar sequencialmente as letras A, B, C, D, E e F.

Como um algarismo dentro de um determinado número pode ter valores diferentes consoante a sua posição, podemos desmembrar um número de acordo com a sua posição relativa. Então, por exemplo, o número 5.326 pode ser lido como cinco milhares, três centenas, duas dezenas e seis unidades. Se pensarmos bem, um milhar é igual a 10 vezes 10 vezes 10. Da mesma forma, uma centena é igual a 10 vezes 10, sendo logicamente uma dezena igual a 10. Colocando isto de uma maneira que nos facilite a visualização, temos o resultado abaixo:

POSIÇÃO Valor da coluna Pode ser visto como Ou ... MILHAR 1000 10 x 10 x 10 10

3

CENTENA 100 10 x 10 102

DEZENA 10 10 10

1

UNIDADE 1 1 100

Repare que acrescentamos uma terceira coluna com representação em termos de expoentes dos valores. Pode ver que dependendo da posição do algarismo dentro do número o seu expoente assume um valor dife-rente.

Se transportarmos este raciocínio para a base 16, teremos o seguinte resultado:

POSIÇÃO Valor da coluna Pode ser visto como Ou então... “MILHAR” 4096 16 x 16 x 16 16

3

“CENTENA” 256 16 x 16 162

“DEZENA” 16 16 16

1

“UNIDADE” 1 1 160

As posições agora têm aspas porque não fazem mais sentido no novo sistema. Servem apenas para que identifique a posição relativa do alga-ismo de um determinado número.

Page 371: Flash Mx - Apostila

ANEXO 1. SISTEMA HEXADECIMAL 371

Então, se tivermos, por exemplo, o número 2F, podemos descobrir o seu valor na base 10, multiplicando-se o valor que o F tem relativa-mente à sua coluna e somando o valor que o 2 tem na coluna que

ocupa. O F vale 15 e está na coluna zero. Então, 15x160=15 e

2x161=32, logo o número 2F equivale ao nosso número 47.

Por raciocínio análogo, o número ABCD será:

A = 10. Como está na coluna 3 (163) então 10 x 163 = 40.960

B = 11. Como está na coluna 2 (162) então 11 x 162 = 2.816

C = 12. Como está na coluna 1 (161) então 12 x 161 = 192

D = 13. Como está na coluna 0 (160) então 13 x 160 = 13

Somando tudo, o número ABCD vai equivaler a 43.981 na base 10. Como se costuma representar a base em baixo do número, então, ABCD seria escrito ABCD16 e 43981 seria escrito 4398110.

Se o seu problema é converter da base 10 para a base 16, então deverá dividir em vez de multiplicar.

Tomemos por exemplo o número 4.000. Se fizermos uma primeira divisão deste número pelo 16 (da base) chegaremos ao valor de 250, obtendo 0 de resto. Se usarmos o número 250 e o dividirmos novamente por 16, obteremos 15 e 10 de resto. Veja o diagrama abaixo:

Page 372: Flash Mx - Apostila

372 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃ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 é FA016.

Page 373: Flash Mx - Apostila

Anexo 2. WEB COLORS

Em informática, as cores são representadas por combinações de 3 co-res básicas: vermelho, verde e azul. As placas de vídeo permitem que cada uma destas cores possa ter valores que vão de de 0 a 255, sendo 0,0,0 o negro e 255, 255, 255 o branco.

No início do desenvolvimento para a Web, ainda eram muitos os com-putadores capazes de representar apenas 256 cores diferentes no ecrã. Utilizavam então as famosas placas de vídeo de 8 bits1.

Começou-se a notar então que as cores não eram mostradas da mes-ma forma quando vistas em diferentes computadores, browsers, siste-mas operativos, etc.

Resolveu-se fazer uma comparação para descobrir quais destas cores seriam exactamente as mesmas, independentemente do sistema utiliza-do.

Utilizou-se o Netscape como padrão, para fazer essa comparação, já que era o browser mais utilizado na altura e o que existia para todos os principais sistemas operativos de então. Chegou-se à conclusão de que apenas 216 das 256 cores possíveis pareciam iguais em todos os sis-temas.

Foi criada uma paleta com estas 216 cores que ficou com o nome de “Web Colors”. Às vezes também conhecidas por “Web-Safe Colors”, “safe colors” ou “Netscape Colors”, e estão disponíveis em programas profissionais de design gráfico e em editores HTML.

1 Como um bit possui dois estados possíveis, ou seja, 0 ou 1, então 8 bits possuem 256 estados possíveis, uma vez que 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256.

Page 374: Flash Mx - Apostila
Page 375: Flash Mx - Apostila

Anexo 3. EXTENSION MANAGER como instalar as extensões

adicionais ao Flash MX

Para poder instalar as extensões adicionais no seu Flash MX, a primeira coisa a fazer é instalar no seu computador o programa Extension Mana-ger (que tal como as extensões estão disponíveis para download gratui-to no site da Macromedia).

Corra então o programa de instalação “Ext_Manager_Install_En.exe” (no MAC, “Ext_Manager_Install_hqx”) no seu computador. Terminada a instalação corra o programa Extension Manager1, que por defeito é ar-mazenado no mesmo directório do Flash. Assim que o fizer verá a ima-gem abaixo.

1 Certificando-se de que não tem o Flash MX aberto.

Page 376: Flash Mx - Apostila

376 CENTRO ATLÂNTICO – COLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO

Vá a FILE > INSTALL EXTENSIONS e escolha primeiro o ficheiro “MX365880_FUIComponentsSet2.mxp2” que corresponde ao FLASH MX UI COMPONENTS SET 2 e carregue no botão INSTALL.

Verá a seguir uma janela a perguntar se aceita as condições para a instalação. Carregue em ACCEPT e as extensões serão instaladas no seu computador. Repita o procedimento para as extensões FLASH CHARTING COMPONENTS, cujo ficheiro chama-se “MX377283_Char-tingComponents.mxp”.

Ao terminar a instalação, o seu EXTENSION MANAGER mostrará na janela principal uma lista daquilo que acabou de instalar. Veja a figura abaixo.

2 As extensões existem em versões diferentes para o Flash MX de PC e para o de MAC. Apesar disso, têm os mesmos nomes.

Page 377: Flash Mx - Apostila

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.

Page 378: Flash Mx - Apostila
Page 379: Flash Mx - Apostila