Flash Mx - Apostila
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 56,922
- Pages: 379
Flash MX Design, Animação e Programação
Anabela Gonçalves e Magno Urbano
Flash MX Design, Animação e Programação
Portugal/2002
Reservados todos os direitos por Centro Atlântico, Lda. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa dos editores da obra.
FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO Colecção: Tecnologias Autores: Anabela Gonçalves e Magno Urbano
Direcção gráfica: Centro Atlântico Revisão: Nuno Ricardo e Centro Atlântico Capa: Paulo Buchinho
© Centro Atlântico, Lda., 2002 Ap. 413 - 4764-901 V. N. Famalicão Porto - Lisboa Portugal Tel. 808 20 22 21
[email protected] www.centroatlantico.pt
Fotolitos: Centro Atlântico Impressão e acabamento: Inova 1ª edição: Junho de 2002
ISBN: 972-8426-53-4 Depósito legal: 181.663/02
Marcas registadas: todos os termos mencionados neste livro conhecidos como sendo marcas registadas de produtos e serviços, foram apropriadamente capitalizados. A utilização de um termo neste livro não deve ser encarada como afectando a validade de alguma marca registada de produto ou serviço. O Editor e os Autores não se responsabilizam por possíveis danos morais ou físicos causados pelas instruções contidas no livro nem por endereços Internet que não correspondam às Home-Pages pretendidas.
ÍNDICE Iª PARTE: DESIGN E ANIMAÇÃO NO MACROMEDIA FLASH MX NOVAS FUNCIONALIDADES DO FLASH MX ............................... 15 1. Workflow ...............................................................................15 Área de trabalho flexível e intuitiva .........................................15 Melhorias ao nível da timeline ................................................16 Distribute to Layers ...............................................................16 Suporte para versões anteriores do Flash .............................17 Suporte para diversos Sistemas Operativos .........................17 2. Ferramentas para o designer ...............................................18 Free transform tool ................................................................18 Fill Transform tool ..................................................................18 Pixel Snapping ......................................................................19 Gestão e selecção de cores..................................................19 Máscaras dinâmicas .............................................................19 3. Suporte Multimedia ...............................................................19 Suporte vídeo ........................................................................19 Carregamento dinâmico de som e imagens ..........................20 4. Texto .....................................................................................20 Substituição de fontes em falta ..............................................20 Colocação de texto na vertical ...............................................21 Suporte Multilingue ................................................................21 5. Recursos de ajuda ................................................................22 Templates .............................................................................22 Painel Answers .....................................................................22 Exemplos e tutoriais ..............................................................23 6. Publicação e navegação ......................................................23 Desenvolvimento de conteúdo acessível ...............................23 Suporte em ambientes diferenciados ....................................23 Named Anchors ....................................................................23 Compressão SWF melhorada ...............................................24 Empenhamento na minimização do Flash Player ..................24 7. Painel Actions melhorado .....................................................24 Edição do Actionscript mais fácil ...........................................24 Editor parametrizável ............................................................25 Dicas de código (code-hinting) e preenchimento automático 26
6
FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO
Painel de referência ..............................................................26 Funcionamento interno melhorado .........................................26 Debugger melhorado ............................................................27 8. Novos comandos Actionscript ...............................................27 SetInterval e ClearInterval ......................................................27 Novo modelo de objectos e eventos ......................................27 Instrução Switch ....................................................................28 Controlo dinâmico do layout do filme ....................................28 Objectos TextField e Button ...................................................28 Drawing API ..........................................................................28 Controlo de som melhorado ..................................................29 Componentes .......................................................................29 9. Links Interessantes ...............................................................30 Documentação e Recursos ...................................................30 A não perder .........................................................................30
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS ........................................ 31 A interface gráfica ....................................................................32 Default Layout ........................................................................33 Arrow Tool ................................................................................34 Subselection Tool .....................................................................35 Line Tool ...................................................................................36 Solid (sólido) ..........................................................................38 Dashed (tracejado) ................................................................38 Dotted (ponteado) ..................................................................39 Ragged (irregular) ..................................................................39 Stipple (pontilhado) ................................................................40 Hatched (tracejado) ................................................................41 Lasso Tool ................................................................................43 Pen Tool ...................................................................................44 Text Tool ...................................................................................46 Escolha do tipo de texto .........................................................48 Static Text............................................................................48 Espaçamento de caracteres ............................................49 Tipo de letra e tamanho ....................................................49 Posição dos caracteres ...................................................49 Ajuste de cor, negrito e itálico ...........................................50 Direcção do texto e opções de alinhamento .....................50
ÍNDICE
7
Opções de rotação ..........................................................51 Opções de formatação ....................................................54 Auto Kern .........................................................................55 W, H, X e Y .......................................................................55 URL .................................................................................55 Alvo da URL .....................................................................55 O texto pode ser seleccionado? .......................................56 Use device fonts...............................................................56 Tipo de linha .....................................................................57 Dynamic Text .......................................................................57 Botão HTML .....................................................................59 Mostrar borda ..................................................................60 Input Text .............................................................................61 Tipo de linha .....................................................................61 Oval Tool & Rectangle Tool .......................................................61 Gradientes ...............................................................................66 Gradiente linear .....................................................................66 Gradiente radial .....................................................................67 Pencil Tool ................................................................................70 Brush Tool ................................................................................71 Free Transform Tool ..................................................................75 Envelope ................................................................................76 Subtracção de formas ............................................................78 União de formas ....................................................................80 Fill Transform Tool .....................................................................82 Ink Bottle Tool & Paint Bucket Tool ............................................83 Eyedropper Tool .......................................................................86 Eraser Tool ...............................................................................86 Hand Tool .................................................................................88 Zoom Tool ................................................................................88 Color Swatches ........................................................................89
I.2. OS MENUS ........................................................... 93 Os Menus e suas funções .........................................................93 FILE .......................................................................................93 New From Template ............................................................93 Open As Library ..................................................................96 Import & Export Movie .........................................................97 Quicktime .........................................................................97
8
FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO
Freehand .........................................................................99 Publish Settings ................................................................101 Opção Formats – Janela Publishing ...............................102 Opção Flash – Janela Publishing ...................................103 Opção HTML – Janela Publishing...................................105 Publish ..............................................................................107 VIEW ...................................................................................108 GoTo .................................................................................108 Zoom In, Zoom Out e Magnification ...................................108 Outlines, Fast, Antialias, Antialias Text ...............................108 Rulers, Grid e Guides ........................................................109 MODIFY ............................................................................... 112 Shape - Soften Fill Edges ................................................. 112 Convert Lines to Fills ......................................................... 114 Expand Fill ........................................................................ 115 Smooth ............................................................................. 115 Straighten .......................................................................... 116 Optimize ........................................................................... 117 Trace Bitmap .................................................................... 118 Transform ..........................................................................121 Arrange .............................................................................122 Align .................................................................................123 Group & Ungroup ..............................................................127 Break Apart .......................................................................127 Distribute to Layers ...........................................................128
I.3. LAYERS, TIMELINE e ANIMAÇÃO ..................... 129 Layers .....................................................................................129 Olho, Cadeado e Quadrado Colorido ......................................132 Olho (show/hide layer)..........................................................133 Cadeado (lock/unlock layer) .................................................133 Quadrado colorido (show layer as outline)............................134 O Timeline..............................................................................135 Keyframes - representação no timeline................................136 ActionScript – representação no timeline ............................137 Labels – representação no timeline .....................................137 A Animação frame-a-frame .....................................................139 A Animação Motion Tween ......................................................144 Ease In & Ease Out (o controlo do movimento) ........................147
ÍNDICE
9
Como é que o Flash interpreta uma animação? ......................150 Animação de formas (shape animation) ..................................153 Shape Hints ............................................................................156 Criação do Shape Hint... ......................................................158 Animação com Motion Guide ..................................................162 Máscaras ................................................................................166 Layer do tipo Guide..............................................................171 Layer de som .......................................................................171 Effect (efeitos sonoros) .....................................................172 Sync (tipo de sincronismo de som)....................................175 Event..............................................................................175 Start ...............................................................................176 Stop ...............................................................................176 Stream ...........................................................................176 Como testar as suas animações .............................................177 Bandwidth Profiler ..........................................................178
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS ........... 181 As suas próprias bibliotecas ..................................................181 Graphics, Button e Movie Clips ...............................................183 Graphic (gráficos) ...................................................................185 Button (botão) .........................................................................186 Movie Clips ............................................................................189 Efeitos de Cor e Transparência ..............................................191 Brightness .........................................................................192 Tint ....................................................................................192 Alpha ................................................................................193 Advanced ..........................................................................193 Bibliotecas do Flash ...............................................................194 Buttons .................................................................................195 Arcade Buttons .................................................................195 Circle Buttons....................................................................196 Component Buttons ...........................................................196 Key Buttons .......................................................................198 Knobs & Faders ................................................................198 Ovals.................................................................................199 Playback ...........................................................................199 Push Buttons .....................................................................200 Sounds ................................................................................200
10
FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO
I.5. COMPONENTES ................................................. 201 CheckBox ...............................................................................202 RadioButton ............................................................................203 PushButton..............................................................................203 ListBox ....................................................................................204 ComboBox..............................................................................205 ScrollPane ..............................................................................206 ScrollBar .................................................................................209 Actions (ActionScript) .............................................................213 Objectos encapsulados .......................................................213
I.6. COMPONENTES AVANÇADOS ......................... 215 Flash UI Components Set 2 ....................................................215 Calendar ..............................................................................215 DraggablePane ...................................................................219 IconButton ............................................................................223 MessageBox ........................................................................225 SplitView ..............................................................................228 Ticker ...................................................................................235 Tree .....................................................................................238 ProgressBar ........................................................................ 239 Flash charting components .....................................................240 Bar Chart ................................................................................240 Line Chart ..............................................................................243 Line Chart – Layout Options ..............................................244 Line Chart – Chart Event Handlers ....................................246 Line Chart – Category Labels............................................247 Line chart – data values.....................................................247 Pie Chart ................................................................................248 Pie Chart – Layout options ................................................249 Pie Chart – Pie Colors ......................................................250
ÍNDICE
11
IIª PARTE: A PROGRAMAÇÃO NO MACROMEDIA FLASH MX
II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS ................................. 253 Linguagens Processuais ou Procedimentais ..........................253 Linguagens Orientadas por Objectos......................................253
II.2. CONCEITOS BASE ........................................... 257 Dot sintax versus Slash sintax .................................................257 Terminologias utilizadas no Actionscripting .............................258 Painel Actions ........................................................................260 Inserir uma Action .................................................................261 Alternar entre modos no painel Actions ................................263 Navegar entre scripts num documento ..................................263 Para apagar uma action .......................................................264 Visualizar a numeração para as linhas de código .................265 Imprimir Actions ...................................................................265 Painel Reference .................................................................265 Para visualizar o painel Reference .......................................266 Para alterar a dimensão da fonte no painel Reference .........266 Associar actions na timeline ................................................266 Associar actions a símbolos ................................................267 Eventos ..................................................................................267 Eventos associados a botões ..............................................268 Eventos de movie clips ........................................................268
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO ...................................................... 271 Criar links para páginas HTML ............................................273 Carregar filmes de Flash externos ........................................276 Controlar ficheiros executáveis com o fscommand ..............280 Símbolos ..............................................................................282 Atribuir nomes a instâncias de movie clips ou botões ..........284 Caminhos relativos e absolutos ............................................285 Caminhos absolutos ............................................................285
12
FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO
Caminhos relativos ..............................................................285 Controlar instâncias de símbolos ..........................................286 Propriedades dos movie clips .............................................288 Métodos mais utilizados nos movieclips ..............................290 DuplicateMovieClip e RemoveMovieClip ..........................292 LoadMovie e Unload Movie ...............................................295 GetBytesLoaded e GetBytesTotal......................................297
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO .......................................... 301 Sintaxe do Actionscripting ....................................................301 Variáveis ................................................................................303 Data Types ...........................................................................303 Scope da variável ................................................................305 Variáveis locais .................................................................305 Variáveis de Timeline .......................................................305 Variáveis Globais ..............................................................305 Declarar variáveis ................................................................305 Testar o valor das variáveis ..................................................308 Operadores .........................................................................309 Prioridade dos operadores ...............................................309 Tipos de operadores .........................................................309 Condição If ...........................................................................312 Condição CASE ..................................................................319 Ciclo For ..............................................................................320 Ciclo While ...........................................................................323
II.5. FUNÇÕES .......................................................... 329 Função Number ......................................................................330 Função getTimer ....................................................................330 Função getVersion .................................................................330 Função boolean......................................................................331 Função string ..........................................................................331 Função escape ......................................................................332 Função getProperty ................................................................332 Função targetPath ..................................................................332 Função unescape ...................................................................332 Função isFinite .......................................................................333
ÍNDICE
13
Função isNaN ........................................................................333 Função parseFloat .................................................................333 Função parseInt ......................................................................333 Definir funções .......................................................................334
II.6. OBJECTOS ........................................................ 337 Aceder às propriedades de um objecto ..................................337 Invocar o método de um objecto .............................................338 Objectos da categoria core ....................................................338 Utilizar o objecto date ..........................................................338 Utilizar o objecto array .........................................................339 Utilizar o objecto math > método max ..................................340 Utilizar o objecto math > método min ...................................341 Utilizar o objecto math > método pi ......................................341 Utilizar o objecto math > método round ................................341 Utilizar o objecto math > método random .............................341 Utilizar o objecto math > método sqrt ...................................342 Objectos da categoria movie ..................................................342 Utilizar o objecto color .........................................................342 Utilizar o objecto movieclip > método hittest ........................344 Utilizar o objecto sound .......................................................345 Utilizar o objecto capabilities ...............................................347 Objectos da categoria client/server .........................................349 Utilizar o objecto loadvars ...................................................349 Utilizar o objecto XML .........................................................352
II.7. COMPONENTES................................................ 359 Checkbox ...............................................................................360 ComboBox .............................................................................361 ListBox ...................................................................................362 PushButton .............................................................................362 RadioButton ............................................................................363 Scrollbar .................................................................................363 ScrollPane ..............................................................................364 Anexo 1. SISTEMA HEXADECIMAL.............................................369 Anexo 2. WEB COLORS ................................................................373 Anexo 3. EXTENSION MANAGER: como instalar as extensões adicionais ao Flash MX ......................375
14
FLASH MX: DESIGN, ANIMAÇÃO E PROGRAMAÇÃO - CENTRO ATLÂNTICO
Novas funcionalidades do Flash MX Por Nuno Ricardo 1
Este documento pretende dar a conhecer as principais novidades do Macromedia Flash MX em relação às versões anteriores. Foi baseado parcialmente em documentos oficiais da Macromedia e na opinião pessoal do autor desta introdução.
1. Workflow Área de trabalho flexível e intuitiva Os produtos da Macromedia sempre tiveram muitas paletas de trabalho diferentes, com a possibilidade de serem organizadas ao gosto do utilizador, mas eram frequentes as críticas à dificuldade de gestão da área de trabalho. Nesta versão do Flash, a melhoria é significativa neste aspecto. Com outra forma de as paletas se expandiram e se agruparem nos extremos do ecrã, trabalhar com o Flash deixou de ser stressante. Outra melhoria muito bem vinda é uma paleta de propriedades ao estilo do Dreamweaver. As suas opções variam consoante o objecto seleccionado, condensando múltiplas paletas numa só, poupando espaço de trabalho precioso.
1
Nuno Ricardo é o único Flash 5 Developer registado em Portugal
16
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Melhorias ao nível da timeline Da versão 4 para a 5 foram introduzidas alterações na forma como se controlavam as frames e keyframes na timeline. Estas não foram bem aceites pelos utilizadores, preferindo muitos a versão 4 à 5 neste aspecto. Na versão MX, voltou-se atrás no tempo. Trabalhar com a timeline é quase igual ao que era na versão 4, indo de encontro ao que quase todos os utilizadores pediam. Uma novidade nesta versão MX foi a introdução de pastas de layers. Estas permitem agrupar layers, como conseguíamos fazer antes para os símbolos na Library. Torna-se assim mais fácil trabalhar com filmes complexos a nível de design.
Distribute to Layers Se tivermos um grupo de objectos numa layer, e pretendermos fazer animações independentes para cada um deles, é necessário colocá-los em layers também elas independentes. Um objecto em cada layer. O novo comando Distribute to Layers’ faz isso automaticamente, e ainda atribui o nome a cada uma das layers criadas, poupando tempo e trabalho aos designers.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
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 informa quais as actions que são ’proibidas’ assinalando-as a amarelo no painel Actions.
Suporte para diversos Sistemas Operativos O Flash MX já suporta Windows XP e Mac OS X, além de todos os outros sistemas operativos habituais: Mac OS 9.1 (ou posterior), Windows 95, Windows 98 SE, Windows Me, Windows NT4 e Windows 2000.
18
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
2. Ferramentas para o designer
Free transform tool
A nova ferramenta permite, mais facilmente que antes, mudar o tamanho, rodar e distorcer elementos gráficos. Com as variantes shape distort e envelope distort, o designer consegue libertar a sua criatividade como antes não era possível.
Fill Transform tool Outra ferramenta que se tornou independente é a de transformação de preenchimentos. Permite-nos modificar os preenchimentos em degrade ou padrões. Embora esta ferramenta já existisse, estava bastante menos acessível.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
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 alinhamento de objectos ao nível do pixel. Desta forma, evitamos efeitos de antialiasing que podem ser prejudiciais à qualidade dos contornos das formas.
Gestão e selecção de cores Também alvo de algumas críticas, o Color Mixer foi transformado de forma a facilitar o seu uso.
Máscaras dinâmicas Agora, podem-se construir dinamicamente máscaras. Desde o desenho até à activação da máscara, tudo pode ser controlado por Actionscript dando mais poder ao utilizador sobre esta importante característica do Flash.
3. Suporte Multimedia
Suporte vídeo Utilizando o codec Sonrenson Spark embebido dentro do player da versão 6, é possível inserir vídeos dentro de ficheiros SWF.
20
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
O Flash suporta a importação de vídeos nos formatos AVI, MOV, DV e MPEG. Depois de inserido, é possível tratar um vídeo como qualquer outro objecto: Mudar o tamanho, rodar, distorcer, mascarar, e controlar o seu andamento através de actionscripting.
Carregamento dinâmico de som e imagens Antes era possível carregar filmes externos, desde que gravados em formato SWF. Agora, é também possível carregar imagens em formato JPEG e som em formato MP3, abrindo um novo caminho aos sites que dependem de actualizações frequentes de conteúdo.
4. Texto
Substituição de fontes em falta Tal como acontecia em alguns programas de design gráfico, agora quando se abre um filme num computador que não possui as fontes necessárias, o Flash avisa de tal facto, e dá a hipótese de criar um mapeamento da fonte em falta para outra semelhante.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
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 Unicode, permite a visualização de textos em línguas em que antes não era possível com o Flash. Permite também uma mais fácil compatibilidade com aplicações externas que ‘falem’ Unicode, tal como com algumas aplicações de gestão de conteúdos.
22
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
5. Recursos de ajuda
Templates Não só para ajudar um principiante, mas também para facilitar a criação repetitiva de filmes com conteúdo semelhante, os Templates, já conhecidos dos utilizadores de outras aplicações, estão também disponíveis no Flash MX.
Painel Answers Outra facilidade de ajuda – o Painel Answers, permite o acesso rápido a dicas e recursos, com actualização via Internet.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
23
Exemplos e tutoriais Já incluídos nas versões anteriores, estes tornam-se cada vez melhores.
6. Publicação e navegação Desenvolvimento de conteúdo acessível A acessibilidade dos conteúdos a indivíduos com necessidades especiais é um tema que tardiamente começou a ser tomado em conta. O Flash suporta agora ferramentas como os leitores de ecrã. É possível adicionar ajudas aos filmes para serem interpretadas por essas ferramentas.
Suporte em ambientes diferenciados O desenvolvimento de conteúdo em Flash garante-nos que este vai estar acessível em diversos meios de comunicação tão diferenciados como os PC’s com diferentes sistemas operativos, WebTV, Pocket PC, PDA e outros. A Macromedia está absolutamente empenhada em tornar cada vez mais abrangente o Flash Player no que toca a plataformas existentes e futuras.
Named Anchors As Named Anchors já são amplamente usadas em HTML, para facilitar a navegação num site. Agora, também dentro de um filme Flash é possível utilizar esta ferramenta, de forma a que o utilizador possa navegar utilizando o botão Back e Forward do browser.
24
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Compressão SWF melhorada O Flash MX possui novos algoritmos de compressão de conteúdo, direccionados à optimização de filmes com utilização intensiva de Actionscript.
Empenhamento na minimização do Flash Player Como é sabido, cada nova versão do Flash obriga a que todos os clientes da Internet façam o download da nova versão do player. Tendo consciência disso, a Macromedia empenha-se em minimizar ao máximo a duração do download. Nesta versão, embora o player tenha obrigatoriamente crescido, devido ao suporte vídeo, manteve-se nuns simpáticos 380 Kb. Pouco mais de 1 minuto de download para um modem de 56 Kbps.
7. Painel Actions melhorado
Edição do Actionscript mais fácil Embora exista o modo Normal e Expert de edição de Actionscript, é no segundo modo que se conseguem aproveitar todas as capacidades desta poderosa linguagem. É também em Expert Mode que se sentem as grandes melhorias ao nível de edição. Codificação por cores, ajudas sensíveis ao contexto, opções de procura e substituição, guia hierárquico do código, com suporte Drag-and-Drop, e um excelente material de consulta fazem o processo de aprendizagem tornar-se simples e dão preciosas ajudas mesmo a peritos em actionscripting.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
Editor parametrizável
Algumas das ajudas disponíveis, tais como a codificação em cores, a autoformatação e mesmo o conteúdo do painel Actions, são parametrizáveis, para que se adaptem ao gosto e forma de trabalho do utilizador.
25
Dicas de código (code-hinting) e preenchimento automático Enquanto se está a escrever o código, o Flash detecta o tipo de objecto que estamos a utilizar, e lista numa caixa drop-down os métodos, propriedades e eventos para esse objecto. É possível, a partir dessa lista, utilizando a tecla TAB, o preenchimento automático da instrução seleccionada. Aparecem ainda referências aos parâmetros necessários ao completar da instrução.
Painel de referência Se ainda assim persistirem dúvidas sobre o funcionamento de alguma instrução, basta seleccioná-la e, pressionando SHIFT+F1, aparece no painel Reference a explicação relativa à instrução.
Funcionamento interno melhorado Alguns dos objectos mais utilizados (Number, Boolean, Object, String, Array e XML) foram melhorados, funcionando cerca de 100 vezes mais rápido.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
27
Debugger melhorado A detecção de erros de código é agora mais fácil. O debugger foi melhorado, tendo agora novas capacidades como os breakpoints.
8. Novos comandos Actionscript SetInterval e ClearInterval Estes comandos servem para estabelecer uma rotina que é executada periodicamente, durante o filme, em alternativa ao uso de loops em timelines. Novo modelo de objectos e eventos Novos objectos, novos eventos associados não só aos botões e movieclips, mas a quase todos os objectos, permitem que seja mais fácil associar código a cliques do rato ou a teclas, ao load e unload de dados de vários tipos, ao redimensionar da janela do Flash, etc.
28
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Instrução Switch Anteriormente, a única instrução condicional era o IF, que embora fosse eficiente, em muitos casos se existissem múltiplas hipóteses a testar tornava-se pouco prático. Para resolver este problema, surge a instrução SWITCH. Já existente noutras linguagens segue um estilo sintáctico muito semelhante ao Javascript, tal como todo o Actionscript a partir da versão 5.
Controlo dinâmico do layout do filme Através do novo objecto Stage, é possível aceder e controlar algumas propriedades do layout do filme, tais como a altura e largura do filme, o Scale Mode, ou saber quando o filme é redimensionado.
Objectos TextField e Button Todas as propriedades inerentes às caixas de texto, como o Word Wraping, o modo password, multiline, alinhamento do texto e o próprio formato de texto são controláveis dinamicamente por Actionscript através dos objectos TextField e TextFormat. Também o comportamento de um botão, como a ordem de tabulação, o bloqueamento, e até as actions associadas a este, são controláveis por Actionscript utilizando o objecto Button.
Drawing API Esta API, dentro do objecto MovieClip, permite-nos desenhar qualquer forma utilizando apenas Actionscript. É possível, por exemplo, desenhar gráficos de qualquer tipo (barras, circular, linhas, etc.) com dados que se carregam dinamicamente de um sistema de back-office.
NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX
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 duration e position, que permitem um controlo de som muito mais rico.
Componentes Com os componentes pré-definidos é possível criar formulários com botões de selecção, caixas drop-down, caixas de selecção múltipla, etc. Existem também componentes para facilmente se adicionar scrollbars a caixas de texto. A área de componentes é completamente personalizável, existindo algumas empresas que se dedicam à produção de componentes para diversos fins. No site www.macromedia.com/exchange é possível encontrar alguns destes componentes, puxá-los e instalá-los utilizando o Macromedia Extension Manager, incluído no Flash.
30
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
9. Links Interessantes
Documentação e Recursos • www.macromedia.com/software/flash/productinfo/features/index.ht ml#detailed • www.macromedia.com/desdev/mx/flash • www.macromedia.com/exchange • www.sorenson.com • www.flashkit.com • www.flash4all.com • www.flashthief.com • www.flashworker.com • www.actionexchange.com
A não perder • • • • • • • • • • • • • •
www.spiritonin.com www.spiritonin.com/stuff/capoeiragame.html www.electronicorphanage.com/biennale/works/fight.swf www.yugop.com www.m -designers.com www.2advanced.com www.cubadust.com www.habbohotel.com www.wmteam.com www.andyfoulds.com.uk www.estudio.com www.derbauer.de www.shocker.de www.symmetrylab.com
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
O Flash MX é um programa produzido pela empresa Macromedia (www.macromedia.com ) que permite a produção de páginas para a Internet e de aplicações para distribuição pela Internet ou por qualquer outro tipo de media como CD-ROM, DVD-ROM, etc. O Flash MX permite construir páginas de Internet completas e não apenas as partes animadas. Permite elaborar sites que contenham interacções com os utilizadores, de forma animada, com uma interface gráfica sofisticada, sons e outros elementos multimedia. Para que seja possível visualizar sites em Flash correctamente, é preciso que o software que permite a navegação na Internet (browser) tenha um programa (plug-in) instalado para esse fim. Normalmente, os principais browsers já vêm configurados correctamente. Segundo a Macromedia, 98,3% das pessoas que navegam na Internet estão aptas a ver páginas em Flash. Caso o seu browser não esteja apto a visualizar páginas em Flash, a solução é visitar o site da Macromedia, escolher a opção SHORTCUTS dentro do item DOWNLOADS no menu superior esquerdo e então escolher a opção que diz Flash PLAYER DOWNLOAD. Verá então que surgirá o link para download da versão do Flash Player adequada ao seu browser (automaticamente o site da Macromedia detecta que browser está a utilizar e mostra-lhe apenas a versão adequada). 1
1
Existem diversas versões do FLASH Player disponíveis no site da Macromedia, cada qual
adequada a um tipo de browser e/ou sistema operativo (Netscape, Explorer ou Mozilla para Windows, MacOS ou Linux).
32
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Enquanto que na construção de um site normal para a Internet temos que escrever uma série de ficheiros em HTML, num site em Flash temos que elaborar uma série de elementos gráficos, já que normalmente um site deste tipo está contido num número sensivelmente menor de ficheiros. Uma vez pronto, um site em Flash lembra muito a construção de um programa numa qualquer linguagem de programação, onde se tem uma aplicação principal que corre e que pode ou não ter aplicações externas que venha a executar de acordo com as acções do utilizador.
A interface gráfica Logicamente, a primeira parte a abordar neste livro refere-se à interface gráfica do Macromedia Flash MX, para que possa conhecer os cantos à casa, significativamente modificados em relação à versão anterior. A primeira diferença que se nota na interface, ao correr o Flash MX, em comparação com as versões anteriores, é que as suas janelas estão todas encaixadas umas nas outras e podem ser destacadas para se tornarem independentes e encaixadas novamente no todo. Outra diferença que verificará é que a interface pode ser configurada consoante o perfil do utilizador: designer, utilizador genérico (general) ou programador (developer). Para proceder à escolha vá ao menu WINDOW > PANEL SETS e verá sete opções: DEFAULT LAYOUT, três opções de resolução para DESIGNER e três para DEVELOPER. Estes ajustes pré-definidos arrumam as diversas janelas de propriedades do Flash de acordo com aquilo que se entende necessário estar visível ou não para um determinado perfil. Pode-se entender mais facilmente esta explicação quando se vê que o Flash possui diversas janelas de propriedades e que nem todas são necessárias para todos os tipos de utilizador.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
33
No tipo DESIGNER, por exemplo, estão visíveis as seguintes janelas na interface: TOOLS, TIMELINE, PROPERTIES, INFO, ALIGN, TRANSFORM, COLOR MIXER, COLOR SWATCHES, COMPONENTS e ANSWERS. Já no tipo DEVELOPER estão visíveis as janelas TOOLS, TIMELINE, ACTIONS, REFERENCE, PROPERTIES, COLOR MIXER, COLOR SWATCHES e ANSWERS. Vemos que esta combinação faz sentido para ambos os tipos, já que para um programador, por exemplo, não há a necessidade de ter visível na interface a janela que lhe permitiria fazer transformações ou mudar o alinhamento de objectos.
DEFAULT LAYOUT Começaremos então por escolher o tipo DEFAULT LAYOUT, o qual modificará a interface para que fique conforme a figura abaixo.
34
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Não se preocupe se não conseguir ler os elementos contidos na imagem, devido ao seu tamanho reduzido. Usaremos a imagem apenas como referência e vamos abordar cada parte desta em separado. Se olharmos para o lado esquerdo da interface do Flash, veremos a barra de ferramentas (Tools) vista na figura ao lado.
Arrow Tool Na parte de cima da barra de ferramentas pode ver duas setas, uma preta e uma branca. A primeira (Arrow Tool2), quando accionada, coloca o programa em modo de selecção de objectos. Neste modo, poderá seleccionar os objectos criados, como por exemplo, círculos, quadrados, elipses, etc. Esta ferramenta também poderá ser utilizada para fazer modificações nas formas dos objectos criados. Poderá utilizá-la para fazer modificações nas curvaturas das linhas que formam os objectos.
Veja as próximas figuras. Desenhamos uma recta horizontal, escolhemos a ferramenta Arrow Tool, e com o cursor do rato arrastamos um ponto arbitrário no meio da recta, para cima.
2
Para ter maior coerência essa ferramenta ao nosso ver deveria chamar-se “selection tool”, já que
a ferramenta seguinte e que a complemente chama-se “subselection tool”.
35
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS ANTES
DEPOIS
Subselection Tool Se escolher a segunda das duas setas na barra de ferramentas, ou seja, a Subselection Tool, colocará o programa em modo de selecção de sub-objectos, o que lhe permitirá seleccionar os elementos componentes dos objectos em si, como por exemplo, os pontos que formam um círculo. Veja a figura abaixo.
o objecto “círculo”
os pontos que o formam...
Se estiver no modo de selecção de sub-objecto poderá seleccionar um ponto componente da forma de um objecto (vértice) e movê-lo para outro sítio, e então criar novas formas. Também poderá seleccionar e mover os “nodes” dos vértices, responsáveis pelo controlo da curvatura do segmento ao qual este pertencem. Veja a figura a seguir.
36
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para activar um vértice e poder modificar a sua posição ou node basta seleccionar a ferramenta Subselection Tool e carregar com o rato em cima da região onde está o vértice. Caso não saiba onde o vértice está seleccione com esta mesma ferramenta uma região à volta do ponto onde pensa existir um vértice. Se de facto existir algum vértice na região da curva que marcou, estes e os seus nodes ficarão visíveis. Então poderá arrastá-los para outros sítios e modificar a aparência da forma.
Line Tool Logo a seguir na barra de ferramentas, a ferramenta para criação de linhas (Line Tool), representada pelo ícone de uma linha recta em diagonal. Para criar uma linha, seleccione o Line Tool, carregue com o rato na área de desenho, mova o cursor para outro sítio e liberte o botão do rato. Se usar o SHIFT enquanto desenha, poderá fazer linhas horizontais, verticais ou a 45º.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
37
Depois de criada a linha, pode modificar os seus parâmetros na janela de propriedades, encontrada na parte inferior do ecrã. Veja a figura abaixo.
Nesta janela poderá mudar a cor da linha ao carregar na caixa colorida (Stroke Color), a espessura (Stroke Height), na seta para baixo ao lado do número e o estilo (Stroke Style) se carregar na caixa com a palavra SOLID (figura acima).
Estão disponíveis diversos estilos de linha, tracejadas, pontilhadas, sólidas, etc. Também poderá carregar no botão CUSTOM e fazer ajustes mais detalhados. Ao abrir a janela vai ver uma caixa nomeada TYPE (tipo) de onde pode regular os estilos.
38
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SOLID (SÓLIDO) O primeiro estilo disponível é o SOLID (sólido), onde a linha tem uma aparência contínua. Este estilo permite apenas regular a espessura (THICKNESS) e fornece uma caixa com a frase SHARP CORNERS, que quando marcada produz linhas com cantos em bico.
DASHED (TRACEJADO) O primeiro estilo disponível a seguir ao SOLID é o DASHED (linha tracejada), que fornece a seguinte janela para ajuste.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
39
Nas duas caixas a seguir a DASH poderá regular, respectivamente, o tamanho de cada segmento do tracejado e do espaçamento, o que significa dizer que se preencher os campos com os valores 8 e 5 terá segmentos com 8 pixéis de comprimento espaçados 5 pixéis entre si.
DOTTED (PONTEADO) Temos então o estilo “dotted” ou ponteado.
Na caixa DOT SPACING poderá regular o espaçamento dos pontos.
RAGGED (IRREGULAR) O estilo a seguir na caixa dos tipos é o RAGGED. Neste estilo estão disponíveis parâmetros como PATTERN, WAVE HEIGHT e WAVE LENGTH, que correspondem, respectivamente, ao padrão, altura e comprimento da irregularidade. O PATTERN corresponde ao padrão da linha e permite várias escolhas: SOLID, SIMPLE, RANDOM, DOTTED, RANDOM DOTTED, TRIPLE DOTTED e RANDOM TRIPLE DOTTED, correspondentes a sólido, simples, aleatório, ponteado, ponteado aleatório, ponteado triplo e ponteado triplo aleatório. Não é necessário decorar exactamente o que cada um destes parâmetros significa, porém vale a pena experimentá-
40
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
-los quando estiver a trabalhar porque modificam significativamente a aparência final. No campo WAVE HEIGHT poderá ajustar a amplitude e turbulência da irregularidade em quatro níveis disponíveis, consoante um menor ou maior grau de turbulência: FLAT , WAVY, VERY WAVY e WILD. Também poderá ajustar o comprimento da irregularidade pelo WAVE LENGTH. São também quatro as opções, a primeira a produzir o menor comprimento e a última a produzir o maior: VERY SHORT , SHORT, MEDIUM e LONG.
STIPPLE (PONTILHADO) Este é o estilo nomeado de STIPPLE (pontilhado). Na janela deste estilo poderá ver os campos DOT SIZE (tamanho do ponto), DOT VARIATION (variação do ponto) e DENSITY (densidade). No DOT SIZE poderá regular o tamanho dos pontos, que do menor para o maior são: TINY, SMALL, MEDIUM e LARGE. A seguir poderá regular a variação dos pontos (DOT VARIATION) por meio de quatro opções: ONE SIZE, SMALL VARIATION, VARIED SI-
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
41
ZES e RANDOM SIZES. A primeira opção produz pontos do mesmo tamanho. A segunda produz pontos que possuem uma pequena variação de tamanho. Na terceira temos a produção de pontos de tamanhos variados e na quarta, pontos de tamanhos aleatórios. No campo DENSITY poderá regular a densidade dos pontos, ou seja, se os pontos são produzidos pegados uns aos outros ou não. As opções da mais densa para a menos densa são: VERY DENSE, DENSE, SPARSE e VERY SPARSE.
HATCHED (TRACEJADO) O estilo seguinte é o HATCHED. Na janela deste estilo poderá ver os seguintes campos: THICKNESS (espessura), SPACE (espaçamento horizontal), JIGGLE (agitação), ROTATE (rotação), CURVE (curvatura) e LENGTH (comprimento).
42
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Na primeira opção, THICKNESS, é possível ajustar a espessura das linhas produzidas no padrão. Da mais fina para a mais grossa, as opções são: HAIRLINE, THIN, MEDIUM e THICK. No campo SPACE é possível regular o espaçamento entre as linhas produzidas no padrão. A começar pelo menos espaçado, temos as seguintes opções neste campo: VERY CLOSE, CLOSE, DISTANT e VERY DISTANT. Em JIGGLE podemos ajustar o padrão de distribuição vertical e horizontal das linhas. Da opção menos para a mais caótica as opções são: NONE, BOUNCE, LOOSE e WILD. Na caixa ROTATE é possível regular a rotação das linhas. Os valores dos ângulos de rotação são pré-estabelecidos pelo programa e não podem ser mudados. Porém, é possível escolher as seguintes opções, da menos para a mais radical: NONE, SLIGHT, MEDIUM e FREE. Temos também o campo CURVE, onde é possível ajustar a curvatura das linhas produzidas. Da menos curva para a mais curva as opções são: STRAIGHT, LIGHT CURVE, MEDIUM CURVE, VERY CURVED. Em LENGTH podemos ajustar o comprimento das linhas. Com isso é possível criar variações verticais de tamanho. As opções são: EQUAL,
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
43
SLIGHT VARIATION, MEDIUM VARIATION e RANDOM, que correspondem respectivamente a linhas com os tamanhos todos iguais, com tamanhos que variam apenas ligeiramente, com tamanhos que variam de forma moderada e com tamanhos que variam aleatoriamente. Em todas as janelas de estilo anteriormente citadas, temos também o quadro que diz ZOOM 4X para permitir a visualização do efeito à linha de forma mais detalhada. Também há o campo THICKNESS que permite o ajuste da espessura da linha em pontos. SHARP CORNERS é outro quadro que, quando marcado, produz linhas com cantos em bico.
Lasso Tool De volta à barra de ferramentas do Flash, verá, ao lado do ícone da recta, o ícone que representa um laço (Lasso Tool). Com esta ferramenta poderá seleccionar partes internas de um objecto. Não deve confundir-se com o modo de selecção de sub-objecto. Um sub-objecto é um ponto que forma um determinado objecto. A ferramenta LASSO permite seleccionar partes do objecto em si. Digamos que numa recta qualquer utilizámos o LASSO para seleccionar uma região, conforme nesta figura.
44
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Feito o LASSO, teríamos seleccionado a região indicada na figura abaixo.
Esta região seleccionada poderia ser então eliminada, o que transformaria a recta única original em duas menores independentes, conforme a próxima figura.
Pen Tool A próxima ferramenta da barra TOOLS é a pena de escrita (Pen Tool). Com ela, poderá criar os pontos (sub-objectos) relativos às curvas ou às formas que desejar.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
45
O modo de criação dos pontos é simples. Depois de seleccionar a pena, vá com o rato para a área de desenho e carregue no botão. O Flash criará o primeiro ponto da curva. Mova então o rato para outro sítio. Ainda dentro da área de desenho, carregue novamente no botão para criar o segundo ponto. Sem libertar o botão, mova o rato suavemente. Verificará que o Flash permite o ajuste da curvatura do segmento. Crie outros pontos. Se quiser fechar a curva, e transformá-la numa superfície, volte com o rato para cima do primeiro ponto criado e verá um pequeno círculo surgir ao lado do cursor. Esta é a indicação de que se carregar no botão irá fechar a curva. Utilize a Arrow Tool e carregue com o rato duas vezes em cima da curva para a seleccionar. Na janela de propriedades da curva, que pode ser vista na parte central inferior do ecrã, encontrará os parâmetros que poderão ser modificados.
Pode ver que o Flash não diferencia uma linha apenas de uma forma e indica tudo como se fora SHAPE (forma). Nessa janela encontrará nas quatro primeiras caixas superiores da direita os mesmos parâmetros descritos anteriormente para as linhas, ou seja, a caixa de selecção da cor da forma, a espessura da sua linha, o estilo da linha e a caixa de CUSTOM que permite todos aqueles estilos descritos (solid, dashed, dotted, ragged, stipped e hatched).
46
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No canto inferior esquerdo encontrará quatro caixas menores nomeadas W, H, X e Y. Elas indicam respectivamente a largura (Width), altura (Heigth), posição horizontal (X)3 e posição vertical (Y). Logo abaixo da caixa de cor da linha existe um ícone com um balde e logo ao lado uma outra caixa de cor. Para uma forma que seja apenas uma linha, este balde não faz sentido, mas se estiver a criar uma forma fechada, então poderá determinar a cor interior da forma, ou seja, a cor de preenchimento (FILL). Esta ferramenta se for usada numa linha já existente serve para acrescentar, apagar e converter pontos.
OBSERVAÇÃO Ao ser criada uma forma ela inclui duas regiões: a linha que determina a sua forma e a região interna (que pode ou não ser preenchida com uma cor). Estes elementos são conhecidos como LINE e FILL respectivamente.
Text Tool O próximo ícone da barra de ferramentas é uma letra A. Esta ferramenta é a Text Tool, destinada à criação de textos.
3
O FLASH considera os valores de X (coordenada horizontal) e Y (coordenada vertical) a começar de zero. X = 0 é a posição mais à esquerda na horizontal e Y = 0 é a posição mais acima na vertical. Logo, a posição X=0 e Y=0 é o ponto superior esquerdo da janela de desenho.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
47
Seleccione-a e mova o rato para a área de desenho. Carregue no botão do rato e verá surgir uma caixa conforme vemos na página ao lado.
Note que no canto superior direito poderá ver um quadrado. O quadrado indica que é uma caixa de tamanho fixo. Se tiver uma bola, é uma caixa de tamanho variável – cresce com o texto que se introduzir. Se arrastar este elemento poderá regular a largura da caixa de texto. Deve sempre previamente regular a largura da caixa de texto para forçar o Flash a formatar o texto numa região horizontal específica. Digite então qualquer coisa no interior da caixa, algo com várias linhas, e movimente o quadrado que regula a largura. Veja como se comporta o texto com os diversos tamanhos de caixa. Na figura seguinte vemos a janela de propriedade da caixa de textos do tipo STATIC, que pode ser encontrada na parte central inferior do ecrã, e os seus correspondentes parâmetros 4.
4
Caso não esteja a ver toda a janela como na figura, carregue no pequeno triângulo existente no
canto inferior direito da mesma para a maximizar.
48
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A seguir temos uma descrição mais detalhada de cada um dos campos acima.
ESCOLHA DO TIPO DE TEXTO No campo de escolha do tipo de texto é possível seleccionar o tipo de funcionalidade da caixa de textos. As opções possíveis são STATIC TEXT, DYNAMIC TEXT e INPUT TEXT. Static Text STATIC TEXT é o tipo de caixa de texto tradicional, na qual poderá colocar os textos que deseja na sua animação. Uma caixa de texto ajustada como DYNAMIC TEXT permite ser actualizada durante a execução da animação, de forma dinâmica. Então, poderá, durante a execução da animação, controlar e colocar textos dentro da caixa, que poderão chegar-nos de ficheiros, por exemplo. As caixas ajustadas como INPUT TEXT têm a finalidade de servir como caixas de entrada de texto em formulários, por exemplo, cujos valores podem ser lidos por ActionScript.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
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, enquanto que o SUBSCRIPT equivale a caracteres de tamanhos reduzidos abaixo da linha base. Veja os exemplos seguintes.
50
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SUPERSCRIPT: x2 + y2 = z 2 SUBSCRIPT: x1 + x2 = z 1 Este campo só pode ser utilizado para as caixas de texto do tipo STATIC.
AJUSTE DE COR, BOLD e ITÁLICO
Os três campos a seguir são a caixa de ajuste de cor, o B e o I onde pode colocar o texto em negrito (BOLD) ou itálico (ITALIC). Também neste caso poderá colocar letras de diversos tipos, tamanhos, cores e formatos numa mesma caixa de texto.
DIRECÇÃO DO TEXTO e OPÇÕES DE ALINHAMENTO
A seguir, temos a caixa de ajuste da direcção do texto, indicada abaixo pelo primeiro ícone.
Se carregar neste ícone poderá escolher uma das seguintes opções: HORIZONTAL, VERTICAL, LEFT TO RIGHT e VERTICAL, RIGHT TO LEFT. Na primeira, o texto é escrito normalmente, da esquerda para a direita, conforme imagem seguinte.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
51
Se escolher VERTICAL, LEFT TO RIGHT (vertical, da esquerda para a direita), o texto passa a ser mostrado conforme a figura abaixo.
OPÇÕES DE ROTAÇÃO
Se todavia carregar no ícone logo abaixo daquele de ajuste de direcção de texto, poderá rodar o texto, de forma que a imagem ao lado se torna igual à seguinte.
52
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Veja na figura abaixo a indicação do ícone de rotação do texto existente na janela de propriedades da letra.
Se tivesse escolhido na caixa de selecção de direcção do texto (não confundir com a caixa de rotação do texto) a opção VERTICAL, RIGHT TO LEFT (vertical, da direita para a esquerda), teria visto o texto ficar conforme a imagem abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
53
Assim como no caso anterior, se carregar no ícone de rotação do texto fará com que o texto passe do alinhamento existente na imagem acima para o visto na imagem abaixo.
54
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Estas opções de formatação de texto são úteis também para escrita em outras linguagens em que o texto se lê noutras direcções. O suporte a essas linguagens – como o Coreano, Japonês e outras, foi melhorado nesta versão do Flash, já que pode utilizar o UNICODE para a interpretação do texto
OPÇÕES DE FORMATAÇÃO
Neste campo poderá ajustar alguns outros parâmetros na formatação do texto dentro da caixa. Assim que carregar com o rato neste botão verá a janela abaixo.
Nesta janela poderá regular o INDENT, que corresponde à posição relativa da primeira letra do parágrafo. Veja nas figuras abaixo um texto com indentação zero e com uma indentação de valor positivo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
55
Outros parâmetros que podem ser regulados na janela de opções de formatação são LINE SPAC ING (espaçamento entre as linhas de texto), LEFT MARGIN (margem esquerda) e RIGHT MARGIN (margem direita). Estes dois últimos valores referem-se às margens entre a caixa de texto e o texto em si.
AUTO KERN
Se marcar esta caixa o Flash passa a utilizar as 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 tradicional, ou seja, http://www.pagina.com
ALVO DA URL
Esta é uma função avançada de HTML e indica onde a página no campo URL deverá ser vista. As opções deste campo são “_blank”,
5
Distribuição das letras entre si de forma a tornar um determinado texto visualmente correcto do
ponto de vista gráfico.
56
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
“_parent”, “_self” e “_top”. A 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 poderá ser copiado.
USE DEVICE FONTS
O Flash, por defeito, inclui no ficheiro final correspondente à sua animação todas as letras das fontes que utilizou. Logicamente que armazenar as informações de tais letras faz com que o ficheiro aumente de tamanho. Felizmente, o Flash apenas armazena a informação relativa a cada letra e fonte diferente que utilizou. Assim, se utilizar a fonte ARIAL e escrever a palavra AGUA, e com a Times New Roman escrever a frase DVD VIDEO, isto fará com que sejam armazenadas as letras A, G e U da fonte ARIAL e as letras D, V, I, E e O da Times New Roman. Se marcar a opção USE DEVICE FONTS indicará ao Flash para que este não armazene internamente as informações relativas às letras utilizadas nas animações e tente utilizar as fontes que existam na máquina onde estiver a correr, que mais se assemelhem às que utilizou. Geralmente não é indicado que seleccione esta opção, a não ser que tenha absoluta certeza de que as fontes são exactamente as mesmas.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
57
Como na prática é impossível ter essa certeza absoluta, irá correr o risco de ver a sua animação completamente “destruída” pelo uso de uma fonte inadequada (atenção às questões legais no uso de fontes pagas).
TIPO DE LINHA
Nesta caixa poderá ajustar o estilo da caixa de textos no que se refere à disposição das linhas. As opções para as caixas de texto do tipo DYNAMIC são: SINGLE LINE, MULTILINE e MULTILINE NO WRAP. A primeira indica que a caixa somente terá uma linha na largura da caixa especificada. Caso o texto seja maior do que a largura disponível então somente parte deste será mostrado. A opção MULTILINE faz com que a caixa de textos passe a ter múltiplas linhas; respeitando o tamanho da caixa. Além disto, o texto é formatado automaticamente em linhas, à medida em que atinge a borda direita da caixa. A opção MULTILINE NO WRAP impede que o Flash arrume o texto em linhas à medida em que este atinge o limite direito da caixa. Cabe a si definir onde deve haver a mudança de linhas pela colocação de caracteres ENTER nos pontos desejados. Dynamic Text As caixas de texto do tipo DYNAMIC servem para que possa definir áreas de texto nas suas páginas Flash que serão preenchidas de forma dinâmica, à medida em que a página surgir. Digamos, por exemplo, que deseja fazer a leitura do texto de um ficheiro que muda diariamente e mostra esse conteúdo na sua animação. Isto é possível com o uso das caixas deste tipo. As propriedades desta caixa assemelham-se às das caixas do tipo STATIC vistas anteriormente; porém, alguns outros botões e campos novos surgem, tal como veremos a seguir. Veja a figura seguinte.
58
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A primeira coisa que observa nas propriedades dessa caixa é o campo VAR e o botão CHARACTER. No primeiro, é possível definir as variáveis que vai utilizar em ActionScript. Pode, por exemplo, criar uma variável qualquer e armazenar nela valores a utilizar mais adiante. No botão CHARACTER vai poder definir que letras quer que o Flash armazene internamente no ficheiro final. Se accionar este botão vai ver a janela a seguir.
A primeira opção NO CHARACTERS indica que nenhuma informação de fontes irá ser armazenada. ALL CHARACTERS indica que todas as informações das letras serão armazenadas. ONLY usado em combinação com as quatro caixas seguintes indica que apenas as letras maiúsculas de A até Z serão armazenadas, apenas as letras minúsculas de a até z serão armazenadas, apenas os números de 0 a 9 serão armazenados e apenas os sinais de pontuação serão armazenados. A última caixa abaixo da frase AND THESE CHARACTERS indica algumas letras e sinais de pontuação que poderá inserir para indicar mais precisamente ao Flash o que deseja que ele faça. Esta caixa também é útil para definir os caracteres acentuados da ílngua portuguesa, por exemplo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
59
BOTÃO HTML
Se seleccionar este botão, indicará ao Flash para preservar as características básicas de formatação de textos HTML, como tipo de letra, estilo, cor, tamanho, e hiperligações nas caixas de texto, pela aplicação automática dos correspondentes tags em HTML quando a animação final for exportada para SWF. Os seguintes tags em HTML são suportados: , , , , , ,
e . Também são suportados os seguintes atributos: LEFTMARGIN, RIGHTMARGIN, ALIGN, INDENT e LEADING. Poderá preservar as características de formatação e estilo dos textos HTML pelo uso de variáveis das caixas de texto ou uso do nome da instância da caixa de texto. Se o desejar fazer pelo uso das variáveis proceda da seguinte forma: ü crie uma caixa de texto do tipo DYNAMIC ou INPUT; ü nomeie o campo VARIABLE dessa caixa na janela de propriedades como “texto” por exemplo.
Das duas opções abaixo, faça pelo menos uma: seleccione o botão HTML para que o texto seja finalizado como HTML respeitando os tags deste standard, ou no painel ACTIONS ajuste a propriedade “html” do objecto do tipo TextField para “true”. Ajuste a variável do campo de texto para um valor que inclua alguns “tags” de HTML. Por exemplo, se ajustar a variável “txt” com o valor, txt = “apenas um teste”
e accionar o botão HTML, então o texto será mostrado em negrito, uma vez que o accionamento deste botão faz o Flash seguir as instruções
60
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
dadas pelo tag de HTML que indica “ligar o negrito” e o tag que indica “desligar o negrito”. Se quiser fazer tudo directamente por ActionScript, então use os seguintes comandos. instName.html = true; txt = “apenas um teste”
Se por outro lado quiser preservar as características dos textos HTML pelo uso do nome da instância da caixa de textos, faça o seguinte: ü crie uma caixa de texto do tipo DYNAMIC ou INPUT; ü nomeie o campo VARIABLE dessa caixa na janela de propriedades como “texto”, por exemplo.
Das duas opções abaixo, faça pelo menos uma: seleccione o botão HTML para que o texto seja finalizado como HTML respeitando os tags deste padrão ou no painel ACTIONS ajuste a propriedade “html” do objecto do tipo TextField para “true”. InstanciaUm.html = “true”;
Ajuste a variável do campo de texto, no painel ACTIONS, para um valor que inclua alguns tags de HTML. Agora, se a instância da caixa se chamar InstanciaUm, use o comando abaixo de ActionScript para fazer o Flash finalizar o texto a utilizar os tags de HTML que inseriu. InstanciaUm.html = “apenas um teste”
MOSTRAR BORDA
Indica se deseja ou não se quer visível a borda da caixa de textos.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
61
Input Text Este tipo de caixa de textos é indicado para a criação de formulários. São campos que podem conter valores previamente preenchidos mas que podem ser modificados pelo utilizador. As propriedades deste tipo de caixa são as mesmas já observadas para as caixas do tipo STATIC e DYNAMIC. Porém, ainda surge um novo campo chamado MAXIMUM CHARACTERS, quando se escolhe a caixa do tipo INPUT. Neste campo poderá definir o máximo número de letras que a caixa terá a capacidade de conter. O uso desta variável é indicado para limitar a quantidade de texto que tenciona deixar que seja preenchida, pelo utilizador num formulário, por exemplo.
TIPO DE LINHA
No caso da caixa de texto do tipo INPUT ainda existe mais uma opção para esta caixa, além das descritas nas caixas de tipo DYNAMIC, que é PASSWORD. Ao colocar esta opção ligada num formulário fará com que qualquer texto inserido seja mostrado como uma série de asteriscos, como já é de uso tradicional nos campos de password de formulários em HTML.
Oval Tool &
Rectangle Tool
Ao voltar novamente à barra de ferramentas do Flash, encontramos os dois próximos ícones a seguir ao Text Tool. São eles a oval (OVAL TOOL) e o rectângulo (RECTANGLE TOOL), representados pelos ícones de um círculo e um quadrado... O procedimento para criação de uma forma destas é simples. Carregue com o rato num ponto na área de desenho, movimente o cursor para outro sítio e liberte o botão.
DICA
62
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para criar quadrados ou círculos, com as ferramentas RECTANGLE TOOL e OVAL TOOL, respectivamente, mantenha o SHIFT carregado no momento da criação.
Após desenhar a forma também poderá carregar com o rato duas vezes em cima desta e utilizar a Arrow Tool para ajustar as suas propriedades, que são iguais às descritas para o caso da linha.
DICA Para criar quadrados ou rectângulos com os cantos arredondados, carregue duas vezes no ícone RECTANGLE TOOL antes de criar o objecto.
Porém, estas formas, como são fechadas, permitem agora que se possa escolher uma cor ou padrão de preenchimento (FILL) interno. Então, depois de criar a forma deve seleccionar a região de fill e na janela de propriedades da forma, carregar no balde de preenchimento e escolher uma cor ou gradiente. Ao carregar no balde vai ver uma janela igual à vista abaixo.
Poderá então escolher uma cor ou um padrão de gradiente, conforme poderá ver no pequeno rodapé desta janela.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
63
Seleccione um gradiente qualquer. Verá que, no lado direito da interface do Flash, existe uma janela chamada COLOR MIXER, vista na figura abaixo6 e que contém os parâmetros relativos ao gradiente escolhido.
Na parte superior esquerda da janela tem duas caixas de selecção de cor. A primeira delas está ao lado do ícone de um lápis, a indicar que se trata da cor da linha. A segunda está ao lado do ícone do balde de preenchimento, logo, trata-se da cor de FILL 7. Ao lado da caixa de FILL pode ver outra caixa com a palavra RADIAL, correspondente ao modo RADIAL GRADIENT. Nela é possível regular o tipo de gradiente. As outras opções possíveis são: NONE, SOLID, LINEAR GRADIENT e BITMAP, correspondentes a não preencher um
6
Se a janela no seu programa não estiver com a aparência indicada carregue no pequeno triângulo
no canto inferior direito desta, para a maximizar.
7
Na barra de ferramentas também existem estes dois ícones, o balde e o lápis, e têm exactamente
a mesma função.
64
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
objecto com cor, preencher com uma única cor, colocar um degrade vertical ou horizontal ou preencher o objecto com uma imagem, respectivamente. A seguir a este ícone pode ver outros três.
O primeiro da esquerda coloca o preto no LINE e o branco no FILL. O do meio faz com que nenhuma cor seja usada no preenchimento. Finalmente o terceiro ícone troca as cores de LINE e FILL no color mixer. Na parte à direita do color mixer poderá ver caixas nomeadas de R, G e B onde será possível regular directamente os valores das três cores básicas, ou seja, Red, Green e Blue (vermelho, verde e azul)8. Em ALPHA poderá regular a transparência que a cor criada terá. Na parte inferior da janela do color mixer pode ver dois quadrados e um rectângulo vertical. No primeiro é mostrada a cor que foi escolhida no quadrado do meio. No rectângulo vertical à direita é possível regular o nível de brilho da cor que estiver a trabalhar.
8
Deverá ler o anexo 1 para saber como funciona o sistema de cor dos computadores e também o
que é o sistema hexadecimal.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
65
A última caixa dessa janela é a que pode ser vista com o valor #57CCA0. Este número corresponde ao valor hexadecimal da cor onde a cruz está. No caso, o valor corresponde aos níveis RGB de 87, 204 e 160, respectivamente, conforme mostrado na figura acima. Este número é extremamente útil quando se criam páginas de Internet, porque quando se faz uma página em HTML 9 é preciso referir este valor para que o browser produza a cor exacta. Na parte superior direita da janela vê o ícone ao lado de um quadrado com uma seta a apontar para baixo. Aí poderá escolher se quer traba-
9
HTML = HyperText Markup Language. É o formato no qual as páginas de Internet são escritas. Equivalem a ficheiros-texto com todos os códigos (formatações) necessários para fazer uma página de Internet aparecer nos browsers como se pretende.
66
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
lhar no formato de cor RGB 10 ou HSB11. Também poderá guardar a cor numa paleta especial chamada SWATCH, para voltar a usá-la quando quiser.
Gradientes Outra coisa que poderá fazer com o COLOR MIXER é criar gradientes. Existem dois tipos de gradientes no Flash: linear e radial. Melhor do que explicar o que cada um significa, mostramos duas imagens que representam cada um destes dois tipos.
GRADIENTE LINEAR
10
RGB = Red, Green e Blue são as três cores básicas utilizadas em televisão e por consequência,
em computadores. Uma cor neste sistema é definida como tendo um certo valor de R, G e B. Cada uma destas cores pode variar de 0 a 255, sendo 0 a ausência da cor. O preto equivale a 0,0,0 e o branco equivale a 255, 255, 255.
11
HSB = Hue Saturation Brightness (tom, nível de cor e brilho). Neste sistema, as cores são definidas pelo seu brilho, que pode variar de 0 (negro) a 100% (brilho máximo), pelo seu nível de cor, que varia segundo a mesma escala e pelo seu tom, definido por graus de rotação, onde o ângulo 0 corresponde ao vermelho, o 120 ao verde e o 240 ao azul. Normalmente este sistema é denominado de HLS (Hue Luminance Saturation), que é o termo pelo qual normalmente é conhecido no mundo profissional.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
67
Para perceber melhor o efeito, reduzimos o número de cores do gradiente acima para 10, e temos a imagem abaixo.
GRADIENTE RADIAL
Depois de reduzidas as cores da imagem acima para apenas 10, teremos a imagem abaixo.
68
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se for ao rodapé da caixa COLOR SWATCHES e escolher o gradiente preto e branco lá existente, vai ver que a janela COLOR MIXER se modifica. Se então ajustar o campo existente nesta janela para LINEAR, vai ver a seguinte janela.
No meio da figura acima, repare na barra horizontal com o gradiente.
Esta barra possui um marcador no início, com a cor branca e outro no fim com a cor preta. Se mover o rato e posicioná-lo em cima desta barra, vai ver que o cursor se modifica e surge um sinal de “+”. Isto indica a possibilidade de acrescentar um novo marcador.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
69
Nesta altura, carregue com o rato para criar um novo marcador no gradiente.
OBSERVAÇÃO Se a qualquer momento quiser apagar um marcador no gradiente, basta arrastá-lo para baixo.
Pode marcar quantos quiser.
Se carregar num marcador poderá regular a sua cor e brilho. Criado o gradiente com todos os marcadores pretendidos, basta aplicá-lo aos objectos com o balde de pintura - PAINT BUCKET TOOL.
OBSERVAÇÃO A forma na qual o gradiente é aplicado varia de acordo com a região do objecto onde se carregou no acto de criação. Poderá posteriormente mudar este ponto pelo uso da ferramenta FILL TRANSFORM TOOL da barra de ferramentas.
70
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Pencil Tool Ao voltar à barra de ferramentas do Flash, vemos o ícone a seguir ao quadrado. É o lápis (PENCIL TOOL). Ele permite fazer linhas à mão livre, sem a necessidade de se ter que marcar pontos. Seleccione esta ferramenta. Ao fazê-lo, notará que na parte inferior da barra de ferramentas, na área nomeada como OPTIONS, surge o ícone de selecção do modo do lápis (PENCIL MODE). Carregue neste ícone e uma segunda janela será vista. Veja a figura ao lado. Imediatamente poderá ver três novas opções: STRAIGHTEN, SMOOTH e INK, que possibilitam a criação de linhas rectas, suaves ou à mão livre. A diferença é que, apesar dos dois primeiros modos também permitirem que se desenhe à mão livre, farão uma transformação na forma final para corresponder ao modo escolhido. Digamos, por exemplo, que seleccionou o modo STRAGHTEN. Como este modo é o que produz linhas com segmentos rectos, mesmo que desenhe linhas suaves, estas serão transformadas em linhas rectas. A mesma coisa acontece no modo SMOOTH. Depois de terminar o desenho da linha, o Flash entra em acção e suaviza a linha, para que fique menos irregular. No modo INK nenhum processamento é feito e a linha fica exactamente como foi desenhada. As linhas geradas pelo modo de desenho à mão livre com o lápis são para o Flash, depois de criadas, exactamente o mesmo tipo de objecto que uma linha comum. Logo, também possuem uma janela de propriedades, na parte central inferior do ecrã, com os mesmos parâmetros das linhas comuns; parâmetros estes descritos anteriormente.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
71
Brush Tool Ao lado do lápis, vemos na barra de ferramentas do Flash um pincel (BRUSH TOOL). A função do pincel é a mesma do lápis, ou seja, desenhar à mão livre. Porém, produz linhas de diâmetro largo. Assim como o lápis, uma vez seleccionado, o pincel faz aparecer uma janela de OPTIONS, na parte inferior da barra de ferramentas, que pode ser vista na figura ao lado. O primeiro ícone de cima é o BRUSH MODE e fornece-nos diferentes modos para o pincel: PAINT NORMAL, PAINT FILLS, PAINT BEHIND, PAINT SELECTION e PAINT INSIDE. Estes modos permitem os tipos de pintura a seguir. PAINT NORMAL – Este é o modo normal de pintura. À medida em que desloca o pincel, ele vai pintar todas as regiões por onde passar com a cor seleccionada. PAINT FILLS – Este modo de pintura apenas irá colorir as regiões de fill de um objecto e deixará as suas linhas intactas. PAINT BEHIND – Se for seleccionado faz com que o brush apenas desenhe por detrás dos objectos. PAINT SELECTION – Apenas pinta as regiões de fill dos objectos que estejam seleccionados. PAINT INSIDE – Apenas pinta as regiões de fill que sejam as mesmas correspondentes ao primeiro ponto onde o brush tocou. Isso quer dizer que, se o brush tiver começado a pintar, por exemplo, na área de fill de um círculo, não poderá pintar nada que esteja fora desta área. Na figura seguinte poderá ver os cinco exemplos de modos de brush e o tipo de efeitos que causam. Em todos os casos, pintamos uma linha vertical, de cima para baixo.
72
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Repare que no primeiro caso tanto as linhas como o fill da figura foram afectados. Já no segundo caso, apenas as regiões de fill foram afectadas. No terceiro, ele fez a pintura por trás do objecto sem o afectar. No quarto, apenas a região de fill do objecto foi afectada. No último, o objecto não foi afectado em nenhum aspecto. Isto explica-se pelo facto de que iniciamos a pintura na parte externa do objecto. Então, apenas poderíamos pintar nesta região.
OBSERVAÇÃO Um objecto geralmente é formado pela sua linha exterior (LINE) e sua região de preenchimento de cor (FILL). Se escolher a ferramenta de selecção de objectos (ARROW TOOL) e carregar duas vezes na linha exterior deste objecto, seleccionará apenas esta linha. Se por outro lado carregar duas vezes no FILL, seleccionará ambas as partes do objecto, LINE e FILL.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
73 Logo ao lado do ícone de BRUSH MODE na janela OPTIONS da barra de ferramentas, pode ver um ícone nomeado USE PRESSURE. Veja a figura ao lado. Este ícone só faz sentido de ser usado se tiver ligado ao seu computador um tablet12 que seja sensível à pressão.
Veja na figura abaixo linhas criadas com um tablet e com a função USE PRESSURE. As linhas foram criadas por variação na pressão aplicada à caneta sobre o tablet, à medida em que o cursor se deslocava para baixo.
12
É um equipamento composto por uma mesa de desenho e uma caneta especial (geralmente sem
fio), no qual pode desenhar ou comandar o sistema e os seus programas. Os mais modernos são capazes de responder a 1024 ou mais níveis de pressão ou inclinação da caneta. Modelos sofisticados inclusive correspondem a verdadeiros monitores de computador, do tipo plano, que são colocados sobre a mesa, na horizontal, como uma prancha de desenho, e ainda por cima são sensíveis à pressão. Visite o site do melhor e principal fabricante de tablets , a Wacom (www.wacom.com).
74
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Na barra de OPTIONS pode ver logo a seguir ao ícone USE PRESSURE duas caixas de selecção, sendo a primeira nomeada BRUSH SIZE e a segunda BRUSH SHAPE. Nelas pode ajustar o tamanho e a forma do pincel, respectivamente. Veja a figura abaixo.
O cadeado na parte debaixo da janela de options representa o LOCK FILL, a ser visto mais adiante.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
75
Free Transform Tool De volta à barra de ferramentas, temos o ícone a seguir ao BRUSH. É o FREE TRANSFORM TOOL. Esta ferramenta permite ajustar ou transformar a largura, altura ou rotação do objecto e também distorcê-lo em ambas as direcções. Construa um objecto qualquer e com o rato carregue duas vezes na região de fill deste para o seleccionar. Na barra de ferramentas carregue no ícone do FREE TRANSFORM TOOL e vai ver que um quadrado com diversos pontos aparece à volta do objecto. Aproxime o cursor do rato de cada um destes pontos e vai ver que este se transforma em diversos símbolos para representar as diversas operações que pode realizar, nomeadamente, ajuste da largura, ajuste da altura, rotação, distorção horizontal e distorção vertical. Veja na figura abaixo os símbolos existentes.
76
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para realizar uma destas funções basta clicar quando o ícone desejado surgir e mover o rato para a direcção ou direcções que o ícone indicar.
OBSERVAÇÃO No modo normal o FREE TRANSFORM TOOL utiliza o canto esquerdo inferior da selecção como o centro para as transformações. Se mantiver o ALT carregado durante o processo, passa a ser considerado o centro real da selecção. Com o SHIFT carregado, a escala é feita mantendo-se as proporções. Se utilizar o CONTROL e arrastar um dos cantos da selecção, poderá distorcer o objecto!
Ao seleccionar a ferramenta FREE TRANSFORM TOOL poderá ver estas opções de distorção, escala e rotação, no menu OPTIONS da barra de ferramentas. Também verá uma quarta opção, chamada ENVELOPE a qual descreveremos a seguir.
ENVELOPE A função ENVELOPE serve para distorcer um determinado objecto e moldá-lo à forma pretendida, de forma suave. Se seleccionar um
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
77
objecto e escolher esta função, vai ver que diversos pontos surgem à volta da selecção, como na figura abaixo.
Estes pontos que surgem estão divididos em duas categorias: os que formam o envelope em si (pontos quadrados) e aqueles que servem para ajustar a curvatura (pontos redondos). Um ponto do envelope possui dois pontos de curvatura. Na figura abaixo mudamos de lugar alguns dos pontos vistos acima e ajustamos as suas curvaturas, para que perceba melhor o efeito.
78
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Uma vez que termine a distorção por envelope, e saia do modo de edição, perde o envelope que acabou de fazer. Ao retornar novamente ao modo de envelope, verá que a selecção volta a ficar direita.
SUBTRACÇÃO DE FORMAS Pela utilização de algumas regras simples poderá combinar ou subtrair formas para criar outras novas. Por exemplo, se quer fazer um furo num
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
79
determinado objecto, crie a forma correspondente ao furo no mesmo layer, exactamente na região que quer furar; tendo o cuidado de criar este novo objecto com uma cor diferente da utilizada no primeiro. Então, seleccione esta segunda forma e elimine-a. Se quer por exemplo fazer um furo num círculo, desenhe o objecto correspondente ao furo na posição desejada, seleccione-o e apague-o.
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.
80
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
UNIÃO DE FORMAS Para fazer uma união de duas ou mais formas, o princípio é exactamente o mesmo descrito na secção anterior sobre SUBTRACÇÃO DE FORMAS. Porém, deve desenhar os objectos com a mesma cor do objecto original. Assim, se tem um objecto original azul com a borda cinza deve utilizar objectos com estas mesmas cores ao criar as novas formas. Veja o exemplo abaixo. Primeiro desenhamos o objecto visto na figura abaixo.
Para melhor unir os objectos que serão desenhados em seguida, utilizamos a Arrow Tool para seleccionar a linha de borda do objecto, que é apagada em seguida. Assim, ficamos apenas com o rectângulo interno.
Desenharemos agora por cima deste rectângulo, algumas outras formas, até obter o resultado seguinte.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
81
Seleccione com o Arrow Tool e elimine todas as linhas de borda das formas que desenhou por cima da original. Obterá então o resultado abaixo.
Para voltar a ter a linha de borda, nesta altura, que corresponda ao contorno do objecto como um todo, seleccione o INK BOTTLE TOOL e carregue com o rato na região da borda do objecto. Assim, obterá o objecto da próxima página.
82
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Fill Transform Tool O próximo ícone na barra de ferramentas é o FILL TRANSFORM TOOL, que permite a transformação do gradiente utilizado no preenchimento de cor de um determinado objecto. Crie um objecto e preencha-o com um gradiente. Seleccione a função FREE TRANSFORM TOOL e carregue na região de fill do objecto. Um círculo aparecerá à volta do objecto, tendo como centro a região central do gradiente. Este círculo possui quatro elementos: um quadrado e três pequenas bolas, que realizam as funções indicadas na figura abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
Ink Bottle Tool &
83
Paint Bucket Tool
Os dois próximos ícones na barra de ferramentas são o INK BOTTLE TOOL e o PAINT BUCKET TOOL. Com o INK BOTTLE TOOL, cujo ícone é um tinteiro, é possível colorir as linhas de contorno das formas. Para tal, seleccione-o, ajuste os parâmetros nas propriedades visíveis na parte central inferior do ecrã13 e aplique o tinteiro sobre a linha a colorir. Já o PAINT BUCKET TOOL, cujo ícone é um balde, permite mudar a cor de preenchimento de um objecto. No caso de ter sido escolhido um gradiente para preenchimento, o ponto onde carregar com o balde no objecto determinará o início do gradiente. Na figura abaixo veja quatro figuras criadas com o mesmo gradiente onde apenas se variou o ponto inicial 14.
Ao seleccionar o balde entretanto vai ver que a janela OPTIONS da barra de ferramentas mostra o ícone de um círculo azul com uma seta diagonal para baixo. Se carregar neste ícone vai ver que uma pequena janela surge com várias opções. Veja a seguir.
13
Que são as mesmas já descritas anteriormente para as linhas, no início deste capítulo.
14
Ponto onde se carregou com o rato dentro do objecto para criar o gradiente.
84
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Estas opções causam os seguintes efeitos. DON´T CLOSE GAPS – Se por acaso a forma que estiver a preencher tiver alguma falha ou buraco intencional na área de FILL e escolher esta opção, então o preenchimento de cor ou gradiente é feito e deixa intactas tanto falhas como áreas de furo. CLOSE SMALL GAPS – Esta função preenche as áreas de FILL de objectos mas preenche também as áreas com falhas ou buracos intencionais. Serve para corrigir áreas de fill que por acaso estejam com problemas. Só consegue corrigir as áreas de pequena dimensão. CLOSE MEDIUM GAPS – Esta função é igual à anterior mas consegue corrigir áreas com falhas e furos de médio tamanho. CLOSE LARGE GAPS – Esta função é igual à anterior mas consegue corrigir áreas com falhas e furos de grande tamanho.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
85
OBSERVAÇÃO Nesta altura devemos falar do cadeado que se encontra na parte inferior esquerda da janela OPTIONS na barra de ferramentas. Esta ferramenta é o LOCK FILL e é bastante útil quando estamos a lidar com gradientes. Se olhar para a figura anterior vai ver que um objecto colorido com um gradiente pelo balde de pintura muda de aparência consoante o ponto onde o balde tocou no momento da criação do gradiente. Com a função LOCK FILL ligada, o Flash passa a considerar toda a área de desenho como área de preenchimento para o gradiente, em vez de considerar cada objecto em particular. Logo, o objecto será preenchido com a cor que lhe couber conforme a sua posição horizontal e vertical. Veja as figuras abaixo. LOCK FILL DESLIGADO
LOCK FILL LIGADO
Repare que na primeira imagem o mesmo gradiente é aplicado a cada objecto. Na segunda imagem, cada figura leva a cor do gradiente a que corresponde, consoante a sua posição horizontal.
86
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Eyedropper Tool O EYEDROPPER TOOL, cujo ícone é uma pipeta, é o próximo ícone da barra de ferramentas, cuja função é permitir capturar a cor ou gradiente de preenchimento de um determinado objecto. Basta seleccioná-lo e carregar na área de fill de um objecto para fazer a captura.
Eraser Tool O ERASER TOOL é o próximo ícone na barra de ferramentas. Com ele é possível apagar regiões dos objectos, sejam linhas ou áreas de preenchimento. Uma vez seleccionada esta ferramenta, surgirão parâmetros na janela de options da barra de ferramentas, conforme a figura abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
87
No ERASE MODE, pode ver que existem diversos modos. São eles: ERASE NORMAL – Este é o modo normal. À medida em que desloca o pincel, ele vai apagar todas as regiões por onde passar. ERASE FILLS – Neste modo somente as áreas de fill são apagadas. As linhas de contorno são deixadas intactas. ERASE LINES – Este é exactamente o inverso do anterior, ou seja, as linhas de contorno são apagadas e as áreas de fill são deixadas intactas. ERASE SELECTED FILLS – Apenas apaga as regiões de fill dos objectos que estejam seleccionados. ERASE INSIDE – Apenas apaga as regiões de fill que sejam as mesmas correspondentes ao ponto onde o ERASER TOOL tocou pela primeira vez. Isso quer dizer que, se tiver começado a apagar, por exemplo, na área de fill de um círculo, não poderá apagar nada que não corresponda a esta área. Outra janela que se desdobra do OPTIONS é a ERASER SHAPE. Nela poderá escolher a forma da borracha, redonda ou quadrada, em diversos tamanhos. Também está presente o ícone de uma torneira (FAUCET). Com ele poderá apagar de uma vez, ou linhas ou áreas de fill. Seleccione-o e experimente carregar numa área destas. De uma vez só a área seleccionada desaparece.
DICA Se quer apagar todos os objectos da área de desenho de uma só vez, carregue duas vezes no ícone do ERASER TOOL.
88
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Hand Tool Podemos usar o HAND TOOL para mover a área de desenho. Carregue neste ícone e em seguida arraste a área de desenho com o rato.
Zoom Tool O ZOOM TOOL permite fazer zoom, ou seja, tornar maior ou menor a área de trabalho e permitir a visualização de elementos diminutos. Assim que é seleccionado, mostra na janela de options da barra de ferramenta duas opções: ENLARGE e REDUCE. Com elas é possível fazer o aumento ou redução do desenho, respectivamente. Não deve confundir esta função com aquela para aumentar os objectos de facto. O ZOOM TOOL apenas aumenta e diminui no ecrã, para facilitar a visualização dos objectos, e não modifica o tamanho dos objectos. A sua utilização é simples. Basta escolher uma das duas opções mencionadas no parágrafo anterior e carregar na área de desenho. Veja a figura abaixo.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
89
Color Swatches Voltamos à interface gráfica do Flash, dirigimo-nos agora ao lado direito. Logo abaixo do COLOR MIXER encontramos a janela COLOR SWATCHES.
Nesta janela encontrará várias cores em pequenos quadrados. São cores pré-ajustadas, prontas a utilizar. Poderá acrescentar as 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 também poderão ser adicionados aos swatches, como pode ver pelos ícones na parte debaixo da janela. Se carregar no ícone no canto superior
90
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
direito da janela verá surgir um menu com algumas funções, as quais explicamos a seguir. DUPLICATE SWATCH – poderá duplicar um swatch seleccionado se utilizar esta função. DELETE SWATCH – poderá eliminar o swatch seleccionado. ADD COLORS – Interessante esta função... com ela poderá acrescentar à janela de swatches cores que venham de tabelas de cores ou de imagens indexadas como GIF´s. É excelente se precisar trabalhar numa animação que deva ter cores precisamente escolhidas. REPLACE COLORS – importa cores para o swatch que venham de tabelas de cores ou de imagens indexadas como GIF´s, exactamente como a função anterior, porém, a anterior acrescenta as cores importadas à janela de swatches, enquanto que esta substitui as que lá estavam pelas que estão a ser importadas. LOAD DEFAULT COLORS – Faz a janela de swatches voltar ao estado normal ajustado de fábrica. Porém as cores “default” podem ser mudadas pelo utilizador como veremos a seguir... SAVE COLORS – grava num ficheiro as cores que estão na janela de swatches. Pode mais tarde recuperá-las através das opções ADD COLORS ou REPLACE COLORS. SAVE AS DEFAULT – faz o mesmo, porém as cores gravadas passam a ser as cores “de fábrica”, o que modifica a função LOAD DEFAULT COLORS, que a partir do uso desta função passa a chamar às cores gravadas cores “default”. CLEAR COLORS – elimina todas as cores dos swatches. WEB 216 – Ajusta os swatches para as famosas 216 cores da Web Safe Palete. Veja o Anexo 2. SORT BY COLOR – Ordena os swatches pelas cores.
I.1. A INTERFACE GRÁFICA E OS FUNDAMENTOS BÁSICOS
91
HELP, MAXIMIZE PANEL e CLOSE PANEL são as três últimas opções do menu que servem para trazer o help na secção correspondente, maximizar e fechar a janela de SWATCHES, respectivamente.
92
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
I.2. OS MENUS
Neste capítulo vamos falar das principais opções dos menus no Flash MX, não abordando porém aqueles comandos óbvios inerentes a basicamente todos os programas que correm no Windows ou Mac, uma vez que estes seguem standards comuns a praticamente todos os outros programas próprios destes sistemas operativos; estamo-nos a referir a comandos como FILE OPEN, FILE SAVE, etc.
Os Menus e suas funções
FILE O primeiro menu que se vê do lado esquerdo na parte superior, é o FILE e nele encontramos algumas opções importantes, sobre as quais devemos falar.
New From Template A primeira função deste menu que nos chama a atenção é a NEW FROM TEMPLATE. Ao carregar nela verá a janela a seguir.
94
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Os templates são formatos padronizados para facilitar a sua criação. Pode ver na coluna da esquerda que a Macromedia dividiu os templates por categorias: ads, broadcast, menus, mobile devices, photo slide show, presentation e quiz, que correspondem respectivamente a formatos para a criação de anúncios ao estilo dos presentes em páginas de Internet (banners), para desenvolvimento de material para televisão e vídeo, para a criação de páginas com menus, para a criação de páginas para dispositivos móveis, para a criação de slideshows1, para apresentações comerciais e para questionários. Um dos templates que poderá escolher é o BROADCAST (veja a figura seguinte), que já fornece a moldura a servir como guia para a produção de vídeo.
1
Criação de páginas que mostram imagens em sequências ao estilo de um projector de slides.
95
I.2. OS MENUS
NOTA A área de trabalho para vídeo ou televisão, ou seja, o tamanho do frame, é, em PAL, 720 x 576 pixéis e em NTSC, 720 x 486 pixéis. Porém, quando se está a criar para estes formatos, não se pode considerar toda a área disponível na imagem para a composição dos elementos. Isto porque a imagem que se vê nos televisores está ampliada ligeiramente em relação ao que é transmitido. Assim , se um objecto estiver muito perto da borda, não será visto. Na imagem acima pode ver um rectângulo maior que diz WORK AREA, mas que indica 720 x 540. Este formato indicado equivale a ao formato NTSC com pixel quadrado. Na prática, deve criar em 720 x 486 que é o formato mais utilizado. Dentro deste rectângulo vê outro que diz ACTION SAFE que representa a área onde deve colocar os objectos e movimento da sua animação. Na verdade, deve fazer a animação ocupar toda a WORK AREA, mas deve ter em mente que qualquer coisa fora da ACTION SAFE corre o risco de não ser vista. Finalmente, vê um terceiro rectângulo que diz TITLE SAFE. Esta área menor representa o local onde deve colocar textos e tudo o que precise ser visto ou lido, como logótipos, etc.
Deve explorar outros templates existentes, como o PhotoSlideShow para a criação de projecções de imagens sequenciais e os da categoria QUIZ, para a criação de questionários e sondagens.
96
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Todos os templates vêm acompanhados de um layer com as instruções para que entenda o funcionamento do referido template e o saiba usar. Este layer pode ser apagado sem afectar o funcionamento do template. Open As Library A seguir, no menu FILE, pode ver a opção OPEN AS LIBRARY. Deve utilizá-la sempre que pretender abrir uma animação ou objectos que tenha previamente criado, para importar para o trabalho que estiver a criar. Com esta opção, o Flash importa o ficheiro aberto para a biblioteca e de lá poderá trazer aquilo que lhe interessar para o trabalho actual.
NOTA A biblioteca do Flash é uma área onde estão armazenados todos os símbolos (objectos) criados, além dos ficheiros que forem importados, como imagens, sons, vídeos e artes vectoriais.
Vista a janela poderá arrastar os objectos lá existentes para a área de trabalho. Inclusive no Flash é conveniente fazer sempre o menor número possível de objectos e sempre que possível aproveitar os que já tenha criado para diferentes partes da mesma animação. Se, por exemplo, pretende colocar três rectângulos, um de cada cor, crie apenas um e da biblioteca arraste-o para a sua área de desenho e mude a cor de cada um. Desta forma, na animação final o Flash armazenará apenas um símbolo, o que tornará o ficheiro menor. Cada trabalho que criar possui automaticamente a sua própria biblioteca, mas, enquanto estiver a criar pode ter mais de uma biblioteca aberta, se usar o comando OPEN AS LIBRARY. Por outro lado, o comando IMPORT TO LIBRARY traz todos os objectos da animação que está a importar para a biblioteca do trabalho que está a realizar.
I.2. OS MENUS
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, Illustrator, etc.), etc. Esta função é bastante útil quando se está a utilizar o Flash em conjunto com algum software de edição de vídeo como o Adobe Premiere ou de efeitos visuais como o Combustion ou o After Effects.
QUICKTIME
Por exemplo, se tiver que importar filmes QuickTime para as suas animações Flash, primeiro deve certificar-se que tem instalado no seu computador o QuickTime Player. Caso contrário será impossível ao Flash importar filmes neste formato. Para fazer download do Player QuickTime deve ir ao site da Apple (www.apple.com) e carregar no link correspondente (visto logo na primeira página). Logo em seguida deve ir ao menu FILE > IMPORT e carregar no ficheiro QuickTime (extensão MOV) para o poder importar. Surgirá a janela abaixo.
Esta janela contém duas perguntas: a primeira diz EMBED VIDEO IN MACROMEDIA FLASH DOCUMENT . Se escolher esta opção, o filme
98
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
importado será colocado no interior do ficheiro final da sua animação Flash. A segunda hipótese diz LINK TO EXTERNAL VIDEO FILE e faz com que o Flash não acrescente o filme QuickTime ao ficheiro final da animação. De facto, esta opção apenas faz uma ligação (link) entre o filme Flash final e o filme QuickTime. Porém, para que o vídeo seja visível, é preciso que exporte a animação final no formato QuickTime. Caso escolha a primeira hipótese verá surgir a seguinte janela.
Nesta janela poderá ajustar a qualidade, o intervalo para a criação de keyframes e o tamanho final do vídeo importado. Logicamente, quanto à qualidade, quanto maior melhor. O valor definido no campo do intervalo para a criação de keyframes também é responsável pela qualidade final. Quanto menor esse número, maior a qualidade.
I.2. OS MENUS
99
A caixa que diz SYNCHRONIZE VIDEO TO MACROMEDIA FLASH DOCUMENT FRAME RATE sincroniza ou não o vídeo importado à taxa de frames por segundo (frame rate) da animação Flash onde está a ser importado. Logo abaixo uma outra caixa permite ajustar o número de frames de vídeo a ser codificados por frames da animação Flash (NUMBER OF VIDEO FRAMES TO ENCODE PER NUMBER OF MACROMEDIA FLASH FRAMES). Geralmente, assim que carregar em OK na janela anterior e iniciar o processo de importação do filme, verá a seguinte janela.
Nela, o Flash está a perguntar se deseja aumentar a quantidade de frames no seu timeline para o tamanho correspondente à quantidade de frames do filme após a conversão. Neste caso, 102 frames .
FREEHAND
Mas se for importar um ficheiro FreeHand, deverá ir ao mesmo menu FILE > IMPORT e seleccionar o ficheiro em formato FreeHand que deseja importar. Vai ver então a seguinte janela.
100
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A primeira secção da janela corresponde à função de MAPPING e irá informar o Flash de que maneira pretende que a importação do ficheiro seja feita. Em PAGES tem duas opções: SCENES e KEY FRAMES. Na primeira poderá definir se quer que as páginas do seu trabalho no FreeHand sejam transformadas em cenas ou keyframes quando for importada. Na opção LAYERS, poderá definir como quer que os layers do FreeHand sejam importados. A primeira opção é LAYERS. Se a escolher, os layers do FreeHand são importados como layers no Flash. Se escolher a opção KEYFRAMES os layers do FreeHand são importados cada qual num frame na animação Flash, para o caso de se tratar de uma animação onde cada frame foi desenhado como sendo um layer no FreeHand. A terceira hipótese é FLATTEN. Neste caso, todos os layers do FreeHand são combinados e apenas um layer correspondente é criado no Flash. Na secção PAGES da janela poderá definir que páginas do ficheiro FreeHand pretende importar, todas (ALL) ou um número definido de páginas, se utilizar os campos FROM e TO.
I.2. OS MENUS
101
Na secção OPTIONS verá três quadros: INCLUDE INVISIBLE LAYERS, INCLUDE BACKGROUND LAYER e MAINTAIN TEXT BOXES. No primeiro poderá definir se quer ou não importar os layers invisíveis que porventura possam existir no documento FreeHand importado. Na segunda opção, poderá definir se quer importar o layer de background da arte no FreeHand. Na última opção, indicará ao Flash se quer manter os textos criados no FreeHand ainda editáveis no Flash. Publish Settings Do menu FILE esta opção é a mais importante, no que diz respeito à produção das animações em Flash. É nela que deverá ajustar todos os parâmetros que devem ser seguidos para a criação dos ficheiros finais correspondentes ao trabalho que criar. Quando a seleccionar vai ver a janela abaixo.
Vai ver que a janela acima possui três subdivisões, nomeadamente FORMATS, FLASH e HTML.
102
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Porém, se marcar todos os quadros disponíveis nesta janela, verá aumentar o número de subdivisões.
Porém, de todas estas subdivisões, as mais importantes são as três primeiras, as quais falaremos a seguir.
OPÇÃO FORMATS – JANELA PUBLISHING
Nesta primeira divisão, deverá marcar os formatos que pretende produzir. Por defeito, o Flash produz sempre o filme final em SWF e também a página HTML com os comandos para chamar o filme. Deverá notar que enquanto está a trabalhar na sua animação em Flash o ficheiro é guardado no disco no formato FLA. Quando finaliza a animação e a publica, o ficheiro tem o formato SWF. É exactamente este formato o que é visualizado pelo Flash Player directamente no browser. Além disso, pode pedir a produção de uma imagem GIF, JPEG ou PNG equivalente ao primeiro frame do seu filme.
I.2. OS MENUS
103
Existem também disponíveis dois formatos especiais chamados WINDOWS PROJECTOR e MACINTOSH PROJECTOR nos quais o seu trabalho é colocado no interior de um programa, no formato de PC ou MAC. Desta forma, os seus trabalhos podem ser distribuídos e vistos em máquinas que não possuam o Flash Player, ou colocados em CDROM e DVD.
OPÇÃO FLASH – JANELA PUBLISHING
Na divisão Flash, controlam-se os parâmetros do formato SWF, que é o usado na esmagadora maioria dos casos. Para um ficheiro SWF ser visto, é preciso que o computador possua o Flash Player, ou no caso de ser inserido numa página HTML, o browser precisa do plugin na versão correcta (ver abaixo); destacamos as seguintes opções:
VERSION – nesta caixa pode escolher qual a versão de filme Flash que pretende gerar. Se marcar uma versão anterior à 6 (Flash MX), muitas das funções no programa serão desligadas e não as poderá utilizar, uma vez que não seriam possíveis de visualizar numa versão antiga.
104
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
GENERAT E SIZE REPORT – quando marcada esta opção é gerado um ficheiro de texto no mesmo directório onde estiver a gravar o seu trabalho, com um resumo de tudo o que foi gerado durante a criação do filme (publishing). PROTECT FROM IMPORT - Marque esta opção se quiser impedir que outros importem os seus filmes para utilizar nos seus trabalhos. OMIT TRACE ACTIONS – Esta opção funciona em conjunto com a anterior. Se a ligar impedirá que as operações de trace (veja nota de rodapé) sejam mostradas na janela de saída (OUTPUT). DEBUGGING PERMITTED – Se ligar esta opção estará a permitir que um filme seu possa ser “debugged2” remotamente. Poderá usar esta opção com a de PASSWORD, para proteger o seu trabalho. COMPRESS MOVIE – Esta opção apenas está disponível no Flash MX. Quando ligada faz com que uma compressão seja aplicada ao filme, no intuito de diminuir o tamanho final do ficheiro. Use esta opção se tiver muita quantidade de texto ou ActionScript. Se a ligar o filme só poderá ser visto por aqueles que possuírem o Flash 6 Player instalado. PASSWORD – coloque uma password nesta caixa para permitir que os seus filmes possam ser depurados ou importados por outras pessoas. JPEG QUALITY - caixa para estabelecer o nível de compressão das imagens finais. Por defeito, todas as imagens importadas para dentro de um filme no Flash são exportadas em JPEG e tudo o que é ouvido, em MP3. Quanto maior a compressão menor o tamanho do ficheiro e pior a qualidade da imagem. 2
BUG em informática é um erro que um software ou hardware possa ter. Debugging é a operação
para detectar e eliminar esses bugs. Geralmente o que se faz nesta etapa é estabelecer pontos de paragem na animação (BREAK POINTS) para verificar se até aquela etapa está tudo em ordem. Também são utilizados artifícios especiais (TRACES) para enviar informações a uma janela especial (OUTPUT). Estes TRACES ajudam a verificar e acompanhar o estado de variáveis do filme. Ao fazer um TRACE de uma variável X, por exemplo, o FLASH estará a enviar durante todo o tempo do debugging os valores que esta variável X assume durante todas as etapas da animação. Então, pode-se verificar se o programa (ActionScript) está correctamente escrito.
I.2. OS MENUS
105
AUDIO STREAM MP3, 16 Kbps, Mono – Se carregar no botão SET poderá ajustar de que forma deseja gerar as “streams” de áudio. AUDIO EVENT MP3, 16 Kbps, Mono – Se carregar no botão SET poderá ajustar de que forma deseja gerar os “eventos” de áudio.
OPÇÃO HTML – JANELA PUBLISHING
Nesta janela, poderá regular as opções do ficheiro HTML a ser gerado para suportar o filme em Flash que está a publicar.
No campo TEMPLATE poderá escolher um formato para publicar o seu filme, como por exemplo, um formato e alinhamento específico para algum tipo de PocketPC. A escolha por defeito é Flash ONLY.
106
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Logo a seguir vê o campo DIMENSIONS onde pode regular o tamanho do filme, caso pretenda publicar um filme menor do que o tamanho que criou 3. A próxima secção da janela é a PLAYBACK e possui quatro opções: PAUSED AT START, DISPLAY MENU, LOOP e DEVICE FONT. A página HTML que tiver a opção PAUSED AT START marcada irá carregar o filme Flash correspondente mas não o irá executar. O utilizador deverá carregar com o botão da direita do rato sobre a animação e escolher PLAY (figura ao lado), ou criar um botão no filme para executar esta função. DISPLAY MENU indica se deve ou não ser mostrado o menu que surge quando o botão da direita do rato é carregado em cima de uma animação. Veja a figura ao lado. LOOP – indica se o filme deve ser repetido quando chegar ao fim (caso não possua instrução no próprio filme para parar ou fazer outra coisa). DEVICE FONT – Por defeito, o Flash armazena dentro da própria animação todos os tipos de letra que estiverem a ser utilizados. Se marcar esta opção, o Flash passa a não embeber as letras dentro da animação. O problema é que se estiver a utilizar na sua animação um tipo de letra que não exista na máquina do utilizador, o Flash será obrigado a escolher um tipo qualquer de letra, das disponíveis no sistema onde estiver a correr, para colocar no lugar da letra original. Esta opção não é aconselhável de se usar pois pode destruir o visual de 3
Como os filmes em Flash são ficheiros vectoriaisl, estes não possuem um tamanho específico e
podem ser desenhados a qualquer escala. Logicamente, quanto maior o filme, mais a máquina estará a trabalhar, para conseguir manter o filme em PLAY na velocidade correcta. Então, como não é possível delimitar o tamanho do filme pelo próprio filme em si, é preciso delimitá-lo pelo HTML de onde será executado.
I.2. OS MENUS
107
uma animação, caso a letra seja muito diferente da original. Só a use caso tenha a certeza absoluta de que isto não vai acontecer. A vantagem é a diminuição do tamanho final do ficheiro SWF. A próxima opção relevante na janela é a que diz QUALITY. As seguintes opções estão disponíveis: LOW, AUTO LOW, AUTO HIGH, MEDIUM e HIGH. A diferença entre elas é o anti-aliasing: low não faz antialiasing; medium não faz apenas no texto; high faz em todas as formas. LOW – esta opção faz com que o filme seja carregado em baixa qualidade, ideal para serem vistos em máquinas lentas. AUTO LOW – esta opção faz o filme carregar inicialmente em baixa qualidade e passar à média ou alta qualidade consoante o potencial da máquina onde estiver a ser executado. AUTO HIGH – este comando é idêntico ao anterior, porém o filme é carregado inicialmente a alta qualidade que será reduzida caso veja que a máquina não é capaz de visualizar o filme à qualidade indicada. MEDIUM – o filme é executado em média qualidade independente da máquina. Se esta for muito lenta o filme pode não conseguir ser mostrado como pretendido. HIGH – Idêntica à anterior, porém o filme é executado em alta qualidade. Publish Esta é a próxima opção do menu FILE. Uma vez ajustados os parâmetros que pretende na opção PUBLISH SETTINGS, é hora de carregar nesta opção e fazer com que o Flash crie os ficheiros. É aconselhável antes de fazer PUBLISH gravar o ficheiro de trabalho em alguma directoria, pois, caso contrário, o Flash irá “publicar” o seu ficheiro numa directoria interna do próprio programa.
108
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
VIEW No menu VIEW vai encontrar alguns comandos interessantes, dos quais destacamos os mais relevantes. GoTo No caso de haver mais de uma cena na sua animação Flash, esta função irá permitir que se desloque directamente para a cena desejada. As opções que irá encontrar neste menu são, além dos nomes das cenas que tiver criado, FIRST, PREVIOUS, NEXT e LAST, que lhe permitirão ir para a primeira cena, cena anterior, cena posterior e última cena respectivamente. Zoom In, Zoom Out e Magnification As duas primeiras funções são óbvias e permitem que possa aumentar o nível de zoom da área de trabalho, o que em outras palavras corresponderia a ver os objectos mais de perto para poder trabalhar detalhes muito pequenos ou diminuir este nível respectivamente. MAGNIFICATION permite regular directamente o nível de zoom adequado mediante a escolha de um dos valores oferecidos. As duas últimas funções do submenu MAGNIFICATION porém, oferecem as possibilidades de SHOW FRAME e SHOW ALL. Estas duas equivalem a ajustar o nível de proximidade no ecrã para que toda a área de trabalho esteja visível e ajustar este mesmo nível para que toda a área circundante à área de trabalho esteja visível também - logicamente se existir algum objecto que seja maior que a área de desenho ou que esteja fora desta. Outlines, Fast, Antialias, Antialias Text Estas quatro funções são responsáveis por mostrar os objectos com qualidade inferior no ecrã com o propósito de aumentar a velocidade de operação para o caso de estar a lidar com animações complexas (veremos esta funcionalidade mais adiante). OUTLINES faz os objectos serem vistos apenas pelo desenho dos seus contornos;
I.2. OS MENUS
109
FAST mostra os objectos normalmente mas desenha-os em baixa qualidade; ANTIALIAS mostra os objectos com qualidade óptima mas mantém todo o texto em baixa qualidade; ANTIALIAS TEXT é a maior qualidade. Tudo é mostrado em alta qualidade. RULERS, GRID e GUIDES Estas três funções equivalem a três funcionalidades importantes do Flash. RULERS (réguas) – Por defeito, as réguas horizontal e vertical estão visíveis no ecrã. Estas réguas ajudam a que tenha uma ideia do tamanho do objecto que estiver a criar. Veja a figura abaixo.
GRID (grelha) – O grid é um auxiliar de desenho no qual é activada uma grelha sobre a área de desenho para lhe ajudar a criar os objectos enquanto os estiver a desenhar. Dentro deste submenu vai encontrar três outras funções: VIEW GRID, SNAP TO GRID e EDIT GRID. Se accionar o VIEW GRID, vai ver que a sua área de desenho fica com uma grelha como vista na figura abaixo.
110
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se accionar a função SNAP TO GRID, então à medida em que deslocar o rato somente poderá criar pontos que estejam contidos nas intersecções das linhas do grid. Mesmo que esteja a desenhar à mão livre, o Flash estará a interpretar o seu desenho segundo estes pontos do grid. Veja a figura abaixo.
Repare como todos os pontos formadores dos objectos (vértices) estão localizados nos pontos do grid. Se escolher a opção EDIT GRID vai ver a janela abaixo onde poderá ajustar as propriedades do grid.
I.2. OS MENUS
111
Na primeira caixa, logicamente, poderá escolher a cor do grid. Logo em seguida pode ver duas caixas: SHOW GRID e SNAP TO GRID, as quais acabamos de descrever. Nas duas caixas seguintes, poderá ajustar a distância entre as linhas horizontais e verticais do grid. Por defeito, estes campos são ajustados em 18 pixéis. O último campo, denominado de SNAP ACCURACY, permite ajustar o grau de precisão do acto de colar os pontos ao grid. As opções são da maior precisão para a menor: MUST BE CLOSE, NORMAL, CAN BE DISTANT e ALWAYS SNAP. GUIDES (guias) – Os guias são outro auxiliar de desenho que correspondem a linhas horizontais e verticais mostradas por cima da área de desenho e que o ajudam a se orientar enquanto desenha. Para criar um guia carregue com o botão da direita do rato em cima de uma das réguas, mantenha o botão carregado e mova o rato para a área de desenho. Depois de criado um guia poderá mudá-lo para outra posição clicando em cima do guia e arrastando-o para outro sítio. No menu VIEW > GUIDES, vai encontrar quatro opções: SHOW GUIDES, LOCK GUIDES, SNAP TO GUIDES e EDIT GUIDES. Na primeira opção pode tornar os guias visíveis ou não. Na segunda pode colocar travados os layers para que não possam ser movidos para outro sítio. Na terceira opção pode fazer com que os guias possam ter funcionalidade semelhante à do grid, ou seja, qualquer ponto clicado nas imediações do grid seriam colados a este. A última opção permite que ajuste a cor do guia e parâmetros semelhantes aos que ajustou no grid.
112
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
MODIFY O menu MODIFY do Flash MX fornece-nos diversas ferramentas para manipular e transformar os objectos (SHAPES). Enc ontraremos ferramentas para suavização, simplificação, conversão de imagens para vectores e muito mais. Vamos a elas. Shape - Soften Fill Edges Este comando chamado SOFTEN FILL EDGES é muito importante para criar suavizações nos contornos das formas. Uma das maiores utilidades para ele é a criação de sombras para objectos. Crie então uma forma qualquer, por exemplo, um círculo no meio da área de desenho, e carregue duas vezes na sua área interna para o seleccionar. Vá ao menu MODIFY > SHAPE > SOFTEN FILL EDGES. Surgirá então a janela a seguir.
No campo DISTANCE poderá regular o tamanho da suavização, em NUMBER OF STEPS a quantidade de níveis que esta suavização terá e em DIRECTION poderá definir a direcção da suavização, para fora (EXPAND) ou para dentro (INSET) da forma. Veja então o que acontece com o círculo, quando aplicamos uma suavização com DISTANCE =20 px, NUMBER OF STEPS = 6 e DIRECTION = INSET.
I.2. OS MENUS
Se observar a borda com mais cuidado verá o seguinte
113
114
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Repare que pode contar os 6 níveis que definiu para o NUMBER OF STEPS. Então, como vê, a suavização pode melhorar se aumentarmos o número de níveis. Se aumentar para 50 níveis, verá a imagem abaixo.
OBSERVAÇÃO Quanto maior a quantidade de níveis na suavização, melhor é a qualidade final e MAIOR é o objecto. Por esse motivo, deve saber dos ear os níveis de acordo com o objectivo final para não correr o risco de produzir animações gigantescas que façam o utilizador desistir de as tentar ver.
Convert Lines to Fills Se precisar converter uma linha de contorno de um objecto qualquer numa área de pintura (fill), deve utilizar o comando CONVERT LINES TO FILLS existente no menu MODIFY > SHAPE.
115
I.2. OS MENUS 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 arredondada. Isso pode ser útil para corrigir formas muito irregulares.
OBSERVAÇÃO Algumas formas com cantos em bico ou larguras muito finas não se saem bem durante um SMOOTH.
116
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Inserimos algumas letras na área de desenho conforme pode ver pela imagem abaixo.
Depois de repetidos SMOOTHs as letras ficaram da seguinte forma.
OBSERVAÇÃO Para transformar uma letra numa forma e assim poder fazer as operações existentes para as formas, é preciso seleccioná-las e quebrá-las duas vezes com o comando MODIFY > BREAK APART.
Straighten Ainda no menu MODIFY encontramos outra função designada STRAIGHTEN, que faz exactamente o oposto do SMOOTH, ou seja, tira a suavização. Linhas outrora curvas e suaves passam a rectas em ângulos agudos. Veja o que aconteceu às letras ABCD depois de accionarmos seguidas vezes o comando STRAIGHTEN.
I.2. OS MENUS
117
Optimize No mesmo menu MODIFY também encontramos o comando OPTIMIZE. Com ele é possível simplificar uma forma existente para algo com menos pontos e consequentemente mais leve. Digamos que tenha transformado uma imagem em vectorial. Porém, durante a conversão, o objecto final ficou com um número muito grande de pontos o que o tornou deveras pesado para ser colocado na animação. Então, pode tentar uma simplificação dos pontos por meio deste comando. Assim que accionado o comando, surge a janela a seguir.
Pode ver uma barra deslizante (slider) no meio da janela de SMOOTHING. Esta barra regula o grau de suavização que o SHAPE terá durante a optimização. Se a deslocar para a esquerda nenhuma optimização será feita, e para a direita teremos o grau máximo de optimização. A seguir vemos um quadro que diz USE MULTIPLE PASSES (SLOWER). Ao marcá-lo obrigará o Flash a fazer várias optimizações
118
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
até ao resultado final. Esta opção, conforme indicada, faz o processo demorar bem mais a finalizar. O último quadro diz SHOW TOTALS MESSAGE e quando marcado obriga o Flash a mostrar uma janela final com o resumo do que foi feito. Este comando deve ser usado por tentativa e erro, já que fornece resultados consoante a forma submetida à optimização. Trace Bitmap Esta é uma das mais importantes funções encontradas no menu MODIFY. Com ela poderá transformar imagens em formas , que poderá modificar no Flash. Além do mais, é muito mais conveniente para o Flash se tiver de lidar com formas e não com imagens. O que este comando faz é analisar a imagem, e de acordo com o contraste da imagem e com as diferenças de cor tentar descobrir e isolar cada um dos objectos e criar com isso objectos para representar a imagem original. Importe uma imagem qualquer na área de desenho e accione o comando. Verá então a janela a seguir.
A explicação para cada um dos campos vistos na janela acima está a seguir.
I.2. OS MENUS
119
COLOR THRESHOLD – Neste campo é possível regular o nível de transição das cores, de 1 a 500. A finalidade deste campo é permitir a produção de traçados mais perfeitos para os casos de imagens pouco ou muito contrastadas. MINIMUM ÁREA – Neste campo poderá ajustar o número de pixéis que o Flash considerará durante o cálculo, de 1 a 1000. Quanto menor o número, maior a precisão do traçado e, consequentemente, mais pesado será o objecto final. CURVE FIT – Neste campo poderá regular a precisão das curvas do traçado. Várias opções estão disponíveis: PIXELS, VERY TIGHT, TIGHT , NORMAL, SMOOTH e VERY SMOOTH. A primeira opção equivale “ao pixel” e corresponde ao nível que fornece a curva mais precisa segundo a imagem traçada. Daí para a frente, os níveis de precisão diminuem. Logicamente, quanto mais preciso o traçado melhor o resultado final e maior o objecto. CORNER THRESHOLD – Neste caixa poderá regular a quantidade de esquinas ou bicos nas formas. As opções são: MANY CORNERS, NORMAL e FEW CORNERS, ou seja, muitos cantos, normal e poucos cantos, respectivamente. Digamos então que importa a imagem abaixo e a transforma com os parâmetros vistos na janela anterior.
120
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Depois de transformada, a imagem fica com a aparência abaixo.
O que deve notar agora é que cada parte da imagem é vectorial e pode ser movida, deslocada, animada, mudada de cor ou sofrer qualquer outro tipo de transformação própria a um objecto que puder ser feita no Flash. Veja a imagem abaixo.
Veja como depois da transformação é fácil seleccionar cada uma das partes e retirá-la da imagem. Deve observar entretanto, que depois da transformação a imagem perdeu a aparência realista e ficou a parecer um tipo de desenho ou pintura, o que pode ser um efeito interessante. Esta modificação ocor-
I.2. OS MENUS
121
reu porque é inerente à função TRACE BITMAP. Mesmo que os valores da precisão fossem aumentados, haveria sempre uma degradação na qualidade final, uma vez que esta função é adequada à transformação principalmente de desenhos, logótipos, etc. Transform Ainda no menu MODIFY, encontramos o comando TRANSFORM, que fornece muitas das funções que já conhecemos as quais são accionadas pela barra de ferramentas. Ao accionar esta função, vai ver o menu da figura abaixo.
As primeiras seis funções deste menu são nossas conhecidas, disponíveis por ícones na barra de ferramentas sobre os quais falamos anteriormente. ROTATE 90º CW e ROTATE 90º CCW permitem rodar um objecto 90 graus no sentido horário ou anti-horário, respectivamente. FLIP VERTICAL e FLIP HORIZONTAL permitem girar o objecto 180 graus em relação a um eixo imaginário vertical ou horizontal, respectivamente, que passe pelo centro do objecto. Por outras palavras, corresponde a espelhar em relação a estes eixos.
122
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
REMOVE TRANSFORM (MODIFY > TRANSFORM > REMOVE TRANSFORM) serve para remover todas as transformações que tiverem sido feitas ao objecto. Arrange Este é o próximo item encontrado no menu MODIFY. Dentro deste item do menu encontraremos diversas opções para manipular objectos que estejam a ser desenhados todos no mesmo layer.
BRING TO FRONT – Esta opção permite trazer um objecto para a frente de todos os objectos dentro de um layer. BRING FORWARD – Se imaginar vários objectos desenhados 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, estará a fazer um objecto subir um nível ou degrau dessa escada. SEND BACKWARD – Esta função faz exactamente o inverso da anterior. SEND TO BACK – Faz um objecto ir imediatamente para a posição mais abaixo de todos os outros.
I.2. OS MENUS
123
LOCK – Este comando “trava” um objecto num determinado degrau, e impede que este seja modificado. UNLOCK ALL – liberta todos os objectos que estavam travados. Align O próximo item encontrado no menu MODIFY é o ALIGN. Com este item é possível fazer o alinhamento de diversos objectos que se encontrem dispostos no mesmo layer ou em layers diferentes.
A explicação para cada uma destas opções está a seguir. A primeira função que precisa conhecer é a última do menu, ou seja, TO STAGE. Este comando pode estar ou não accionado. Quando accionado ele faz com que o tamanho da área de desenho (stage) seja considerada durante as transformações. Caso contrário, apenas as posições dos objectos e os seus pontos são considerados. A seguir explicamos cada comando visto na janela. LEFT - Alinha todos os objectos seleccionados pelos seus pontos mais à esquerda. Toma como referência para o alinhamento o objecto que
124
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
mais à esquerda estiver. Caso TO STAGE esteja ligado, então os objectos seleccionados são alinhados à esquerda da área de desenho. CENTER VERTICAL - Este comando leva em conta o ponto superior do objecto que estiver mais acima e o ponto inferior do objecto que estiver mais abaixo. Assim, calcula o ponto médio e alinha os centros verticais4 de cada objecto segundo este ponto. Caso TO STAGE esteja ligado, então os objectos são alinhados ao centro vertical da área de desenho. RIGHT – Alinha todos os objectos seleccionados pelos seus pontos mais à direita. Toma como referência para o alinhamento o objecto que mais à direita estiver. Caso TO STAGE esteja ligado, então os objectos seleccionados são alinhados à direita da área de desenho. TOP - Alinha todos os objectos seleccionados ao topo, tomando como base o ponto mais superior do objecto que estiver mais acima. Caso TO STAGE esteja ligado, então os objectos são alinhados ao topo da área de desenho. CENTER 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 horizontal da área de desenho. BOTTOM - Alinha todos os objectos seleccionados pelos pontos inferiores de cada objecto. Caso TO STAGE esteja ligado, então os objectos são alinhado ao fundo da área de desenho. DISTRIBUTE WIDTHS - Este comando leva em conta o objecto que estiver mais à esquerda e o que estiver mais à direita para descobrir a quantidade de pixéis existente no intervalo. Assim, distribui os centros horizontais dos outros objectos para que fiquem igualmente espaçados nesta direcção. Caso TO STAGE esteja ligado, então a largura da área
4
O centro do objecto é onde está o eixo central deste.
I.2. OS MENUS
125
de desenho passa a ser a quantidade de pixéis disponíveis para espaçar os objectos. DISTRIBUTES HEIGHTS – Este comando leva em conta o objecto que estiver mais acima e o que estiver mais abaixo para descobrir a quantidade de pixéis existente no intervalo. Desse modo, distribui os centros verticais dos outros objectos para que fiquem igualmente espaçados nesta direcção. Caso TO STAGE esteja ligado, então a altura da área de desenho passa a ser a quantidade de pixéis disponíveis para espaçar os objectos.
MAKE SAME WIDTH – Faz com que todos os objectos fiquem com a mesma largura. Toma como base o objecto mais largo. Caso TO STAGE esteja ligado, então os objectos passam a ter a largura da área de desenho.
MAKE SAME HEIGHT - Faz com que todos os objectos fiquem com a mesma altura. Toma como base o objecto mais alto. Caso TO STAGE esteja ligado, então os objectos passam a ter a altura da área de desenho. Também existe outro menu no Flash onde poderá encontrar os mesmos comandos de alinhamento sobre os quais acabamos de falar. Basta que vá ao menu WINDOW e escolha a opção ALIGN, depois do que verá surgir a janela que colocamos na figura abaixo juntamente com as explicações de cada ícone. É até preferível que passe a utilizar o ALIGN disponível pelo accionamento deste comando, uma vez que este contém mais opções disponíveis.
126
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Notamos a presença de alguns outros comandos não presentes no MODIFY > ALIGN. DISTRIBUTE TOP – Faz o mesmo que o DISTRIBUTE HEIGHTS, visto anteriormente, porém considera o ponto mais superior de cada objecto durante o cálculo. Se TO STAGE estiver ligado então a altura da área de desenho passa a ser considerada no cálculo. DISTRIBUTE BOTTOM – Faz o mesmo que o DISTRIBUTE HEIGHTS visto anteriormente, porém considera o ponto mais inferior de cada objecto durante o cálculo. Se TO STAGE estiver ligado, então a altura da área de desenho passa a ser considerada no cálculo. SAME WIDTH AND HEIGHT – Faz os objectos seleccionados ficarem com a mesma largura e altura. Se TO STAGE estiver accionado, então os objectos seleccionados passam a ter a mesma largura e altura da área de desenho.
I.2. OS MENUS
127
SPACE EVENLY VERTICALLY – Espaça por igual os objectos na vertical. SPACE EVENLY HORIZONTALLY – Espaça por igual os objectos na horizontal. Group & Ungroup GROUP e UNGROUP são dois itens também presentes no menu MODIFY. Com estes dois comandos poderá agrupar ou desagrupar objectos. Quando cria objectos com as ferramentas de desenho do Flash, deve lembrar-se que estes geralmente são formados por uma linha que delimita o seu contorno (LINE) e por uma área interior preenchida por uma cor ou gradiente (FILL). Se deseja fazer alguma operação de alinhamento, de mudança de ordem de desenho (arrange), etc., primeiro é preciso agrupar LINE e FILL pelo uso do comando GROUP. Este comando também é útil quando tem vários objectos criados no mesmo layer e quer agrupá-los no sentido de os animar mais facilmente. Se a qualquer instante os quiser desagrupar, basta utilizar o comando UNGROUP no mesmo ponto no menu MODIFY. Break Apart Se aplicar este comando a um grupo terá a quebra deste grupo e a transformação de cada elemento na sua forma mais básica, ou seja, cada objecto volta a ser a sua borda e área de cor (line & fill). Este comando é essencial para os casos de desejar fazer operações com letras e formas, como utilizar o formato da letra para fazer um furo num objecto. Se for este o caso, deverá partir antes as letras em LINE e FILL com o uso desta função. Deve notar que quando faz o primeiro BREAK APART numa palavra, primeiro obtém a separação de cada letra da palavra, que se torna uma forma em separado. O segundo BREAK APART transforma tudo em LINE & FILL. Uma vez que a letra tenha sido transformada na sua forma
128
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
mais básica não mais poderá ser editada com a ferramenta de texto, já que nesta altura passou a ser um desenho e perdeu a sua propriedade de ser letra e a consequente capacidade de ser editada.
OBSERVAÇÃO Quando utiliza letras nas suas animações, o Flash armazena, no ficheiro final, as informações vectoriais de como desenhar estas letras, independentemente da quantidade de letras que desenhar. Assim , se a sua animação contiver 200 letras A, o Flash armazenará apenas uma informação que lhe permita desenhar esta letra. Uma letra partida em LINE e FILL com a função BREAK APART ocupa mais espaço no ficheiro final da animação, pois o Flash precisa armazenar todos os pontos da forma para conseguir desenhar o objecto correctamente.
Distribute to Layers Esta é uma função também existente no menu MODIFY e que permite enviar para outro layer novo um objecto que esteja seleccionado num determinado layer. Assim, se tem por exemplo dois objectos presentes no mesmo layer, pode seleccionar um deles e escolher DISTRIBUTE TO LAYERS e fazer com que este objecto passe a figurar num layer novo. Se mais objectos estiverem seleccionados no momento da escolha desta função, então cada um deles é colocado num layer diferente.
I.3. LAYERS, TIMELINE e ANIMAÇÃO
Antes de saber fazer animações no Flash é preciso entender o que é o timeline e saber lidar com os layers (camadas).
Layers O Flash utiliza na sua forma de trabalho o conceito dos objectos dispostos em layers, como é comum nos melhores softwares de desenho e edição gráfica disponíveis no mercado. Os layers são como folhas de acetato transparentes, sobrepostas, onde poderá criar objectos estáticos ou animados. Desta forma, cada layer fica independente de todos os outros. Os layers são representados no timeline, conforme a figura abaixo.
130
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Os layers, assim como as folhas de acetato, são montados de baixo para cima, ou seja, desenhados de baixo para cima. Logo, segundo a figura acima, os layers são desenhados na ordem 1, 2, 3, 4 e 5. Assim, um objecto no layer 2 pode cobrir um outro no layer 1, já que é desenhado depois.
Quando entra no Flash, por defeito é criado o “Layer 1”. Para criar novos layers basta carregar no ícone no canto esquerdo inferior do timeline ou ir ao menu INSERT > LAYER.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
131
Também poderá guardar os layers em pastas, dentro da janela do timeline e assim organizar melhor os seus trabalhos, principalmente quando estiver a lidar com um número grande de layers. Inclusive poderá ter pastas dentro de pastas! Para criar uma, carregue no terceiro ícone no canto inferior esquerdo do timeline.
Então poderá organizar os seus layers como na figura abaixo.
132
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
DICAS Para nomear uma pasta ou layer basta carregar duas vezes sobre o nome daquilo que deseja mudar. Para colocar um layer dentro de uma pasta basta arrastá-lo para lá. Para abrir ou fechar uma pasta e ver o que contém, basta carregar uma vez sobre ela.
Olho, Cadeado e Quadrado Colorido Se observar cuidadosamente a janela do timeline vai ver que existem três colunas na parte dos layers: Uma representada por um olho, outra por um cadeado e a última por quadrados coloridos.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
133
Pode ver pela figura abaixo, a função de cada um destes ícones.
OLHO (show/hide layer) Esta coluna representa a visibilidade de um layer. Se contiver uma bolinha na linha do layer, significa que este está visível. Se um X estiver presente, é sinal que o layer está invisível.
CADEADO (lock/unlock layer) Esta coluna representa o bloqueio do layer. Se uma bolinha estiver presente na linha do layer, significa que o layer está desbloqueado. Caso um cadeado esteja presente, o layer está bloqueado. Isto significa que não pode ser seleccionado na janela de desenhos. A função é útil quando precisamos impedir que um layer seja seleccionado na janela de desenhos, quando estivermos a trabalhar em animações intrincadas.
134
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
QUADRADO COLORIDO (show layer as outline) Se está a lidar com animações que possuem uma grande quantidade de objectos ou objectos de tamanhos grandes e, consequentemente, que estejam a ocupar muita memória, provavelmente será difícil trabalhar na área de desenho, já que objectos deste tipo tendem a tornar lenta a operação, já que requerem grande processamento do Flash, no sentido de desenhá-los correctamente cada vez que os move. Então, pode utilizar o quadrado colorido para transformar um objecto deste tipo em apenas linhas de contorno. Assim, o Flash não vai ter muito o que desenhar e lidar com os objectos na animação torna-se uma tarefa leve. Veja as figuras abaixo. Objectos c omo estes...
ficam assim...
135
I.3. LAYERS, TIMELINE E ANIMAÇÃO
... ou seja, muito mais leves, pois o Flash fica com menos coisas para desenhar! Na realidade, o objecto não é modificado, apenas é mostrado de forma simplificada.
DICA Para aplicar de uma só vez as propriedades referentes ao olho, cadeado ou outline a todos os layers da animação, basta carregar no símbolo correspondente no alto da coluna.
O Timeline Como se disse no capítulo anterior, o Flash é um programa que permite criar elementos gráficos com animação e interacção. Para criar as animações, é preciso, depois de criar os elementos, definir os estados em que estarão ao longo do tempo. Quando vai ao cinema, está, de facto, a ver uma sequência de imagens paradas. Como estas imagens paradas estão a ser projectadas a uma velocidade de 24 imagens por segundo 1, tem a impressão de que está a ver movimentos contínuos como na vida real. Os filmes 2 em Flash são projectados a taxas que podem variar. Por defeito, o valor está ajustado a 12 fps (frames por segundo).
1
O termo “imagens por segundo” também é conhecido como “quadros por segundo”, ou frames , do inglês. Normalmente usa-se a sigla “fps” para representar esta grandeza, que significa frames per second.
2
Tudo o que é feito no FLASH tem o nome de “filme”. A área de desenho também é conhecida
como “stage” (palco).
136
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Agora imagine que deseja construir um círculo e fazê-lo aumentar de tamanho em dois segundos. Então, se está a trabalhar a 12 fps, teoricamente deveria criar 24 desenhos do círculo, para causar a ilusão de que ele aumenta de tamanho. Porém, para facilitar a sua vida, o Flash permite o uso de keyframes para a criação das animações. Um keyframe é um “frame chave” que define um estado em particular do objecto num dado momento no tempo.
KEYFRAMES - representação no timeline Se pretender criar uma animação do círculo de um tamanho X para Y, basta definir dois keyframes para representar estes estados, um no frame em que deseja que a animação comece e outro no frame em que o círculo encerra a sua animação. Daí para a frente, o Flash encarrega-se de calcular os tamanhos intermédios do círculo, de forma a tornar suave o aumento de tamanho 3. A representação dos keyframes é feita no timeline e é simbolizada por uma pequena bolinha ou ponto no frame onde está situado. Na figura abaixo pode ver que o objecto no Layer1 tem dois keyframes , um no frame 1 e outro no frame 30.
O timeline é uma das principais partes da interface gráfica do Flash. É nele que ocorrem todas as acções, interacções e movimentações dos objectos. Os keyframes são a chave para tudo isso ocorrer.
3
Estes frames intermédios são conhecidos como “in between” e o acto de fazer o cálculo deles é
conhecido como “tweening”.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
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. Vemos por esse motivo que o label é uma funcionalidade deveras poderosa. Além do mais, caso precise alterar algo da animação que venha a mudar os frames antes considerados, teria um trabalho redobrado em actualizar nos outros pontos da animação todas as referências aos frames alterados. Para acrescentar um label a um frame simplesmente posicione o rato num frame ou região que já exista no timeline e vá à janela de propriedades.
138
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Em seguida carregue no quadro que diz “” e coloque um nome qualquer. Assim que o fizer, o timeline passa a mostrar a indicação da existência do label pela colocação de uma pequena bandeira vermelha com o label no local apropriado.
A seguir então vamos passar a uma primeira simples animação, para que se familiarize com o uso do timeline e com a criação de keyframes. O uso da opção ‘Named Anchor’ juntamente com a label, permitirá que o botão back e forward do browser interajam com o filme. Para utilizar esta capacidade, é preciso seleccionar o template ‘Flash with Named Anchors’ na janela HTML do PUBLISH SETTINGS.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
139
A Animação frame-a-frame Pode pensar na primeira animação que irá realizar aquela na qual determina a posição de todos os objectos em cada um dos frames da animação. Assim, se tem três frames no total, deve mostrar ao Flash onde quer cada objecto para que a animação seja feita correctamente. Então podemos começar por algo simples. Imagine que deseja fazer um quadrado a girar e diminuir de tamanho sem que mude de lugar. Comece então por desenhar um quadrado com a ferramenta RECTANGLE TOOL da barra de ferramentas no meio da área de desenho. Assim que tiver terminado terá criado o que é tecnicamente definido pelo Flash com uma forma (shape). A próxima etapa é transformar esse shape que criou em símbolo4. Para fazer isso seleccione a Arrow Tool na barra de ferramentas, posicione o cursor no meio da figura que criou e clique duas vezes para seleccionar as duas partes que formam o quadrado 5 e vá ao menu INSERT > CONVERT TO SYMBOL. Verá então uma janela surgir que deve preencher e marcar conforme mostrado na figura abaixo.
4
Ao faz er isso estará a acrescentar o objecto à biblioteca (veremos isso mais adiante).
5
Dito no plural pois geralmente um objecto possui duas partes: a linha de contorno e a área de
preenchimento de cor (line & fill).
140
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Nesta janela pode ver o item REGISTRATION que indica onde quer colocar o ponto de transformação do objecto. Por defeito, é ajustado ao centro mas pode colocar em qualquer dos nove pontos indicados. Em relação a este ponto é que todas as transformações serão feitas (escalas, translações, rotações, etc.). Seleccione agora o objecto clicando uma vez com a Arrow Tool em cima deste e com o botão carregado mova-o para que fique no centro da área de desenho. Esta então fica a ser a posição do quadrado no primeiro frame da animação. Mova o rato até ao frame 2 no timeline e clique com o botão da direita. Surgirá um menu flutuante. Escolha a opção INSERT KEYFRAME, conforme mostrado abaixo.
Esta operação vai criar um novo keyframe no frame 2 da animação, que ficará conforme visto abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
141
Arraste o quadrado semi-transparente rosa que é visto na figura acima sobre o número indicativo do frame 1 para que fique em cima do frame 2. Veja a figura abaixo.
Repare que existe uma bolinha a marcar o frame 1 e outra a marcar o 2. É sinal de que existem dois keyframes criados para o objecto neste layer. Utilize agora a FREE TRANSFORM TOOL da barra de ferramentas e com ela clique em cima do objecto. Posicione o rato no canto inferior direito do quadrado até que surja o símbolo representativo de que está prestes a efectuar uma rotação no objecto, conforme visto a seguir.
142
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Rode o objecto e diminua-o de tamanho até que fique conforme indicado na figura a seguir.
Repita o procedimento de criação de keyframe para criar o frame 3 da animação e novamente transforme o objecto para que fique conforme a figura abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
143
Então terá uma animação correspondente a 3 frames.
Se arrastar o quadrado rosa indicador do frame actual ao longo dos frames criados vai poder ver a sua animação. Também poderá ver a animação a correr em tempo real se colocar o Flash no modo TEST MOVIE (CONTROL > TEST MOVIE). As animações frame-a-frame são úteis para o caso de querer criar animações do tipo stop motion 6 ou de formas orgânicas, como o movimento de pessoas, animais, insectos, etc. Também as poderá utilizar para criar movimentos mais realistas de objectos como cortinas, tecidos e outros. Estas animações, apesar de serem as mais simples, são as mais trabalhosas, pois terá de criar keyframes para todos os frames da
6
ao estilo das animações feitas em vídeo ou película com personagens criadas a partir de massas
de modelar.
144
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
animação7. Então, se o seu filme está a correr a uma taxa de 12 fps, terá de criar 12 imagens para ter 1 segundo de filme. Os programas que transformam vídeos em Flash, ou que fazem efeitos para o Flash, geralmente fornecem saídas em ficheiros com tudo colocado frame-a-frame. No caso de um vídeo é até lógico já que o próprio vídeo em si é composto de imagens diferentes frame a frame.
A Animação Motion Tween A animação do tipo MOTION TWEEN é justamente aquela que referimos na secção anterior, como sendo a que permite criar animações sem exigir a criação de todos os keyframes que correspondem ao seu tempo total. A animação motion tween utiliza o conceito de TWEENING para criar o movimento entre os keyframes base. Assim, se um objecto tem no frame 1 o tamanho de 100 e no frame 30 o tamanho de 10, o programa saberá fazer os cálculos necessários para deduzir o tamanho do objecto ao longo dos frames. Desse modo, ao assistirmos a tal filme, veríamos o objecto a diminuir de tamanho de 100 para 10 ao longo de 30 frames. Vamos então criar uma animação deste tipo para ver como funciona. Carregue em FILE > NEW para iniciar um novo filme. Com a ferramenta de criação de ovais na barra de ferramentas crie um círculo de médio tamanho no centro da área de desenho. Carregue no ponto preto que simboliza o frame 1 no timeline para seleccionar as duas partes componentes do círculo. Carregue em INSERT > CONVERT TO SYMBOL para transformar os objectos em símbolos e acrescentá-los à biblioteca8 (falaremos sobre bibliotecas mais adiante).
7
Vai ver na próxima secção que é possível criar animações sem ter de criar todos os keyframes .
8
Deve observar que só é possível fazer animações motion tween de símbolos e não de grupos, por
isso tivemos que transformar o círculo, até então apenas um shape, em símbolo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
145
Quando fizer isso vai ver uma janela conforme indicado na figura abaixo.
Mova o rato até que fique sobre o frame 30 no timeline e carregue no botão da direita. No menu que surgir, escolha a opção INSERT KEYFRAME. O timeline ficará com a aparência abaixo.
Carregue com o rato em cima da bolinha do keyframe 30, para seleccionar o objecto na área de desenho neste frame. Vá à barra de ferramentas e escolha o FREE TRANSFORM TOOL na barra de ferramentas, para poder fazer algumas alterações no tamanho e na aparência do objecto. Se olhar agora para a área de desenho vai ver que o círculo está seleccionado e que um quadrado preto com pontos está à volta. Veja a seguir.
146
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Posicione o rato no ponto negro superior direito do quadrado e clique com o rato. Mantendo o botão carregado, mova o ponto para outro sítio, de forma a aumentar o tamanho do círculo e em seguida liberte o botão. O que acabou de fazer foi aumentar o tamanho original do círculo. Porém, como fez isso enquanto estava com o timeline posicionado no frame 30, então o que fez foi aumentar o tamanho do círculo nesse frame apenas. Verifique a veracidade desta afirmação carregando alternadamente nas bolinhas correspondentes ao frame 1 e 30 no timeline. Se observar o timeline vai ver que na verdade o círculo começa com um tamanho no frame 1 e o mantém até ao frame 29, quando então, subitamente, aumenta de tamanho ao entrar no frame 30. Se era isso o que pretendia a animação está encerrada. Porém , se a sua intenção era fazer uma animação suave, continue a ler os parágrafos a seguir. Carregue na bolinha correspondente ao frame 1 (início da animação) e nas propriedades do objecto visíveis na parte central inferior do ecrã, mude o campo TWEEN para MOTION. Veja a figura abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
147
Deve ter observado que o campo TWEEN tem outra opção chamada SHAPE, a ser vista mais adiante. Verá que agora a linha do timeline ficou lilás e com uma seta a indicar uma animação do frame 1 ao 30, conforme figura abaixo.
Arraste o rectângulo rosa existente na área da numeração dos frames no timeline para os lados, para ver que a animação agora está suave.
NOTA IMPORTANTE Cuidado que este tipo de animação só funciona se no layer em questão estiver um único objecto ou grupo de objectos, como fizemos neste exemplo. No entanto, a situação ideal é usar um único símbolo da Library que será estudada mais tarde.
Ease In & Ease Out (o controlo do movimento) Repare na figura relativa às propriedades do frame, que existe uma caixa EASE. Esta variável controla a forma na qual é feita a distribuição da animação ao longo do intervalo de keyframes . Em termos gerais, a variável regula a forma como a animação chega ou sai de um determinado keyframe. Tecnicamente são conhecidas pelos nomes de EASE IN e EASE OUT.
148
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Noutros softwares de animação como o Maya, Alias PowerAnimator, Combustion, Inferno, 3DS MAX, After Effects, etc., estão disponíveis maneiras de se regular independentemente estas duas funções, no keyframe inicial e no final de um determinado segmento. Porém, no Flash, foi feita uma simplificação. O ajuste é apenas feito no primeiro keyframe do segmento. Por defeito, a distribuição de movimento é feita de forma linear, ou seja, se um shape tem uma posição, tamanho, ângulo de rotação, etc., no primeiro keyframe e X frames depois tem outra completamente diferente, então o Flash calcula a diferença de propriedades entre os dois keyframes e divide pelo número de frames, para fazer o movimento linear entre os pontos. Digamos que no frame 1 tem um círculo com um tamanho de 1 e dez frames depois aumentou para 30. Então, a cada frame da animação o Flash vai aumentar o tamanho em 3, o que significa... ... no frame 1 o tamanho do círculo = 1 ... no frame 2 o tamanho do círculo = 4 ... no frame 3 o tamanho do círculo = 7 ... no frame 4 o tamanho do círculo = 10 ... ... no frame 10 o tamanho do círculo = 30
Logo, o círculo aumenta linearmente ao longo do tempo. Em termos gráficos de movimento ao longo do tempo teríamos o seguinte.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
149
Se agora posicionar o controlo de EASE todo para cima, na direcção de EASE = 100 terá modificado o gráfico para o visto abaixo.
Se olhar atentamente para o gráfico acima, verá que não há mais linearidade de movimento ao longo do tempo. Agora o movimento começa rápido e em seguida desacelera. Se ajustar o EASE para –100 vai ter exactamente o inverso: o movimento começa devagar e depois acelera, conforme pode observar abaixo.
150
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A vantagem de ser permitido este tipo de ajuste reside no facto de que às vezes é preciso criar movimentos acelerados e desacelerados, como o movimento de pêndulos ou de bolas que saltam. É uma função útil que, se bem entendida, pode ajudar a melhorar a qualidade das animações produzidas.
Como é que o Flash interpreta uma animação? Como vimos, o Flash precisa conhecer a posição do objecto em cada frame para conseguir calcular a animação. Então, ao fornecer keyframes para os intervalos que deseja animar ou para cada um dos frames, está a dar meios ao Flash para compor todos os elementos conforme planeado ao longo do tempo. O Flash precisa basicamente utilizar a capacidade de cálculos da máquina para conseguir mostrar correctamente a animação. Então, ao fazer uma animação, deve ter em conta a quantidade de exigências que ela vai ter na máquina onde for correr. Cálculos muito complexos como objectos de tamanhos gigantes ou muitos objectos com transparências de uns sobre os outros, vão exigir muita capacidade da máquina e talvez não consiga ser visto conforme pretende. Teste sempre a sua animação em máquinas de baixa capacidade. Quando cria uma animação e a põe a correr, o Flash começa-a sempre pelo primeiro frame e avança sequencialmente para a frente em intervalos de um frame9. Então, se vai fazer, por exemplo, um programa em ActionScript, deve colocar os códigos e comandos em cada um dos frames que pretende fazer alguma acção. Os programas ou comandos em ActionScript são dispostos nos frames em que o programador deseja fazer algo e são separados por objecto, ou seja, cada objecto carrega consigo o código ActionScript que vai precisar. Desta forma, cada objecto que carregue consigo linhas de ActionScript dispostas em frames específicos terá estes códigos executados quando os frames onde estas linhas estiverem forem visualizados.
9
se não for dada nenhuma ordem para que ele actue de forma diferente.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
151
Digamos, por exemplo, que deseja realizar uma animação de um carrinho que deita fumo pelo tubo de escape e esteja sempre a buzinar. O fumo sai do escape, sobe e desaparece nos cinco primeiros frames. Logo em seguida, a buzina toca e encerra no frame 15. Depois disso, a animação retorna ao primeiro frame e o processo repete-se. Então, em termos descritivos, a animação equivaleria à tabela abaixo.
FRAME(S) 1 até 5 6 até 15
ACÇÃO O fumo começa a sair do tubo de escape no frame 1 e encerra no 5 A buzina toca até ao frame 15 e encerra.
Em termos de timeline essa animação equivaleria à imagem abaixo.
O fumo seria um outro objecto e a sua animação corresponderia a algo como o visto abaixo.
152
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Cada um dos keyframes acima indicados corresponderia a uma imagem como as vistas abaixo.
Poderão as suas animações ser compostas por inúmeros objectos, animados ou não, interactivos ou não, de qualquer tipo, como filmes dentro de filmes, objectos dentro de objectos, filmes em AVI ou QuickTime, sons, desenhos, etc. Não há limite teórico para o que pode fazer a não ser o tamanho que o ficheiro final da animação possa ter e, este sim , pode representar um empecilho pelo tempo que demorará a carregar se for via Internet ou requisitos de sistema para poder ser executado conforme planeado. Digamos, por exemplo, que fez uma animação a usar o desenho de uma paisagem campestre de fundo. Por cima deste desenho cria a animação de um sol a nascer e a pôr-se. Esta animação tem 200 fra-
I.3. LAYERS, TIMELINE E ANIMAÇÃO
153
mes e é cíclica, ou seja, ao atingir o último frame retorna ao primeiro e repete-se. Porém, no frame 80 desta animação faz surgir uma ovelha que cruza a cena em 40 frames. A ovelha é um objecto independente e possui uma animação própria, de 8 frames , correspondente ao movimento das suas patas como se estivesse a andar. Este movimento também é cíclico. Além disso, no frame 1 da ovelha coloca o início do som correspondente ao balir desta. Desta forma, de cada vez que a animação da ovelha começar será ouvido o som. Como a ovelha está presente durante 40 frames da cena inicial, que é o tempo da sua animação contra o fundo, então automaticamente a sua animação repetir-se-á cinco vezes (8 frames x 5 = 40). Imagine que podia pegar no objecto ovelha com a mão e suspendê-lo no ar. Veria então a ovelha com as patinhas a andar. Então, poderia pegar este objecto e animá-lo contra o fundo e teria sempre as patas a andar independente do outro movimento que fizesse com o objecto. Como vê, o objecto tem as suas propriedades e animações contidas em si próprio.
Animação de formas (shape animation) Além do tipo de animação convencional, no qual é animado algum parâmetro do objecto, como tamanho, posição, rotação, cor, etc., existe um outro tipo particular de animação conhecida pelo nome de SHAPE ANIMATION (animação de forma). Nela, em vez de fazer um objecto deslocar-se de um ponto a outro ou aumentar de tamanho, fazêmo-lo mudar de forma. As animações desse tipo, na realidade, ocorrem por uma animação de movimento dos pontos (sub-objectos) que formam os objectos. Este tipo de animação deve ser usado com cuidado, já que aumenta muito o tamanho final do filme. Para começar uma animação de forma, inicie um novo filme em branco (FILE > NEW) e com a ferramenta de criação de ovais crie um círculo de médio tamanho no centro da área de desenho.
154
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Mova o rato até que fique sobre o frame 30 no timeline e carregue no botão da direita. No menu que há-de surgir, escolha a opção INSERT KEYFRAME. O timeline ficará com a aparência abaixo.
Carregue com o rato em cima da bolinha do keyframe 30, para seleccionar o objecto na área de desenho onde então modificaremos a aparência deste. Seleccione o SUBSELECTION TOOL na barra de ferramentas e com o rato carregue em cima da linha de borda do círculo. Surgirá então uma forma circular delimitada por uma linha fina azul que tem exactamente oito pontos à volta. Estes pontos são os que formam o círculo10.
10
conhecidos como nós (nodes), pontos de controlo (control points) ou simplesmente vértices.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
155
Mova então, a utilizar ainda a mesma ferramenta, alguns dos pontos do círculo até formar uma figura qualquer, como a vista abaixo
Pronto! O que acabou de fazer foi modificar a forma do círculo para uma “estrela”. Porém, como está a trabalhar no frame 30, o que fez foi modificar a forma do círculo apenas nesse frame. Se voltar ao frame 1 vai ver que ele ainda tem a mesma forma naquele ponto. Tem então agora duas formas: um círculo no frame 1 e uma “estrela” no 30. É preciso agora fazer esses dois frames tornarem-se uma animação de forma. Carregue na bolinha correspondente ao frame 1 (início da animação) e nas propriedades do objecto visíveis na parte central inferior do ecrã e mude o campo TWEEN para SHAPE.
Assim que fizer isto vai ver que o timeline ficou verde no intervalo de 1 a 30 e surgiu uma seta a indicar a presença de uma animação neste intervalo. Por causa da cor verde sabe-se que se trata de uma animação de forma. Carregue no rectângulo rosa na área numérica do time-
156
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
line e desloque-o para a direita e esquerda. Vai ver que foi criada uma suave animação na forma do objecto. No caso da animação de forma também é possível ajustar o EASE IN e OUT da curva de distribuição de movimento, da mesma forma que foi descrita na secção anterior.
DICA Para ser possível aplicar uma animação de forma a grupos, instâncias ou objectos com imagens, primeiro terá de “quebrar” estes grupos com a função BREAK APART (MODIFY > BREAK APART), para que passem a ser objectos comuns. As letras são consideradas grupos e devem passar por esse processo para que possam ser animadas correctamente.
Shape Hints Quando faz uma animação de forma, basicamente define dois shapes e deixa ao Flash a tarefa de animar a metamorfose da maneira que mais lhe convier. Porém, nem sempre esta é a solução ideal. Por vezes ocorrem problemas na transformação ou é preciso ter controlo sobre uma determinada maneira específica de realizar a transformação. É então que entram em cena os SHAPE HINTS! Vamos a um exemplo. Digamos que criou o objecto da esquerda, na figura abaixo, e quer fazer uma animação de forma (shape animation) de modo a transformá-lo no objecto da direita.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
157
Então, se deixar a cargo do Flash, como fizemos, pode ser que tenha uma animação conforme a sequência de imagens abaixo.
158
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se reparar nos frames de 6 a 9, vai ver que houve um problema na transformação. Parte do shape entra sobre si mesma, criando buracos. Além do mais, a animação ocorre de forma pouco agradável. O objecto fica estranho, amassado, durante o processo. A única maneira de resolver isso é inserir SHAPE HINTS, para mostrar ao Flash de que forma deve ser feita a transformação. O SHAPE HINT funciona segundo a seguinte filosofia: vai-se ao primeiro frame de uma animação de forma e posiciona-se um SHAPE HINT para indicar uma determinada região de um objecto. Depois, vai-se ao frame final da mesma transformação e move-se o SHAPE HINT para a região final. Desta forma, o Flash saberá que a região marcada com o SHAPE HINT no primeiro frame é a que deve ser transformada para a indicada no mesmo SHAPE HINT no frame final. Os SHAPE HINTS, quando acrescentados, são representados por pequenos círculos coloridos com uma letra no interior. As cores utilizadas são o amarelo para representar o HINT inicial e o verde para representar o final. Caso esteja vermelho significa que o HINT em questão está mal posicionado. Vamos então à correcção da animação anterior pelo uso de SHAPE HINTS.
CRIAÇÃO DO SHAPE HINT... Carregue na bolinha correspondente ao frame 1 da animação para seleccionar o shape pretendido neste frame. Carregue em MODIFY > SHAPE > ADD SHAPE HINT para acrescentar o primeiro HINT. Mova-o até que fique na posição indicada abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
159
No timeline, carregue na bolinha correspondente ao último frame da animação, para seleccionar o shape neste frame. Posicione o SHAPE HINT final no ponto indicado na figura abaixo.
Continue a acrescentar mais hints até ficar como na figura abaixo.
No Shape inicial...
160
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No Shape final
A ordem pela qual acrescenta os HINTS é importante porque é nesta ordem que o Flash os vai nomear. Se agora movimentar a linha de tempo no timeline vai ver que a transformação ocorre sem problemas, como na figura abaixo. Repare que já não existe o problema da primeira animação, dos furos no shape, pois ao colocarmos os hints D, E e F, fizemos de forma a indicar a maneira pela qual as regiões deveriam “andar” na transformação. Além do mais de notar que a transformação agora não está mais amassada e tem uma aparência bonita e suave.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
161
Na prática, o que aconteceu foi o movimento das regiões conforme indicado a seguir.
Para os pontos A, B e C...
162
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
... e para os pontos D, E e F...
Animação com Motion Guide MOTION GUIDE é uma possibilidade interessante que o Flash nos oferece para a criação de animações: fazer com que objectos sigam caminhos (paths) específicos definidos por curvas. Digamos então que tem o objecto ao lado e que gostaria de o fazer percorrer o caminho indicado na figura seguinte.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
163
Então, depois de criado e agrupado o avião, vá ao timeline, na área onde são mostrados os layers, e carregue com o botão da direita em cima do nome do layer. Escolha a opção que diz ADD MOTION GUIDE. Surgirá outro layer acima do primeiro, MOTION GUIDE, conforme a imagem abaixo.
Neste layer “GUIDE: AVIÃO” desenhe a curva que deseja utilizar como caminho. Vá à barra de ferramentas e escolha a pena (PEN) para desenhar o caminho. Depois disso, posicione o avião da maneira e no local onde iniciará o movimento.
164
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Volte então ao timeline e posicione o rato na área em branco correspondente ao frame 30 para cada um dos objectos e carregue com o botão da direita do rato e escolha a opção INSERT KEYFRAME, para criar keyframes para os dois objectos neste frame. O timeline deve ficar como indicado abaixo.
No timeline, carregue na bolinha correspondente ao frame 1 do avião e, com o botão pressionado, mova o rato na horizontal até ao frame 30. Solte o botão do rato. Posicione o rato na área seleccionada e carregue no botão da direita. Escolha a opção CREATE MOTION TWEEN. Isso vai fazer a animação do avião do frame 1 ao 30. Se movimentar a barra de tempo no timeline vai notar que agora o avião já percorre o caminho. Porém, ainda não está orientado segundo o que seria a maneira correcta de movimento.
NOTA Não há necessidade do frame 30 para o guia do avião para que a animação funcione correctamente quando finalizada. Porém , é importante que este frame esteja presente durante a construção da animação, para que possa visualizar correctamente o caminho. Assim que for finalizar o filme, elimine os frames desnecessários do guia mantendo apenas o primeiro. Assim, o timeline ficará com a aparência abaixo.
165
I.3. LAYERS, TIMELINE E ANIMAÇÃO
NOTA Por acaso, quando finalizado este exemplo, verificou-se que no último frame o avião virava ao contrário. Se por acaso isso acontecer quando terminar de fazer o exemplo, basta reposicionar neste último frame o avião para a posição correcta.
Poderá fazer com que vários objectos sigam o mesmo caminho. Para isso, basta criar mais layers que fiquem subordinados ao layer do caminho, como indicado abaixo pelo layer “círculo”.
Então, todos os objectos passam a seguir o caminho...
166
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Máscaras As máscaras são objectos colocados em layers especiais que limitam a visibilidade de um determinado layer. Digamos que possui o objecto mostrado na figura abaixo e que ele está presente na sua animação por diversas vezes.
Então, numa determinada ocasião, gostaria de colocar este objecto dentro de uma moldura oval, sem que nenhuma parte ficasse para fora.
Poderia criar uma cópia deste objecto eliminando as partes não desejadas. Porém, uma segunda cópia do objecto na animação significa au-
167
I.3. LAYERS, TIMELINE E ANIMAÇÃO
mentar o tamanho do ficheiro final Flash. Então, o que pode fazer é utilizar uma máscara oval para indicar o que deve ficar visível no objecto original.
NOTA Imagine que em cima do desenho coloca uma folha de acetato e pinta com uma cor sólida as áreas deste objecto que deseja deixar visíveis, sendo que, as áreas não pintadas passariam a ficar invisíveis. Veja a figura abaixo.
Repare como a máscara oval limita o quanto do primeiro rectângulo deve ser mostrado.
Neste caso então, criaria um layer acima do layer do objecto, e aí desenharia uma máscara oval, para limitar o tamanho do objecto. Finalizado o desenho da máscara, basta carregar com o botão da direita em cima do nome do layer no timeline e escolher a opção MASK.
168
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
O que vai fazer a aparência dos layers assemelhar-se à vista abaixo.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
169
Veja como agora o layer da máscara e do objecto subordinado mudaram de ícone. Também ambos estão com os cadeados accionados. Aliás, a máscara só actua no objecto se os cadeados estiverem neste estado. O objecto das casas com a máscara oval cabe agora dentro do espaço determinado.
Se por acaso reduzíssemos a oval da máscara ligeiramente, poderíamos obter o seguinte efeito.
170
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se por acaso animássemos em 15 frames a máscara, de um tamanho igual a zero a um tamanho igual ao visto acima, teríamos a seguinte sequência de imagens.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
171
LAYER DO TIPO GUIDE Se carregar com o botão da direita em cima do nome de um layer e escolher a opção PROPERTIES, vai ver a janela a seguir.
Pode ver pelo campo TYPE que existem diversos tipos de layer, dos quais já falamos, com a excepção do GUIDE. Este tipo de layer não é visível na animação final. Só é visto durante a construção. É exactamente o que o nome diz, um GUIA, para criar as suas animações, como linhas para orientação ou imagens/objectos que precise colocar em cena apenas para que o possam orientar durante a criação da animação.
LAYER DE SOM Quando colocar um som, música ou banda sonora nos seus objectos ou filmes Flash, primeiro terá de importar o referido ficheiro sonoro para a biblioteca (IMPORT TO LIBRARY) e depois arrastar para um determinado layer em branco. Assim que o fizer, a janela dos layers mostra a forma de onda do som.
172
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se carregar em cima dessa forma de onda e for às propriedades verá a seguinte janela.
Repare que a caixa SOUND mostra o nome do ficheiro. Effect (efeitos sonoros) Na caixa EFFECT vê a palavra NONE. As opções nesta caixa são: LEFT CHANNEL, RIGHT CHANNEL, FADE LEFT TO RIGHT, FADE RIGHT TO LEFT, FADE IN, FADE OUT e CUSTOM, cujas explicações se encontram a seguir. LEFT CHANNEL – faz com que somente o canal esquerdo seja ouvido (no caso de ser um ficheiro estéreo). RIGHT CHANNEL – faz com que somente o canal direito seja ouvido (no caso de ser um ficheiro estéreo). FADE LEFT TO RIGHT – faz com que o som comece no canal esquerdo e progressivamente vá passando ao direito onde terminará.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
173
FADE RIGHT TO LEFT – faz com que o som comece no canal direito e progressivamente vá passando ao esquerdo onde terminará. FADE IN – o som começa com volume zero e vai progressivamente aumentando até ao seu volume normal. FADE OUT – o som começa com o seu volume normal e vai progressivamente diminuindo até zero. CUSTOM – Nesta opção poderá editar de que forma o som se comportará. Assim que escolher esta opção verá a janela abaixo, chamada EDIT ENVELOPE, onde poderá determinar o efeito que pretende.
Na janela acima tem o desenho de duas formas de onda. Como o som utilizado se trata de um ficheiro estéreo, a curva de cima corresponde ao canal esquerdo de som e a de baixo ao direito. Na parte inferior da janela, no lado direito, pode ver quatro ícones perto do botão HELP. São eles: uma lupa com sinal de mais, uma lupa com sinal de menos, um relógio e o desenho de um filme, e permitem ver a curva mais de perto (ZOOM IN), ver a curva mais de longe (ZOOM OUT), ver no eixo horizontal os intervalos em segundos e ver os mesmos intervalos em frames, respectivamente.
174
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Do lado esquerdo na mesma linha, pode ver dois ícones, um quadrado e um triângulo, para que possa parar (STOP) ou ouvir (PLAY) o som. Se observar com cuidado verá uma linha em diagonal por cima da forma de onda. Com esta linha poderá desenhar o envelope à onda, para causar o efeito pretendido. Mova então o rato até um ponto qualquer desta linha diagonal e arraste a linha para baixo. Um novo ponto será criado na curva que modificou e na outra. Crie outros pontos e movimente-os. Crie um padrão como o visto abaixo.
A explicação para o que acontece na figura acima é a seguinte. CANAL ESQUERDO - O volume começa a zero e sobe até ao máximo, decaindo em seguida até um valor baixo, onde fica constante até 0,5s e torna a subir até ao máximo, mantendo-se constante até ao final. CANAL DIREITO – O volume começa a zero e sobe até ao máximo, decaindo em seguida até aproximadamente 70% do máximo, onde permanece até ao final.
175
I.3. LAYERS, TIMELINE E ANIMAÇÃO
DICA Para apagar um ponto criado no envelope arraste-o para fora da janela!
Sync (tipo de sincronismo de som) De volta à janela de propriedades do som, pode ver o campo SYNC, o qual apesar de inicialmente marcado com a opção EVENT, permite também escolher START, STOP e STREAM. A explicação para cada opção é dada a seguir.
EVENT
Esta é a opção escolhida por defeito pelo Flash quando insere um ficheiro sonoro num layer em branco. O som ajustado desta forma é tocado assim que o seu primeiro keyframe é mostrado, seja no filme ou no objecto onde está localizado. Então, por exemplo, se no frame 37 de uma determinada animação existir um som, quando a animação aí chegar, o som começa a tocar, independentemente do filme parar ou ir para outro frame. O som ajustado como EVENT é sempre tocado até ao fim, uma vez iniciado. A opção loops permite-nos dizer quantas vezes vai ser tocado um som depois de iniciado. Por exemplo, se quiser colocar um loop a servir de música de fundo deverá escrever um valor muito elevado, para estar continuamente a tocar. Outra propriedade do som ajustado como EVENT é a permissão da simultaneidade, o que significa, por exemplo, que se houver um som associado ao clique de um botão e um utilizador carregar diversas vezes sobre o botão, ouviremos então vários sons do clique, uns por cima dos outros, misturados.
176
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
START
O som ajustado como START também é tocado até ao fim, uma vez tendo iniciado, porém, não permite a simultaneidade e enquanto estiver a ser tocado não permite que outro som igual seja tocado. Quando dizemos isso referimo-nos aos sons iguais. Se, por exemplo, tivermos o desenho de uma porta e um botão de campainha, a este botão temos associado o som de uma campainha musical. Quando carregarmos no botão, ouviremos a melodia. Se durante o PLAY carregarmos seguidamente no botão, não ouviremos vários sons da campainha misturados como no EVENT. Somente será possível ouvir outra vez a melodia quando a primeira tiver terminado. Entretanto, se na mesma cena tivermos o desenho de um cão a ladrar, este som será ouvido em conjunto com o da campainha, se assim tiver de ser.
STOP
Esta opção impede que o som seja ouvido. A principal utilidade deste evento é parar sons que se tenham iniciado com o start ou event. Por exemplo, um loop que sirva de música de fundo.
STREAM
Esta opção é extremamente útil quando se está a lidar com músicas ou sons que precisem ficar síncronos com as animações 11. Quando possuir um som associado a um vídeo e esta opção estiver ligada, então o Flash ao mostrar a sua produção dará sempre prioridade ao áudio em detrimento do vídeo. Fará tudo para manter a sincronia e mostrar os frames no momento certo. Como precisa manter o áudio a tocar continuamente sem intervalos, vai deitar fora frames da animação, caso a máquina onde esteja a correr não seja capaz de mostrar a animação como seria preciso. Depois de muito produzir para o mercado audiovisual chega-se à conclusão de que é menos incómodo ter frames de vídeo eliminados e o áudio a correr bem, a ver a animação a correr cer-
11
Na minha opinião esta deveria ser a opção por defeito já que é a mais importante!
I.3. LAYERS, TIMELINE E ANIMAÇÃO
177
ta e o áudio a engasgar. Quando o vídeo falha ligeiramente, o utilizador tem a impressão de que algo se passou no próprio computador. Quando o áudio está a ter problemas, o mesmo utilizador pensa que a animação foi mal dimensionada e é “pesada” demais para ser vista no seu computador. Outro problema que pode ocorrer pela falta de sincronia é ter o áudio a acabar muito antes do vídeo, caso a máquina não seja rápida o suficiente para mostrar a animação como idealizada. Por isso, deve colocar sempre o áudio como STREAM quando precisar de sincronia perfeita. Estes sons são carregados à medida que o filme é carregado. Inicialmente são carregados apenas 5 segundos de som, que servem de ‘almofada’ (buffer) para se manterem em memória; à medida que o filme decorre, o resto do som é carregado. É particularmente útil para músicas de fundo pesadas.
Como testar as suas animações Para saber se as suas animações estão a funcionar correctamente, deve sempre testá-las por meio da função TEST MOVIE no menu CONTROL. Também encontrará por lá o comando TEST SCENE, que permite apenas o teste de uma das cenas da animação, caso possua mais de uma. O TEST MOVIE permite visionar a animação final na forma em que será vista pelo utilizador, seja pela Internet, seja através de um CD-ROM ou DVD-ROM que distribuiu. Enquanto que em HTML tradicional o que conta é o tamanho final do ficheiro, já que basicamente se trabalham com elementos de tamanho fixo, no Flash além desta variável deve ter também em consideração o “peso” que a sua animação pode representar para a máquina em que for correr. Como tudo o que é gerado em Flash é convertido para informações vectoriais, é preciso usar maior capacidade da máquina para poder desenhar todos os elementos correctamente e nos tempos certos das animações; ainda mais se contiverem músicas ou sons que
178
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
precisem estar síncronos. Logo, todas as animações em Flash requerem em menor ou maior grau poder de processamento da máquina. Elementos de tamanhos grandes e com efeitos de transparências ou degradés, por exemplo, irão requisitar mais processamento da máquina. Se possível teste as suas animações na máquina mais modesta que tiver por perto. Se ela conseguir mostrar tudo correctamente é um óptimo sinal de que em máquinas mais sofisticadas tudo correrá bem.
BANDWIDTH PROFILER
Um outro auxiliar do Flash que poderá utilizar para verificar o “peso” das suas animações é o BANDWIDTH PROFILER. Este módulo é capaz de fazer uma análise frame a frame da carga da sua animação. Saiba que ao carregar a animação via Internet, por exemplo, a carga será feita por frames na ordem correcta da animação. Assim, se tiver frames ou conjuntos de frames com uma carga muito grande haverá uma demora excessiva quando estes frames tiverem de ser carregados. Isto poderá inclusive reflectir um abrandamento da animação durante o play. O ideal é que consiga a menor animação possível e que haja uma distribuição homogénea da carga ao longo dos frames da animação a fim de evitar que existam frames com muita carga e outros sem carga alguma que possam interferir no download ou play da animação. Então poderá correr o Bandwidth Profiler para analisar a carga da animação em cada frame. Para isso, primeiro accione o modo de TEST MOVIE do Flash, conforme explicado na secção anterior, e então no menu VIEW escolha BANDWIDTH PROFILER.
I.3. LAYERS, TIMELINE E ANIMAÇÃO
179
Na figura atrás pode ver que a animação em questão tem três frames, representados pelos pequenos traços verticais na parte de cima das colunas. Cada uma dessas colunas representa a carga do filme em cada um desses frames. A primeira coluna atinge o valor de 8 Kbytes, a segunda atinge aproximadamente 3 Kbytes e a terceira menos de 1 Kbyte. Na secção esquerda da janela pode ver as informações sobre o filme: tamanho em pixéis, taxa de fps, tamanho do ficheiro, quantidade de frames totais da animação e o tempo de carga total do ficheiro (neste caso, 2,6 segundos). No menu DEBUG poderá ajustar a velocidade do MODEM ou LINK, para que possa ver como a sua animação seria carregada em diferentes velocidades de download. A linha vermelha que corta horizontalmente os gráficos na marca dos 400 Bytes indica o máximo de bytes que poderiam ser trazidos por download para que o frame fosse visto em tempo real. Na prática, isso significa que se cada frame da animação tivesse no máximo 400 bytes, então a animação poderia ser puxada da Internet em play normal sem existir nenhum abrandamento na animação. Qualquer valor acima disso causaria um abrandamento do play. Logicamente poderá notar isso pelas informações da coluna da esquerda pois, se a animação tem 3 frames e o Flash está ajustado para PLAY a 12 fps, então o tempo total de download deveria ser 3/12 segundos. Porém, a janela diz-nos que o tempo total de carga é de 2,6 segundos. Por defeito, o Bandwidth Profiler mostra o gráfico de carga pelo modo STREAMING, ou seja, a distribuição de carga à medida em que é feito o download do filme. Se for ao menu VIEW e escolher a opção FRAME BY FRAME GRAPH, verá então a carga por frame. Outra opção neste menu é SHOW STREAMING. Se a accionar vai ver o Flash simular o download do filme na velocidade do MODEM escolhida no menu DEBUG. O primeiro frame de qualquer animação, pela própria forma como o Flash funciona, é geralmente grande. Neste frame são armazenados todos os objectos e símbolos que estarão presentes no filme.
180
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
I.4. SÍMBOLOS, EFEITOS e BIBLIOTECAS
Quando cria um objecto, seja ele um gráfico (graphic), botão (button) ou filme (movie clip) no Flash MX, este é colocado em algo chamado biblioteca (library), de onde pode ser recuperado para posterior uso, seja no mesmo projecto, seja em projecto diferente. O Flash MX mantém uma biblioteca para cada projecto que fizer e também vem com uma biblioteca com diversos objectos prontos a usar.
As suas próprias bibliotecas Sempre que estiver a criar páginas ou animações em Flash de qualquer tipo, deve sempre ter por objectivo conseguir um ficheiro com o menor tamanho possível que corresponda ao seu trabalho, pois ficheiros menores são mais rápidos a correr e a carregar. Se a animação vai ser vista via Internet mais uma razão para sempre seguir essa regra. Para conseguir isso, deverá quase que obrigatoriamente criar e reutilizar objectos das bibliotecas. Praticamente, todo o trabalho em Flash permite o uso repetido de objectos previamente criados no mesmo projecto. Se vai usar um rectângulo várias vezes num determinado projecto deve criar um rectângulo na biblioteca e de lá arrastá-lo para todos os pontos onde o for utilizar. Desta forma optimizará e minimizará o tamanho dos seus projectos em Flash, tornando-os menores e mais rápidos. Assim como o Flash tem bibliotecas de objectos, você também poderá ter as suas. A vantagem de as ter é poder reutilizar objectos previamente criados nas suas animações em qualquer momento.
182
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Sempre que reutiliza um objecto num projecto, o Flash cria uma instância deste, que equivale apenas a armazenar informações acerca de onde e como o objecto está a ser utilizado. Logo, há uma economia de espaço uma vez que não precisa armazenar as definições da forma do objecto. Todos os objectos (símbolos) que criar num determinado projecto são automaticamente colocados numa biblioteca própria referente ao projecto em que estiver a trabalhar. Assim, ao iniciar um novo projecto, poderá abrir a biblioteca de um projecto anterior e importar os objectos desejados. Se observar no menu FILE, vai ver um item nomeado OPEN AS LIBRARY. Se o utilizar poderá abrir um projecto como uma biblioteca. Faça isso e verá surgir automaticamente a janela correspondente, de onde poderá arrastar objectos para o seu projecto actual.
Uma segunda opção no menu FILE é a IMPORT TO LIBRARY, que importa a biblioteca de um projecto para a biblioteca na qual está a trabalhar.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
183
Na prática, basta abrir a biblioteca que pretende e dela arrastar para a sua biblioteca ou directamente para o seu projecto os objectos desejados.
Graphics, Button e Movie Clips Como dissemos, as bibliotecas do Flash MX permitem o armazenamento de três tipos de símbolos: graphics, movie clips e buttons (gráficos, filmes ou botões). Quando cria formas na área de desenho e sabe que não terão movimento, deve criá-las como sendo GRAPHIC. Os gráficos são símbolos estáticos como logótipos, imagens de fundo ou elementos que não terão movimento, ou seja, um logótipo estático pode ser um caso de GRAPHIC mas um boneco a dançar não, já que a imagem do boneco modifica-se ao longo do tempo. Um símbolo do tipo GRAPHIC pode entretanto ser animado em tamanho, posição, transparência ou cor. Um símbolo do tipo MOVIE CLIP, por outro lado, já permite animações. Enquanto que os GRAPHIC possuem apenas um frame, os MOVIE CLIPS podem ter qualquer quantidade de frames. Então, se imaginar um MOVIE CLIP como um boneco com as pernas a mexer poderá animá-lo a deslocar-se ao longo do ecrã sem se preocupar com o movimento das pernas, que já é intrínseco ao próprio objecto em si. Os símbolos do tipo BUTTON são os botões ou qualquer outro elemento que deva ter a propriedade de poder ser clicado. Quando o rato encontrar qualquer símbolo deste tipo numa animação automaticamente mostrará que se trata de um elemento clicável. A definição do tipo do símbolo é feita no momento da sua criação ou conversão (INSERT > NEW SYMBOL ou INSERT > CONVERT TO SYMBOL), conforme visto na janela a seguir.
184
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Depois de criado um símbolo, automaticamente este é armazenado na biblioteca referente ao projecto em que estiver a trabalhar. Veja as figuras abaixo.
Deve reparar na imagem acima que existem três entradas adicionais na biblioteca, nomeadas TWEEN 1, TWEEN 2 e TWEEN 3 que lá apareceram sem a nossa intervenção. Estes símbolos adicionais representam as animações do objecto “cruz”, já que é um movie clip. Não deve apagar estes símbolos “estranhos” que o Flash for colocando na biblioteca à medida em que for criando os seus trabalhos, a não ser que saiba tratar-se de algo não mais utilizado. Se o fizer corre o risco de deitar fora animações e movimentos de objectos que já havia criado.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
185
Graphic (gráficos) Para criar um símbolo do tipo GRAPHIC no Flash MX, basta ir ao menu INSERT > NEW SYMBOL e, em seguida, desenhar o objecto pretendido. Automaticamente estará a criar uma nova entrada na biblioteca. Em seguida, vá a WINDOW > LIBRARY, e faça surgir a janela da biblioteca vista abaixo com os objectos que criamos.
Agora arraste da biblioteca para a área de desenho os objectos que tiver criado. Modifique o tamanho, crie efeitos de distorção, animações, etc. Vai ver que pode fazer com eles o que quiser, com excepção de mudar as cores, com o balde de pintura/tinteiro, ou a forma pelo uso das ferramentas de selecção. Se fizer isto estará a modificar o objecto em si, e todas as cópias deste passarão a ficar com a nova aparência. Caso precise mudar a cor de uma instância, a única forma possível é pelo uso de um efeito, que veremos mais adiante. Porém, o efeito muda a cor do objecto todo em conjunto, ou seja, se possui um objecto com
186
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
diversas cores, ao aplicar um efeito estará a afectar todas as cores deste. Se precisar aplicar mudanças diferentes a cada uma das cores, deve considerar separar as partes do objecto em diferentes símbolos, que depois poderão ser agrupados pelo comando GROUPS (CONTROL G) para facilitar a animação ou manipulação deste.
Button (botão) Criar um botão no Flash é um trabalho deveras fácil. Em poucos passos terá o seu a funcionar. Para que seja possível esta criação basta apenas que tenha em mente a forma como o Flash MX trata este tipo de objecto e assim fornecer as imagens de que necessitará. Um botão no Flash possui três estados: UP, OVER e DOWN. O estado UP equivale à aparência que o botão tem quando está normal. Assim que o rato passa por cima deste é assumida a aparência indicada no estado OVER. O estado DOWN representa a aparência que o botão tem quando nele carregar. Carregue em INSERT > NEW SYMBOL para criar um novo símbolo. Na janela que se seguirá nomeie o objecto como “botão” e ajuste o campo BEHAVIOR para BUTTON.
Vai ver que a área de desenho fica em branco. Isto é porque agora está na área de desenho do botão. Na parte de cima, o timeline muda de aparência e passa a mostrar os estados do botão.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
187
Repare que a linha vertical está posicionada em UP e uma bolinha em branco, ou seja, um keyframe em branco (blank keyframe) está a representar o estado que se está a criar. Então, crie um desenho para representar o estado normal do botão. Criamos algo como na figura abaixo.
Carregue na caixa em branco do timeline, na coluna OVER, e clique com o botão da direita do rato. Escolha a opção INSERT BLANK KEYFRAME para começar a desenhar o novo estado do botão.
188
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Desenhe então neste estado a mesma figura acima, porém com a seta a apontar para o lado direito. Repita a operação para o campo DOWN, e volte a modificar a seta para que esta aponte para baixo. Fica então com três desenhos diferentes, cada um a representar um estado do botão. Falta agora definir o campo que diz HIT, sobre o qual ainda não havíamos falado. Neste campo irá indicar ao Flash que área do botão está activa para clicar, ou seja, se quiser que toda a área do botão esteja activa, então deverá na área de HIT desenhar um círculo que cubra toda a superfície deste. Poderá definir a área que desejar. Definimos esta área como sendo toda a superfície do botão. O nosso botão tem agora os seguintes estados: UP
OVER
DOWN
HIT
Criados os estados volte à cena principal da animação, por meio de um clique na palavra SCENE 1, no canto superior esquerdo da área de desenho.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
189
Faça surgir a biblioteca (WINDOW > LIBRARY) e arraste de lá o botão para a sua área de desenho. Coloque o Flash MX no modo de teste (CONTROL > TEST MOVIE) e vai ver que o botão funciona perfeitamente. Se quer acrescentar um som ao botão, basta criar um layer novo, colocar um keyframe em branco na coluna correspondente ao estado em que quer colocar o som e arrastar o som para a janela de desenhos. Então, por exemplo, poderá ter um som a ser tocado quando o botão entrar no estado UP, outro para o estado OVER e um terceiro para o estado DOWN.
Movie Clips Um movie clip é um símbolo que em si próprio já é um filme, ou seja, possui movimento próprio. Digamos que gostaríamos de criar o movimento de uma bola a saltar conforme a figura abaixo.
190
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Então poderíamos imaginar um movie clip como sendo a bola a saltar até encerrar o seu movimento, mas sem se deslocar na horizontal. Em seguida poderia animar o movie clip a deslocar-se na horizontal. Logo, teria uma composição de movimentos que causaria a ilusão da bola estar a saltar e a deslocar-se horizontalmente. Veja as figuras abaixo.
Dentro da área correspondente ao movie clip, representada pelo rectângulo, a esfera movimenta-se para cima e para baixo, simulando o movimento de saltar no mesmo lugar.
Arrastamos esse movie clip da biblioteca para o nosso projecto e fazemos uma animação dele a deslocar-se para a direita...
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
191
Como a esfera dentro do movie clip movimenta-se a saltar e o próprio movie clip é deslocado para a direita, então, pela combinação de movimentos , veremos a esfera a saltar enquanto que se desloca para a direita...
Efeitos de Cor e Transparência Existem diversos tipos de efeitos que poderá aplicar num determinado objecto da biblioteca, assim que o trouxer para a sua animação. Basicamente, os efeitos relacionam-se com as cores ou com a transparência do objecto. Se trouxer um objecto da biblioteca para a sua área de desenho e o seleccionar, deverá observar o campo COLOR na janela de propriedades, conforme visto na imagem abaixo.
Neste campo, encontrará diversas outras opções além de NONE, nomeadamente, BRIGHTNESS, TINT, ALPHA e ADVANCED. A seguir, vamos à explicação de cada uma delas.
192
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Brightness Se seleccionar esta opção, poderá regular o brilho do objecto de –100 a 100%, por meio de uma caixa que surge ao lado do campo COLOR.
Se ajustar o brilho totalmente a 100% fará com que o objecto fique completamente branco. Se o ajuste for feito a –100% o objecto ficará completamente negro. Em 0% o objecto tem a aparência normal. Tint Se ajustar o campo COLOR com a opção TINT, poderá acrescentar uma cor a ser somada à cor do objecto em si. Ao seleccionar esta opção, vê o campo COLOR da janela de propriedades transformar-se conforme imagem abaixo.
Na caixa colorida ao lado da palavra TINT poderá regular a cor a somar ao objecto, que também poderá ser ajustada pelos três campos RGB na parte inferior. Ao lado da caixa de cor encontra-se também outra caixa com o valor 100%. Isto significa que a cor escolhida está a ser somada
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
193
100% à cor do objecto original, o que significa que este passa a ter a nova cor. Se colocar 0%, significa que o objecto mantém a sua cor original e não sofre efeito algum de TINT. Alpha O nome ALPHA vem de ALPHA CHANNEL (canal alfa), que é a designação mais antiga de que se tem notícia para nomear a informação de transparência de um material. Se escolher ALPHA como opção de efeito, verá a janela de propriedades com a aparência abaixo.
Na caixa ao lado do nome ALPHA, poderá regular o grau de transparência do objecto. Os valores podem estar entre 0 e 100%, sendo o primeiro equivalente ao objecto completamente transparente e o segundo a completamente opaco. Advanced Esta opção do menu COLOR realmente é a mais completa e combina várias das opções anteriores numa só interface. Assim que a escolher, vai ver que a janela de propriedades assume a aparência abaixo.
194
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se carregar no botão SETTINGS verá então,
Vai ver que as três primeiras linhas equivalem aos canais de cor RGB e a última ao canal de transparência. Em cada linha, a primeira caixa permite regular a intensidade de cada canal, entre -100 e 100%, e a segunda caixa representa um valor a ser somado a este canal, entre -255 e 255.
OBSERVAÇÃO Logicamente todos os efeitos podem ser animados!
Bibliotecas do Flash Para alegria de toda a gente, esta nova versão do Flash vem com diversos objectos reclamados durante anos e que podem ser usados nos seus projectos. Estes objectos estão separados em diversas categorias as quais passaremos a explicar a seguir.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
195
BUTTONS A primeira delas é a biblioteca de botões. Para fazer surgir a janela da biblioteca com estes itens, vá ao menu WINDOWS > LIBRARY > BUTTONS. Verá então a seguinte janela:
Arcade Buttons Vai ver diversas categorias separadas em pastas. A primeira delas é a ARCADE BUTTONS que disponibiliza o botão tipo máquina de pinball em diversas cores, como na figura abaixo.
196
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Circle Buttons Na categoria CIRCLE BUTTONS vai encontrar botões como os vistos abaixo.
E também os do tipo a seguir.
Component Buttons Na categoria COMPONENT BUTTONS, vai encontrar novamente o botão do tipo ARCADE, porém, ao trazê-lo para a área de desenhos e seleccioná-lo, vai ver que a janela de propriedades desta vez mostra algo completamente diferente, que demonstra uma nova potencialidade do Flash MX!
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
197
Agora, pelas propriedades, pode ajustar em tempo real a cor do botão e definir pelo campo label, no lado direito, se quer ou não que o botão leve uma etiqueta, no caso, dois bonecos a representar dois jogadores (já que se trata de um botão de pinball).
A subdivisão COMPONENT BUTTONS ainda lhe traz mais três botões, o KEYBOARD BUTTON, o PILL BUTTON e o PUSH BUTTON, vistos a seguir.
O KEYBOARD BUTTON permite, nas propriedades, a escolha da letra a ser colocada na tecla. O PILL BUTTON permite, nas propriedades, regular a largura, a palavra a ser colocada em cima, a cor da base do botão e a cor do brilho.
198
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
O PUSH BUTTON, por sua vez, permite apenas regular a cor interna. Key Buttons Nesta categoria vai encontrar novamente teclas de computador e mais as setas.
Knobs & Faders Nesta categoria vai encontrar os tão desejados botões deslizantes e rotativos para as suas páginas, como os vistos abaixo.
I.4. SÍMBOLOS, EFEITOS E BIBLIOTECAS
199
São botões completos que não precisam de nada para funcionar. Basta colocá-los nas suas páginas e pronto1. Ovals Nesta categoria terá botões ovais coloridos como o seguinte, existente em diversas cores.
Playback O tão adorado visual “aqua” do MacOS X está presente em botões existentes nesta categoria.
Também terá nesta categoria botões como os vistos abaixo.
1
É lógico que depois vai precisar de um pouco de ActionScript para poder ler os valores que o
utilizador ajustar.
200
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Push Buttons Esta última categoria traz novamente o botão PUSH BUTTON existente na categoria COMPONENT BUTTONS. Porém, os botões presentes não permitem regular a cor 2. Estão sim presentes em várias cores pré-ajustadas.
SOUNDS Outra biblioteca que acompanha o Flash MX e que está de acordo com o objectivo introdutório deste livro é a encontrada em WINDOW > COMMON LIBRARIES > SOUNDS. Ao escolher esta opção fará surgir a janela abaixo, que contém diversos sons para que os possa utilizar nas suas animações.
2
Pelo menos não sem uso de ActionScript.
I.5. COMPONENTES
Neste capítulo vamos falar sobre uma das grandes inovações no Flash, os COMPONENTES. Estes objectos agora disponibilizados pela Macromedia são a resposta aos anseios dos utilizadores ao longo dos últimos anos, reunidos em objectos sofisticados e de relativa facilidade de uso. Convém saber que estes novos componentes do Flash têm a sua maior utilidade quando acompanhados do apropriado código em JavaScript, que é o que realmente os faz funcionar. Neste capítulo abordaremos a explicação de cada um deles, já que sobre o ActionScript falaremos mais adiante. Se olhar para a interface gráfica do Flash MX, a seguir aos SWATCHES vai ver uma janela de COMPONENTS. Nela encontrará os componentes fornecidos para a criação de interfaces gráficas.
202
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A utilização destes componentes só é plenamente aproveitada se tiver subrotinas em ActionScript1 a correr, para ler as propriedades resultantes da interacção dos utilizadores com os componentes e daí derivar acções que tornem a página mais interessante. Também com ActionScript é possível criar componentes “on the fly”, ou seja, apenas pelo uso da linguagem de programação, sem que estes tenham que estar presentes graficamente nos filmes Flash. A seguir veremos então cada um destes componentes e as suas funções2.
CheckBox O CheckBox é uma caixa que pode ser marcada ou desmarcada pelo utilizador. Deve ser utilizado quando pretende restringir as possíveis respostas dos utilizadores a uma certa questão. Veja o exemplo abaixo.
Observe que os CheckButton permitem livre marcação, ou seja, mais de um quadro pode ser escolhido. 1
ActionScript é a linguagem de programação utilizada no Flash, que possui centenas de comandos
para permitir virtualmente qualquer tipo de criação. 2 Logicamente neste capítulo apenas vamos demonstrar a funcionalidade de cada objecto. O uso avançado será abordado na segunda parte deste livro, onde falaremos de ActionScript.
I.5. COMPONENTES
203
RadioButton O RadioButton tem praticamente a mesma função do CheckBox, porém, não permite a marcação de mais de um controlo de mesmo tipo. Assim, se tiver três componentes RadioButton num formulário, apenas um poderá estar activo num dado momento. Se observar a figura abaixo e a comparar com a anterior vai entender o significado disso.
Ao olhar para o exemplo acima vê que pela pergunta realizada não faz sentido permitir a marcação de mais de uma opção. Quando for este o caso usa-se o RadioButton. Outros exemplos são, quando num formulário perguntar se o utilizador tem ou não e-mail, ou alguma outra questão onde não faça sentido mais de uma resposta.
PushButton O PushButton é o botão que precisa estar presente em todos os formulários para permitir o envio da informação.
204
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ListBox Com uma ListBox poderá fazer listas de escolha para os utilizadores. Por defeito, este componente está ajustado para apenas permitir que o utilizador faça uma escolha. Porém, a mudança de uma propriedade pode permitir múltiplas escolhas.
I.5. COMPONENTES
205
ComboBox O ComboBox3, ao contrário do ListBox, apenas mostra uma opção à entrada. No caso abaixo, temos apenas visível a frase “faça uma escolha...”.
Porém, quando o utilizador carrega na caixa, ela desdobra-se e mostra uma segunda janela com as opções, permitindo assim a escolha.
3
Conhecido em muitos programas como DROP DOWN MENU.
206
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No caso das ComboBox, somente uma escolha é possível.
ScrollPane Este componente permite criar áreas completas com barras de deslocamento4 horizontais e verticais onde poderá colocar imagens, filmes Flash5 ou textos. Veja a seguir.
Para aguçar o seu apetite, enquanto não entramos na secção de ActionScript, vamos à explicação de como foi feita esta ScrollPane. Logicamente, a primeira coisa é criar a ScrollPane; o que é feito arrastando-se o componente da janela “components” para a área de desenho. Vai ver então a seguinte figura.
4
Barras de deslocamento ou scroll bars são as barras existentes nos programas que nos permitem
deslocar textos ou imagens para os lados. 5
Formato SWF
I.5. COMPONENTES
207
Crie um novo símbolo (CONTROL F8), e na janela que se seguirá nomeie-o como “texto”. Ainda nesta janela marque o campo que diz BEHAVIOR como GRAPHIC; marque o quadro que diz EXPORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque também a palavra “texto”. Carregue em ENTER6.
6
Se estas últimas opções não estiverem presentes carregue no botão que diz ADVANCED.
208
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A seguir, escolha a ferramenta de criação de textos, o TEXT TOOL (T), posicione o rato num ponto na parte média esquerda da área de desenho. Carregue no botão do rato e arraste-o para a direita. Vai ver que surge uma caixa para escrita. Escreva o texto pretendido. No canto superior direito da área de desenho carregue no ícone correspondente a uma claquete e escolha a opção Scene 1, para voltar à cena principal.
De volta à cena principal, seleccione o ScrollPane, para que fique activo, e na janela de propriedades mude o campo Scroll Content para o nome que deu ao identifier do texto, no caso, “texto”.
I.5. COMPONENTES
209
PRONTO! Coloque o Flash no modo de visualização e teste o filme (CONTROL ENTER), para ver o ScrollPane a funcionar.
ScrollBar O ScrollBar é o último campo dos componentes disponíveis no Flash MX. A função dele é permitir a construção de caixas com barras de deslocamento. Desta forma, pode-se numa pequena área colocar grandes quantidade de texto. A aparência de uma caixa de texto deste tipo assemelha-se à criada pelo ScrollPane. Veja na figura abaixo.
Para criar uma janela de texto com ScrollBar, faça o seguinte: Primeiro seleccione a ferramenta de textos. Vá à barra de propriedades e troque o campo “STATIC TEXT” para “DYNAMIC TEXT”, o campo “SINGLE LINE” para “MULTILINE” e o campo “
210
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Com o rato na área de desenho, crie uma região rectangular para colocar o texto que pretende. Coloque nesta área uma quantidade de texto maior do que a caixa poderia permitir. Vai ver que a caixa aumenta de tamanho e ultrapassa a fronteira da área de desenho do Flash, como na figura abaixo.
Seleccione a caixa do texto que inseriu. Uma linha azul aparecerá à volta a indicar a selecção activa. Carregue duas vezes com o rato em cima dessa caixa marcada a azul, para entrar no modo de edição de texto. A caixa azul então muda de cor, ficando negra, e aparece um quadrado no canto inferior direito. Arraste este quadrado para diminuir o tamanho da caixa, voltando a colocá-la dentro da área de desenho do Flash.
I.5. COMPONENTES
211
Escolha a ferramenta de selecção de objectos na barra de ferramentas e volte a seleccionar a caixa de textos 7. Arraste o ScrollBar da janela de componentes e liberte-o próximo do border onde deseja colocar a barra de deslocamento, seja esta horizontal ou vertical 8. Deve fazê-lo numa área próxima ao border, desde que seja no interior da caixa. Vai ver que o Flash faz aderir imediatamente a barra à caixa de textos, já ficando esta com o tamanho exacto. Teste o filme (CONTROL ENTER). Vai ver que tudo está a funcionar perfeitamente.
7
Isto fará com que saia do modo de edição de textos, que é o que pretendíamos.
8
O Flash, por defeito, cria sempre barras de deslocamento vertical, mas uma vez criada a barra,
pode mudá-la para horizontal na janela de propriedades.
212
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Caso também desejasse uma barra horizontal, basta repetir o procedimento indicando o local onde deseja a colocação da barra. A regra geral é a seguinte: se arrastar um ScrollBar para áreas próximas à borda esquerda ou direita da caixa de textos, vai ter a criação de uma barra de deslocamento vertical, e se arrastar para áreas próximas às bordas inferior ou superior da caixa de textos, então terá barras de deslocamento horizontal. Se quiser pode ter todas... J
I.5. COMPONENTES
213
Actions (ActionScript) A última secção da interface gráfica do Flash sobre a qual ainda falta falar é a de ACTIONS, que pode ser encontrada na parte central inferior do ecrã, logo abaixo da área de desenho.
ActionScript é a linguagem de programação do Flash. Com ela poderá fazer praticamente tudo o que puder imaginar. Quase que a totalidade das páginas em Flash mais sofisticadas precisam fazer uso do ActionScript para poderem funcionar como planeado. A simples colocação de um botão na página, que responda aos cliques dos utilizadores com acções previamente planeadas, faz uso de ActionScript para poder funcionar.
Objectos encapsulados Para melhor visualizarmos a forma pela qual o Flash trata todos os objectos, podemos considerar, por exemplo, o caso da colocação de um botão numa página que responda às acções de clique dos utilizadores. As páginas construídas em Flash podem ser consideradas como aplicações9, já que na sua essência são exactamente isso. Normalmente são 9
Sim, pode considerar uma página em Flash como sendo uma aplicação já que na sua essência é
exactamente isso.
214
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ficheiros que reúnem todo o seu conteúdo no seu interior (áudio, vídeo, texto, etc.), ao contrário das páginas normais de Internet em HTML, que precisam referenciar todos os ficheiros necessários à boa visualização, já que não têm a capacidade de armazenar nada no seu interior que não seja texto. O Flash com o ActionScript forma um ambiente de programação orientada ao objecto. Por outras palavras, isto significa que qualquer software criado por meio do uso desta linguagem é composto por vários objectos menores independentes que interagem entre si. Pela independência de cada objecto e por conterem no seu interior todo o código necessário ao seu funcionamento, são chamados objectos encapsulados (encapsulated objects). Além de ter diversas propriedades, cada objecto é dotado da possibilidade de reagir a determinados eventos com acções que podem ser designadas pelos programadores. Cada um destes eventos dá aos programadores a possibilidade de fazer interacções e combinações e permite a criação de aplicações sofisticadas e intrincadas. Imagine, por exemplo, que possui no Flash um objecto que é uma lâmpada. Esta lâmpada possui uma propriedade chamada “ESTADO”, que pode ser ajustada com apenas dois valores: 0 ou 1. Se o ESTADO for colocado em “1” a lâmpada liga e em “0”, desliga. Então, o fabricante da lâmpada resolve sofisticar o objecto e cria um evento chamado “QuandoLigado10”. Permite então que este evento possa ser associado a uma determinada acção11 a ocorrer todas as vezes que a propriedade da lâmpada passe de 0 a 1. Então pode associar a este evento uma acção, como por exemplo, fazer aparecer o cão e apagar a luz. 10
Usamos esta notação porque aproxima-se mais da forma como vai ver as propriedades e
eventos dos objectos quando com eles se deparar. 11
A acção pode ser qualquer coisa que imaginar, por exemplo, o carregar de uma página de
Internet.
I.6. COMPONENTES AVANÇADOS
No site do fabricante do Flash MX, a Macromedia, descobrimos alguns ‘brinquedos’ interessantes que poderá acrescentar ao seu programa e fazê-lo brilhar!! Os ‘brinquedos’ são alguns componentes adicionais para a criação de interfaces gráficas e outros para páginas em geral. Para instalá-los é preciso utilizar um programa da própria Macromedia, disponível no site, chamado EXTENSION MANAGER, que é um painel de controlo, para a instalação de novos componentes ao Flash MX. Veja no Anexo III como obter o programa, as extensões e como fazer para as instalar. Tendo já feito a instalação das extensões, o primeiro grupo de componentes novos que encontrará no seu Flash MX chama-se Flash UI COMPONENTS SET 2, que são componentes adicionais à criação de interfaces gráficas avançadas. O segundo grupo é o Flash CHARTING COMPONENTS, que são controlos para a criação de gráficos nas suas páginas ou aplicações Flash. Vamos então a partir de agora, à análise dos componentes.
Flash UI Components Set 2 CALENDAR O primeiro componente do grupo é o CALENDAR (calendário). É exactamente o que o nome diz. Um calendário completo a funcionar para utilizar nos seus programas e páginas Flash.
216
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Seleccione o calendário e veja que a janela de propriedades do componente fica como a imagem abaixo.
Na janela acima, a primeira propriedade chama-se Selection Type e está preenchida com “SINGLE”. Se carregar duas vezes sobre a palavra SINGLE vai ver que duas outras escolhas são oferecidas: RANGE e MULTIPLE. Esta propriedade controla de que forma o calendário funcionará quando estiver na sua página Flash. Se a propriedade estiver em SINGLE, o utilizador apenas poderá escolher um dia de cada vez no calendário. Em MULTIPLE, será permitido ao utilizador escolher vários dias e em RANGE uma faixa de dias pode ser escolhida. Logicamente, saber o que foi escolhido pelo utilizador e
I.6. COMPONENTES AVANÇADOS
217
trabalhar com as hipóteses daí decorrentes só é possível pelo uso de ActionScript. Logo a seguir vemos a propriedade MONTHS. Se carregar uma vez em cima da lista dos nomes dos meses verá a janela abaixo.
Repare que na figura acima existe uma coluna numerada de 0 a 11 e a seu lado os meses correspondentes 1. Se carregar sobre cada um dos nomes dos meses pode mudá-los para a língua que desejar. As setas para cima e para baixo mudam uma determinada linha da tabela (mês) para cima ou para baixo dentro da tabela. O sinal de mais e de menos acrescentam e apagam, respectivamente, meses na tabela. De volta às propriedades do controlo, vai encontrar uma propriedade chamada DaysOfWeek (dias da semana). Se carregar uma vez sobre a lista de nomes desta propriedade vai ver a janela a seguir. 1
JANUARY, FEBRUARY, MARCH, APRIL, MAY, JUNE, JULY, AUGUST, SEPTEMBER,
OCTOBER, NOVEMBER e DECEMBER.
218
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Tal como no exemplo anterior, nesta janela poderá ajustar os dias da semana para a língua que quiser. Os números ao lado dos nomes representam o valor que será retornado pelo ActionScript caso seja escolhido um dia que corresponda a um dos dias da semana listados na segunda coluna 2. A próxima propriedade do controlo chama-se FirstDayOfWeek (primeiro dia da semana) e está preenchida por defeito com o número zero, que corresponde a SUN (Sunday = Domingo). Ajuste esta caixa com o número do primeiro dia da semana que tiver colocado na figura acima. Se quiser que o primeiro dia da sua semana seja o dia na quarta linha da tabela, então este campo deve conter o valor 3.
2
SUN, MON, TUE, WED, THU, FRI e SAT são as abreviaturas dos dias da semana em Inglês:
SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY e SATURDAY, isto é, DOMINGO, SEGUNDA... respectivamente.
I.6. COMPONENTES AVANÇADOS
219
DRAGGABLEPANE Este controlo chamado Draggable Pane é, nada mais, nada menos, do que o de janelas arrastáveis completas e prontas a usar, com um ícone para minimizar (triângulo no canto superior esquerdo) e outro para fechar (o X no canto superior direito).
As janelas podem ser arrastadas (pela barra do título). Por meio de um clique na barra do título é possível trazer para a frente uma janela que esteja por baixo de outras. Funcionam aproximadamente com a mesma lógica utilizada nas janelas comuns do Windows ou MacOS. Uma janela pode conter qualquer tipo de objecto, conforme veremos mais adiante. Possuem as seguintes propriedades:
220
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Colocamos na propriedade nomeada Pane Title o valor “janela 1”, conforme pode ver atrás. Esta propriedade representa o título da janela, que pode ou não ser colocado.
As últimas quatro propriedades da janela são: Has Close Box, Is Scrolling, Resizable e Has Shader. Elas representam o seguinte: HAS CLOSE BOX – indica se a janela tem ou não o X no canto superior direito para permitir que seja fechada pelo utilizador. IS SCROLLING – indica se a janela tem ou não barras de deslocamento (scroll bars) na horizontal e vertical. RESIZEABLE – indica se o tamanho da janela pode ser modificado pelo utilizador. HAS SHADER – indica se a janela tem ou não o botão no canto superior esquerdo para minimizar.
Se está atento, notou que passamos à frente uma propriedade, a SCROLL CONTENT . Com essa propriedade, a exemplo do que fez nos exemplos do ScrollBar e do ScrollPane, vai indicar aquilo a fazer scroll dentro da janela. De facto, esta propriedade refere-se a um objecto que poderá conter outros tantos, textos, imagens, sons, vídeos, etc. Se for um texto, faça o seguinte: Crie um novo símbolo e na janela que se seguirá nomeie-o como “texto”. Ainda nesta janela marque campo que diz BEHAVIOR como GRAPHIC, marque o quadro que diz EXPORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque também a palavra “texto”. Carregue em ENTER.
I.6. COMPONENTES AVANÇADOS
221
Siga o mesmo procedimento que utilizou no componente ScrollPane para criar uma caixa de texto dinâmica. Na janela do componente DraggablePane, marque o campo ScrollContent com o que preencheu no campo IDENTIFIER da janela acima, ou seja, “texto”. Coloque o Flash no modo de teste e verifique que o texto está perfeitamente dentro da janela, pelo menos teoricamente...3 Caso seja uma imagem que pretende colocar dentro da janela, siga exactamente o mesmo procedimento, mas após a criação do novo sím bolo importe uma imagem da biblioteca ou do disco para este novo objecto.
3
Detectamos um bug no controlo DraggablePane quando é colocado um texto no interior da janela:
quando se desloca a barra de scroll vertical da janela toda para baixo, o texto aparece fora da janela na parte de cima. Com imagens isso não acontece.
222
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
O resto é igual, ou seja, vá ao ScrollContent e coloque o nome do IDENTIFIER que utilizou para a imagem.
DICA Se fizer um novo símbolo que contenha outros, como botões, imagens, sons, etc., pode colocar tudo dentro de uma janela, se referenciar apenas este símbolo principal no ScrollContent.
I.6. COMPONENTES AVANÇADOS
223
Se usar esse princípio, poderá colocar qualquer coisa dentro da janela!
ICONBUTTON Com este componente poderá criar botões, prontos a usar, e que permitem a colocação de imagens à face. Para criar um botão com este componente basta arrastá-lo para a área de desenho. Em seguida, deve criar um novo símbolo, com uma imagem qualquer (utilizamos uma gaivota), pelo mesmo procedimento utilizado no exemplo anterior e dar ao IDENTIFIER deste símbolo o nome “gaivota”. Carregue no IconButton que está na área de desenho e na janela das propriedades ajuste o campo que diz ICON para “gaivota”.
Vai ter então, um botão com a imagem da gaivota na face. Voilà!
224
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
As outras propriedades do IconButton são as seguintes. LABEL – permite a colocação de um título (frase) que fica agregada à imagem que inserir para a face do botão. LABEL PLACEMENT – permite escolher em que posição relativa à imagem deve ficar posicionada o tal LABEL acima. As posições possíveis são: LEFT, RIGHT, TOP e BOTTOM, ou seja, à esquerda, à direita, acima e abaixo da imagem, respectivamente. TOGGLE – esta propriedade ajusta a forma de funcionamento do botão. Normalmente o botão funciona da seguinte forma. Chamemos de estado A o estado no qual o botão está em repouso e B o estado no qual ele está quando nele se clica. Assim, o botão que está em A só fica no estado B enquanto estiver a carregar com o rato sobre ele. Logo que liberta o botão do rato o botão volta ao estado A. Porém, a propriedade TOGGLE altera essa forma de funcionamento. Esta propriedade está ajustada por defeito como FALSE e neste estado corresponde ao modo de funcionamento normal descrito no parágrafo anterior. Se alterar esta propriedade para TRUE, fará o botão funcionar da seguinte forma: inicialmente estaria no estado A e assim que clicasse sobre ele faria que ele assumisse o estado B, assim permanecendo mesmo depois de libertado o botão do rato. Seria preciso outro clique para o fazer voltar ao estado A e assim sucessivamente. INITIAL VALUE – O valor normal desta propriedade é FALSE, o que faz o botão inicialmente ser mostrado em repouso com a aparência (A) e com a aparência (B) enquanto estiver a carregar sobre ele. Se passar a propriedade a TRUE, inverterá esta condição. BACKGROUND – Esta propriedade é surpreendente! Não satisfeitos em permitir a colocação de uma imagem na face do botão, também permitiram a colocação de outra imagem para o fundo do botão. O procedimento para agregar outra imagem a esta propriedade é o mesmo que foi descrito para o campo ICON.
I.6. COMPONENTES AVANÇADOS
225
MESSAGEBOX Este componente permite a criação de caixas de mensagem para os seus programas ou páginas Flash.
Se olhar para a janela de propriedades vai ver a imagem a seguir.
As propriedades vistas nesta caixa significam o seguinte: TITLE – permite criar um título para a caixa de mensagens. Colocamos a palavra TÍTULO neste campo. MESSAGE – indica a mensagem a ser mostrada na caixa. Colocamos a frase: ESTA É A MENSAGEM neste campo.
226
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ICON – este campo permite a colocação de um ícone associado à caixa de mensagem, para melhor a ilustrar. À partida existem quatro ícones definidos por defeito 4: QUESTION, INFO, WARNING e ERROR, que são vistos abaixo nesta ordem.
BUTTONS – Inicialmente este campo está preenchido com a palavra OK, o que significa que a caixa apenas contém um botão com este nome, conforme pode ser visto pela imagem no início da explicação deste componente. Porém, se carregar na palavra OK, verá a janela abaixo onde poderá criar quantos botões desejar.
4
Dizemos isso pois qualquer um dos COMPONENTS pode ser modificado para assumir a aparência que desejar, pelo uso de skins (peles), como verá no próximo capítulo.
I.6. COMPONENTES AVANÇADOS
227
O procedimento de criação de linhas – neste caso, botões, nesta janela, é o mesmo visto no Calendar. CLOSE HANDLER – Neste campo deverá colocar uma string5 que corresponda à subrotina6 a ser executada quando a caixa se fechar, ou seja, assim que o utilizador carregar em algum botão e a caixa se fechar, automaticamente o Flash executará a subrotina cujo nome estiver indicado neste campo. BUTTON WIDTH – neste campo pode ajustar em pixéis a largura dos botões. TITLEBAR HEIGHT – e aqui, a altura da barra do título. VISIBLE – é onde pode ajustar a visibilidade e invisibilidade da caixa de mensagens por ActionScript. Pode ter dois valores, TRUE ou FALSE. O primeiro corresponde à caixa visível e o segundo a ela invisível. Para finalizar este componente, devemos dizer que encontramos um bug que torna o uso deste componente dentro de uma janela DraggingPane impossível. No fim, depois dos ajustes acima descritos, poderá ter uma caixa assim.
5
String = sequência de textos, números ou quaisquer outros caracteres, que para o programa são
tratados como texto. 6
Conjunto de linhas de programação que fazem determinada função.
228
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SPLITVIEW O SplitView é um componente fantástico que permite dividir uma área em duas outras independentes, tanto na vertical, quanto na horizontal. Digamos que precisa colocar dois filmes numa área na sua página Flash, mas o espaço mal é suficiente para a colocação de um. Pode então usar o SplitView para dividir a área, e em cada parte colocar integralmente aquilo que pretende. Então, ambas as informações estarão no mesmo sítio, divididas por uma barra que poderá ser deslocada para um lado e para o outro 7 e assim permitir a visualização das duas partes. Vamos criar um exemplo para ver como o componente funciona. Arraste o SplitView da janela COMPONENTS para o meio da área de desenho, e aumente o seu tamanho para que cubra quase toda a área, conforme indicado abaixo.
Veja que o componente foi deixado no estado normal de divisória vertical. 7
Ou para cima e para baixo, consoante o tipo de SplitView que escolher...
229
I.6. COMPONENTES AVANÇADOS
Se carregar no componente vai ver que a janela de propriedades é igual à da figura abaixo.
Vai ver cinco propriedades no comando as quais descrevemos abaixo. TOP/LEFT CONTENT – Se estiver a utilizar uma barra divisória vertical, então esta propriedade refere-se ao nome do objecto que estará na parte esquerda (LEFT) da divisória. Se estiver a utilizar uma barra divisória horizontal, então este campo refere-se ao nome do objecto existente na parte de cima (TOP) da divisória. BOTTOM/RIGHT CONTENT – De forma análoga, esta propriedade refere-se ao objecto que vai estar na parte de baixo (BOTTOM) ou na direita (RIGHT) da divisória, consoante esteja a utilizar uma barra divisória horizontal ou vertical, respectivamente. Vai ver que já preenchemos este campo como “outro”.
NOTA “gaivota” é o nome do objecto correspondente à fotografia do pássaro que estará na metade esquerda da divisória. “outro” é o nome do objecto que estará na metade direita da divisória (neste caso é um texto).
230
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Então, a primeira coisa é criar os dois objectos que ficarão associados a cada metade do SplitView. Para criar um objecto com uma imagem, faça INSERT > NEW SYMBOL, e na janela que se seguirá preencha o nome como “gaivota”. Escolha o tipo GRAPHIC e marque o quadro que diz EXPORT FOR ACTIONSCRIPT. Veja a imagem abaixo.
Ao fazer isso, o quadro EXPORT IN FIRST FRAME já aparecerá marcado e o campo IDENTIFIER aparecerá preenchido com “gaivota”. Deixe-os como estão e carregue em ENTER para criar o novo objecto. Importe uma imagem com o comando FILE > IMPORT para finalizar este objecto. Repita a sequência de comandos acima para criar o objecto “outro”. Porém, em vez de importar uma imagem, crie uma caixa de texto do tipo DYNAMIC TEXT e MULTILINE e insira um texto qualquer. Os parâmetros da caixa e a sua aparência são vistos a seguir.
I.6. COMPONENTES AVANÇADOS
231
Carregue na seta azul no canto inferior esquerdo do timeline (figura abaixo) para voltar à cena principal.
232
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
De volta à cena principal, seleccione o componente SplitView e preencha as propriedades TOP / LEFT CONTENT e BOTTOM / RIGHT CONTENT, com “gaivota” e “outro”, respectivamente.
Se colocar o Flash no modo de teste, vai ver que tem a imagem do lado esquerdo e o texto do lado direito e que, à medida em que desloca a barra esconde ou mostra a imagem.
Se deslocar a barra totalmente para a direita terá a seguinte imagem.
I.6. COMPONENTES AVANÇADOS
233
Da mesma forma, se deslocar a barra totalmente para a esquerda terá a imagem a seguir.
Se em vez de colocar um texto e uma imagem colocar duas imagens, passa a ter algo como visto abaixo.
234
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Entretanto, se deslocar a barra totalmente à esquerda verá ...
... e toda à direita ...
O Componente SplitView tem ainda duas propriedades interessantes: T/L COMPONENTE BEHAVIOR e R/B COMPONENT BEHAVIOR. Cada uma destas propriedades permite três escolhas: STICK TO BAR , STICK TO PANE e RESIZE. Por defeito, estão ajustadas na opção STICK TO BAR. Se as colocar em STICK TO PANE as imagens passam a ficar estáticas em relação ao fundo enquanto desloca a barra
235
I.6. COMPONENTES AVANÇADOS
divisória. Na opção RESIZE, o tamanho das imagens é aumentado ou diminuído para caber na metade que lhes cabe, à medida em que desloca a barra divisória.
NOTA Pode mudar o BEHAVIOR de cada metade da janela de forma independente. Pode, por exemplo, colocar STICK TO PANE numa metade e RESIZE na outra!
Tudo o que foi dito até aqui para este componente, pode ser repetido para o caso da barra divisória horizontal. Basta apenas mudar a propriedade ORIENTATION do componente para HORIZONTAL .
TICKER A função deste componente é permitir a criação de caixas de texto que mostram frases a passar na horizontal ou vertical, similares a equipamentos encontrados em aeroportos que ficam a passar mensagens. Veja a figura abaixo.
Os parâmetros do componente são os vistos na figura seguinte.
236
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
A seguir vamos a uma descrição detalhada de cada uma das propriedades. ORIENTATION – permite duas escolhas: HORIZONTAL e VERTICAL e corresponde ao sentido de deslocamento da frase na caixa. SCROLL DIRECTION – permite duas escolhas: DECREMENTAL e INCREMENTAL. Se a orientação da caixa for horizontal, e colocar esta propriedade como INCREMENTAL, vai ver a frase a deslocar-se da esquerda para a direita e pode inverter este sentido de deslocamento se colocar a propriedade como DECREMENTAL. Se a orientação da caixa for vertical, então a frase irá deslocar-se de cima para baixo ou de baixo para cima, consoante a propriedade esteja INCREMENTAL ou DECREMENTAL, respectivamente. SPEED – representa a velocidade com que a frase se move, medida em pixéis por segundo. SMOOTHNESS – representa a quantidade de pixéis que a frase se move a cada ciclo. Este campo tem relação directa com o SPEED. Isto significa o seguinte: se a velocidade estiver a 10 e o SMOOTHNESS estiver a 1, então a frase desloca-se a 10 pixéis por segundo. Porém, se ajustar SMOOTHNESS com o valor 2, a velocidade passa a ser 20 pixéis por segundo, pois a cada deslocamento da frase ela salta 2 pi-
I.6. COMPONENTES AVANÇADOS
237
xéis. Logicamente, quanto menor este número, mais suave é o movimento aos olhos, por isso o campo tem esse nome8. SPACING – É a quantidade de pixéis entre cada um dos itens a ser mostrado na caixa9. STOP ON FOCUS – Se ajustar esse valor como TRUE, de cada vez que o utilizador passar o rato sobre a caixa, o movimento encerra, voltando ao normal à saída do cursor. Pode ser útil para quando deseja colocar links a deslocar-se pela caixa e permitir que possam ser clicados facilmente. Se ajustar como FALSE, o movimento não se altera à passagem do rato. SCROLL LOCATION – Permite regular a posição das setas de scroll (deslocamento) da caixa. As opções disponíveis são: NONE, TOP, BOTTOM, LEFT e RIGHT, correspondentes a nenhuma seta, setas em cima, setas em baixo, setas à esquerda e setas à direita, respectivamente. Na figura da caixa, no início desta secção, a caixa está ajustada com a opção BOTTOM. FRAME WIDTH – indica a espessura em pixéis da borda da caixa. Se escrever zero, a caixa fica sem border. FRAME COLOR – pode nesta caixa regular a cor do border. HIGHLIGHT COLOR – nesta caixa pode indicar a cor do highlight, ou seja, quando o cursor do rato passa em cima da caixa com o texto em movimento, uma caixa colorida ilumina a região do texto imediatamente abaixo do cursor, para indicar que está seleccionada esta região. Podese então, por meio desta propriedade, regular a cor da iluminação. DATA PROVIDER – indica o nome de um objecto em ActionScript responsável pelo fornecimento dos textos a serem mostrados na caixa.
8
smoothness = suavidade
9
a caixa permite a colocação de inúmeras frases seguidas, que são mostradas sequencialmente,
independente do tipo de deslocamento, horizontal ou vertical.
238
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
DATA ARRAY – Indica uma matriz de elementos a serem mostrados na caixa. Pode ver na imagem que este campo contém a frase que aparece na primeira imagem a falar do Ticker. Se carregar uma vez com o rato sobre a região onde está a frase vai ver uma janela onde poderá inserir todos as frases que deseja mostrar. HEADER TEXT – O texto que preencher neste campo será mostrado como sendo o título da caixa. HEADER LOCATION – Nesta caixa poderá ajustar a posição em que o título da caixa vai estar. As escolhas possíveis são: NONE, TOP, BOTTOM, LEFT e RIGHT, que correspondem a nenhuma, em cima, em baixo, à esquerda e à direita, respectivamente. HEADER WIDTH – indica a largura do título em pixéis. HEADER HEIGHT – indica a altura do título em pixéis. DATA WITDH – indica a largura dos itens na caixa em pixéis. Esta propriedade faz mais sentido no caso de caixas de deslocamento horizontal, pois irão espaçar as frases na horizontal de forma a não se confundirem. DATA HEIGHT – esta propriedade indica a altura em pixéis das frases. Deixamos para o fim os dois últimos componentes do primeiro grupo, o TREE e o PROGRESS BAR. Não nos estenderemos nas explicações acerca destes componentes nesta secção, por se tratarem de elementos que apenas podem funcionar quando programados por ActionScript.
TREE Este componente permite a criação de “árvores” com informações em sistema de hierarquia. Poderá por ActionScript, criar, apagar, mover e ordenar os nós e as suas ramificações. Poderá descobrir qual a ramificação que foi clicada, e derivar acções correspondentes.
I.6. COMPONENTES AVANÇADOS
239
PROGRESSBAR A Macromedia finalmente lançou um componente que corresponde a uma barra de progressão. Todo o controlo da barra é feito via ActionScript.
As propriedades deste componente são: CHANGE HANDLER – Deve colocar neste campo o nome da função (subrotina) em ActionScript (no mesmo timeline) a ser executada à medida que a barra progride. DISPLAY GRAPHICS – É uma propriedade que pode ser ajustada para TRUE ou FALSE. Se for colocada em true, que é o modo por defeito, é mostrado o desenho da barra a progredir. Se colocado em false, faz o desenho ficar invisível.
240
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
DISPLAY TEXT – É uma propriedade que indica se deve estar visível (TRUE) ou não (FALSE) a string a mostrar os Kilobytes.
Flash charting components Este é o segundo grupo adicional de extensões oferecido pela Macromedia no seu site. Assim como o primeiro grupo de extensões, este também requer instalação para que possa ser usado no Flash MX (veja o Anexo III). Assim que o tiver instalado terá à sua disposição os seguintes componentes: BAR CHART, LINE CHART e PIE CHART, os quais descrevemos a seguir.
BAR CHART Com este componente poderá criar gráficos em barra, como na figura abaixo.
I.6. COMPONENTES AVANÇADOS
241
Para conseguir um gráfico similar ao visto acima, preenchemos as propriedades do componente conforme visto abaixo.
LAYOUT OPTIONS – Se carregar neste campo, vai ver surgir uma janela, onde poderá ajustar diversas propriedades.
CharTitle – Esta propriedade representa o texto que será o título do gráfico. No caso “GRÁFICO DE VENDAS”. XAxisTitle – Neste campo deverá colocar o título correspondente ao eixo horizontal (X). No caso, “MESES”. YAxisTitle – Neste campo deverá colocar o título correspondente ao eixo vertical (Y). No caso, “EUROS”.
242
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Margin – Corresponde ao valor em pixéis da margem, ou seja, em relação ao tamanho total do controlo, quantos pixéis de margem deseja estabelecer em todas as direcções. Se aumentar muito a margem e, consequentemente, diminuir o espaço interno dentro do controlo, pode ser que o Flash automaticamente ajuste a rotação dos textos para tentar encaixar o gráfico dentro do componente. Veja na figura abaixo o gráfico que foi comprimido na vertical, com a retirada das linhas de 25 e 75 e a rotação realizada nas strings dos nomes dos meses.
XlabelMaxHeight – No caso de ter sido rodado o texto colocado ao longo do eixo horizontal, conforme visto na figura acima, esta propriedade determina o quanto em pixéis deve ser reservado para a colocação dos nomes. Por outras palavras, digamos que se os meses acima tivessem sido escritos por extenso, então, automaticamente não caberiam no gráfico e teriam sido rodados. Assim sendo, poderíamos ajustar esse campo, para um valor alto, digamos, 500, e teríamos o gráfico seguinte...
I.6. COMPONENTES AVANÇADOS
243
... ou poderíamos optar por ajustar a propriedade para um valor pequeno, como 30 pixéis, por exemplo, e limitar a este valor a quantidade de pixéis utilizada para mostrar os títulos ao longo do eixo horizontal, conforme visto na figura abaixo.
LINE CHART O próximo componente do pacote Flash CHARTING COMPONENTS é o LINE CHART. A sua utilidade é permitir a criação de gráficos de li-
244
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
nhas, como o visto abaixo que é criado automaticamente no momento em que insere um componente LINE CHART na sua área de desenho
Ao arrastar um componente destes para a janela de desenho e clicar nas propriedades, vai ver a janela abaixo.
Line Chart – Layout Options A primeira propriedade é a LAYOUT OPTIONS e se carregar no campo da direita nesta linha, vai ver uma surgir uma janela que pode preencher conforme visto a seguir.
I.6. COMPONENTES AVANÇADOS
245
A primeira opção é a Chart Title e representa o título do gráfico. Vamos preenchê-la com a frase “RESUMO DE VENDAS”. A seguir vemos as propriedades Xaxis Title e Yaxis Title , que correspondem ao título a colocar para o eixo horizontal e vertical, respectivamente. Preenchemos estes campos com as frases “valores em euros” e “meses”, respectivamente. As opções a seguir são: LineColor e LineWeight que permitem o ajuste da cor e da espessura da linha. Vemos também o campo ShowHighlights, que indica a presença (TRUE) ou não (FALSE) de pequenos círculos de cor diferente a destacar os pontos do gráfico. Os campos a seguir, MARGIN e XLabelMaxHeight assemelham-se aos do BAR CHART e têm a mesma funcionalidade explicada anteriormente.
246
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Line Chart – Chart Event Handlers Ao voltar à janela de propriedades do componente, vemos que a próxima variável a seguir ao LAYOUT OPTIONS chama-se CHART EVENT HANDLERS. Vai ver ao lado desta frase quatro palavras: PRESS, RELEASE, ROLLOVER e ROLLOUT, que dizem respeito aos quatro eventos que os gráficos podem gerar em relação ao comportamento do rato. Se carregar nestas palavras vai ver a janela a seguir.
Terá de preencher a coluna VALUE com strings que representem o nome das funções em ActionScript a executar, quando cada um dos quatro eventos acontecer. Neste caso, os eventos são: Press (quando o botão do rato for carregado em cima de um ponto do gráfico), Release (quando o botão do rato for libertado depois de ter sido carregado em cima de um ponto do gráfico), RollOver (quando o cursor do rato passar por cima de um ponto do gráfico) e RollOut (quando o cursor do rato sair de cima de um ponto do gráfico, depois de ter entrado).
I.6. COMPONENTES AVANÇADOS
247
Line Chart – Category Labels A seguir, nas propriedades do componente, vemos CATEGORY LABELS. Vai ver que originalmente este campo está preenchido com A, B, C, D e E, que representam as colunas indicadas no gráfico. Se carregar nessas letras vai ver a janela a seguir a qual aproveitamos para modificar e colocar o texto equivalente aos cinco primeiros meses do ano.
Line chart – data values A próxima propriedade do LINE CHART chama-se DATA VALUES. Por defeito, quando criar o objecto vai ver que está preenchido com os valores 58, 25, 50, 34 e 80, que correspondem aos valores que os pontos do gráfico vão ter no eixo vertical. Carregue nestes números e vai ver uma janela onde poderá regular estes pontos. Nesta etapa deixamos os valores como estavam. Feitos todos esses ajustes, terá transformado o gráfico no que pode ser visto a seguir.
248
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Repare nos highlights à volta dos pontos. As questões discutidas no BAR CHART referentes à margem e ao comportamento do componente à medida que altera os seus valores, também são válidas para o LINE CHART.
Pie Chart O PIE CHART é o próximo componente sobre o qual iremos falar. Com ele é possível fazer gráficos PIZZA ou TARTE10 conforme visto na figura abaixo que é criada automaticamente no momento em que insere um componente PIE CHART na sua área de desenho.
10
Escolha o nome conforme o seu apetite... J
I.6. COMPONENTES AVANÇADOS
249
Ao carregar no componente, depois de o ter arrastado para a sua área de desenho, vai ver as seguintes propriedades:
Pie Chart – Layout options A primeira propriedade que vê na janela é a de LAYOUT OPTIONS. Se carregar no valor contido nesta variável vai ver a janela a seguir.
Os parâmetros vistos nesta janela são: CHART TITLE - que corresponde ao título do gráfico. MARGIN – que pode regular a margem interna do componente (ver explicação dada para o BAR CHART).
250
C ENTRO A TLÂNTICO – C OLECÇÃO TECNO LOGIAS – F LASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
SHOW LEGEND – variável que pode assumir os valores TRUE ou FALSE, correspondentes respectivamente ao gráfico ter ou não a legenda lateral ao lado direito. As três próximas propriedades, ou seja, CHART EVENT HANDLERS, CATEGORY LABELS e DATA VALUES têm um funcionamento igual ao explicado para o caso do componente LINE CHART.
Pie Chart – Pie Colors Se carregar nesta propriedade pode regular as cores de cada fatia no gráfico.
IIª PARTE
A PROGRAMAÇÃO NO MACROMEDIA FLASH MX
II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS
Linguagens Processuais ou Procedimentais Linguagens como o Pascal, o Fortran ou o C, são consideradas processuais ou procedimentais. Denominam-se desta forma, pois o código é escrito passo-a-passo. Os programadores que utilizam estas linguagens podem organizar as instruções a ser processadas em partes de código mais pequenas chamadas funções (functions) que para o seu funcionamento utilizam estruturas de dados (data structures). É importante salientar que as linguagens processuais mantêm as funções e as estruturas de dados separadas – estas não estão relacionadas de modo algum. Embora sejam eficientes, as linguagens processuais possuem alguns inconvenientes, um dos quais é a dificuldade na reutilização do código. A sua natureza passo-a-passo obriga o programador a compreender cada linha de código, para conseguir compreender o que o programa faz. Outra desvantagem das linguagens processuais é o facto de ignorarem o relacionamento entre as funções e as estruturas de dados.
LINGUAGENS ORIENTADAS POR OBJECTOS O conceito de linguagens orientadas por objectos foi introduzido, na Web, por linguagens tais como o Javascript, VBScript e mais recentemente pelo Actionscript do Flash. O Actionscript segue as normas ECMA-262 Standard, uma especificação escrita pela European Computer Manufacturers Association, que serve também de base à linguagem Javascript - daí as semelhanças entre as duas linguagens. No entanto, existem ainda alguns pontos onde ambas as linguagens diferem.
254
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
No Flash MX as funções e as estruturas de dados estão agrupadas em classes que podem ser definidas pelo construtor de funções (constructor function). Um construtor de funções é um conjunto de instruções que define as propriedades e os métodos de uma classe. É possível criar múltiplas instâncias de uma classe, cada uma delas denominada por objecto, para reutilizar através do código. Por exemplo, para obter informações acerca da taxa de IVA de diversos artigos, criamos um construtor através da declaração de uma função (iva) que possui duas propriedades (preco,taxa) e através destas criamos um método (calcTotal) que calcula e devolve o preço do produto com IVA. function iva (p, t) { this.preco = p; this.taxa = t; this.calcTotal = function() this.taxa)+ this.preco;}; }
{return
(this.preco
*
Esta função necessita de dois parâmetros (t, d). Assim, a partir desta classe podemos criar instâncias deste objecto em que os parâmetros variam. almoco = new iva (5, 0.05); computador = new iva (1000, 0.17);
O operador new foi usado para criar duas novas instâncias do objecto iva, às quais atribuímos os nomes almoco e computador e para onde passamos os parâmetros que se encontram entre parêntesis. A utilização do operador new é similar a arrastar um movie clip da biblioteca para o palco, ou seja, criar uma nova instância de um símbolo (objecto). Nas linguagens orientadas por objectos as classes podem receber propriedades e métodos umas das outras de acordo com uma ordem específica. A esta característica denomina-se herança (inheritance).
II.1. INTRODUÇÃO À PROGRAMAÇÃO ORIENTADA POR OBJECTOS
255
Uma classe que herda as características de outra classe é designada de subclasse (subclass). A classe que passa as propriedades e métodos é chamada de superclasse (superclass). Uma classe pode ser subclasse e superclasse em simultâneo.
II.2. CONCEITOS BASE
Dot sintax versus Slash sintax A slash syntax foi utilizada pelo Flash desde a versão 3 até à versão 5. Na versão 5 do programa, foi feita a transição entre as duas notações, podendo o utilizador funcionar com ambas em simultâneo, embora a slash sintax fosse já aconselhada pela Macromedia apenas para abrir ficheiros de Flash mais antigos. Na versão MX a slash sintax já não existe pois foi totalmente substituíd a pela dot sintax. Na slash sintax os caminhos são muito semelhantes aos utilizados em HTML. O caminho pode ser absoluto, começando pela _root (timeline do filme principal) ou relativo se começar numa instância e seguindo o caminho até ao target (movie clip). Em HTML a ( / ) representa a raiz (_root) e quando se possui um caminho relativo para, por exemplo, subir um nível na hierarquia este é representado por ( ../ ). Em Flash a ( / ) simboliza o palco e para atribuir uma action a um botão que afecte um movie clip chamado bola, no palco, basta digitar /bola. No caso inverso, se possuir um movie que vai accionar uma ordem para o palco, então no movie deverá aparecer apenas / A dot syntax foi introduzida no actionscripting do Flash 5. É o método preferencial para identificar o caminho para um movie clip ou para uma variável. Se ainda trabalhar em Flash 5, a slash sintax deve ser evitada pois foi totalmente substituída pela dot sintax no Flash MX. A dot sintax é muito semelhante à slash sintax, mas as barras foram substituídas por pontos. Os caminhos podem ser absolutos e relativos e existem duas referências especiais, _root e _parent. A _root num caminho absoluto refere-se à timeline principal (raiz), da mesma maneira
258
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
que a ( / ) na slash sintax. A _parent refere-se à timeline onde o filme (movie clip) está inserido, e é semelhante a utilizar (../ ) numa estrutura HTML, quando especificada em termos relativos. O topo da árvore é a timeline principal do filme, referida como root no Flash. Todos os movie clips são instâncias localizadas na timeline principal e são dependentes da root. Existem dois métodos para referenciar o target path de um movie clip: Absoluto e relativo.
Timeline principal root
Escritório
Quarto
Figura001 - Target Paths
No esquema da figura 001, o caminho absoluto para o movie computador será: _root.escritório.computador, e o caminho relativo para o movie clip quarto a partir do movie clip cama será _parent.
Terminologias utilizadas no Actionscripting Actions – São declarações que instruem a animação a desempenhar determinada tarefa. Boolean – É um valor que apenas pode assumir true ou false.
II.2. CONCEITOS BASE
259
Class (classe): Tipo de dados que podem ser utilizados para definir um novo objecto. Constantes – São elementos imutáveis durante toda a animação. Constructor - Função utilizada para definir as propriedades e os métodos de uma classe. Eventos - O evento é a acção que ocorre enquanto a animação está a decorrer. Os eventos podem ocorrer quando um movie clip carrega, ou quando o utilizador faz clique sobre um botão. Function (função): Bloco de código reutilizável cujos argumentos (parâmetros) podem ser passados e de onde os seus valores podem ser extraídos. Identifier (identificador): Nome utilizado para identificar uma variável, propriedade, objecto, função ou método. O primeiro caracter de um identificador deve ser uma letra, underscore (_), ou sinal $. Cada caracter subsequente deve ser uma letra, underscore (_), sinal $ ou número. Keywords – Palavras reservadas que possuem uma função pré-definida no Flash. Method (método): Função associada a um objecto. Depois da função associada, pode ser chamada método desse objecto. Object (objecto): Uma instância de uma classe. Cada instância contém todas as propriedades e métodos da classe. Instâncias também podem conter propriedades e métodos adicionais não definidos na classe. Nome da instância – Nomes únicos que permitem identificar determinados elementos na animação, como movie clips ou variáveis. Property (propriedade): Características que definem um objecto. Parâmetros ou argumentos – São contentores que permitem passar valores para dentro de uma função. Por exemplo, o código seguinte passa o parâmetro cor para a função cores. function cores (cor) { cor_preferida = "A minha cor preferida é " + cor; }
260
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Variable (variável): Identificador que armazena um valor. Seria possível definir uma classe de tigres utilizando um construtor de funções. As propriedades destes tigres incluiriam os dentes, tamanho, apetite e forma. Os métodos incluiriam código para fazer o tigre andar, comer e caçar. Depois de definir a classe do tigre através de propriedades e métodos teríamos o objecto do tigre. Para construir outro tigre deveríamos criar uma instância da mesma classe, podendo possuir no entanto propriedades e métodos diferentes da primeira. Cada objecto pode ter as suas propriedades e métodos não definidos pela classe da qual derivou. Por exemplo, poderia definir uma instância em que o tigre tem outra cor, mas como seria o único a possuí-la esta propriedade não seria adicionada na classe.
Painel Actions No Flash é utilizado o painel Actions para se escrever os scripts. Este painel pode ser acedido através do comando W INDOW > ACTIONS ou da tecla de atalho F9. O painel possui dois modos de edição de scripts, o Normal e o Expert. A diferença entre o modo Normal e o modo Expert está no tipo de ajuda fornecido ao utilizador. Em modo Normal são exibidos no topo do painel os parâmetros que são possíveis de utilizar com determinada action.
Figura002 – Painel Actions em Normal Mode
II.2. CONCEITOS BASE
261
No modo Expert o utilizador introduz os scripts da mesma forma mas também o pode fazer digitando-os directamente no painel; para tal deve possuir já bons conhecimentos de actionscripting, sendo este modo aconselhado a utilizadores mais experientes. A área superior do painel que estava presente em modo Normal desaparece, mas ao digitar os comandos surge uma janela de auxílio com as keywords do programa.
Figura003 - Painel Actions em Expert Mode
INSERIR UMA ACTION Pode utilizar vários métodos para aplicar actions a uma frame ou instância. Primeiro, seleccione o frame ou instância onde irá aplicar a action e active o painel actions através do comando W INDOW > ACTIONS ou com a tecla F9. No lado esquerdo do painel as actions apresentam-se divididas por categorias. Para aceder a determinada categoria basta fazer clique uma vez sobre a mesma e para aplicar a action pretendida deverá fazer duplo clique sobre a sua designação. O código aparecerá imediatamente no lado direito do painel. Algumas actions possuem parâmetros que podem ser de seguida configurados na área à direita. Ver figura 002.
262
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Como alternativa, o painel actions possui o botão (+) que também acede às categorias e actions do programa, mas através de menus pop-up.
Figura004 – Botão (+)
Nota:
Neste livro não faremos referência ao modo que deve ser utilizado para a inserção de uma action, deixando ao critério do leitor essa escolha.
Figura005 – Botões do painel Actions
Find – Procurar palavras no código.
Figura006 – Janela Find
II.2. CONCEITOS BASE
263
Para encontrar palavras no código, digite o texto na caixa “Find What” e active a opção Match Case se pretende procurar as palavras com maiúsculas e minúsculas exactamente como as escreveu na caixa. Replace – Procurar e substituir palavras no código.
Figura007 - Janela Replace
Targe t Path - Inserir o caminho relativo ou absoluto para uma instância. Check sintax – Verifica se a sintaxe do código está correcta. Autoformat – Formata automaticamente o código de modo a que este fique com um aspecto conciso e de fácil leitura. Show Code hint – Mostra uma pequena janela de ajuda enquanto se digita o código.
ALTERNAR ENTRE MODOS NO PAINEL ACTIONS Para alterar entre modos de trabalho (Expert e Normal) clique no menu pop-up do painel Actions e escolha a opção pretendida.
NAVEGAR ENTRE SCRIPTS NUM DOCUMENTO No topo do painel actions surge em menu pop-up que permite ao utilizador navegar entre todos os scripts presentes no documento, sem necessitar de seleccionar as instâncias ou keyframes onde estes estão aplicados.
264
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura008
Uma outra forma de visualizar as actions presentes num determinado filme é através do Movie Explorer, que podemos aceder através do comando W INDOW > MOVIE E XPLORER.
Figura009 – Movie Explorer
PARA APAGAR UMA ACTION Seleccione a action ou a linha no painel do lado direito. Faça clique sobre o botão (-).
II.2. CONCEITOS BASE
265
VISUALIZAR A NUMERAÇÃO PARA AS LINHAS DE CÓDIGO Seleccione a opção VIEW LINE NUMBERS no menu pop-up do painel actions ou então utilize o atalho Ctrl+Shft+L (Windows) ou Command+ Shift+L (Macintosh). A janela Actions possui ainda o botão View Options, onde esta opção aparece disponível.
Figura010 – Numeração nas linhas de código
IMPRIMIR ACTIONS No menu pop-up do painel actions seleccione a opção Print. Surgirá a janela com as opções de impressão. Clique no botão Print.
PAINEL REFERENCE Este novo painel auxilia o utilizador a compreender cada acção listada no painel Actions. Existem também alguns exemplos de código, que podem ser copiados para dentro do painel de Actions.
Figura011 – Painel Reference
266
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
PARA VISUALIZAR O PAINEL REFERENCE Para visualizar o painel Reference, seleccione o comando W INDOW > REFERENCE. Se já existir uma linha de código seleccionada no painel Actions pode fazer clique sobre o ícone reference que aparece no canto superior direito da janela, que acede directamente ao painel Reference já na descrição da action seleccionada.
Figura012 – Icon Reference no painel Actions
PARA ALTERAR A DIMENSÃO DA FONTE NO PAINEL REFERENCE Seleccione a opção Large, Medium ou Small do menu pop-up do painel Reference.
ASSOCIAR ACTIONS NA TIMELINE Ao associar uma action na timeline a acção acontecerá assim que a animação atingir essa keyframe. Para associar uma action a uma frame comece por adicionar um novo layer na animação. Se a action for para uma frame, que não seja a primeira da animação, deve ser inserida uma blank keyframe na layer Actions (F7). De seguida com a keyframe seleccionada, active o painel Actions e introduza o código pretendido.
Figura013 – Associar actions a um keyframe
II.2. CONCEITOS BASE
267
ASSOCIAR ACTIONS A SÍMBOLOS Podemos associar actions a frames, timelines de movie clips e botões e directamente às instâncias dos movies e botões. Algumas actions são exclusivamente para aplicação em instâncias de movie clips e outras apenas podem ser associadas a instâncias de botões. Ao criar um símbolo na biblioteca (library) e arrastar uma cópia para o palco acabamos de criar uma instância do símbolo. Ao associar as actions às instâncias em vez de directamente no símbolo, podemos utilizar várias instâncias do símbolo em que cada uma pode conter o seu conjunto de actions, reaproveitando recursos no filme. Para aplicar uma action a um símbolo, basta seleccioná-lo e atribuir a action que pretendemos.
Figura014 – Símbolo Button na livraria e uma instância no palco
Eventos Ao associar uma action a um símbolo surge sempre uma linha adicional para especificar o evento. O evento é a acção que ocorre enquanto a animação está a decorrer. No Flash, os eventos são normalmente de teclado ou de rato e diferem entre movie clips e botões. Cada instância pode conter mais do que um evento.
268
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
EVENTOS ASSOCIADOS A BOTÕES
Figura015 – Eventos associados a uma instância dum botão
Press – Ao premir o botão do rato, mas antes de o soltar. Release – Quando se solta o botão do rato. Este evento acontece sempre depois do evento Press. Release Outside – Soltar o rato fora da área hit do botão. Roll Over – Passar o rato por cima do botão, mas sem possuir o botão do rato premido. Roll Out – Retirar o rato de cima do botão, sem o premir. Drag Over – Passar o rato por cima do símbolo, mantendo o botão do rato premido. Esta operação é normalmente designada por “arrastar”. Drag Out – Retirar o rato de cima do botão ou movie, mantendo o botão premido. Keypress – Acontece quando o utilizador prime uma determinada tecla.
EVENTOS DE MOVIE CLIPS Load – Ocorre apenas uma vez, assim que a instância acaba de ser carregada. EnterFrame – A acção está constantemente a ser despoletada à velocidade do filme. As acções associadas a este evento acontecem antes de qualquer action da timeline do movie clip.
II.2. CONCEITOS BASE
269
Unload – A acção é iniciada no primeiro frame, depois do movie clip ser removido da timeline. Mouse Down – Ao premir o botão do rato sobre a instância. Mouse Up – Ao soltar o botão do rato sobre a instância. Mouse Move – A acção é iniciada sempre que o rato é movido. Deve utilizar as propriedades _xmouse e _ymouse para determinar a posição do rato. Key Down – Acontece assim que uma tecla é premida. Deve ser utilizada a propriedade Key.getCode para determinar qual foi a última tecla premida. Key Up – Ao soltar uma tecla. Utilizar a propriedade Key.getCode para identificar a última tecla a ser premida. Data – A acção é iniciada assim que entram dados no movie através da action LoadVariables ou LoadMovie.
Ao ser especificada através da acção LoadVariables o evento apenas acontece uma vez, enquanto que através da action LoadMovie o evento acontece repetidamente à medida que os dados são recebidos.
Figura016 – Eventos associados a uma instância dum movie clip.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
Neste exemplo vamos utilizar actions que controlam o fluxo da animação. Importamos um vídeo em formato QuickTime que iremos controlar com alguns botões. Comece por importar um filme Quicktime para a biblioteca através do comando FILE > IMPORT. Active a opção Embed video.
Figura017 – Opções na importação de vídeo
No palco crie mais duas layers, uma para os botões e a segunda para as actions. Ver figura 018. No menu W INDOW > COMMON LIBRARIES > BUTTONS, seleccione da categoria Playback um botão para parar o filme, um para retomar a animação e mais dois para recuar e avançar o filme frame-a-frame.
272
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura018
Seleccione a primeira keyframe da layer actions e active o painel Actions (F9). Na categoria actions escolha a opção movie control e a action stop. stop();
De seguida, seleccione o botão que irá fazer a animação arrancar e escolha no painel ACTIONS > MOVIE CONTROL > PLAY.
Para o botão que pára o filme aplique de novo a action Stop.
Figura019 – Action Stop
Repare que nenhuma destas duas actions possui argumentos. Tanto a action stop como a play actuam sobre a timeline em que estão inseridas, mas não afectam directamente movie clips presentes dentro da mesma. Assim, se existissem movies no palco nenhum seria afec-
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
273
tado pelas actions que acabamos de inserir, pois as timelines dos movie clips são independentes da animação criada no palco. Restam os botões para fazer o filme recuar ou avançar frame a frame. Para estes utilizaremos a action goto, mas os parâmetros deverão ser alterados. Assim, teremos:
Figura020 – Actions do filme
CRIAR LINKS PARA PÁGINAS HTML Para criar um link para uma página HTML utilizamos a action GetURL. É possível criar links relativos e absolutos, assim como passar variáveis, no caso do envio dum formulário, através desta action. Para criar um link num botão, seleccione o botão e aplique a action GetURL que se encontra na categoria ACTIONS > BROWSER NETWORK.
Figura021 – Action getURL
274
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Um link relativo liga o filme de Flash a uma página do nosso site. O caminho deverá ser escrito usando a mesma notação do HTML. Para uma página que se encontre na mesma pasta que o HTML que contém o filme de Flash basta digitar o nome da mesma. Ver figura 022.
Figura022 – Aceder a uma página que se encontra na mesma pasta do filme em Flash.
Se esta se encontrar numa pasta diferente, o caminho deve ser digitado desde a página HTML que contém o filme de Flash até à página do link. Para recuar um nível utilizam-se dois pontos. Ver figura 023.
Figura023– Aceder a uma página HTML que se encontra numa pasta diferente do filme em Flash.
Um link absoluto poderá ser para uma página fora do nosso site. Com o código seguinte é aberto o endereço http://www.centroatlantico.pt numa nova página do browser.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
275
Figura024 – Action GetURL
Um link e-mail cria automaticamente uma nova mensagem no programa de e-mail que estiver instalado no computador do utilizador, e preenche o endereço de e-mail para onde será enviada a mensagem. on (release) { getURL("mailto: [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
276
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
CARREGAR FILMES DE FLASH EXTERNOS Num site totalmente em Flash, os filmes podem tornar-se muito extensos e pesados. Nas animações mais complexas começa também a ser difícil organizar todo o fluxo de trabalho por cenas e muitas vezes é necessário recorrer à separação do conteúdo em diversos filmes. Estes filmes por serem mais pequenos, são mais fáceis de organizar e podemos sempre optar por removê-los da animação principal em qualquer altura ou substituí-los quando não estão a ser visualizados pelo utilizador. Um exemplo clássico será um site que possui como área fixa uma navegação de botões que pretendemos se mantenha constantemente visível, enquanto uma segunda área acomodará todas as animações referentes a cada um destes botões. Ver figura 026.
Figura026 – Interface principal do filme
Para carregar filmes de Flash sobre outro filme é necessário que a animação que vai ser carregada esteja já exportada em formato swf. A animação que carrega os filmes secundários estará no nível inferior. Cada nível só pode possuir um filme, logo, ao carregar um filme num nível ocupado, a animação que lá se encontra é automaticamente removida.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
277
Figura027 - Carregamento de filmes swf
Os filmes secundário herdam do principal as seguintes características: Velocidade – A velocidade do filme principal sobrepõe-se à das animações secundárias. Dimensões – O canto superior esquerdo dos filmes secundários irá coincidir com a coordenada (0,0) do filme principal. O restante será cortado se estes forem maiores e nunca redimensionado. Cor de fundo - Os filmes secundários irão possuir fundo transparente. Para um fundo opaco devemos criar uma layer onde desenhamos um rectângulo com a cor de preenchimento pretendida.
Para carregar um filme secundário vamos começar por exportá-lo para o formato .swf através do comando FILE > EXPORT MOVIE. Tivemos o cuidado de dar a este ficheiro a mesma dimensão do filme principal e de construir a animação do lado direito para não interferir com a navegação. Ver figura 028.
278
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura028 - Filme secundário
Guardamos este ficheiro na mesma pasta onde se encontra guardado o filme principal, pois o caminho necessita de ser especificado na altura do carregamento e é mais fácil se ambos se encontrarem na mesma localização.
Figura029 - Exportar o filme
De seguida seleccionamos o botão que vai efectuar o carregamento do filme e no painel Actions escolhemos a opção ACTIONS > BROWSER/ NETWORK > LOAD MOVIE.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
279
Figura030 – Action Load Movie
Na opção URL digitamos o nome do ficheiro exportado anteriormente. O nível deverá ser superior a 0 pois este é o do filme principal e se o mantivermos o filme principal desaparece para dar lugar ao filme secundário.
Figura031– Filme swf carregado sobre o principal
Qualquer outro filme que seja agora carregado em nível 1 fará automaticamente a remoção do filme existente (clientes.swf ). No caso de pretendermos remover um determinado filme, basta utilizar a action UnloadMovie e referi-lo através do nível onde se encontra carregado.
280
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura032 – Remover um filme
CONTROLAR FICHEIROS EXECUTÁVEIS COM O FSCOMMAND O Flash exporta ficheiros executáveis para a criação de CD-ROMs interactivos. A action Fscommand permite aceder e alterar algumas características nos ficheiros executáveis criados pelo Flash. Para exportar um ficheiro executável seleccione a opção FILE > PUBLISH SETTINGS e escolha a opção Windows Projector, no caso de pretender um executável para correr em sistemas Windows ou a opção Macintosh Projector, para ficheiros que correm em sistemas Apple. Para alterar o nome que o programa atribui por defeito ao ficheiro inactive a opção Use default Names.
Figura033 – Exportar um executável
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
281
Normalmente são aplicadas à primeira keyframe do filme, mas estas acções também podem ser associadas a botões ou movie clips. No painel ACTIONS > BROWSER / NETWORK > FSCOMMAND aceda à caixa Commands for standalone player e escolha uma das seguintes opções:
Figura034 – Comandos para standalone player
Fullscreen – O default é true. Se for igual a true o filme ocupará toda a área do monitor do utilizador. Allowscale –A janela do filme ao ser redimensionada, altera também as proporções dos actores e imagens que fazem parte da animação. Na opção false isto não acontecerá. O valor default é true. Showmenu – Por defeito está activo, assim o utilizador ao fazer clique com o botão direito do rato sobre o filme verá aparecer um menu de atalho que lhe permite controlar várias opções no filme.
Figura035 – Showmenu
282
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Trapallkeys – Converte todos os eventos de teclado (KeyUp e KeyDown) em eventos de movie clip (onClipEvent). Exec – Executa outro ficheiro exe. O caminho para o ficheiro deve ser especificado na caixa parâmetros. Quit – Fecha a janela do projector.
Figura036 – Icon de projector
O ficheiro produzido pode ser aberto em qualquer computador, mesmo que não possua o Player do Flash instalado.
SÍMBOLOS Recapitulando alguns pontos-chave em relação aos símbolos, que serão importantes para compreender a sua integração com as actions em Flash: - As instâncias dos movie clips e botões podem possuir nomes.
Figura037- Nomear movies
- As timelines dos movie clips são independentes da timeline do filme principal, ou seja, um filme pode estar parado, mas os movie clips podem manter as suas animações.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
283
- Uma caixa de texto dinâmico ou input pode possuir nome. No entanto, devemos ter em atenção uma diferença importante entre nomear a instância de texto e atribuir-lhe um nome de variável.
Figura038 – Nome da instância de texto
Ao atribuir um nome de instância é possível aceder a métodos e propriedades da caixa de texto. Esta opção é portanto mais poderosa que a atribuição do nome da variável à qual apenas podemos alterar o seu valor.
Figura039 - Nome da variável de texto
Os símbolos podem estar incluídos dentro de outros símbolos, que por sua vez podem possuir outros símbolos dentro das suas timelines. A localização destes símbolos é dada por uma hierarquia em forma de árvore para a qual os nomes das instâncias contribuem para identificar a sua localização. Esta localização é conhecida por caminho (target path) do movie clip.
Figura040 – Hierarquia dos símbolos
284
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para nos referirmos aos métodos de um objecto a forma é análoga à utilizada para as instâncias. Os métodos possuem argumentos ou parâmetros, que são suportes para valores transportados para o método. Estes argumentos seguem o nome do método entre parêntesis, utilizando a sintaxe nomedométodo (argumentos). Para utilizar a dot sintax na referência a um método de um objecto, será preciso primeiro referenciar o nome do objecto (ou o caminho de um movie clip) seguido de um ponto e de seguida o método. Para referenciar o método (play) de um movie clip (boneco) utilizando a dot sintax: boneco.play()
ATRIBUIR NOMES A INS TÂNCIAS DE MOVIE CLIPS OU BOTÕES
Para ser possível fazer referência a um movie clip ou botão é necessário que a instância possua um nome. Para atribuir este nome basta seleccionar a instância e no painel PROPERTIES preencher o campo instance name.
Figura041 – Atribuir um nome a um movie clip
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
285
CAMINHOS RELATIVOS E ABSOLUTOS Tal como já foi referido no primeiro capítulo desta segunda parte do livro, existem duas formas de fazer referência ao target path (caminho) dum movie clip. Através de referências absolutas e relativas.
CAMINHOS ABSOLUTOS A timeline principal do filme, referida como _root no Flash. Todos os movie clips são instâncias localizadas na timeline principal e são dependentes da _root. Logo, para iniciar a animação dum movie chamado modelo no palco teremos: _root.modelo.play()
Ao utilizar este método a action pode ser dada de qualquer timeline no filme, pois o Flash espera encontrar no palco uma instância com o nome modelo e apenas actuará sobre esta.
Figura042– Target path absoluto
CAMINHOS RELATIVOS No método relativo a referência _parent diz respeito à timeline onde o movie clip ou botão está inserido; esta pode ser o palco ou outro movie clip. Numa estrutura do tipo representado na figura042, para aceder ao palco através do movie clip vestido teremos algo do tipo: _parent._parent
286
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura043 – Target path relativo
Ainda no método relativo surge-nos a referência this que simboliza a timeline em que estamos. Se estivermos na timeline modelo e nos quisermos referir a ela no código bastará escolher a opção this ou deixar o campo target em branco.
Figura044 – Movie clips dentro de outro movie clip
CONTROLAR INSTÂNCIAS DE SÍMBOLOS Utilizando a dot sintax e os target paths conseguimos não só associar actions a instâncias, mas também alterar as suas propriedades e aceder aos seus métodos.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
287
No exemplo seguinte iremos criar uma simples interface com quatro botões, para controlar um movie clip (pacman). Comece por criar o movie clip do pacman com duas frames , para produzir a animação do abrir e fechar da boca do elemento.
Figura045 – Animação do movie clip pacman
Crie de seguida um botão (seta) para a interface. Deste símbolo aplicaremos quatro instâncias, que serão rodadas no palco uma para cada direcção do movimento do personagem. Vamos começar por criar a action que rodará o movie na direcção desejada. Para tal, basta-nos controlar a propriedade _rotation. No palco atribua um nome à instância do pacman e seleccione no painel ACTIONS > PROPERTIES > _ROTATION .
Para completar o comando faça clique na linha de código e complete com o nome do movie clip, seguido de um ponto. Ver figura 046. Para os restantes valores complete as actions mudando apenas o valor da rotação do movie clip. Figura046 – Valores de rotação para as setas
288
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
PROPRIEDADES DOS MOVIE CLIPS _alpha – Altera a transparência das instâncias. Assume valores entre 0 e 100, em que o valor 0 simboliza a transparência máxima da instância.
Figura047 – Alpha 100 e alpha 50
_currentframe – Simboliza a frame actual onde a animação da instância se encontra. _droptarget – Representa a posição onde a instância é largada no caso de estar a ser usada a action startdrag. _focusrect – Determina se um movie clip possui um rectângulo amarelo à sua volta no caso do utilizador navegar na animação com a tecla TAB. _framesloaded – A quantidade de frames já carregados da instância. _height – Altura em pixéis de uma instância. _name – Nome da instância. _quality – Qualidade com que é exibida determinado movie clip. Os valores possíveis são: LOW – Gráficos apresentam-se sem anti-aliasing. MEDIUM – Gráficos com anti-alising utilizando uma grelha de 2 x 2 pixéis, mas os bitmaps não possuem suavização. Ideal para filmes sem texto. HIGH – Boa qualidade. Gráficos com anti-alising utilizando uma grelha de 4 x 2 pixéis, e os bitmaps são suavizados se a animação estiver parada. Esta é a qualidade por defeito do Flash. BEST – Muito boa qualidade. Igual à qualidade high, mas os bitmaps estão sempre suavizados.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
289
Figura048 – Low quality vs High Quality
_rotation – Valor da rotação de uma instância.
Figura049 - Propriedade Rotation
_soundbuftime – Tempo em segundos antes do filme começar uma animação stream. _target – Retorna o valor do target path do movie clip. _totalframes – Devolve o número total de frames de um movie clip. _url – Dá o endereço URL do filme SWF de onde o movie clip fez download. _visible – Visibilidade da instância. Quando o seu valor é false a instância ficará invisível, no caso de true a instância fica visível. Por defeito, o valor está configurado para true. _width – Largura dada em pixéis de uma instância. _x – Coordenada do centro de um movie clip visualizada na régua horizontal do Flash. De notar que a coordenada (0,0) no palco é o canto superior esquerdo, enquanto que dentro de um movie clip é o centro do mesmo.
290
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
_xmouse – Coordenada do ponteiro do rato no eixo x. _xscale – Valor em percentagem da largura dum movie clip. _y – Coordenada do centro de um movie clip visualizada na régua vertical do programa. _ymouse – Coordenada do ponteiro do rato no eixo y.
Figura050 - _xmouse e _ymouse
_yscale – Valor em percentagem da altura dum movie clip. O valor 100 representa a dimensão do movie clip que se encontra na biblioteca.
Figura051 - _xscale e _yscale
MÉTODOS MAIS UTILIZADOS NOS MOVIECLIPS starDrag e stopDrag A capacidade de arrastar movie clips dentro de uma animação é sem dúvida uma das capacidades mais utilizadas pelos designers do Flash. Esta operação é desempenhada através da utilização de um método denominado startDrag.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
291
Uma das formas mais simples para deslocar um movie clip é atribuir o método directamente na instância no evento onLoad. Esta situação pode ser interessante quando pretendemos criar um rasto de movies a seguir o cursor do rato.
Figura052– Método startDrag
A opção Lock mouse to Centre coloca o centro da instância a coincidir com o ponteiro do rato. Se não especificarmos Target este será interpretado com aquele onde a action está a ser aplicada. Para restringir o movimento a uma área mais pequena, utilize a opção Constrain to rectangle.
Figura053 – Constrain to rectangle
No entanto, na maior parte das vezes pretendemos ter o controlo total sobre a instância e a possibilidade de a posicionar algures no palco.
292
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para esta situação teremos de aplicar o método stopDrag, mas que apenas será chamado quando o utilizador soltar o botão do rato. Uma das formas de obter este efeito é criar primeiro um botão que contém o actor a arrastar e de seguida colocar esse botão dentro de um movie clip que será colocado no palco. Seleccione o botão dentro do movie e escolha ACTIONS > MOVIE CLIP CONTROL > STARTDRAG.
Figura054 – Actions para drag and drop do movie clip
O botão que colocamos dentro do movie clip possuirá então a programação para arrastar e largar a instância, mas em eventos diferentes. Ver figura 054. Não é necessário especificar Target pois como o botão está dentro do movie clip este é automaticamente assumido como o movie que deve ser arrastado. A instância do movie clip é colocada no palco e estará pronta a funcionar.
DuplicateMovieClip e RemoveMovieClip Estes dois métodos permitem duplicar um movie clip e remover movie clips que tenham sido criados através do método DuplicateMovieClip. Começamos por nomear o movie clip no palco, através do painel PROPERTIES.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
293
Figura055 – Nomear o movie clip
De seguida para testar seleccionamos o primeiro keyframe da timeline no palco e aplicamos a action MOVIE CLIP CONTROL > DUPLICATE MOVIECLIP. Nos parâmetros atribuímos o nome do movie a ser duplicado, o nome do novo movie clip e a profundidade (depth) onde será duplicado. Apenas pode existir um movie clip por profundidade. Como o duplicado fica sobre o original, usaremos a propriedade _x para mover o segundo movie para a direita.
Figura056 – Duplicar movies
Para remover movie clips criados através do método DuplicateMovieClip, aplicamos o método RemoveMovieClip onde só é necessário indicar o nome do movie que pretendemos remover. removeMovieClip("sol2");
Como exemplo vamos criar um simples mouse trail.
294
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura057 – Mouse Trail
Na biblioteca criamos um movie clip para servir de rasto para o ponteiro do rato. Este movie pode conter uma animação simples. Colocamos uma instância no palco e atribuímos-lhe um nome. Vamos chamar-lhe rasto.
Figura058 – Rasto do ponteiro do rato
Na primeira keyframe do palco vamos inserir a programação. Criamos duas variáveis: n e novonome . n – Variável de incremento n++;
novonome – Parte do nome dos movie clips duplicados. Possuirão nomes do tipo rasto1, rasto2 e assim sucessivamente. novonome = "rasto" + n;
Começamos por arrastar o movie rastro. startDrag("rasto", true);
De seguida duplicamos o movie e atribuímos os novos nomes com a variável novonome e a profundidade n.
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
295
Figura058 – Duplicar o movie
Como não queremos mais de seis movies atrás do ponteiro começamos a remover todos os movies anteriores. Para funcionar o palco deve ter pelo menos duas frames. Acrescente uma frame com a tecla F5. Esta segunda frame faz com que o filme entre em loop e duplique novos movie clips sempre que volta a passar pela primeira keyframe.
Figura059 – Script completo
LoadMovie e Unload Movie Estes dois métodos são especialmente importantes quando pretendemos carregar um filme de Flash externo ou um ficheiro de imagem jpeg numa determinada localização do filme principal. Tal como foi referido no capítulo anterior, nas actions LoadMovie e UnloadMovie um filme carregado sobre a animação principal fica sempre encostado ao canto superior do filme principal. A solução para o colocar noutra posição do palco é utilizar um movie clip como referência e carregá-lo para dentro deste. Imagine por exemplo que na animação principal possui um televisor com vários botões, cada um deles irá carregar uma animação diferente.
296
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura060 – Filme Principal
Depois de criar as animações secundárias com a dimensão do monitor do televisor, exportamos cada uma delas para formato swf. No nosso caso chamamos ao filme secundário exportado programa1.swf . No filme principal vamos criar um movie clip na biblioteca com nome ecrã, mas completamente vazio. Este filme só vai servir de referência para posicionar o filme que iremos carregar.
Figura061 - Filme secundário
De seguida posicionamos o movie no palco sobre o televisor, tendo em atenção que quando carregados sobre um movie clip os filmes aparecem com o seu canto superior esquerdo posicionado no centro do movie clip, ou seja na coordenada (0,0). Assim, colocando o centro do movie clip no canto do televisor, sabemos que coincide com o canto superior esquerdo do filme que vai ser carregado.
Figura062 – Posicionar o movie clip
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
297
Agora falta atribuir um nome à instância do ecrã através do painel PROPERTIES. Vamos chamar-lhe ecrã. Com um dos botões seleccionados, aplique do painel actions em OBJECT > MOVIE > MOVIECLIP > METHODS > LOAD MOVIE.
Figura063 – Aplicar o método loadMovie
Em objecto digitamos o nome da instância e nos parâmetros o nome do movie clip ou imagem jpeg que iremos carregar (este nome deve estar entre aspas). Os restantes filmes deverão ser carregados da mesma forma. Ao fazer clique noutro botão, outro filme é carregado e substitui o filme que se encontra dentro do movie no momento.
Figura064 – Resultado Final
GetBytesLoaded e GetBytesTotal Estes dois métodos são muito utilizados na criação de preloaders para filmes. Um preload é uma animação muito simples que antecede o filme
298
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
principal enquanto este carrega. Normalmente são aplicados preloaders a filmes com mais de 50 Kb. GetBytesLoaded – Número de bytes carregados GetBytesTotal – Número total de bytes do filme (inclui todas as cenas).
Por exemplo, supondo que possuímos um filme que tem apenas uma cena e precisamos de criar um preload. Este filme possui sons e imagens bitmap e tem cerca de 200 Kb. Começamos por criar uma nova cena no filme. Seleccione no menu INSERT > SCENE. A cena de preload deve ser a primeira do filme. Para alterar a ordem das cenas escolha no menu W INDOW a opção SCENE. Arraste a cena do preload de modo a ser a primeira cena do filme.
Figura065 – Painel Scene
Na primeira cena criamos uma pequena animação e inserimos uma caixa de texto dinâmico à qual atribuímos o nome percentagem no painel PROPERTIES e que vai mostrar a percentagem de filme carregado.
Figura066 – Atribuir nome à caixa de texto
II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAÇÃO
299
Criamos também um novo layer para conter a programação do preloader, e na primeira keyframe desta layer vamos inserir a seguinte programação.
Figura067 – Actions do primeiro frame do preload
_root.getBytesLoaded() – OBJECTS > MOVIE > MOVIE CLIP > METHODS > GETB YTESLOADED. Efectua a contagem do número de bytes carregados do filme. _root.getBytesTotal – OBJECTS > MOVIE > MOVIE CLIP > METHODS > GETB YTESTOTAL . Conta o número total de bytes do filme. Math.round – OBJECT > CORE > MATH > METHODS > ROUND. Método utilizado para arredondar valores numéricos. Substitui a função Int das versões anteriores do Flash. Dividimos o número de bytes carregados, pelo número total de bytes do filme e multiplicamos por 100 para obter um valor em percentagem. Para que o valor seja um número inteiro aplicamos o método Math.Round a envolver todo o código. percentagem = percent + "%" - Atribuímos o resultado à caixa de texto dinâmico “percentagem” e acrescentamos o caracter %.
Figura068 – Caixa de texto dinâmico no palco e em teste
300
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Finalmente testamos o valor da variável “percent” e se este for igual a 100 o filme avança para a próxima cena. Caso contrário prossegue nesta cena. Daí que seja necessário incluir mais uma keyframe com uma action que obriga a animação a regressar até à frame 1 da cena do preload, senão saltaria antes de tempo para o filme.
Figura069 – Actions do primeiro frame do preload
Para testar o filme seleccione a opção CONTROL > TEST MOVIE e de seguida na janela de teste, escolha a opção VIEW > SHOW STREAMING.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
SINTAXE DO ACTIONSCRIPTING Chavetas { } São utilizadas para agrupar blocos de código relacionado. on (release) { play(); }
Ponto e vírgula (;) – Todas as declarações terminam desta forma, embora o Flash consiga interpretar e completar o script sem a sua presença, é boa prática utilizá-los. Também pode utilizar o botão autoformat do painel Actions para acrescentar estes caracteres automaticamente, desde que o código não contenha erros de sintaxe. Pontos = 0; Tempo = 0;
Parêntesis () Tem diversas funções dentro do código. A principal utilização é agrupar os parâmetros de uma função. function empregado (nome, idade){ ... }
Permitem também alterar a ordem de precedência do actionscriptig e ainda facilitar a leitura do código.
302
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Tem o poder de avaliar uma expressão no lado esquerdo dum ponto na dot sintax. Por exemplo, no script seguinte os parêntesis permitem avaliar o new Cor(this) e criar um novo objecto de cor. onClipEvent(enterFrame) { (new Cor(this)).setRGB(0xffffff); }
Caso contrário seria necessário utilizar o seguinte script para determinar o valor e criar o objecto: onClipEvent(enterFrame) { myCor = new Color(this); myCor.setRGB(0xffffff); }
Maiúsculas e minúsculas O actionscripting não é sensível à capitalização do texto (case-sensitive). Apenas as palavras inerentes à linguagem (keywords) possuem limitações neste campo.
Keywords Palavras reservadas que não podem ser atribuídas a nomes de variáveis e que possuem uma função determinada pela própria aplicação. break case continue default delete
else for function if in
instanceof new return switch this
typeof var void while with
Comentários (//) Permite adicionar notas ao código. Estas notas são especialmente importantes quando o código é muito extenso ou quando várias pessoas partilham o mesmo projecto de Flash.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
303
Figura070 – Comentários no código
Variáveis Uma variável é um contentor de informação. Essa informação pode ser alterada durante a animação, tanto para gravar informação acerca do utilizador como por exemplo para guardar valores à medida que o filme muda. Aconselha-se a iniciar o valor duma variável antes de a utilizar. Os nomes das variáveis não podem ser palavras reservadas ou valores booleanos como true e false e devem ser nomes únicos no scope (espaço) de modo a evitar colisões.
DATA TYPES Um data type descreve o tipo de dados que as variáveis podem conter. Existem dois tipos de data types: primitive e reference. O data type primitive engloba as categorias number, string e boolean, enquanto os reference data types são object e movieclip. Existem ainda dois tipo especiais de data types: null e undefined. O tipo de dados de uma variável afecta o modo como uma variável muda o seu valor quando associada a um script.
304
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Number: Um número pode ser manipulado utilizando operadores aritméticos como a adição (+), subtracção (-), multiplicação (*), divisão (/), modulo (%), incremento (++) e decremento (- -). String: Uma sequência de caracteres tais como letras, números e pontuações. Em actionscripting cria-se uma string envolvendo um determinado valor em aspas. Assim, o seu valor é tratado como caracter e não como uma variável. O operador + passa a actuar como união entre as duas variáveis. nome= “Ana” + apelido
Boolean: Um valor que pode ser apenas true ou false. If (utilizador==true && password==true){ … }
Object: Uma colecção de propriedades. Cada propriedade tem um nome e um valor. O valor pode ser qualquer tipo de dados e os objectos podem estar contidos dentro de outros. Por exemplo, para aceder à propriedade da visibilidade de um movie clip, teremos: carro._visible
movieclip: Um apontador a um símbolo movie clip que permite controlar os seus métodos. movie.startDrag(true);
Null: Apenas possui o valor null, que simboliza que a variável está vazia. Undefined: Tal como o null apenas possui um valor, o undefined, significa que ainda não lhe foi atribuído nenhum valor.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
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 especificada como variável global e ser utilizada por todas as timelines do filme. Existem três tipos de scope para as variáveis:
Variáveis locais As que estão disponíveis apenas dentro do bloco de código onde foram inseridas.
Variáveis de Timeline Válidas para qualquer timeline desde que indicadas no código através dum caminho.
Variáveis Globais Existem em todas as timelines mesmo que não seja especificado um caminho até elas.
DECLARAR VARIÁVEIS Ao declarar uma variável local deve utilizar o comando var dentro do bloco de código onde esta ficará inserida. Uma variável local não definida, expira no fim do script. var pontos=0
Para declarar variáveis de timeline, basta utilizar o comando set variable ou apenas indicar o nome da variável e usar o sinal de igual para atribuição do seu valor. X=20
No caso da declaração de uma variável global o nome desta deve ser antecedido do identificador _global.
306
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
_global.time=0
No exemplo seguinte possuímos um filme com duas cenas. O utilizador tem de digitar o seu nome antes de entrar na segunda cena. Ao fazer clique no botão de entrada o seu nome aparece numa caixa de texto com uma saudação. Na primeira frame da primeira cena (entrada) do filme colocamos uma action Stop() de modo a que o filme permaneça parado até o utilizador premir o botão de entrada.
Figura071 – Interface
A caixa de texto é do tipo input, para permitir ao utilizador digitar valores. No painel properties atribuímos um nome à variável, à qual chamamos “utilizador”.
Figura072 – Atribuir nome à variável
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
307
Na segunda cena do filme (filme), colocamos também uma action stop(), logo no início de modo a que o filme fique parado na primeira frame. Desenhamos uma caixa de texto dinâmico à qual atribuímos um nome (user). De seguida seleccionamos o botão da cena entrada e atribuímos as seguintes actions.
Figura073 – Actions do botão
Foi atribuída à variável user que aparece na cena filme o valor da variável utilizador da cena entrada, e concatenada com o texto entre aspas através do operador +.
Figura074 – Resultado
308
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
TESTAR O VALOR DAS VARIÁVEIS Para testar o valor duma variável utilize a action Trace (ACTIONS > MISCELLANEOUS ACTIONS > TRACE ) para abrir uma janela de output sempre que o filme for testado e mostrar o valor da variável que digitarmos entre parêntesis. pontos = pontos+1; trace(pontos);
Uma forma alternativa de testar os valores das variáveis é utilizar o Debugger. Para visualizar o debugger basta testar o filme através do comando CONTROL > DEBUG MOVIE. Este comando além de testar o filme abre o painel Debbuger onde basta seleccionar o separador Variables e escolher o nível do filme ou o movie clip onde se encontra a variável. A animação surge sempre parada no início. Para começar basta clicar sobre o botão play para dar início ao filme. No separador PROPERTIES é possível ainda observar as propriedades da _root ou do movie clip que se encontrar seleccionado acima. O separador variables mostra as variáveis criadas no filme e os seus valores.
Figura075 – Painel Debugger
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
309
OPERADORES Os operadores permitem combinar, comparar ou modificar valores numa expressão. Para utilizar correctamente os operadores existem algumas regras que devem ser respeitadas.
Prioridade dos operadores Em qualquer cálculo, o operador de multiplicação (*) e divisão (/) possuem prioridade sobre a soma (+) e a subtracção (-). No entanto, se uma determinada operação for envolvida em parêntesis, terá prioridade sobre as restantes. pontos= 7 + 3 * 2
O resultado da operação é 13. Primeiro é calculada a multiplicação e só depois será efectuada a soma. pontos= (7 + 3) * 2
O resultado desta forma será 20, pois a soma será realizada antes da multiplicação por se encontrar entre parêntesis. Tipos de operadores Operadores Numéricos Desempenham diversas operações aritméticas mais comuns tais como: + * / % ++ --
Soma Multiplicação Divisão Subtracção Módulo (resto da divisão) Incremento Decremento
310
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura076 – Soma
Operadores de comparação Comparam valores de expressões e devolvem um valor booleano (True / False). Estes operadores, ao comparar duas strings, avaliam qual a primeira através da sua ordem alfabética. Se um dos operandos for uma string e o outro numérico, ambos são convertidos para numéricos e é efectuada uma comparação numérica. < > <= >=
Menor que Maior que Menor ou igual a Maior ou igual a
If (n>=1) { gotoAndPlay (10); }
Operadores de string Efectua a concatenação entre duas ou mais strings. “Joana” + “ “ + “Nunes” o resultado é Joana Nunes
Figura077– Concatenação
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
311
Operadores lógicos Estes operadores comparam valores booleanos (true / false) e devolvem um outro valor booleano. && || ! If
e ou negado (nome==”Cristina” && idade>25) { gotoAndStop(2);
}
Operadores de igualdade Determina se dois valores ou identidades são iguais. O valor devolvido é booleano. == === != !==
igualdade estritamente igual diferente de estritamente diferente
O operador === (estritamente igual) é semelhante ao operador de igualdade, mas não efectua conversão do tipo de dados. Assim, se os operandos forem de tipos diferentes, o resultado obtido será false.
Operadores de atribuição O sinal de = funciona como operador de atribuição, para associar um valor a uma variável. login=”administrador”;
=
Atribuição
+=
Soma e atribuição
-=
Subtracção e atribuição
*=
Multiplicação e atribuição
312
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
%=
Modulo e atribuição
/=
Divisão e atribuição
<<=
Mover para a esquerda e atribuição
>>=
Mover para a direita e atribuição
^=
XOR e atribuição
|=
OR e atribuição
&=
AND e atribuição
Vamos voltar ao exemplo do pacman que já tínhamos colocado a mudar de direcção através da propriedade _rotation. Agora para o movimento vamos acrescentar uma linha para incrementar o valor da deslocação do movie clip em 10 pixéis, sempre que o utilizador fizer clique numa seta de direcção. Para tal vamos utilizar os operadores de atribuição.
Figura078 - Operadores de atribuição
CONDIÇÃO IF Continuamos agora com o exemplo apresentado na figura 071. Supondo que é necessário testar se o utilizador introduziu ou não um valor na caixa de texto da cena de entrada. No caso afirmativo, o filme prossegue para a segunda cena, mas no caso negativo surge uma mensagem, a solicitar a introdução do nome de utilizador. Começamos por acrescentar na primeira cena uma nova caixa de texto dinâmico, à qual chamamos mensagem.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
313
De novo no botão apagamos as actions anteriores e vamos à categoria ACTIONS > CONDITIONS/LOOPS > IF e dentro das aspas digitamos a seguinte condição: if (utilizador==null){ }
De seguida, na categoria ACTIONS > VARIABLES > VAR, vamos igualar a variável “mensagem” ao texto que irá aparecer se o utilizador não digitar nada no nome. var mensagem= "Preencha o nome de utilizador";
De novo na categoria ACTIONS > CONDITIONS/LOOPS > ELSE, iremos introduzir o código no caso de o utilizador realmente preencher o campo do nome. else { }
Todas as instruções que seguirem a condição else serão executadas só no caso de preenchimento do campo utilizador. Como pretendemos que o filme passe para a segunda cena da animação, teremos a action: gotoAndPlay(“filme”,1);
Para preencher o campo User com o nome introduzido, basta: User=”Benvindo(a), ” + utilizador;
314
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura079 – Código do botão de entrada
Vamos elaborar mais um pouco o exercício atrás referido, pois agora o teste será feito não só ao nome do utilizador, mas também irá verificar se a password introduzida está correcta. Inserimos mais uma variável de texto no palco à qual demos o nome de password e atribuímos o tipo password no painel PROPERTIES.
Figura080
O botão de entrada deverá agora possuir um teste a duas variáveis que serão unidas pelo operador e (&&). Este operador vai fazer com que seja necessário que ambas as variáveis devam estar correctas para o utilizador entrar na página. Se em vez do operador (e) && estivesse o operador (ou) || bastava uma das caixas estar correcta para o utilizador entrar na cena 2.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
315
Figura081 – Programação do botão de entrada
Para completar a programação pretendemos que no caso de erro, para além da mensagem, os campos sejam limpos e o cursor volte ao campo utilizador. Isto será feito através da atribuição do valor undefined a cada um dos campos. Para o cursor aparecer a piscar no campo utilizador, usamos o método setFocus do objecto selection. Assim o código ficará:
Figura082
A condição IF também pode ser utilizada para testar as propriedades dos movie clips. Por exemplo, ao testar a propriedade _droptarger
316
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
conseguimos determinar se um movie clip foi largado não sobre outro movie clip. No exemplo seguinte vamos simular um site de compras, em que o utilizador tem de arrastar diversas frutas para dentro de um saco que irá incrementar uma variável (total).
Figura083- Interface
Para as frutas criamos primeiro um botão (fruta), o qual colocamos de seguida dentro de um movie clip. Dentro do movie clip o botão possui a seguinte programação para arrastar o movie.
Figura084
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
317
Depois de colocar as várias instâncias no palco, criamos também um movie clip (saco) para onde estas serão arrastadas. Atribuímos nome ao movie clip e iremos agora acrescentar ao movie clip da fruta o código para testar a posição em que é largado.
Figura085
Seleccionamos a linha 5, e vamos continuar a programação a partir deste ponto, no painel ACTION > CONDITIONS / LOOPS > IF. Para condição digitamos: eval (this._droptarget) == _root.saco;
A função eval é necessária neste caso, para converter o resultado da expressão this._droptarget, que obtém um valor em slash sintax (/saco). O eval converte este valor para dot sintax (_level0.saco). Dentro da condição if fazemos desaparecer o movie arrastado e incrementamos uma unidade à caixa de texto total.
Figura086 – Programação do movie maçã
318
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Vamos agora optimizar o código do filme. Se for necessário aumentar o número de tipos de fruta na animação, cada novo botão terá a programação apresentada na figura 086. Como a programação é exactamente igual para todos os botões, vamos criar um ficheiro de texto com o código actionscripting. Abra o bloco de notas e cole o código da figura 086.
Figura087 – Ficheiro de texto
De seguida guarde o ficheiro na mesma pasta do filme, com extensão .as .
Figura088 – Gravar o ficheiro
Na biblioteca edite o movie clip da laranja e seleccione o botão. Para aceder ao ficheiro externo basta digitar #INCLUDE actions encontra-se em MISCELLANEOS ACTIONS.
DROP.AS.
Nas
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
319
A action #include permite aceder a um ficheiro externo de actionscripting, desde que este tenha sido gravado com a extensão .as . Ver figura 089.
Figura089 – Action #include
CONDIÇÃO CASE Numa situação em que seja necessário testar mais de duas opções, a condição if torna-se insuficiente e confusa. Como alternativa, é possível usar a condição case nestas situações em que estão envolvidos vários testes. Como exemplo, vamos supor que possuímos um site de compras online e que os utilizadores irão obter preços diferentes consoante a quantidade de produtos que adquirem.
Temos duas caixas de texto: A “quantidade” onde introduzimos previamente o valor 0 e que é do tipo input e o “preco” que é uma caixa de texto dinâmica.
Figura090
320
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Seleccione o botão para cálculo do total e active o painel actions. Na categoria ACTIONS > CONDITIONS/LOOPS > SWITCH. Dentro dos parêntesis coloque o nome da variável que vai ser testada (quantidade). Esta variável deve ser numérica; logo, para garantir que o Flash a interpretará deste modo colocamos o seu nome dentro da Função Number. Na linha seguinte escolha no painel ACTIONS > CONDITIONS/LOOPS > CASE, onde teremos de prever todos os valores possíveis. Assim, no código, obtemos:
Figura091 – Script completo
Por cada hipótese terá de ser introduzida uma linha que deve sempre terminar com a action break, ou não voltará a funcionar da próxima vez que o botão for premido. A linha de default contempla todas as situações que ficaram fora dos valores definidos pelo case, ou seja, que não estejam no intervalo 0 a 2 inclusivé.
CICLO FOR A função principal dos ciclos numa linguagem é repetir determinadas actions diversas vezes.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
321
No exemplo seguinte iremos criar um pequeno programa, do tipo totoloto, que gera seis números aleatórios quando o utilizador prime um botão. No palco estão seis caixas de texto dinâmico, cada uma com os nomes n1 até n6.
Figura092 - Interface do programa
No botão vamos introduzir um ciclo que gera números aleatórios até um máximo de seis e preenche as respectivas caixas. No painel actions seleccione a categoria CONDITIONS / LOOPS > FOR .
Figura093 – Ciclo For
Parâmetros do ciclo For: Init – O valor onde se irá iniciar o ciclo.
322
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Condition – A condição que será testada antes de cada loop para saber se é verdadeira ou falsa. O loop terminará quando esta condição for falsa. Next – A expressão que será avaliada depois de cada loop. Normalmente o incremento ou decremento do valor dado no parâmetro init.
De seguida, na categoria ACTIONS > VARIABLES > SET VARIABLE, crie uma variável de nome n. Vamos envolver a expressão dentro do método Math.Round para arredondar o valor obtido. Seleccione ACTIONS > OBJECTS > CORE > MATH > METHODS > ROUND.
Figura094 – Método Round
Para atribuir o valor à variável, seleccione OBJECTS > CORE > MATH > METHODS > RANDOM. Este calcula um número aleatório entre 0 e 0,99999... . Para obter números entre 0 e 48 multiplicamos este método pelo valor 48 e como o valor 0 não nos interessa somamos uma unidade ao resultado. Obtemos assim um intervalo de valores entre o 0 e o 48. n = Math.round(Math.random()*48+1);
Finalmente, para atribuir estes valores a cada uma das caixas de texto, seleccione no painel ACTIONS > VARIABLES > SET VARIABLE.
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
323
Figura095
CICLO WHILE O ciclo while é mais utilizado em casos em que não sabemos qual o número de vezes que o loop irá correr. Supondo que pretendemos criar um menu dinâmico, que vai buscar as opções a um ficheiro de texto externo. Estas opções podem variar, consoante o utilizador introduza ou apague no ficheiro de texto as variáveis. Começamos por criar o ficheiro de texto com quatro variáveis.
Figura096 – Ficheiro de texto
No filme de Flash criamos um botão para as opções do menu e colocamos este botão dentro de um movie clip ao qual adicionamos uma caixa de texto dinâmico.
324
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura097- Botão dentro do movie clip
Atribuímos um nome à instância da caixa de texto e desligamos a opção selectable.
Figura098 – Nome da instância da caixa de texto
De volta ao palco criamos um botão para topo do menu e colocamos abaixo deste uma instância do movie clip que contém a caixa de texto. Atribuímos a esta instância o nome opcao1. Figura099 – Nomear a instância do movie clip no palco
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
325
No primeiro keyframe do palco iremos carregar as variáveis do ficheiro de texto e esconder o movie clip opcao1. Depois de seleccionar o keyframe escolhemos no painel actions a categoria BROWSER / NETWORK > LOAD VARIABLES.
Figura100 - LoadVariables
Nos parâmetros em URL digitamos o nome do ficheiro de texto, que por se encontrar na mesma pasta do filme não é necessário indicar um caminho relativo apenas o nome do ficheiro basta. Location – Escolhemos Target e digitamos o valor _root, ou seja a timeline principal irá receber as variáveis do ficheiro externo. Acrescentamos uma linha para tornar o movie invisível. Fazemos isto através da propriedade _visible.
Figura101 – Actions primeira da keyframe do palco
Neste momento já podemos testar o filme e verificar no debbuger se as variáveis estão a ser carregadas para o filme. Utilizamos o comando CONTROL > DEBUG M OVIE, premimos o botão play na janela do debugger e ao seleccionar a opção _level0 e o separador variables, já devem aparecer os valores que se encontram no ficheiro de texto externo.
326
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura102 – Fazer Debug do filme
De seguida seleccionamos o botão que vai activar o menu e nele vamos colocar a programação para gerar as opções do menu. Começamos por atribuir à caixa de texto do primeiro movie, que já está no palco o valor da primeira variável do ficheiro de texto. Ao mesmo tempo tornamos este movie visível de novo. opcao1.texto.text = op1; opcao1._visible = true;
Para o ciclo while iniciamos uma variável chamada i com valor 2, pois o valor 1 pertence ao movie que já está no palco. var i = 2;
Começamos o ciclo while que irá correr enquanto a condição for verdadeira. Ou seja, enquanto as opções forem diferentes de null. while (eval("op"+i) != null)
II.4 ESTRUTURAS AVANÇADAS DE PROGRAMAÇÃO
327
A função Eval utilizada nesta condição permite-nos obter o valor da variável que queremos preencher, através do cálculo da expressão que se encontra entre parêntesis.
Figura103- Programação do botão menu
Dentro do ciclo while, duplicamos o movie clip. Na linha 7 deslocamos os botões adicionando-lhes o valor da altura do movie e multiplicando pelo i -1 (não esquecer que o primeiro valor de i é 2, dai subtrair-mos uma unidade). Finalmente, atribuím os a cada caixa de texto o valor da variável respectiva e incrementamos o i. Para alterar o conteúdo e o número de opções o utilizador só tem de editar o ficheiro texto.txt
Figura104 – Menu gerado dinamicamente
II.5. FUNÇÕES
As funções são pedaços de código reutilizável. Quando se utiliza uma função é possível passar uma série de argumentos para dentro dela e retornar um valor. O Flash possui algumas funções que já fazem parte da sua programação e que podem ser utilizadas sem ser necessário o utilizador defini-las. Boolean escape eval getProperty getTimer
getVersion isFinite isNaN Number parseFloat
parseInt String targetPath unescape
Função Eval Função para aceder a variáveis ou propriedades e extrair o seu valor. Se for utilizada para aceder a objectos e movie clips extrai uma referência dos mesmos. produto1=”mel”; produto2=”açúcar”; resultado = eval (“produto”+n);
Assim, se n=1, o resultado será mel, mas se n=2, o resultado será açúcar. O Eval avaliou a expressão “produto”+n e ao obter o valor de n concatenou-o com a palavra produto para extrair o seu valor. No caso da utilização da propriedade _droptarget a função eval é utilizada pelo Flash para converter o nome de um movie clip em notação slash sintax para a notação dot sintax. Ver figura 086.
330
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Função Number Converte o valor entre parêntesis num número e devolve o seu valor. Number (n)
Função getTimer Devolve o número de milésimos de segundo que já passaram desde o início duma animação. x=GetTimer
Figura105 - GetTimer
Função getVersion Devolve uma string que contém a versão do Player do Flash, desde que seja a versão 5 ou posterior. x=getVersion()
Figura106 – Função GetVersion
As funções são bastante semelhantes às variáveis, pois estão associadas à timeline do movie clip onde foram definidas e é necessário aceder-lhes através de um target path (caminho).
II.5. FUNÇÕES
331
Também é possível definir funções globais através do identificador _global. _global.funcao = function (z) { return (z*5)-1; }
Função boolean Converte uma expressão num valor Booleano. O valor retornado depende do tipo de expressão. Se a expressão é um valor booleano, o valor devolvido é “expression”. Se a expressão é um número, o valor devolvido é “true”, caso o número não seja 0. O valor zero devolverá “false”. Se a expressão é uma string, o método toNumber é invocado para converter a string num valor numérico. Se o resultado for diferente de zero é retornado true, caso o resultado seja zero, o valor é igual a false. Se a expressão é undefined o valor devolvido é false. Se a expressão é um movie clip ou um objecto, o valor devolvido é true. Boolean (expressão)
Função string Converte uma expressão numa string. String (expressão)
Se a expressão é um valor booleano, a string devolvida é true ou false, consoante o valor booleano apresentado pela expressão. Se a expressão se tratar de um número, o valor devolvido é uma representação em texto do valor numérico que era o resultado da expressão. Se a expressão é uma string o valor devolvido é expression. Se a expressão é um movie clip, valor é o target path para o movie clip em slash Sintax (/).
332
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se a expressão é undefined o valor devolvido é o de uma string vazia (“”)
Função escape Converte um parâmetro numa string e codifica-o num formato de URL onde os caracteres especiais são convertidos em sequências hexadecimais. escape("parametro")
Função getProperty Devolve o valor de uma propriedade de um movie clip. O código seguinte devolve o valor da coordenada y de um movie clip chamado carro. carro_y = getProperty(_root.carro, _y)
Função targetPath Devolve uma string contendo o target path (caminho) do movie clip. Este caminho é dado utilizando a dot syntax. targetPath(this)
Função unescape Função que avalia um parâmetro como string, e descodifica-o de formato URL-encoded para uma string. Efectua o processo inverso da função Escape. Todas as sequências hexadecimais são convertidas numa string. unescape(parametro)
II.5. FUNÇÕES
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 ignorados. parseFloat("-5") devolve -5 parseFloat("2.5") devolve 2.5 parseFloat("3.5e6") devolve 3.5e6, ou 3500000 parseFloat("chocolate") devolve NaN parseFloat(" 5.1") devolve 5.1 parseFloat("3.75relógio") devolve 3.75 parseFloat("0gatos") devolve 0
Função parseInt Função que converte uma string num número inteiro. Se a string não for possível de converter em inteiro a função devolve NaN. Strings começadas por 0x são interpretadas como números hexadecimais.
334
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Espaços em branco que antecedam valores inteiros válidos são ignorados assim como outros caracteres especiais. parseInt("3.5") // devolve 3.5 parseInt("chocolate") // devolve NaN parseInt("4foo") // devolve 4
Exemplo hexadecimal: parseInt("0x3F8") // devolve 1016
Exemplo binário: parseInt("1010", 2) // devolve 10 (a representação binária de 1010)
DEFINIR FUNÇÕES Todas as funções começam com a palavra function e de seguida surge o nome da função. ACTIONS > USER-DEFINED FUNCTIONS > FUNCTION . function calcTotal
Figura107 – Definir uma função
II.5. FUNÇÕES
335
Depois surgem os nomes dos argumentos a ser passados que aparecem listados entre parêntesis. Os nomes dos parâmetros são separados por vírgulas. function calcTotal (preco, iva)
A seguir basta digitar entre chavetas o código da função. function calcTotal (preco, iva) { // o código da função aparece aqui }
A outra parte especial duma função é a acção return, que notifica a função para terminar e retornar um certo valor para o código que chamou a função. function calcTotal (preco, taxa) { return (preco, iva); }
Para chamar a função é necessário escrever algo semelhante a: calcTotal(50, 1.7);
Vamos criar uma pequena função para converter valores de escudos para euros. Criamos duas caixas de texto. A caixa para os escudos (escudos) será do tipo input, enquanto que a que vai apresentar a conversão em euros (euros) será dinâmica.
Figura108 – Interface
Na primeira keyframe do filme vamos criar a função. Escolha no painel ACTIONS > USER DEFINED FUNCTIONS > FUNCTION . Defina o nome da função e o parâmetro que vai ser necessário (escudos).
336
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
De seguida seleccione na mesma categoria a action Return.
Figura109 – Definir a função
Agora basta associar ao botão que vai efectuar o cálculo a chamada da função: Ao introduzir um valor o utilizador preenche o parâmetro necessário para a função efectuar o cálculo. O valor de seguida é devolvido para dentro da variável euros.
Figura110 – Actions do botão
II.6. OBJECTOS
Os objectos são blocos de código designados para desempenhar determinadas tarefas. Cada objecto possui propriedades que podem ser manipuladas. Estas propriedades são na realidade variáveis. Para além das propriedades, os objectos possuem ainda métodos que lhes permitem desempenhar determinada função. A grande vantagem dos objectos é a sua reutilização. As linguagens orientadas por objectos, como o Actionscript, vêm já com alguns objectos incorporados. Os objectos no Flash MX estão divididos em quatro categorias: Objectos nucleares (core) que são também comuns à especificação ECMA – Array, Boolean, Date, Function, Math, Number, Object e String. Objectos de Movie que são característicos do Actionscript Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selection, Sound, Stage, System, TextField e TextFormat Objectos Client / Server que são também específicos do Actionscript e que permitem comunicar entre cliente e servidor - LoadVars, XML, e XMLSocket. Objectos Authoring que permitem configurar o Flash - CustomActions e Live Preview.
Aceder às propriedades de um objecto Para aceder às propriedades de um objecto utiliza-se o ponto (.) como operador. O nome do objecto surge do lado esquerdo separado pelo ponto e o nome da propriedade que pretendemos aceder.
338
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Object.name
Para associar uma propriedade a um objecto utiliza-se a action Set Variable. Objecto.name = “Helena”;
Invocar o método de um objecto O operador ponto (.) também permite aceder aos métodos de um determinado objecto. No exemplo seguinte chamamos o método setRGB para o objecto Color. onClipEvent (load) { myColor = new Color(this); myColor.setRGB(0xFF66FF); }
Objectos da categoria core UTILIZAR O OBJECTO DATE Objecto que constrói uma nova data e/ou hora capturada através da data e hora do computador do utilizador. Para este exercício, comece por criar um movie clip na biblioteca que vai conter uma caixa de texto dinâmico chamada hora_txt.
Figura111
II.6. OBJECTOS
339
Coloque uma instância do movie clip no palco e atribua-lhe as seguintes actions:
Figura112
Criamos uma nova variável e atribuímos-lhe o valor da data corrente através do objecto OBJECTS > CORE > DATE. Basta agora passar os parâmetros da data que necessitamos para dentro da caixa de texto do movie clip, utilizando os métodos getHours, getMinutes e getSeconds.
UTILIZAR O OBJECTO ARRAY Um array é um objecto cujas propriedades podem ser acedidas através de um número que determina a sua posição no array. O primeiro elemento de um array é sempre o zero, o seguinte o 1 e assim sucessivamente. Para definir os valores de um array utiliza-se o operador [ ] no qual se envolve o número do elemento a que se pretende aceder. Por exemplo, o seguinte array possui quatro valores, associados a cada um dos números do array. O array deve ser sempre iniciado com o construtor new Array(). novoArray=New Array(); novoArray[0] = "Liliana"; novoArray[1] = "Manuela"; novoArray[2] = "Luisa"; novoArray[3] = "Sara";
O mesmo array também pode ser descrito de uma forma mais extensa do seguinte modo: novoArray=New Array("Liliana","Manuela","Luisa","Sara");
340
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Para atribuir um valor do array basta simplesmente igualar o nome de uma variável a um dos elementos do array. n=novoArray[2];
Vamos agora completar o exemplo do relógio acrescentando mais um movie clip para conter a data completa. Dentro deste movie clip está outra caixa de texto à qual demos o nome de data_txt. Na primeira keyframe do filme criamos dois novos arrays.
Figura113 – Criar os arrays
Para a instância do movie clip que irá conter a data, teremos:
Figura114 – Actions da instância
UTILIZAR O OBJECTO MATH > MÉTODO MAX Devolve o maior valor de dois valores ou resultados de expressões numéricas. Math.max(x,y)
Parâmetros: x e y – Podem ser valores ou expressões numéricas. Os dois valores são avaliados e o resultado é o maior valor. Math.max(55,88) // resultado é 88
341
II.6. OBJECTOS UTILIZAR O OBJECTO MATH > MÉTODO MIN
Devolve o menor valor de dois valores ou resultados de expressões numéricas. Math.min(4,77) // resultado é 4
Parâmetros: x e y – Podem ser valores ou expressões numéricas. Os dois valores são avaliados e comparados e o resultado é o menor valor.
UTILIZAR O OBJECTO MATH > MÉ TODO PI Constante matemática 3.14159265358979... .
equivalente
ao
valor
do
Pi,
ou
seja,
Math.PI()
UTILIZAR O OBJECTO MATH > MÉTODO ROUND Utilizado para arredondar uma expressão numérica ou um valor. O resultado da seguinte expressão numérica é 56. Math.round(55.98)
UTILIZAR O OBJECTO MATH > MÉTODO RANDOM Retorna um número aleatório entre 0 e 0.9999... Math.random()
342
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Criamos um jogo muito simples em que o utilizador introduz um número (número) e assim que faz clique num botão é gerado um número aleatório entre 0 e 20, que é comparado com o que foi introduzido.
Figura115 – Random e Round
UTILIZAR O OBJECTO MATH > MÉTODO SQRT Determina a raiz quadrada de um número ou expressão numérica. Math.sqrt(x)
Parâmetros: x – Número ou expressão numérica maior que 0.
Figura116 – Raiz quadrada
Objectos da categoria movie UTILIZAR O OBJECTO COLOR Com este objecto é possível alterar a cor RGB a um movie clip. Depois de atribuídos os valores podem ainda ser guardados para reutilizar mais tarde.
II.6. OBJECTOS
343
Deve ser sempre usado o construtor new Color() para definir uma nova instância. Métodos do objecto Color.getRGB - Devolve o valor numérico RGB atribuído pelo último método setRGB. Color.getTransform – Devolve a informação do último método setTransform. Color.setRGB – Altera o valor hexadecimal da cor de um determinado objecto. Color.setTransform – Atribui um valor para alterar as cores a um objecto. Por exemplo, imagine que queremos alterar a cor de um movie clip no palco através da introdução de valores RGB. Para isso vamos criar três caixas de texto, para as três cores primárias do modelo RGB.
Figura117 - Interface
Na primeira keyframe do filme iremos criar o construtor new Color(). alvo_color=new Color(alvo_mc);
De seguida, seleccionamos o movie clip e atribuímos os valores das caixas à instância através do método setRGB.
Figura118 – Aplicar o método setRGB ao movie clip
344
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Os valores devem ser introduzidos pelo utilizador em código hexadecimal.
Figura119 – Inserir os valores
UTILIZAR O OBJECTO MOVIECLIP > MÉTODO HITTEST Vamos usar o método hitTest para detectar quando um movie clip se encontra sobreposto com outro. movieClip.hitTest(target)
Parâmetros: target – O target path da área de colisão com o movie clip. Continuamos no exemplo do filme pacman. Criamos um novo movie na biblioteca e colocamos uma instância no palco. Atribuímos um nome à instância (laranja) e na primeira keyframe do filme vamos criar uma função.
Figura120 – Nomear a instância
A função vai permitir-nos reutilizar código, pois os quatro botões vão necessitar de testar a sobreposição do movie.
II.6. OBJECTOS
345
Figura121 – Actions da keyframe
Nos botões basta acrescentar o código para chamar a função sempre que o movie clip é deslocado. Ver a figura 122.
Figura122
UTILIZAR O OBJECTO SOUND O objecto Sound permite controlar o som de um filme. Ao utilizar este objecto sem especificar Target, todos os sons do filme serão controlados. Deve ser utilizado o construtor new Sound() para criar uma nova instância de som antes de ser possível utilizar os seus métodos. musica = new Sound();
Como exemplo, vamos criar uma animação para onde um som é carregado e controlado através de dois botões. Um botão pára o som e outro recomeça o som de novo a partir do início. Começamos por criar na primeira keyframe do filme um construtor para a nova instância de som. Logo de seguida carregamos um som externo, ou seja, que não foi importado para a biblioteca do filme.
346
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura123 – Actions da primeira keyframe
No botão play vamos inserir o método start para dar início ao som. Nos parâmetros 0 é o valor em segundos onde o som irá dar início e 1 o número de loops que este irá efectuar.
Figura124 – Botão Play
musica.start(secondOffset, loop)
secondOffset – Permite começar o som numa determinada posição. Este valor é opcional e o seu valor deve ser introduzido em segundos. Loop – Número de loops que o som irá efectuar Para o botão de paragem do som, teremos de usar o método stop.
Figura125 – Parar o som
musica.stop("idName");
II.6. OBJECTOS
347
idname – O nome do som a ser parado. Este parâmetro é opcional. Logo, se nenhum som for especificado, todos os sons do filme param. Se ainda pretendermos uma caixa de texto que indique quantos milésimos de segundo do som já foram lidos, basta criar um movie clip no qual incluímos uma caixa de texto com o nome (caixa) e usar a propriedade position:
Figura126
UTILIZAR O OBJECTO CAPABILITIES Este objecto permite analisar características do sistema do utilizador, tais como resolução, cores e capacidades áudio ou vídeo. Para utilizá-lo é necessário usar também o objecto system . Por exemplo, para verificar se o sistema tem capacidades áudio: System.capabilites.hasAudio
Propriedades do objecto capabilities: System.capabilities.hasAudioEncoder – Mostra os encoders de áudio suportados. System.capabilities.hasAccessibility – Indica se o sistema possui os standards de acessibilidade requeridos. System.capabilities.hasAudio – Se o sistema possui ou não capacidades áudio. System.capabilities.hasMP3 – Possibilidade de ler ou não MP3.
348
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
System.capabilities.language – Indica a linguagem suportada pelo FlashPlayer. System.capabilities.manufacturer – Indica o fabricante do Player do Flash. System.capabilities.os – Indica o sistema operativo do computador que está a correr o Player do Flash. System.capabilities.pixelAspectRatio – Indica a proporção dos pixéis do ecrã. System.capabilities.screenColor – Indica se o monitor é a cores ou a preto e branco. System.capabilities.screenDPI – Indica o número de pontos por polegada do ecrã. System.capabilities.screenResolution.x – Mostra o tamanho horizontal do ecrã. System.capabilities.screenResolution.y - Mostra o tamanho vertical do ecrã. System.capabilities.version – Indica a versão mais antiga suportada pelo Player do Flash. System.capabilities.hasVideoEncoder – Mostra os encoders instalados para vídeo.
Figura127
Para exemplificar, no palco desenhamos algumas caixas de texto, às quais atribuímos propriedades do objecto capabilities. O resultado do filme depois de testado aparece na figura 128.
II.6. OBJECTOS
349
Figura128
Objectos da categoria client/server UTILIZAR O OBJECTO LOADVARS Este objecto é utilizado como alternativa à action LoadVariables, para transferência de dados entre um servidor e o filme de Flash. É necessário utilizar o construtor new LoadVars() antes de invocar os seus métodos. Métodos do objecto LoadVars: LoadVars.load – Faz download de variáveis de um URL específico. LoadVars.getBytesTotal – Devolve o número de bytes carregados através do método load ou sendAndLoad. LoadVars.getBytesTotal – Devolve o número total de bytes aos quais será feito download através do método load ou sendAndLoad. LoadVars.send – Publica as variáveis de um objecto LoadVars para um determinado URL. LoadVars.sendAndLoad – Publica as variáveis de um objecto LoadVars e faz download da resposta do servidor para um objecto. LoadVars.toString – Devolve uma string de URL codificada que contém todas as variáveis enumeradas pelo objecto LoadVars.
350
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Eventos do objecto LoadVars: LoadVars.onLoad – Invocado quando uma operação de load ou sendAndLoad é completada. Iremos criar um menu dinâmico, que vai buscar os valores das suas opções e links do botão a um ficheiro de texto externo.
Figura129 – Ficheiro texto
Começamos por criar um botão na biblioteca, que depois é colocado dentro de um movie clip, ao qual é acrescentado uma caixa de texto dinâmico, e dada uma action GetURL em que o link irá ser determinado através da variável “link”.
Figura130 – Botão dentro do movie com a caixa de texto
Arrastamos uma instância do botão para o palco e atribuímos-lhe o nome botão1.
II.6. OBJECTOS
351
Figura131 – Instância do movie no palco
Na primeira keyframe do filme iniciamos as actions criando um construtor LoadVars ao qual atribuímos o nome dados_lVars. dados_lVars=new LoadVars();
Na segunda linha aplicamos a função “carregado” (que iremos descrever mais à frente) no evento onLoad, para que seja executada assim que o filme carrega. dados_lVars.onLoad=carregado;
Agora é a vez de chamar o ficheiro de texto que contém os dados que necessitamos para criar o filme. dados_lVars.load("links.txt");
E vamos criar a função que atribui os valores carregados aos botões, que são gerados dinamicamente através de um ciclo While. Atribuímos ao primeiro botão o valor do primeiro texto e do link que lhe corresponde dentro do ficheiro de texto. botao1.botao_txt.text=dados_lVars.txt1; botao1.link=dados_lVars.link1;
352
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Iniciamos a variável i no valor 2, para começar a duplicar os próximos movie clips. I=2;
Iniciamos o ciclo while. Enquanto existirem novos textos no ficheiro externos é duplicado um novo botão e deslocado 40 pixéis na vertical: while(eval("dados_lVars.txt"+i)!=null){ eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i); eval("botao"+i)._y+=40;
Finalmente são atribuídos ao botão duplicado o seu texto, o seu link e a variável i é incrementada em uma unidade, para criar a próxima instância de botão. eval("botao"+i).botao_txt.text=eval("dados_lVars.txt"+i); eval("botao"+i).link=eval("dados_lVars.link"+i) i++; }
Figura132 – Script completo
UTILIZAR O OBJECTO XML Utiliza-se para carregar, manipular e construir documentos de XML.
II.6. OBJECTOS
353
É necessário criar primeiro um construtor new XML() antes de chamar os métodos do objecto. Antes de mais, e visto que estamos a tratar de um assunto relativamente recente, vamos falar um pouco da estrutura de um documento XML, através de um exemplo simples:
Neste exemplo, estamos a transmitir as características – nomeadamente um código, o nome e a idade - de duas pessoas. Para quem conhece o HTML, decerto já notou as semelhanças. Qualquer documento XML, começa pela declaração da versão. De seguida, a declaração do tipo de documento, que é opcional. A partir daí, surge a descrição dos dados. A estrutura é sempre a mesma. Cada bloco de dados está encarcerado entre uma etiqueta de declaração de início e outra de fim. No exemplo, os dados de cada pessoa começam pela declaração
354
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
atributos, nem sub-nós. O texto é declarado entre as etiquetas de início e fim. No exemplo, temos o nome e a idade. Os atributos são declarados dentro da etiqueta de início. No exemplo, o código. Os nós são pais (parent) e filhos (child) uns dos outros. Por exemplo, pessoa é filho do documento, mas é pai de nome e idade.
Figura133 – Estrutura de um documento XML
Como exemplo, vamos criar uma agenda em Flash que acede aos dados contidos num ficheiro de XML. O nosso ficheiro encontra-se na mesma pasta do filme e contém a seguinte estrutura.
II.6. OBJECTOS
355
Figura134 – Ficheiro XML
Propriedades do objecto XML que iremos utilizar neste exemplo: xml.load – Verifica se o ficheiro XML foi carregado. xml.firstchild – Referência ao primeiro filho do nó especificado. xml.nextsibling – Refere-se à próxima linha dos filhos do nó especificado. xml.nodevalue – Devolve o texto que se encontra dentro de um nó de texto.
Figura135 – Interface
Na primeira keyframe do filme começ amos por criar o construtor: agenda_xml = new XML();
356
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Na segunda linha iremos aplicar a propriedade IgnoreWhite para o Flash ignorar todas as quebras de linha do documento de texto. agenda_xml.ignoreWhite = true;
De seguida acrescentamos uma linha para uma função de nome “carregado” correr assim que o ficheiro de XML esteja carregado. agenda_xml.onLoad = carregado;
A quarta linha carrega o ficheiro. Utilizamos o método Load para esse efeito. agenda_xml.load("teste.xml");
Agora criamos a função para fazer referência que vai ser executada depois do carregamento. function carregado() { agenda = agenda_xml.firstChild; pessoa = agenda.firstChild; apresentaDados(); }
E de seguida a função que vai apresentar os dados: function apresentaDados() { codigo = pessoa.attributes.codigo; valor = pessoa.firstChild; nome = valor.firstChild.nodeValue; valor = valor.nextSibling; telefone = valor.firstChild.nodeValue; }
Para as actions dos botões, vamos introduzir utilizar a condição if para determinar se os dados do ficheiro de XML já terminaram ou não.
II.6. OBJECTOS
Figura136 – Botões de navegação no documento
357
II.7. COMPONENTES Os componentes do Flash MX foram introduzidos para substituir os Smart Clips que faziam parte da versão anterior do programa. Tratam-se de movie clips complexos que já possuem actions associadas, mas nas quais o utilizador pode alterar parâmetros que lhe permitem adaptar os componentes a diferentes utilizações em cada filme.
Figura137 – Janela Components
Ao inserir um componente no filme a pasta Flash UI Components é adicionada à biblioteca do filme, a qual contém o componente arrastado, a pasta Component Skins e a pasta Core Assets – Developer Only.
Fig138 – Biblioteca
360
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
O painel PROPERTIES mostra a informação para configurar o componente através da definição dos seus parâmetros. Cada componente é também por si só uma instância e deve-lhe ser atribuído um nome único no filme. Para alterar o aspecto de qualquer um dos componentes, basta alterar os movie clips que se encontram dentro da pasta Component Skins.
Fig139 – Painel Properties com um componente seleccionado
Os componentes podem ser visualizados tal e qual como aparecerão no filme publicado se o modo de visualização Live Preview (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 permitem escolhas múltiplas. Parâmetros: Change Handler - String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função
II.7. COMPONENTES
361
deve estar definida na mesma timeline da checkbox. Este parâmetro é opcional. Initial Value - Indica se a caixa está ou não seleccionada de início. Label - Texto que aparece ao lado da caixa. Label Placement – Indica se o label aparece à direita ou à esquerda da caixa.
Figura141 – Opções Checkbox
ComboBox Possibilita adicionar menus drop-down com várias opções. Estes menus podem ser editáveis ou estáticos. Cada item da caixa tem um valor, sendo o primeiro equivalente a 0. Parâmetros: Change Handler - String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função deve estar definida na mesma timeline da checkbox e o nome da combobox pode ser aceite como parâmetro. Data – É um array de strings de texto que especificam os valores associados a cada uma das entradas do menu. Editable – Determina se a caixa é editável ou não. Labels – Títulos que surgem para escolha dentro do menu. Row Count – Número de itens listados no menu.
Figura142 – Opções ComboBox
362
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
ListBox Permite adicionar listas de escolha única ou múltipla. Estas listas podem possuir scrollbars. Parâmetros: Change Handler – String de texto que permite indicar a função que deverá ser executada quando o valor da checkbox é alterado. A função deve estar definida na mesma timeline da checkbox. Este parâmetro é opcional e só é necessário incluir se pretendermos que algo aconteça quando um item é seleccionado. Data – É um array de strings de texto que especificam os valores associados a cada uma das entradas da lista. Labels – Títulos que surgem para escolha dentro da caixa. Select Multiple – Especifica se a lista permite ou não escolha múltipla. Se a opção False for seleccionada, a lista não permite escolhas múltiplas; este é o valor por defeito.
Figura143 – Opções ListBox
PushButton Adiciona botões simples ao filme. Podem ser associadas actions ao evento onClick.
Parâmetros: Click Handler - String de texto que permite indicar a função que deverá ser executada quando o botão é premido. Label – Títulos que surgem para escolha dentro da caixa.
II.7. COMPONENTES
363
RadioButton Permite adicionar botões de escolha única ao documento. Parâmetros: Change Handler – String de texto que permite indicar a função que deverá ser executada quando o valor do radio button é alterado. A função deve estar definida na mesma timeline do radio button. Este parâmetro é opcional e só é necessário incluir se pretendermos que algo aconteça quando um item é seleccionado. Data – É um array de strings de texto que especificam os valores associados a cada uma das entradas da lista. Group Name – Especifica a que grupo de botões pertence o botão. Vários botões podem pertencer ao mesmo grupo. Initial State – Indica se o botão está ou não seleccionado de início. Label - Texto que aparece ao lado do botão. Label Placement – Indica se o label aparece à direita ou à esquerda do botão.
Figura144 – Opções ComboBox
Scrollbar Permite adicionar um scrollbar vertical ou horizontal ao documento. É a forma mais simples de adicionar scrollbars a caixas de texto. Para adicionar um scrollbar a uma caixa de texto, crie uma caixa de texto do tipo dinâmico ou input. Escolha a opção multiline para poder escrever em várias linhas.
364
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Arraste o componente scrollbar para junto da caixa. Se arrastar pelo centro do componente ele adere automaticamente à caixa. Teste o filme.
Figura145 – Scrollbar
Parâmetros: Horizontal – Especifica se o scrollbar é horizontal ou vertical. Target text Field – Especifica o nome da instância do campo de texto para o scrollbar. Assim que o scrollbar adere a um campo de texto este campo é preenchido automaticamente.
Figura146 – Opções Scrollbar
ScrollPane Permite adicionar janelas com scrollbars horizontais e verticais para mostrar movie clips. É especialmente indicado para mostrar muita informação em pouco espaço de documento. Parâmetros: Drag Content – Indica se o utilizador pode arrastar o conteúdo do painel, ou tem de utilizar as scrollbars.
II.7. COMPONENTES
365
Horizontal Scroll – Determina se a barra horizontal está a ser mostrada ou não. O valor por defeito é auto, em que apenas é mostrada se for necessária.
Scroll Content – String de texto que especifica a identificação linkage do símbolo que irá aparecer no painel. Para atribuir o nome de linkage a um símbolo, faça clique com o botão direito do rato sobre o movie clip na biblioteca e escolha a opção Linkage.
Figura147 – Linkage
Vertical Scroll – Determina se a barra vertical está a ser mostrada ou não. O valor por defeito é auto, em que apenas é mostrada se for necessária.
Figura148 – ScrollPane
Depois de configurados os componentes necessitam que seja adicionado actionscripting para ficarem a funcionar convenientemente. No Painel Actions encontramos uma categoria totalmente vocacionada para os métodos dos componentes.
366
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Figura149
Para exemplo, vamos criar um formulário simples em que o utilizador ao clicar no botão Enviar passa informações através de componentes.
Fig150 – Formulário
Nomes das instâncias: Checkbox = participa Combobox = viagem com três opções: Maldivas Istanbul Cuba Radio button 1= Meio_av Radio button 2= Meio_comb Para capturar os valores de todos os campos criamos uma função na timeline do filme e associamos essa função ao botão Enviar. Começamos por nomear a instância do botão e digitamos em Click Handler o nome da função que será chamada quando o botão for premido.
II.7. COMPONENTES
367
Figura151
Agora na primeira keyframe do filme criamos a função que vai ficar associada ao botão. function clicar (enviar) { }
Começamos por recolher os dados da checkbox. Em ACTIONS > UI COMPONENTS > FCHECKBOX > METHODS > GET VALUE
FLASH
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, acrescentamos ainda: function clicar (enviar) { trace(participa.getValue()); trace(RadioGroup.getValue()); trace(viagem.getSelectedItem().label); }
O resultado depois de fazer CONTROL > TEST MOVIE:
368
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Fig152 – Resultado
Anexo 1. SISTEMA HEXADECIMAL
Este sistema de numeração foi inventado para "simplificar" o trabalho de lidar com números muito grandes. Nós, humanos, utilizamos um sistema de numeração de base 10, decorrente do facto de termos dez dedos. No nosso sistema, a posição de um determinado algarismo é relevante, ao contrário, por exemplo, dos números romanos onde isto não acontece. Outra particularidade do nosso sistema de numeração é que cada casa decimal apenas pode variar de 0 a 9. Quando precisamos representar números acima da faixa que uma determinada casa decimal pode representar, colocamo-la a zero e somamos "um" à casa decimal imediatamente à esquerda da que estamos a considerar. Assim, se estamos a contar a partir de zero e chegamos a 9 teremos de somar "um" ao dígito imediatamente à esquerda do 9. Como neste caso o 9 também pode ser visto como 09, então devemos passar o 9 a 0 e o 0 a 1, criando assim o número 10. Imagine o contador de quilómetros de um automóvel. Se o colocar a zero, à medida que o automóvel se desloca, o primeiro dígito da direita sobe progressivamente de 0 a 9, voltando em seguida a 0, e nesta volta causando o incremento do dígito imediatamente à sua esquerda, que passa então de 0 a 1, passando assim a representar o número 10. Processo similar ocorre quando estes dois dígitos atingirem o valor 99 quando então passarão a 00 e acrescentarão 1 ao dígito da esquerda, passando a 100. Agora pense que o seu contador está a trabalhar na base 16. Ele pode contar de 0 a 15 antes de ter de increm entar o dígito à esquerda. Como a contagem na base 10 utiliza “símbolos” que ocupam uma só posição para representar cada um dos números, então na base 16 também
370
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
deveremos criar “símbolos” para representar todos os algarismos de 0 a 15. Já temos porém os dez primeiros que podemos pedir emprestados à base 10, ou seja, 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para os números de 10 a 15 foi decidido utilizar sequencialmente as letras A, B, C, D, E e F. Como um algarismo dentro de um determinado número pode ter valores diferentes consoante a sua posição, podemos desmembrar um número de acordo com a sua posição relativa. Então, por exemplo, o número 5.326 pode ser lido como cinco milhares, três centenas, duas dezenas e seis unidades. Se pensarmos bem, um milhar é igual a 10 vezes 10 vezes 10. Da mesma forma, uma centena é igual a 10 vezes 10, sendo logicamente uma dezena igual a 10. Colocando isto de uma maneira que nos facilite a visualização, temos o resultado abaixo: POSIÇÃO MILHAR
Valor da coluna 1000
Pode ser visto como 10 x 10 x 10
CENTENA
100
10 x 10
DEZENA
10
10
UNIDADE
1
1
Ou ... 3 10 2 10 1 10 0 10
Repare que acrescentamos uma terceira coluna com representação em termos de expoentes dos valores. Pode ver que dependendo da posição do algarismo dentro do número o seu expoente assume um valor diferente. Se transportarmos este raciocínio para a base 16, teremos o seguinte resultado: POSIÇÃO “MILHAR”
Valor da coluna 4096
Pode ser visto como 16 x 16 x 16
“CENTENA”
256
16 x 16
“DEZENA”
16
16
“UNIDADE”
1
1
Ou então... 3 16 2 16 1 16 0 16
As posições agora têm aspas porque não fazem mais sentido no novo sistema. Servem apenas para que identifique a posição relativa do algaismo de um determinado número.
371
ANEXO 1. SISTEMA HEXADECIMAL
Então, se tivermos, por exemplo, o número 2F, podemos descobrir o seu valor na base 10, multiplicando-se o valor que o F tem relativamente à sua coluna e somando o valor que o 2 tem na coluna que 0
ocupa. O F vale 15 e está na coluna zero. Então, 15x16 =15 e 1
2x16 =32, logo o número 2F equivale ao nosso número 47. Por raciocínio análogo, o número ABCD será: 3
3
A = 10.
Como está na coluna 3 (16 ) então 10 x 16 = 40.960
B = 11.
Como está na coluna 2 (16 ) então 11 x 16 = 2.816
C = 12.
Como está na coluna 1 (16 ) então 12 x 16 = 192
D = 13.
Como está na coluna 0 (16 ) então 13 x 16 = 13
2
2
1
0
1
0
Somando tudo, o número ABCD vai equivaler a 43.981 na base 10. Como se costuma representar a base em baixo do número, então, ABCD seria escrito ABCD16 e 43981 seria escrito 4398110. Se o seu problema é converter da base 10 para a base 16, então deverá dividir em vez de multiplicar. Tomemos por exemplo o número 4.000. Se fizermos uma primeira divisão deste número pelo 16 (da base) chegaremos ao valor de 250, obtendo 0 de resto. Se usarmos o número 250 e o dividirmos novamente por 16, obteremos 15 e 10 de resto. Veja o diagrama abaixo:
372
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Se olharmos agora para os números resultantes, de trás para a frente, teremos os números 15, 10 e 0, que correspondem a F, A e zero, logo, na base 16, o número 4000 é FA0 16.
Anexo 2. WEB COLORS
Em informática, as cores são representadas por combinações de 3 cores básicas: vermelho, verde e azul. As placas de vídeo permitem que cada uma destas cores possa ter valores que vão de de 0 a 255, sendo 0,0,0 o negro e 255, 255, 255 o branco. No início do desenvolvimento para a Web, ainda eram muitos os computadores capazes de representar apenas 256 cores diferentes no ecrã. Utilizavam então as famosas placas de vídeo de 8 bits 1. Começou-se a notar então que as cores não eram mostradas da mesma forma quando vistas em diferentes computadores, browsers, sistemas operativos, etc. Resolveu-se fazer uma comparação para descobrir quais destas cores seriam exactamente as mesmas, independentemente do sistema utilizado. Utilizou-se o Netscape como padrão, para fazer essa comparação, já que era o browser mais utilizado na altura e o que existia para todos os principais sistemas operativos de então. Chegou-se à conclusão de que apenas 216 das 256 cores possíveis pareciam iguais em todos os sistemas. Foi criada uma paleta com estas 216 cores que ficou com o nome de “Web Colors”. Às vezes também conhecidas por “Web-Safe Colors”, “safe colors” ou “Netscape Colors”, e estão disponíveis em programas profissionais de design gráfico e em editores HTML.
1
Como um bit possui dois estados possíveis, ou seja, 0 ou 1, então 8 bits possuem 256 estados possíveis, uma vez que 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256.
Anexo 3. EXTENSION MANAGER como instalar as extensões adicionais ao Flash MX
Para poder instalar as extensões adicionais no seu Flash MX, a primeira coisa a fazer é instalar no seu computador o programa Extension Manager (que tal como as extensões estão disponíveis para download gratuito no site da Macromedia). Corra então o programa de instalação “Ext_Manager_Install_En.exe” (no MAC, “Ext_Manager_Install_hqx”) no seu computador. Terminada a instalação corra o programa Extension Manager 1, que por defeito é armazenado no mesmo directório do Flash. Assim que o fizer verá a imagem abaixo.
1
Certificando-se de que não tem o Flash MX aberto.
376
C ENTRO A TLÂNTICO – C OLECÇÃO TECNOLOGIAS – FLASH MX: DESIGN, A NIMAÇÃO E P ROGRAMAÇÃO
Vá a FILE > INSTALL EXTENSIONS e escolha primeiro o ficheiro “MX365880_FUIComponentsSet2.mxp2” que corresponde ao FLASH MX UI COMPONENTS SET 2 e carregue no botão INSTALL.
Verá a seguir uma janela a perguntar se aceita as condições para a instalação. Carregue em ACCEPT e as extensões serão instaladas no seu computador. Repita o procedimento para as extensões FLASH CHARTING COMPONENTS, cujo ficheiro chama-se “MX377283_ChartingComponents.mxp”. Ao terminar a instalação, o seu EXTENSION MANAGER mostrará na janela principal uma lista daquilo que acabou de instalar. Veja a figura abaixo.
2
As extensões existem em versões diferentes para o Flash MX de PC e para o de MAC. Apesar disso, têm os mesmos nomes.
ANEXO 3. EXTENSION MANAGER
377
Basta agora sair do programa e correr o Flash MX. Vai ver que as extensões já estão dentro da janela COMPONENTS. Caso não estejam visíveis logo à primeira vista, experimente seleccioná-las por meio do “dropdown menu” da própria janela.
Related Documents
Flash Mx - Apostila
November 2019 13
Flash Mx
October 2019 27
Flash Mx
June 2020 9
Apostila Flash Mx 2004%281%29
November 2019 7
Flash-mx-01
June 2020 10