Você está na página 1de 379

Centro Atlntico

Flash MX Design, Animao e Programao

Anabela Gonalves e Magno Urbano

Flash MX Design, Animao e Programao

Portugal/2002

Reservados todos os direitos por Centro Atlntico, Lda.


Qualquer reproduo, incluindo fotocpia, s pode ser feita com autorizao expressa dos editores da obra.

FLASH MX: DESIGN, ANIMAO E PROGRAMAO


Coleco: Tecnologias Autores: Anabela Gonalves e Magno Urbano

Direco grfica: Centro Atlntico Reviso: Nuno Ricardo e Centro Atlntico Capa: Paulo Buchinho

Centro Atlntico, Lda., 2002 Ap. 413 - 4764-901 V. N. Famalico Porto - Lisboa Portugal Tel. 808 20 22 21

geral@centroatlantico.pt www.centroatlantico.pt

Fotolitos: Centro Atlntico Impresso e acabamento: Inova 1 edio: Junho de 2002

ISBN: 972-8426-53-4 Depsito legal: 181.663/02

Marcas registadas: todos os termos mencionados neste livro conhecidos como sendo marcas registadas de produtos e servios, foram apropriadamente capitalizados. A utilizao de um termo neste livro no deve ser encarada como afectando a validade de alguma marca registada de produto ou servio. O Editor e os Autores no se responsabilizam por possveis danos morais ou fsicos causados pelas instrues contidas no livro nem por endereos Internet que no correspondam s Home-Pages pretendidas.

NDICE
I PARTE: DESIGN E ANIMAO NO MACROMEDIA FLASH MX
NOVAS FUNCIONALIDADES DO FLASH MX ............................... 15
1. Workflow ...............................................................................15 rea de trabalho flexvel e intuitiva .........................................15 Melhorias ao nvel da timeline ................................................16 Distribute to Layers ...............................................................16 Suporte para verses anteriores do Flash .............................17 Suporte para diversos Sistemas Operativos .........................17 2. Ferramentas para o designer ...............................................18 Free transform tool ................................................................18 Fill Transform tool ..................................................................18 Pixel Snapping ......................................................................19 Gesto e seleco de cores..................................................19 Mscaras dinmicas .............................................................19 3. Suporte Multimedia ...............................................................19 Suporte vdeo ........................................................................19 Carregamento dinmico de som e imagens ..........................20 4. Texto .....................................................................................20 Substituio de fontes em falta ..............................................20 Colocao de texto na vertical ...............................................21 Suporte Multilingue ................................................................21 5. Recursos de ajuda ................................................................22 Templates .............................................................................22 Painel Answers .....................................................................22 Exemplos e tutoriais ..............................................................23 6. Publicao e navegao ......................................................23 Desenvolvimento de contedo acessvel ...............................23 Suporte em ambientes diferenciados ....................................23 Named Anchors ....................................................................23 Compresso SWF melhorada ...............................................24 Empenhamento na minimizao do Flash Player ..................24 7. Painel Actions melhorado .....................................................24 Edio do Actionscript mais fcil ...........................................24 Editor parametrizvel ............................................................25 Dicas de cdigo (code-hinting) e preenchimento automtico 26

FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO

Painel de referncia ..............................................................26 Funcionamento interno melhorado .........................................26 Debugger melhorado ............................................................27 8. Novos comandos Actionscript ...............................................27 SetInterval e ClearInterval ......................................................27 Novo modelo de objectos e eventos ......................................27 Instruo Switch ....................................................................28 Controlo dinmico do layout do filme ....................................28 Objectos TextField e Button ...................................................28 Drawing API ..........................................................................28 Controlo de som melhorado ..................................................29 Componentes .......................................................................29 9. Links Interessantes ...............................................................30 Documentao e Recursos ...................................................30 A no perder .........................................................................30

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS ........................................ 31


A interface grfica ....................................................................32 Default Layout ........................................................................33 Arrow Tool ................................................................................34 Subselection Tool .....................................................................35 Line Tool ...................................................................................36 Solid (slido) ..........................................................................38 Dashed (tracejado) ................................................................38 Dotted (ponteado) ..................................................................39 Ragged (irregular) ..................................................................39 Stipple (pontilhado) ................................................................40 Hatched (tracejado) ................................................................41 Lasso Tool ................................................................................43 Pen Tool ...................................................................................44 Text Tool ...................................................................................46 Escolha do tipo de texto .........................................................48 Static Text............................................................................48 Espaamento de caracteres ............................................49 Tipo de letra e tamanho ....................................................49 Posio dos caracteres ...................................................49 Ajuste de cor, negrito e itlico ...........................................50 Direco do texto e opes de alinhamento .....................50

NDICE

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

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


Os Menus e suas funes .........................................................93 FILE .......................................................................................93 New From Template ............................................................93 Open As Library ..................................................................96 Import & Export Movie .........................................................97 Quicktime .........................................................................97

FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO

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

I.3. LAYERS, TIMELINE e ANIMAO ..................... 129


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

NDICE

Como que o Flash interpreta uma animao? ......................150 Animao de formas (shape animation) ..................................153 Shape Hints ............................................................................156 Criao do Shape Hint... ......................................................158 Animao com Motion Guide ..................................................162 Mscaras ................................................................................166 Layer do tipo Guide..............................................................171 Layer de som .......................................................................171 Effect (efeitos sonoros) .....................................................172 Sync (tipo de sincronismo de som)....................................175 Event..............................................................................175 Start ...............................................................................176 Stop ...............................................................................176 Stream ...........................................................................176 Como testar as suas animaes .............................................177 Bandwidth Profiler ..........................................................178

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS ........... 181


As suas prprias bibliotecas ..................................................181 Graphics, Button e Movie Clips ...............................................183 Graphic (grficos) ...................................................................185 Button (boto) .........................................................................186 Movie Clips ............................................................................189 Efeitos de Cor e Transparncia ..............................................191 Brightness .........................................................................192 Tint ....................................................................................192 Alpha ................................................................................193 Advanced ..........................................................................193 Bibliotecas do Flash ...............................................................194 Buttons .................................................................................195 Arcade Buttons .................................................................195 Circle Buttons....................................................................196 Component Buttons ...........................................................196 Key Buttons .......................................................................198 Knobs & Faders ................................................................198 Ovals.................................................................................199 Playback ...........................................................................199 Push Buttons .....................................................................200 Sounds ................................................................................200

10

FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO

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


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

I.6. COMPONENTES AVANADOS ......................... 215


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

NDICE

11

II PARTE: A PROGRAMAO NO MACROMEDIA FLASH MX

II.1. INTRODUO PROGRAMAO ORIENTADA POR OBJECTOS ................................. 253


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

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


Dot sintax versus Slash sintax .................................................257 Terminologias utilizadas no Actionscripting .............................258 Painel Actions ........................................................................260 Inserir uma Action .................................................................261 Alternar entre modos no painel Actions ................................263 Navegar entre scripts num documento ..................................263 Para apagar uma action .......................................................264 Visualizar a numerao para as linhas de cdigo .................265 Imprimir Actions ...................................................................265 Painel Reference .................................................................265 Para visualizar o painel Reference .......................................266 Para alterar a dimenso da fonte no painel Reference .........266 Associar actions na timeline ................................................266 Associar actions a smbolos ................................................267 Eventos ..................................................................................267 Eventos associados a botes ..............................................268 Eventos de movie clips ........................................................268

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO ...................................................... 271


Criar links para pginas HTML ............................................273 Carregar filmes de Flash externos ........................................276 Controlar ficheiros executveis com o fscommand ..............280 Smbolos ..............................................................................282 Atribuir nomes a instncias de movie clips ou botes ..........284 Caminhos relativos e absolutos ............................................285 Caminhos absolutos ............................................................285

12

FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO

Caminhos relativos ..............................................................285 Controlar instncias de smbolos ..........................................286 Propriedades dos movie clips .............................................288 Mtodos mais utilizados nos movieclips ..............................290 DuplicateMovieClip e RemoveMovieClip ..........................292 LoadMovie e Unload Movie ...............................................295 GetBytesLoaded e GetBytesTotal......................................297

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO .......................................... 301


Sintaxe do Actionscripting ....................................................301 Variveis ................................................................................303 Data Types ...........................................................................303 Scope da varivel ................................................................305 Variveis locais .................................................................305 Variveis de Timeline .......................................................305 Variveis Globais ..............................................................305 Declarar variveis ................................................................305 Testar o valor das variveis ..................................................308 Operadores .........................................................................309 Prioridade dos operadores ...............................................309 Tipos de operadores .........................................................309 Condio If ...........................................................................312 Condio CASE ..................................................................319 Ciclo For ..............................................................................320 Ciclo While ...........................................................................323

II.5. FUNES .......................................................... 329


Funo Number ......................................................................330 Funo getTimer ....................................................................330 Funo getVersion .................................................................330 Funo boolean......................................................................331 Funo string ..........................................................................331 Funo escape ......................................................................332 Funo getProperty ................................................................332 Funo targetPath ..................................................................332 Funo unescape ...................................................................332 Funo isFinite .......................................................................333

NDICE

13

Funo isNaN ........................................................................333 Funo parseFloat .................................................................333 Funo parseInt ......................................................................333 Definir funes .......................................................................334

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


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

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


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

14

FLASH MX: DESIGN, ANIMAO E PROGRAMAO - CENTRO ATLNTICO

Novas funcionalidades do Flash MX


Por Nuno Ricardo 1

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

1. Workflow
rea de trabalho flexvel e intuitiva Os produtos da Macromedia sempre tiveram muitas paletas de trabalho diferentes, com a possibilidade de serem organizadas ao gosto do utilizador, mas eram frequentes as crticas dificuldade de gesto da rea de trabalho. Nesta verso do Flash, a melhoria significativa neste aspecto. Com outra forma de as paletas se expandiram e se agruparem nos extremos do ecr, trabalhar com o Flash deixou de ser stressante. Outra melhoria muito bem vinda uma paleta de propriedades ao estilo do Dreamweaver. As suas opes variam consoante o objecto seleccionado, condensando mltiplas paletas numa s, poupando espao de trabalho precioso.

Nuno Ricardo o nico Flash 5 Developer registado em Portugal

16

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Melhorias ao nvel da timeline Da verso 4 para a 5 foram introduzidas alteraes na forma como se controlavam as frames e keyframes na timeline. Estas no foram bem aceites pelos utilizadores, preferindo muitos a verso 4 5 neste aspecto. Na verso MX, voltou-se atrs no tempo. Trabalhar com a timeline quase igual ao que era na verso 4, indo de encontro ao que quase todos os utilizadores pediam. Uma novidade nesta verso MX foi a introduo de pastas de layers. Estas permitem agrupar layers, como conseguamos fazer antes para os smbolos na Library. Torna-se assim mais fcil trabalhar com filmes complexos a nvel de design.

Distribute to Layers Se tivermos um grupo de objectos numa layer, e pretendermos fazer animaes independentes para cada um deles, necessrio coloc-los em layers tambm elas independentes. Um objecto em cada layer. O novo comando Distribute to Layers faz isso automaticamente, e ainda atribui o nome a cada uma das layers criadas, poupando tempo e trabalho aos designers.

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX


Suporte para verses anteriores do Flash

17

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

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

18

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

2. Ferramentas para o designer

Free transform tool

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

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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX


Pixel Snapping

19

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

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

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

3. Suporte Multimedia

Suporte vdeo
Utilizando o codec Sonrenson Spark embebido dentro do player da verso 6, possvel inserir vdeos dentro de ficheiros SWF.

20

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

O Flash suporta a importao de vdeos nos formatos AVI, MOV, DV e MPEG. Depois de inserido, possvel tratar um vdeo como qualquer outro objecto: Mudar o tamanho, rodar, distorcer, mascarar, e controlar o seu andamento atravs de actionscripting.

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

4. Texto

Substituio de fontes em falta


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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX


Colocao de texto na vertical

21

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

Suporte Multilingue

O suporte a caracteres Unicode, permite a visualizao de textos em lnguas em que antes no era possvel com o Flash. Permite tambm uma mais fcil compatibilidade com aplicaes externas que falem Unicode, tal como com algumas aplicaes de gesto de contedos.

22

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

5. Recursos de ajuda

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

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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX Exemplos e tutoriais

23

J includos nas verses anteriores, estes tornam-se cada vez melhores.

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

Suporte em ambientes diferenciados O desenvolvimento de contedo em Flash garante-nos que este vai estar acessvel em diversos meios de comunicao to diferenciados como os PCs com diferentes sistemas operativos, WebTV, Pocket PC, PDA e outros. A Macromedia est absolutamente empenhada em tornar cada vez mais abrangente o Flash Player no que toca a plataformas existentes e futuras.

Named Anchors As Named Anchors j so amplamente usadas em HTML, para facilitar a navegao num site. Agora, tambm dentro de um filme Flash possvel utilizar esta ferramenta, de forma a que o utilizador possa navegar utilizando o boto Back e Forward do browser.

24

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Compresso SWF melhorada


O Flash MX possui novos algoritmos de compresso de contedo, direccionados optimizao de filmes com utilizao intensiva de Actionscript.

Empenhamento na minimizao do Flash Player


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

7. Painel Actions melhorado

Edio do Actionscript mais fcil


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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX

25

Editor parametrizvel

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

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

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

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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX


Debugger melhorado

27

A deteco de erros de cdigo agora mais fcil. 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 no s aos botes e movieclips, mas a quase todos os objectos, permitem que seja mais fcil associar cdigo a cliques do rato ou a teclas, ao load e unload de dados de vrios tipos, ao redimensionar da janela do Flash, etc.

28

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Instruo Switch Anteriormente, a nica instruo condicional era o IF, que embora fosse eficiente, em muitos casos se existissem mltiplas hipteses a testar tornava-se pouco prtico. Para resolver este problema, surge a instruo SWITCH. J existente noutras linguagens segue um estilo sintctico muito semelhante ao Javascript, tal como todo o Actionscript a partir da verso 5.

Controlo dinmico do layout do filme Atravs do novo objecto Stage, possvel aceder e controlar algumas propriedades do layout do filme, tais como a altura e largura do filme, o Scale Mode, ou saber quando o filme redimensionado.

Objectos TextField e Button Todas as propriedades inerentes s caixas de texto, como o Word Wraping, o modo password, multiline, alinhamento do texto e o prprio formato de texto so controlveis dinamicamente por Actionscript atravs dos objectos TextField e TextFormat. Tambm o comportamento de um boto, como a ordem de tabulao, o bloqueamento, e at as actions associadas a este, so controlveis por Actionscript utilizando o objecto Button.

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

NOVAS FUNCIONALIDADES DO MACROMEDIA FLASH MX


Controlo de som melhorado

29

O objecto Sound foi expandido, de forma a suportar o carregamento dinmico 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 possvel criar formulrios com botes de seleco, caixas drop-down, caixas de seleco mltipla, etc. Existem tambm componentes para facilmente se adicionar scrollbars a caixas de texto. A rea de componentes completamente personalizvel, existindo algumas empresas que se dedicam produo de componentes para diversos fins. No site www.macromedia.com/exchange possvel encontrar alguns destes componentes, pux-los e instal-los utilizando o Macromedia Extension Manager, includo no Flash.

30

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

9. Links Interessantes

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

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

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

Existem diversas verses do FLASH P layer disponveis no site da Macromedia, cada qual

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

32

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Enquanto que na construo de um site normal para a Internet temos que escrever uma srie de ficheiros em HTML, num site em Flash temos que elaborar uma srie de elementos grficos, j que normalmente um site deste tipo est contido num nmero sensivelmente menor de ficheiros. Uma vez pronto, um site em Flash lembra muito a construo de um programa numa qualquer linguagem de programao, onde se tem uma aplicao principal que corre e que pode ou no ter aplicaes externas que venha a executar de acordo com as aces do utilizador.

A interface grfica
Logicamente, a primeira parte a abordar neste livro refere-se interface grfica do Macromedia Flash MX, para que possa conhecer os cantos casa, significativamente modificados em relao verso anterior. A primeira diferena que se nota na interface, ao correr o Flash MX, em comparao com as verses anteriores, que as suas janelas esto todas encaixadas umas nas outras e podem ser destacadas para se tornarem independentes e encaixadas novamente no todo. Outra diferena que verificar que a interface pode ser configurada consoante o perfil do utilizador: designer, utilizador genrico (general) ou programador (developer). Para proceder escolha v ao menu WINDOW > PANEL SETS e ver sete opes: DEFAULT LAYOUT, trs opes de resoluo para DESIGNER e trs para DEVELOPER. Estes ajustes pr-definidos arrumam as diversas janelas de propriedades do Flash de acordo com aquilo que se entende necessrio estar visvel ou no para um determinado perfil. Pode-se entender mais facilmente esta explicao quando se v que o Flash possui diversas janelas de propriedades e que nem todas so necessrias para todos os tipos de utilizador.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

33

No tipo DESIGNER, por exemplo, esto visveis as seguintes janelas na interface: TOOLS, TIMELINE, PROPERTIES, INFO, ALIGN, TRANSFORM, COLOR MIXER, COLOR SWATCHES, COMPONENTS e ANSWERS. J no tipo DEVELOPER esto visveis as janelas TOOLS, TIMELINE, ACTIONS, REFERENCE, PROPERTIES, COLOR MIXER, COLOR SWATCHES e ANSWERS. Vemos que esta combinao faz sentido para ambos os tipos, j que para um programador, por exemplo, no h a necessidade de ter visvel na interface a janela que lhe permitiria fazer transformaes ou mudar o alinhamento de objectos.

DEFAULT LAYOUT
Comearemos ento por escolher o tipo DEFAULT LAYOUT, o qual modificar a interface para que fique conforme a figura abaixo.

34

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

Para ter maior coerncia essa ferramenta ao nosso ver deveria chamar-se selection tool, j que

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS


ANTES DEPOIS

35

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

o objecto crculo

os pontos que o formam...

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

36

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Para activar um vrtice e poder modificar a sua posio ou node basta seleccionar a ferramenta Subselection Tool e carregar com o rato em cima da regio onde est o vrtice. Caso no saiba onde o vrtice est seleccione com esta mesma ferramenta uma regio volta do ponto onde pensa existir um vrtice. Se de facto existir algum vrtice na regio da curva que marcou, estes e os seus nodes ficaro visveis. Ento poder arrast-los para outros stios e modificar a aparncia da forma.

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

37

Depois de criada a linha, pode modificar os seus parmetros na janela de propriedades, encontrada na parte inferior do ecr. Veja a figura 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 nmero e o estilo (Stroke Style) se carregar na caixa com a palavra SOLID (figura acima).

Esto disponveis diversos estilos de linha, tracejadas, pontilhadas, slidas, etc. Tambm poder carregar no boto 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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

SOLID (SLIDO)
O primeiro estilo disponvel o SOLID (slido), onde a linha tem uma aparncia contnua. Este estilo permite apenas regular a espessura (THICKNESS) e fornece uma caixa com a frase SHARP CORNERS, que quando marcada produz linhas com cantos em bico.

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

39

Nas duas caixas a seguir a DASH poder regular, respectivamente, o tamanho de cada segmento do tracejado e do espaamento, o que significa dizer que se preencher os campos com os valores 8 e 5 ter segmentos com 8 pixis de comprimento espaados 5 pixis entre si.

DOTTED (PONTEADO)
Temos ento o estilo dotted ou ponteado.

Na caixa DOT SPACING poder regular o espaamento dos pontos.

RAGGED (IRREGULAR)
O estilo a seguir na caixa dos tipos o RAGGED. Neste estilo esto disponveis parmetros como PATTERN, WAVE HEIGHT e WAVE LENGTH, que correspondem, respectivamente, ao padro, altura e comprimento da irregularidade. O PATTERN corresponde ao padro da linha e permite vrias escolhas: SOLID, SIMPLE, RANDOM, DOTTED, RANDOM DOTTED, TRIPLE DOTTED e RANDOM TRIPLE DOTTED, correspondentes a slido, simples, aleatrio, ponteado, ponteado aleatrio, ponteado triplo e ponteado triplo aleatrio. No necessrio decorar exactamente o que cada um destes parmetros significa, porm vale a pena experiment-

40

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

-los quando estiver a trabalhar porque modificam significativamente a aparncia final. No campo WAVE HEIGHT poder ajustar a amplitude e turbulncia da irregularidade em quatro nveis disponveis, consoante um menor ou maior grau de turbulncia: FLAT , WAVY, VERY WAVY e WILD. Tambm poder ajustar o comprimento da irregularidade pelo WAVE LENGTH. So tambm quatro as opes, a primeira a produzir o menor comprimento e a ltima a produzir o maior: VERY SHORT , SHORT, MEDIUM e LONG.

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

41

ZES e RANDOM SIZES. A primeira opo produz pontos do mesmo tamanho. A segunda produz pontos que possuem uma pequena variao de tamanho. Na terceira temos a produo de pontos de tamanhos variados e na quarta, pontos de tamanhos aleatrios. No campo DENSITY poder regular a densidade dos pontos, ou seja, se os pontos so produzidos pegados uns aos outros ou no. As opes da mais densa para a menos densa so: VERY DENSE, DENSE, SPARSE e VERY SPARSE.

HATCHED (TRACEJADO)
O estilo seguinte o HATCHED. Na janela deste estilo poder ver os seguintes campos: THICKNESS (espessura), SPACE (espaamento horizontal), JIGGLE (agitao), ROTATE (rotao), CURVE (curvatura) e LENGTH (comprimento).

42

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Na primeira opo, THICKNESS, possvel ajustar a espessura das linhas produzidas no padro. Da mais fina para a mais grossa, as opes so: HAIRLINE, THIN, MEDIUM e THICK. No campo SPACE possvel regular o espaamento entre as linhas produzidas no padro. A comear pelo menos espaado, temos as seguintes opes neste campo: VERY CLOSE, CLOSE, DISTANT e VERY DISTANT. Em JIGGLE podemos ajustar o padro de distribuio vertical e horizontal das linhas. Da opo menos para a mais catica as opes so: NONE, BOUNCE, LOOSE e WILD. Na caixa ROTATE possvel regular a rotao das linhas. Os valores dos ngulos de rotao so pr-estabelecidos pelo p rograma e no podem ser mudados. Porm, possvel escolher as seguintes opes, da menos para a mais radical: NONE, SLIGHT, MEDIUM e FREE. Temos tambm o campo CURVE, onde possvel ajustar a curvatura das linhas produzidas. Da menos curva para a mais curva as opes so: STRAIGHT, LIGHT CURVE, MEDIUM CURVE, VERY CURVED. Em LENGTH podemos ajustar o comprimento das linhas. Com isso possvel criar variaes verticais de tamanho. As opes so: EQUAL,

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

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 tambm o quadro que diz ZOOM 4X para permitir a visualizao do efeito linha de forma mais detalhada. Tambm h o campo THICKNESS que permite o ajuste da espessura da linha em pontos. SHARP CORNERS outro quadro que, quando marcado, produz linhas com cantos em bico.

Lasso Tool
De volta barra de ferramentas do Flash, ver, ao lado do cone da recta, o cone que representa um lao (Lasso Tool). Com esta ferramenta poder seleccionar partes internas de um objecto. No deve confundir-se com o modo de seleco de sub-objecto. Um sub-objecto um ponto que forma um determinado objecto. A ferramenta LASSO permite seleccionar partes do objecto em si. Digamos que numa recta qualquer utilizmos o LASSO para seleccionar uma regio, conforme nesta figura.

44

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

45

O modo de criao dos pontos simples. Depois de seleccionar a pena, v com o rato para a rea de desenho e carregue no boto. O Flash criar o primeiro ponto da curva. Mova ento o rato para outro stio. Ainda dentro da rea de desenho, carregue novamente no boto para criar o segundo ponto. Sem libertar o boto, mova o rato suavemente. Verificar que o Flash permite o ajuste da curvatura do segmento. Crie outros pontos. Se quiser fechar a curva, e transform-la numa superfcie, volte com o rato para cima do primeiro ponto criado e ver um pequeno crculo surgir ao lado do cursor. Esta a indicao de que se carregar no boto 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 parmetros que podero ser modificados.

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

46

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

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

O FLASH considera os valores de X (coordenada horizontal) e Y (coordenada vertical) a comear de zero. X = 0 a posio mais esquerda na horizontal e Y = 0 a posio mais acima na vertical. Logo, a posio X=0 e Y=0 o ponto superior esquerdo da janela de desenho.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

47

Seleccione-a e mova o rato para a rea de desenho. Carregue no boto do rato e ver surgir uma caixa conforme vemos na pgina ao lado.

Note que no canto superior direito poder ver um quadrado. O quadrado indica que uma caixa de tamanho fixo. Se tiver uma bola, uma caixa de tamanho varivel cresce com o texto que se introduzir. Se arrastar este elemento poder regular a largura da caixa de texto. Deve sempre previamente regular a largura da caixa de texto para forar o Flash a formatar o texto numa regio horizontal especfica. Digite ento qualquer coisa no interior da caixa, algo com vrias linhas, e movimente o quadrado que regula a largura. Veja como se comporta o texto com os diversos tamanhos de caixa. Na figura seguinte vemos a janela de propriedade da caixa de textos do tipo STATIC, que pode ser encontrada na parte central inferior do ecr, e os seus correspondentes parmetros 4.

Caso no esteja a ver toda a janela como na figura, carregue no pequeno tringulo existente no

canto inferior direito da mesma para a maximizar.

48

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

A seguir temos uma descrio mais detalhada de cada um dos campos acima.

ESCOLHA DO TIPO DE TEXTO


No campo de escolha do tipo de texto possvel seleccionar o tipo de funcionalidade da caixa de textos. As opes possveis so STATIC TEXT, DYNAMIC TEXT e INPUT TEXT. Static Text STATIC TEXT o tipo de caixa de texto tradicional, na qual poder colocar os textos que deseja na sua animao. Uma caixa de texto ajustada como DYNAMIC TEXT permite ser actualizada durante a execuo da animao, de forma dinmica. Ento, poder, durante a execuo da animao, controlar e colocar textos dentro da caixa, que podero chegar-nos de ficheiros, por exemplo. As caixas ajustadas como INPUT TEXT tm a finalidade de servir como caixas de entrada de texto em formulrios, por exemplo, cujos valores podem ser lidos por ActionScript.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS ESPAAMENTO DE CARACTERES

49

Neste campo poder ajustar o espaamento entre as letras. Geralmente este campo est preenchido com o valor zero, que corresponde ao espaamento normal das letras. O mximo valor que poder colocar neste campo 60, que corresponde a um maior espaamento entre as letras e o menor valor 60, que corresponde ao menor espaamento. Veja a figura abaixo.

TIPO DE LETRA e TAMANHO

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

POSIO DOS CARACTERES

Nesta caixa poder ajustar a posio de caracteres em relao s linhas. As opes so NORMAL, SUPERSCRIPT e SUBSCRIPT. Com a opo SUPERSCRIPT poder escrever expoentes de equaes, por exemplo, e com a opo SUBSCRIPT poder colocar ndices nestas mesmas equaes. Logo, o SUPERSCRIPT corresponde escrita de caracteres de tamanhos reduzidos acima da linha base do texto, enquanto que o SUBSCRIPT equivale a caracteres de tamanhos reduzidos abaixo da linha base. Veja os exemplos seguintes.

50

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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 ITLICO

Os trs campos a seguir so a caixa de ajuste de cor, o B e o I onde pode colocar o texto em negrito (BOLD) ou itlico (ITALIC). Tambm neste caso poder colocar letras de diversos tipos, tamanhos, cores e formatos numa mesma caixa de texto.

DIRECO DO TEXTO e OPES DE ALINHAMENTO

A seguir, temos a caixa de ajuste da direco do texto, indicada abaixo pelo primeiro cone.

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

51

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

OPES DE ROTAO

Se todavia carregar no cone logo abaixo daquele de ajuste de direco de texto, poder rodar o texto, de forma que a imagem ao lado se torna igual seguinte.

52

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

53

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

54

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Estas opes de formatao de texto so teis tambm para escrita em outras linguagens em que o texto se l noutras direces. O suporte a essas linguagens como o Coreano, Japons e outras, foi melhorado nesta verso do Flash, j que pode utilizar o UNICODE para a interpretao do texto

OPES DE FORMATAO

Neste campo poder ajustar alguns outros parmetros na formatao do texto dentro da caixa. Assim que carregar com o rato neste boto ver a janela abaixo.

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

55

Outros parmetros que podem ser regulados na janela de opes de formatao so LINE SPAC ING (espaamento entre as linhas de texto), LEFT MARGIN (margem esquerda) e RIGHT MARGIN (margem direita). Estes dois ltimos valores referem-se s margens entre a caixa de texto e o texto em si.

AUTO KERN

Se marcar esta caixa o Flash passa a utilizar as o pes de Kerning5 disponveis no prprio tipo de letra.

W, H, X e Y

Estes quatro parmetros so os responsveis pela definio da largura (width), altura (height), posio horizontal (X) e posio vertical (Y) da caixa de texto.

URL

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

ALVO DA URL

Esta uma funo avanada de HTML e indica onde a pgina no campo URL dever ser vista. As opes deste campo so _blank,

Distribuio das letras entre si de forma a tornar um determinado texto visualmente correcto do

ponto de vista grfico.

56

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

_parent, _self e _top. A p rimeira indica que uma nova janela no browser deve ser aberta para carregar a URL. A segunda indica que a pgina deve ser carregada na janela de maior hierarquia do browser relativamente hierarquia da pgina actual. Se no tiver definido nenhuma hierarquia, por Java ou JavaScript, ento a pgina carregada na janela actual. A terceira opo indica para carregar a pgina na janela actual. A ltima opo indica que a pgina deve ser carregada na janela aberta de maior hierarquia. Assim como a outra, se nenhuma hierarquia tiver sido definida a pgina carregada na janela actual.

O TEXTO PODE SER SELECCIONADO?

Este boto indica se o texto da caixa pode ou no ser seleccionado quando a animao estiver a ser visionada pelo utilizador, o que indica, em suma, se permite ou no que o utilizador seleccione o texto com a inteno de copi-lo em seguida. Se desmarcar este campo o texto ser visto mas no poder ser seleccionado e consequentemente no poder ser copiado.

USE DEVICE FONTS

O Flash, por defeito, inclui no ficheiro final correspondente sua animao todas as letras das fontes que utilizou. Logicamente que armazenar as informaes de tais letras faz com que o ficheiro aumente de tamanho. Felizmente, o Flash apenas armazena a informao relativa a cada letra e fonte diferente que utilizou. Assim, se utilizar a fonte ARIAL e escrever a palavra AGUA, e com a Times New Roman escrever a 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 opo USE DEVICE FONTS indicar ao Flash para que este no armazene internamente as informaes relativas s letras utilizadas nas animaes e tente utilizar as fontes que existam na mquina onde estiver a correr, que mais se assemelhem s que utilizou. Geralmente no indicado que seleccione esta opo, a no ser que tenha absoluta certeza de que as fontes so exactamente as mesmas.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

57

Como na prtica impossvel ter essa certeza absoluta, ir correr o risco de ver a sua animao completamente destruda pelo uso de uma fonte inadequada (ateno s questes legais no uso de fontes pagas).

TIPO DE LINHA

Nesta caixa poder ajustar o estilo da caixa de textos no que se refere disposio das linhas. As opes para as caixas de texto do tipo DYNAMIC so: SINGLE LINE, MULTILINE e MULTILINE NO WRAP. A primeira indica que a caixa somente ter uma linha na largura da caixa especificada. Caso o texto seja maior do que a largura disponvel ento somente parte deste ser mostrado. A opo MULTILINE faz com que a caixa de textos passe a ter mltiplas linhas; respeitando o tamanho da caixa. Alm disto, o texto formatado automaticamente em linhas, medida em que atinge a borda direita da caixa. A opo MULTILINE NO WRAP impede que o Flash arrume o texto em linhas medida em que este atinge o limite direito da caixa. Cabe a si definir onde deve haver a mudana de linhas pela colocao de caracteres ENTER nos pontos desejados. Dynamic Text As caixas de texto do tipo DYNAMIC servem para que possa definir reas de texto nas suas pginas Flash que sero preenchidas de forma dinmica, medida em que a pgina surgir. Digamos, por exemplo, que deseja fazer a leitura do texto de um ficheiro que muda diariamente e mostra esse contedo na sua animao. Isto possvel com o uso das caixas deste tipo. As propriedades desta caixa assemelham-se s das caixas do tipo STATIC vistas anteriormente; porm, alguns outros botes e campos novos surgem, tal como veremos a seguir. Veja a figura seguinte.

58

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS BOTO HTML

59

Se seleccionar este boto, indicar ao Flash para preservar as caractersticas bsicas de formatao de textos HTML, como tipo de letra, estilo, cor, tamanho, e hiperligaes nas caixas de texto, pela aplicao automtica dos correspondentes tags em HTML quando a animao final for exportada para SWF. Os seguintes tags em HTML so suportados: <A>, <B>, <FONT COLOR> , <FONT FACE>, <FONT SIZE>, <I> , <P> e <U>. Tambm so suportados os seguintes atributos: LEFTMARGIN, RIGHTMARGIN, ALIGN, INDENT e LEADING. Poder preservar as caractersticas de formatao e estilo dos textos HTML pelo uso de variveis das caixas de texto ou uso do nome da instncia da caixa de texto. Se o desejar fazer pelo uso das variveis proceda da seguinte forma: crie uma caixa de texto do tipo DYNAMIC ou INPUT; nomeie o campo VARIABLE dessa caixa na janela de propriedades como texto por exemplo.

Das duas opes abaixo, faa pelo menos uma: seleccione o boto HTML para que o texto seja finalizado como HTML respeitando os tags deste standard, ou no painel ACTIONS ajuste a propriedade html do objecto do tipo TextField para true. Ajuste a varivel do campo de texto para um valor que inclua a lguns tags de HTML. Por exemplo, se ajustar a varivel txt com o valor,
txt = <B>apenas um teste</B>

e accionar o boto HTML, ento o texto ser mostrado em negrito, uma vez que o accionamento deste boto faz o Flash seguir as instrues

60

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Se por outro lado quiser preservar as caractersticas dos textos HTML pelo uso do nome da instncia da caixa de textos, faa o seguinte: crie uma caixa de texto do tipo DYNAMIC ou INPUT; nomeie o campo VARIABLE dessa caixa na janela de propriedades como texto, por exemplo.

Das duas opes abaixo, faa pelo menos uma: seleccione o boto HTML para que o texto seja finalizado como HTML respeitando os tags deste padro ou no painel ACTIONS ajuste a propriedade html do objecto do tipo TextField para true.
InstanciaUm.html = true;

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

MOSTRAR BORDA

Indica se deseja ou no se quer visvel a borda da caixa de textos.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

61

Input Text Este tipo de caixa de textos indicado para a criao de formulrios. So campos que podem conter valores previamente preenchidos mas que podem ser modificados pelo utilizador. As propriedades deste tipo de caixa so as mesmas j observadas para as caixas do tipo STATIC e DYNAMIC. Porm, ainda surge um novo campo chamado MAXIMUM CHARACTERS, quando se escolhe a caixa do tipo INPUT. Neste campo poder definir o mximo nmero de letras que a caixa ter a capacidade de conter. O uso desta varivel indicado para limitar a quantidade de texto que tenciona deixar que seja preenchida, pelo utilizador num formulrio, por exemplo.

TIPO DE LINHA

No caso da caixa de texto do tipo INPUT ainda existe mais uma opo para esta caixa, alm das descritas nas caixas de tipo DYNAMIC, que PASSWORD. Ao colocar esta opo ligada n um formulrio far com que qualquer texto inserido seja mostrado como uma srie de asteriscos, como j de uso tradicional nos campos de password de formulrios em HTML.

Oval Tool &

Rectangle Tool

Ao voltar novamente barra de ferramentas do Flash, encontramos os dois prximos cones a seguir ao Text Tool. So eles a oval ( OVAL TOOL) e o rectngulo (RECTANGLE TOOL), representados pelos cones de um crculo e um quadrado... O procedimento para criao de uma forma destas simples. Carregue com o rato num ponto na rea de desenho, movimente o cursor para outro stio e liberte o boto.

DICA

62

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Aps desenhar a forma tambm poder carregar com o rato duas vezes em cima desta e utilizar a Arrow Tool para ajustar as suas propriedades, que so iguais s descritas para o caso da linha.

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

Porm, estas formas, como so fechadas, permitem agora que se possa escolher uma cor ou padro de preenchimento (FILL) interno. Ento, depois de criar a forma deve seleccionar a regio de fill e na janela de propriedades da forma, carregar no balde de preenchimento e escolher uma cor ou gradiente. Ao carregar no balde vai ver uma janela igual vista abaixo.

Poder ento escolher uma cor ou um padro de gradiente, conforme poder ver no pequeno rodap desta janela.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

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 contm os parmetros relativos ao gradiente escolhido.

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

Se a janela no seu programa no estiver com a aparncia indicada carregue no pequeno tringulo

no canto inferior direito desta, para a maximizar.

Na barra de ferramentas tambm existem estes dois cones, o balde e o lpis, e tm exactamente

a mesma funo.

64

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

O primeiro da esquerda coloca o preto no LINE e o branco no FILL. O do meio faz com que nenhuma cor seja usada no preenchimento. 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 possvel regular directamente os valores das trs cores bsicas, ou seja, Red, Green e Blue (vermelho, verde e azul)8. Em ALPHA poder regular a transparncia que a cor criada ter. Na parte inferior da janela do color mixer pode ver dois quadrados e um rectngulo vertical. No primeiro mostrada a cor que foi escolhida no quadrado do meio. No rectngulo vertical direita possvel regular o nvel de brilho da cor que estiver a trabalhar.

Dever ler o anexo 1 para saber como funciona o sistema de cor dos computadores e tambm o

que o sistema hexadecimal.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

65

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

HTML = HyperText Markup Language. o formato no qual as pginas de Internet so escritas. Equivalem a ficheiros-texto com todos os cdigos (formataes) necessrios para fazer uma pgina de Internet aparecer nos browsers como se pretende.

66

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

GRADIENTE LINEAR

10

RGB = Red, Green e Blue so as trs cores bsicas utilizadas em televiso e por consequncia,

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

11

HSB = Hue Saturation Brightness (tom, nvel de cor e brilho). Neste sistema, as cores so definidas pelo seu brilho, que pode variar de 0 (negro) a 100% (brilho mximo), pelo seu nvel de cor, que varia segundo a mesma escala e pelo seu tom, definido por graus de rotao, onde o ngulo 0 corresponde ao vermelho, o 120 ao verde e o 240 ao azul. Normalmente este sistema denominado de HLS (Hue Luminance Saturation), que o termo pelo qual normalmente conhecido no mundo profissional.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

67

Para perceber melhor o efeito, reduzimos o nmero 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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

69

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

OBSERVAO
Se a qualquer momento quiser apagar um marcador no gradiente, basta arrast-lo para baixo.

Pode marcar quantos quiser.

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

OBSERVAO
A forma na qual o gradiente aplicado varia de acordo com a regio do objecto onde se carregou no acto de criao. Poder posteriormente mudar este ponto pelo uso da ferramenta FILL TRANSFORM TOOL da barra de ferramentas.

70

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Pencil Tool
Ao voltar barra de ferramentas do Flash, vemos o cone a seguir ao quadrado. o lpis ( PENCIL TOOL). Ele permite fazer linhas mo livre, sem a necessidade de se ter que marcar pontos. Seleccione esta ferramenta. Ao faz-lo, notar que na parte inferior da barra de ferramentas, na rea nomeada como OPTIONS, surge o cone de seleco do modo do lpis (PENCIL MODE). Carregue neste cone e uma segunda janela ser vista. Veja a figura ao lado. Imediatamente poder ver trs novas opes: STRAIGHTEN, SMOOTH e INK, que possibilitam a criao de linhas rectas, suaves ou mo livre. A diferena que, apesar dos dois primeiros modos tambm permitirem que se desenhe mo livre, faro uma transformao na forma final para corresponder ao modo escolhido. Digamos, por exemplo, que seleccionou o modo STRAGHTEN. Como este modo o que produz linhas com segmentos rectos, mesmo que desenhe linhas suaves, estas sero transformadas em linhas rectas. A mesma coisa acontece no modo SMOOTH. Depois de terminar o desenho da linha, o Flash entra em aco e suaviza a linha, para que fique menos irregular. No modo INK nenhum processamento feito e a linha fica exactamente como foi desenhada. As linhas geradas pelo modo de desenho mo livre com o lpis so para o Flash, depois de criadas, exactamente o mesmo tipo de objecto que uma linha comum. Logo, tambm possuem uma janela de propriedades, na parte central inferior do ecr, com os mesmos parmetros das linhas comuns; parmetros estes descritos anteriormente.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

71

Brush Tool
Ao lado do lpis, vemos na barra de ferramentas do Flash um pincel (BRUSH TOOL). A funo do pincel a mesma do lpis, ou seja, desenhar mo livre. Porm, produz linhas de dimetro largo. Assim como o lpis, uma vez seleccionado, o pincel faz aparecer uma janela de OPTIONS, na parte 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 regies por onde passar com a cor seleccionada. PAINT FILLS Este modo de pintura apenas ir colorir as regies de fill de um objecto e deixar as suas linhas intactas. PAINT BEHIND Se for seleccionado faz com que o brush apenas desenhe por detrs dos objectos. PAINT SELECTION Apenas pinta as regies de fill dos objectos que estejam seleccionados. PAINT INSIDE Apenas pinta as regies de fill que sejam as mesmas correspondentes ao primeiro ponto onde o brush tocou. Isso quer dizer que, se o brush tiver comeado a pintar, por exemplo, na rea de fill de um crculo, no poder pintar nada que esteja fora desta rea. Na figura seguinte poder ver os cinco exemplos de modos de brush e o tipo de efeitos que causam. Em todos os casos, pintamos uma linha vertical, de cima para baixo.

72

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

OBSERVAO
Um objecto geralmente formado pela sua linha exterior (LINE) e sua regio de preenchimento de cor (FILL). Se escolher a ferramenta de seleco de objectos (ARROW TOOL) e carregar duas vezes na linha exterior deste objecto, seleccionar apenas esta linha. Se por outro lado carregar duas vezes no FILL, seleccionar ambas as partes do objecto, LINE e FILL.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

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

Veja na figura abaixo linhas criadas com um tablet e com a funo USE PRESSURE. As linhas foram criadas por variao na presso aplicada caneta sobre o tablet, medida em que o cursor se deslocava para baixo.

12

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

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

74

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Na barra de OPTIONS pode ver logo a seguir ao cone USE PRESSURE duas caixas de seleco, sendo a primeira nomeada BRUSH SIZE e a segunda BRUSH SHAPE. Nelas pode ajustar o 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 GRFICA E OS FUNDAMENTOS BSICOS

75

Free Transform Tool


De volta barra de ferramentas, temos o cone a seguir ao BRUSH. o FREE TRANSFORM TOOL. Esta ferramenta permite ajustar ou transformar a largura, altura ou rotao do objecto e tambm distorc-lo em ambas as direces. Construa um objecto qualquer e com o rato carregue duas vezes na regio de fill deste para o seleccionar. Na barra de ferramentas 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 smbolos para representar as diversas operaes que pode realizar, nomeadamente, ajuste da largura, ajuste da altura, rotao, distoro horizontal e distoro vertical. Veja na figura abaixo os smbolos existentes.

76

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Para realizar uma destas funes basta clicar quando o cone desejado surgir e mover o rato para a direco ou direces que o cone indicar.

OBSERVAO
No modo normal o FREE TRANSFORM TOOL utiliza o canto esquerdo inferior da seleco como o centro para as transformaes. Se mantiver o ALT carregado durante o processo, passa a ser considerado o centro real da seleco. Com o SHIFT carregado, a escala feita mantendo-se as propores. Se utilizar o CONTROL e arrastar um dos cantos da seleco, poder distorcer o objecto!

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

ENVELOPE
A funo ENVELOPE serve para distorcer um determinado objecto e mold-lo forma pretendida, de forma suave. Se seleccionar um

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

77

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

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

78

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

SUBTRACO DE FORMAS
Pela utilizao de algumas regras simples poder combinar ou subtrair formas para criar outras novas. Por exemplo, se quer fazer um furo num

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

79

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

Objecto original

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

80

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

UNIO DE FORMAS
Para fazer uma unio de duas ou mais formas, o princpio exactamente o mesmo descrito na seco anterior sobre SUBTRACO DE FORMAS. Porm, deve desenhar os objectos com a mesma cor do objecto original. Assim, se tem um objecto original azul com a borda cinza deve utilizar objectos com estas mesmas cores ao criar as novas formas. Veja o exemplo abaixo. Primeiro desenhamos o objecto visto na figura abaixo.

Para melhor unir os objectos que sero desenhados em seguida, utilizamos a Arrow Tool para seleccionar a linha de borda do objecto, que apagada em seguida. Assim, ficamos apenas com o rectngulo interno.

Desenharemos agora por cima deste rectngulo, algumas outras formas, at obter o resultado seguinte.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

81

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

Para voltar a ter a linha de borda, nesta altura, que corresponda ao contorno do objecto como um todo, seleccione o INK BOTTLE TOOL e carregue com o rato na regio da borda do objecto. Assim, obter o objecto da prxima pgina.

82

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Fill Transform Tool


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

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

83

Ink Bottle Tool &

Paint Bucket Tool

Os dois prximos cones na barra de ferramentas so o INK BOTTLE TOOL e o PAINT BUCKET TOOL. Com o INK BOTTLE TOOL, cujo cone um tinteiro, possvel colorir as linhas de contorno das formas. Para tal, seleccione-o, ajuste os parmetros nas propriedades visveis na parte central inferior do ecr13 e aplique o tinteiro sobre a linha a colorir. J o PAINT BUCKET TOOL, cujo cone um balde, permite mudar a cor de preenchimento de um objecto. No caso de ter sido escolhido um gradiente para preenchimento, o ponto onde carregar com o balde no objecto determinar o incio do gradiente. Na figura abaixo veja quatro figuras criadas com o mesmo gradiente onde apenas se variou o ponto inicial 14.

Ao seleccionar o balde entretanto vai ver que a janela OPTIONS da barra de ferramentas mostra o cone de um crculo azul com uma seta diagonal para baixo. Se carregar neste cone vai ver que uma pequena janela surge com vrias opes. Veja a seguir.

13

Que so as mesmas j descritas anteriormente para as linhas, no incio deste captulo.

14

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

84

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Estas opes causam os seguintes efeitos. DONT CLOSE GAPS Se por acaso a forma que estiver a preencher tiver alguma falha ou buraco intencional na rea de FILL e escolher esta opo, ento o preenchimento de cor ou gradiente feito e deixa intactas tanto falhas como reas de furo. CLOSE SMALL GAPS Esta funo preenche as reas de FILL de objectos mas preenche tambm as reas com falhas ou buracos intencionais. Serve para corrigir reas de fill que por acaso estejam com problemas. S consegue corrigir as reas de pequena dimenso. CLOSE MEDIUM GAPS Esta funo igual anterior mas consegue corrigir reas com falhas e furos de mdio tamanho. CLOSE LARGE GAPS Esta funo igual anterior mas consegue corrigir reas com falhas e furos de grande tamanho.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

85

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

LOCK FILL LIGADO

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

86

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Eyedropper Tool
O EYEDROPPER TOOL, cujo cone uma pipeta, o prximo cone da barra de ferramentas, cuja funo permitir capturar a cor ou gradiente de preenchimento de um determinado objecto. Basta seleccion-lo e carregar na rea de fill de um objecto para fazer a captura.

Eraser Tool
O ERASER TOOL o prximo cone na barra de ferramentas. Com ele possvel apagar regies dos objectos, sejam linhas ou reas de preenchimento. Uma vez seleccionada esta ferramenta, surgiro parmetros na janela de options da barra de ferramentas, conforme a figura abaixo.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

87

No ERASE MODE, pode ver que existem diversos modos. So eles: ERASE NORMAL Este o modo normal. medida em que desloca o pincel, ele vai apagar todas as regies por onde passar. ERASE FILLS Neste modo somente as reas de fill so apagadas. As linhas de contorno so deixadas intactas. ERASE LINES Este exactamente o inverso do anterior, ou seja, as linhas de contorno so apagadas e as reas de fill so deixadas intactas. ERASE SELECTED FILLS Apenas apaga as regies de fill dos objectos que estejam seleccionados. ERASE INSIDE Apenas apaga as regies de fill que sejam as mesmas correspondentes ao ponto onde o ERASER TOOL tocou pela primeira vez. Isso quer dizer que, se tiver comeado a apagar, por exemplo, na rea de fill de um crculo, no poder apagar nada que no corresponda a esta rea. Outra janela que se desdobra do OPTIONS a ERASER SHAPE. Nela poder escolher a forma da borracha, redonda ou quadrada, em diversos tamanhos. Tambm est presente o cone de uma torneira ( FAUCET). Com ele poder apagar de uma vez, ou linhas ou reas de fill. Seleccione-o e experimente carregar numa rea destas. De uma vez s a rea 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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Zoom Tool
O ZOOM TOOL permite fazer zoom, ou seja, tornar maior ou menor a rea de trabalho e permitir a visualizao de elementos diminutos. Assim que seleccionado, mostra na janela de options da barra de ferramenta duas opes: ENLARGE e REDUCE. Com elas possvel fazer o aumento ou reduo do desenho, respectivamente. No deve confundir esta funo com aquela para aumentar os objectos de facto. O ZOOM TOOL apenas aumenta e diminui no ecr, para facilitar a visualizao dos objectos, e no modifica o tamanho dos objectos. A sua utilizao simples. Basta escolher uma das duas opes mencionadas no pargrafo anterior e carregar na rea de desenho. Veja a figura abaixo.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

89

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

Nesta janela encontrar vrias cores em pequenos quadrados. So cores pr-ajustadas, prontas a utilizar. Poder acrescentar as s uas prprias cores (ou swatches) a esta janela, para t-las prontas a usar. Para acrescentar uma cor janela de swatches basta criar a cor no COLOR MIXER e depois escolher a opo ADD WATCH no menu disponvel no cone superior direito desta janela. Caso acrescente um swatch pelo COLOR MIXER, ver surgir um novo quadrado com a sua cor na janela COLOR SWATCHES. Gradientes tambm podero 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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

direito da janela ver surgir um menu com algumas funes, as quais explicamos a seguir. DUPLICATE SWATCH poder duplicar um swatch seleccionado se utilizar esta funo. DELETE SWATCH poder eliminar o swatch seleccionado. ADD COLORS Interessante esta funo... com ela poder acrescentar janela de swatches cores que venham de tabelas de cores ou de imagens indexadas como GIFs. excelente se precisar trabalhar numa animao que deva ter cores precisamente escolhidas. REPLACE COLORS importa cores para o swatch que venham de tabelas de cores ou de imagens indexadas como GIFs, exactamente como a funo anterior, porm, a anterior acrescenta as cores importadas janela de swatches, enquanto que esta substitui as que l estavam pelas que esto a ser importadas. LOAD DEFAULT COLORS Faz a janela de swatches voltar ao estado normal ajustado de fbrica. Porm as cores default podem ser mudadas pelo utilizador como veremos a seguir... SAVE COLORS grava num ficheiro as cores que esto na janela de swatches. Pode mais tarde recuper-las atravs das opes ADD COLORS ou REPLACE COLORS. SAVE AS DEFAULT faz o mesmo, porm as cores gravadas passam a ser as cores de fbrica, o que modifica a funo LOAD DEFAULT COLORS, que a partir do uso desta funo passa a chamar s cores gravadas cores default. CLEAR COLORS elimina todas as cores dos swatches. WEB 216 Ajusta os swatches para as famosas 216 cores da Web Safe Palete. Veja o Anexo 2. SORT BY COLOR Ordena os swatches pelas cores.

I.1. A INTERFACE GRFICA E OS FUNDAMENTOS BSICOS

91

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

92

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

I.2. OS MENUS

Neste captulo vamos falar das principais opes dos menus no Flash MX, no abordando porm aqueles comandos bvios inerentes a basicamente todos os programas que correm no Windows ou Mac, uma vez que estes seguem standards comuns a praticamente todos os outros programas prprios destes sistemas operativos; estamo-nos a referir a comandos como FILE OPEN, FILE SAVE, etc.

Os Menus e suas funes

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

New From Template A primeira funo deste menu que nos chama a ateno a NEW FROM TEMPLATE. Ao carregar nela ver a janela a seguir.

94

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Os templates so formatos padronizados para facilitar a sua criao. Pode ver na coluna da esquerda que a Macromedia dividiu os templates por categorias: ads, broadcast, menus, mobile devices, photo slide show, presentation e quiz, que correspondem respectivamente a formatos para a criao de anncios ao estilo dos presentes em pginas de Internet (banners), para desenvolvimento de material para televiso e vdeo, para a criao de pginas com menus, para a criao de pginas para dispositivos mveis, para a criao de slideshows1, para apresentaes comerciais e para questionrios. Um dos templates que poder escolher o BROADCAST (veja a figura seguinte), que j fornece a moldura a servir como guia para a produo de vdeo.

Criao de pginas que mostram imagens em sequncias ao estilo de um projector de slides.

I.2. OS MENUS

95

NOTA
A rea de trabalho para vdeo ou televiso, ou seja, o tamanho do frame, , em PAL, 720 x 576 pixis e em NTSC, 720 x 486 pixis. Porm, quando se est a criar para estes formatos, no se pode considerar toda a rea disponvel na imagem para a composio dos elementos. Isto porque a imagem que se v nos televisores est ampliada ligeiramente em relao ao que transmitido. Assim , se um objecto estiver muito perto da borda, no ser visto. Na imagem acima pode ver um rectngulo maior que diz WORK AREA, mas que indica 720 x 540. Este formato indicado equivale a ao formato NTSC com pixel quadrado. Na prtica, deve criar em 720 x 486 que o formato mais utilizado. Dentro deste rectngulo v outro que diz ACTION SAFE que representa a rea onde deve colocar os objectos e movimento da sua animao. Na verdade, deve fazer a animao ocupar toda a WORK AREA, mas deve ter em mente que qualquer coisa fora da ACTION SAFE corre o risco de no ser vista. Finalmente, v um terceiro rectngulo que diz TITLE SAFE. Esta rea menor representa o local onde deve colocar textos e tudo o que precise ser visto ou lido, como logtipos, etc.

Deve explorar outros templates existentes, como o PhotoSlideShow para a criao de projeces de imagens sequenciais e os da categoria QUIZ, para a criao de questionrios e sondagens.

96

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

NOTA
A biblioteca do Flash uma rea onde esto armazenados todos os smbolos (objectos) criados, alm dos ficheiros que forem importados, como imagens, sons, vdeos e artes vectoriais.

Vista a janela poder arrastar os objectos l existentes para a rea de trabalho. Inclusive no Flash conveniente fazer sempre o menor nmero possvel de objectos e sempre que possvel aproveitar os que j tenha criado para diferentes partes da mesma animao. Se, por exemplo, pretende colocar trs rectngulos, um de cada cor, crie apenas um e da biblioteca arraste-o para a sua rea de desenho e mude a cor de cada um. Desta forma, na animao final o Flash armazenar apenas um smbolo, o que tornar o ficheiro menor. Cada trabalho que criar possui automaticamente a sua prpria biblioteca, mas, enquanto estiver a criar pode ter mais de uma biblioteca aberta, se usar o comando OPEN AS LIBRARY. Por outro lado, o comando IMPORT TO LIBRARY traz todos os objectos da animao que est a importar para a biblioteca do trabalho que est a realizar.

I.2. OS MENUS
Import & Export Movie

97

Estes comandos do menu FILE importam ou exportam a sua animao de e para determinados formatos de ficheiro. Pode importar ou exportar formatos de filme tradicionais como AVI e MOV, ficheiros de som, imagens, sequncias de imagens ou artes vectoriais (FreeHand, Illustrator, etc.), etc. Esta funo bastante til quando se est a utilizar o Flash em conjunto com algum software de edio de vdeo como o Adobe Premiere ou de efeitos visuais como o Combustion ou o After Effects.

QUICKTIME

Por exemplo, se tiver que importar filmes QuickTime para as suas animaes Flash, primeiro deve certificar-se que tem instalado no seu computador o QuickTime Player. Caso contrrio ser impossvel ao Flash importar filmes neste formato. Para fazer download do Player QuickTime deve ir ao site da Apple (www.apple.com) e carregar no link correspondente (visto logo na primeira pgina). Logo em seguida deve ir ao menu FILE > IMPORT e carregar no ficheiro QuickTime (extenso MOV) para o poder importar. Surgir a janela abaixo.

Esta janela contm duas perguntas: a primeira diz EMBED VIDEO IN MACROMEDIA FLASH DOCUMENT . Se escolher esta opo, o filme

98

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.2. OS MENUS

99

A caixa que diz SYNCHRONIZE VIDEO TO MACROMEDIA FLASH DOCUMENT FRAME RATE sincroniza ou no o vdeo importado taxa de frames por segundo (frame rate) da animao Flash onde est a ser importado. Logo abaixo uma outra caixa permite a justar o nmero de frames de vdeo a ser codificados por frames da animao Flash (NUMBER OF VIDEO FRAMES TO ENCODE PER NUMBER OF MACROMEDIA FLASH FRAMES). Geralmente, assim que carregar em OK na janela anterior e iniciar o processo de importao do filme, ver a seguinte janela.

Nela, o Flash est a perguntar se deseja aumentar a quantidade de frames no seu timeline para o tamanho correspondente quantidade de frames do filme aps a converso. Neste caso, 102 frames .

FREEHAND

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

100

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.2. OS MENUS
Na seco OPTIONS ver trs quadros:

101

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

Vai ver que a janela acima possui trs subdivises, nomeadamente FORMATS, FLASH e HTML.

102

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Porm, de todas estas subdivises, as mais importantes so as trs primeiras, as quais falaremos a seguir.

OPO FORMATS JANELA PUBLISHING

Nesta primeira diviso, dever marcar os formatos que pretende produzir. Por defeito, o Flash produz sempre o filme final em SWF e tambm a pgina HTML com os comandos para chamar o filme. Dever notar que enquanto est a trabalhar na sua animao em Flash o ficheiro guardado no disco no formato FLA. Quando finaliza a animao e a publica, o ficheiro tem o formato SWF. exactamente este formato o que visualizado pelo Flash Player directamente no browser. Alm disso, pode pedir a produo de uma imagem GIF, JPEG ou PNG equivalente ao primeiro frame do seu filme.

I.2. OS MENUS

103

Existem tambm disponveis dois formatos especiais chamados 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 distribudos e vistos em mquinas que no possuam o Flash Player, ou colocados em CDROM e DVD.

OPO FLASH JANELA PUBLISHING

Na diviso Flash, controlam-se os parmetros do formato SWF, que o usado na esmagadora maioria dos casos. Para um ficheiro SWF ser visto, preciso que o computador possua o Flash Player, ou no caso de ser inserido numa pgina HTML, o browser precisa do plugin na verso correcta (ver abaixo); destacamos as seguintes opes:

VERSION nesta caixa pode escolher qual a verso de filme Flash que pretende gerar. Se marcar uma verso anterior 6 (Flash MX), muitas das funes no programa sero desligadas e no as poder utilizar, uma vez que no seriam possveis de visualizar numa verso antiga.

104

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

BUG em informtica um erro que um software ou hardware possa ter. Debugging a operao

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

I.2. OS MENUS

105

AUDIO STREAM MP3, 16 Kbps, Mono Se carregar no boto SET poder ajustar de que forma deseja gerar as streams de udio. AUDIO EVENT MP3, 16 Kbps, Mono Se carregar no boto SET poder ajustar de que forma deseja gerar os eventos de udio.

OPO HTML JANELA PUBLISHING

Nesta janela, poder regular as opes do ficheiro HTML a ser gerado para suportar o filme em Flash que est a publicar.

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

106

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Como os filmes em Flash so ficheiros vectoriaisl, estes no possuem um tamanho especfico e

podem ser desenhados a qualquer escala. Logicamente, quanto maior o filme, mais a mquina estar a trabalhar, para conseguir manter o filme em PLAY na velocidade correcta. Ento, como no possvel delimitar o tamanho do filme pelo prprio filme em si, preciso delimit-lo pelo HTML de onde ser executado.

I.2. OS MENUS

107

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

108 VIEW

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

No menu VIEW vai encontrar alguns comandos interessantes, dos quais destacamos os mais relevantes. GoTo No caso de haver mais de uma cena na sua animao Flash, esta funo ir permitir que se desloque directamente para a cena desejada. As opes que ir encontrar neste menu so, alm dos nomes das cenas que tiver criado, FIRST, PREVIOUS, NEXT e LAST, que lhe permitiro ir para a primeira cena, cena anterior, cena posterior e ltima cena respectivamente. Zoom In, Zoom Out e Magnification As duas primeiras funes so bvias e permitem que possa aumentar o nvel de zoom da rea de trabalho, o que em outras palavras corresponderia a ver os objectos mais de perto para poder trabalhar detalhes muito pequenos ou diminuir este nvel respectivamente. MAGNIFICATION permite regular directamente o nvel de zoom adequado mediante a escolha de um dos valores oferecidos. As duas ltimas funes do submenu MAGNIFICATION porm, oferecem as possibilidades de SHOW FRAME e SHOW ALL. Estas duas equivalem a ajustar o nvel de proximidade no ecr para que toda a rea de trabalho esteja visvel e ajustar este mesmo nvel para que toda a rea circundante rea de trabalho esteja visvel tambm - logicamente se existir algum objecto que seja maior que a rea de desenho ou que esteja fora desta. Outlines, Fast, Antialias, Antialias Text Estas quatro funes so responsveis por mostrar os objectos com qualidade inferior no ecr com o propsito de aumentar a velocidade de operao para o caso de estar a lidar com animaes complexas (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 mantm todo o texto em baixa qualidade; ANTIALIAS TEXT a maior qualidade. Tudo mostrado em alta qualidade. RULERS, GRID e GUIDES Estas trs funes equivalem a trs funcionalidades importantes do Flash. RULERS (rguas) Por defeito, as rguas horizontal e vertical esto visveis no ecr. Estas rguas ajudam a que tenha uma ideia do tamanho do objecto que estiver a criar. Veja a figura abaixo.

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

110

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Se accionar a funo SNAP TO GRID, ento medida em que deslocar o rato somente poder criar pontos que estejam contidos nas interseces das linhas do grid. Mesmo que esteja a desenhar mo livre, o Flash estar a interpretar o seu desenho segundo estes pontos do grid. Veja a figura abaixo.

Repare como todos os pontos formadores dos objectos (vrtices) esto localizados nos pontos do grid. Se escolher a opo EDIT GRID vai ver a janela abaixo onde poder ajustar as propriedades do grid.

I.2. OS MENUS

111

Na primeira caixa, logicamente, poder escolher a cor do grid. Logo em seguida pode ver duas caixas: SHOW GRID e SNAP TO GRID, as quais acabamos de descrever. Nas duas caixas seguintes, poder ajustar a distncia entre as linhas horizontais e verticais do grid. Por defeito, estes campos so ajustados em 18 pixis. O ltimo campo, denominado de SNAP ACCURACY, permite ajustar o grau de preciso do acto de colar os pontos ao grid. As opes so da maior preciso para a menor: MUST BE CLOSE, NORMAL, CAN BE DISTANT e ALWAYS SNAP. GUIDES (guias) Os guias so outro auxiliar de desenho que correspondem a linhas horizontais e verticais mostradas por cima da rea de desenho e que o ajudam a se orientar enquanto desenha. Para criar um guia carregue com o boto da direita do rato em cima de uma das rguas, mantenha o boto carregado e mova o rato para a rea de desenho. Depois de criado um guia poder mud-lo para outra posio clicando em cima do guia e arrastando-o para outro stio. No menu VIEW > GUIDES, vai encontrar quatro opes: SHOW GUIDES, LOCK GUIDES, SNAP TO GUIDES e EDIT GUIDES. Na primeira opo pode tornar os guias visveis ou no. Na segunda pode colocar travados os layers para que no possam ser movidos para outro stio. Na terceira opo pode fazer com que os guias possam ter funcionalidade semelhante do grid, ou seja, qualquer ponto clicado nas imediaes do grid seriam colados a este. A ltima opo permite que ajuste a cor do guia e parmetros semelhantes aos que ajustou no grid.

112 MODIFY

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

O menu MODIFY do Flash MX fornece-nos diversas ferramentas para manipular e transformar os objectos (SHAPES). Enc ontraremos ferramentas para suavizao, simplificao, converso de imagens para vectores e muito mais. Vamos a elas. Shape - Soften Fill Edges Este comando chamado SOFTEN FILL EDGES muito importante para criar suavizaes nos contornos das formas. Uma das maiores utilidades para ele a criao de sombras para objectos. Crie ento uma forma qualquer, por exemplo, um crculo no meio da rea de desenho, e carregue duas vezes na sua rea interna para o seleccionar. V ao menu MODIFY > SHAPE > SOFTEN FILL EDGES. Surgir ento a janela a seguir.

No campo DISTANCE poder regular o tamanho da suavizao, em NUMBER OF STEPS a quantidade de nveis que esta suavizao ter e em DIRECTION poder definir a direco da suavizao, para fora (EXPAND) ou para dentro (INSET) da forma. Veja ento o que acontece com o crculo, quando aplicamos uma suavizao com DISTANCE =20 px, NUMBER OF STEPS = 6 e DIRECTION = INSET.

I.2. OS MENUS

113

Se observar a borda com mais cuidado ver o seguinte

114

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

OBSERVAO
Quanto maior a quantidade de nveis na suavizao, melhor a qualidade final e MAIOR o objecto. Por esse motivo, deve saber dos ear os nveis de acordo com o objectivo final para no correr o risco de produzir animaes gigantescas que faam o utilizador desistir de as tentar ver.

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

I.2. OS MENUS
Expand Fill

115

Um comando EXPAND FILL est presente dentro do menu MODIFY > SHAPE e serve para permitir a expanso ou contraco de uma rea de pintura de um objecto. Ao ser accionado mostra a janela abaixo.

Nesta janela poder regular o tamanho da expanso (DISTANCE) e a direco (DIRECTION), no sentido de expandir (EXPAND) ou contrair (INSET ) o shape.

OBSERVAO
Algumas formas com cantos em bico ou larguras muito finas no se saem bem durante uma expanso ou compresso.

Smooth No menu MODIFY, vai encontrar a funo SMOOTH. Com ela poder suavizar formas para que fiquem com uma aparncia mais arredondada. Isso pode ser til para corrigir formas muito irregulares.

OBSERVAO
Algumas formas com cantos em bico ou larguras muito finas no se saem bem durante um SMOOTH.

116

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Depois de repetidos SMOOTHs as letras ficaram da seguinte forma.

OBSERVAO
Para transformar uma letra numa forma e assim poder fazer as operaes existentes para as formas, preciso seleccion-las e quebr-las duas vezes com o comando MODIFY > BREAK APART.

Straighten Ainda no menu MODIFY encontramos outra funo designada STRAIGHTEN, que faz exactamente o oposto do SMOOTH, ou seja, tira a suavizao. Linhas outrora curvas e suaves passam a rectas em 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 tambm encontramos o comando OPTIMIZE. Com ele possvel simplificar uma forma existente para algo com menos pontos e consequentemente mais leve. Digamos que tenha transformado uma imagem em vectorial. Porm, durante a converso, o objecto final ficou com um nmero muito grande de pontos o que o tornou deveras pesado para ser colocado na animao. Ento, pode tentar uma simplificao dos pontos por meio deste comando. Assim que accionado o comando, surge a janela a seguir.

Pode ver uma barra deslizante (slider) no meio da janela de SMOOTHING. Esta barra regula o grau de suavizao que o SHAPE ter durante a optimizao. Se a deslocar para a esquerda n enhuma optimizao ser feita, e para a direita teremos o grau mximo de optimizao. A seguir vemos um quadro que diz USE MULTIPLE PASSES (SLOWER). Ao marc-lo obrigar o Flash a fazer vrias optimizaes

118

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

A explicao para cada um dos campos vistos na janela acima est a seguir.

I.2. OS MENUS

119

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

120

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Depois de transformada, a imagem fica com a aparncia abaixo.

O que deve notar agora que cada parte da imagem vectorial e pode ser movida, deslocada, animada, mudada de cor ou sofrer qualquer outro tipo de transformao prpria a um objecto que puder ser feita no Flash. Veja a imagem abaixo.

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

I.2. OS MENUS

121

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

As primeiras seis funes deste menu so nossas conhecidas, disponveis 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 horrio ou anti-horrio, respectivamente. FLIP VERTICAL e FLIP HORIZONTAL permitem girar o objecto 180 graus em relao a um eixo imaginrio vertical ou horizontal, respectivamente, que passe pelo centro do objecto. Por outras palavras, corresponde a espelhar em relao a estes eixos.

122

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

BRING TO FRONT Esta opo permite trazer um objecto para a frente de todos os objectos dentro de um layer. BRING FORWARD Se imaginar vrios objectos desenhados n um mesmo layer, vai ter de ter em mente que o Flash mantm cada um num nvel diferente, como os degraus de uma escada. Ento, se um objecto est num nvel superior, ele aparece desenhado por cima de um com nvel inferior, como se estivessem empilhados uns por cima dos outros. Assim, cada vez que usar o comando BRING FORWARD, estar a fazer um objecto subir um nvel ou degrau dessa escada. SEND BACKWARD Esta funo faz exactamente o inverso da anterior. SEND TO BACK Faz um objecto ir imediatamente para a posio mais abaixo de todos os outros.

I.2. OS MENUS

123

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

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

124

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

mais esquerda estiver. Caso TO STAGE esteja ligado, ento os objectos seleccionados so alinhados esquerda da rea de desenho. CENTER VERTICAL - Este comando leva em conta o ponto superior do objecto que estiver mais acima e o ponto inferior do objecto que estiver mais abaixo. Assim, calcula o ponto mdio e alinha os centros verticais4 de cada objecto segundo este ponto. Caso TO STAGE esteja ligado, ento os objectos so alinhados ao centro vertical da rea de desenho. RIGHT Alinha todos os objectos seleccionados pelos seus pontos mais direita. Toma como referncia para o alinhamento o objecto que mais direita estiver. Caso TO STAGE esteja ligado, ento os objectos seleccionados so alinhados direita da rea de desenho. TOP - Alinha todos os objectos seleccionados ao topo, tomando como base o ponto mais superior do objecto que estiver mais acima. Caso TO STAGE esteja ligado, ento os objectos so alinhados ao topo da rea de desenho. CENTER HORIZONTA Este comando leva em conta o ponto mais L esquerda do objecto mais esquerda e o ponto mais direita do objecto mais direita para efectuar o clculo. Calcula o ponto mdio e alinha os centros horizontais de cada objecto segundo este ponto. Caso TO STAGE esteja ligado, ento os objectos so alinhados ao centro horizontal da rea de desenho. BOTTOM - Alinha todos os objectos seleccionados pelos pontos inferiores de cada objecto. Caso TO STAGE esteja ligado, ento os objectos so alinhado ao fundo da rea de desenho. DISTRIBUTE WIDTHS - Este comando leva em conta o objecto que estiver mais esquerda e o que estiver mais direita para descobrir a quantidade de pixis existente no intervalo. Assim, distribui os centros horizontais dos outros objectos para que fiquem igualmente espaados nesta direco. Caso TO STAGE esteja ligado, ento a largura da rea

O centro do objecto onde est o eixo central deste.

I.2. OS MENUS

125

de desenho passa a ser a quantidade de pixis disponveis para espaar os objectos. DISTRIBUTES HEIGHTS Este comando leva em conta o objecto que estiver mais acima e o que estiver mais abaixo para descobrir a quantidade de pixis existente no intervalo. Desse modo, distribui os centros verticais dos outros objectos para que fiquem igualmente espaados nesta direco. Caso TO STAGE esteja ligado, ento a altura da rea de desenho passa a ser a quantidade de pixis disponveis para espaar os objectos.

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

MAKE SAME HEIGHT - Faz com que todos os objectos fiquem com a mesma altura. Toma como base o objecto mais alto. Caso TO STAGE esteja ligado, ento os objectos passam a ter a altura da rea de desenho. Tambm existe outro menu no Flash onde poder encontrar os mesmos comandos de alinhamento sobre os quais acabamos de falar. Basta que v ao menu WINDOW e escolha a opo ALIGN, depois do que ver surgir a janela que colocamos na figura abaixo juntamente com as explicaes de cada cone. at prefervel que passe a utilizar o ALIGN disponvel pelo accionamento deste comando, uma vez que este contm mais opes disponveis.

126

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.2. OS MENUS

127

SPACE EVENLY VERTICALLY Espaa por igual os objectos na vertical. SPACE EVENLY HORIZONTALLY Espaa por igual os objectos na horizontal. Group & Ungroup GROUP e UNGROUP so dois itens tambm presentes no menu MODIFY. Com estes dois comandos poder agrupar ou desagrupar objectos. Quando cria objectos com as ferramentas de desenho do Flash, deve lembrar-se que estes geralmente so formados por uma linha que delimita o seu contorno (LINE) e por uma rea interior preenchida por uma cor ou gradiente (FILL). Se deseja fazer alguma operao de alinhamento, de mudana de ordem de desenho (arrange), etc., primeiro preciso agrupar LINE e FILL pelo uso do comando GROUP. Este comando tambm til quando tem vrios objectos criados no mesmo layer e quer agrup-los no sentido de os animar mais 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 transformao de cada elemento na sua forma mais bsica, ou seja, cada objecto volta a ser a sua borda e rea de cor (line & fill). Este comando essencial para os casos de desejar fazer operaes com letras e formas, como utilizar o formato da letra para fazer um furo num objecto. Se for este o caso, dever partir antes as letras em LINE e FILL com o uso desta funo. Deve notar que quando faz o primeiro BREAK APART numa palavra, primeiro obtm a separao de cada letra da palavra, que se torna uma forma em separado. O segundo BREAK APART transforma tudo em LINE & FILL. Uma vez que a letra tenha sido transformada na sua forma

128

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

mais bsica no mais poder ser editada com a ferramenta de texto, j que nesta altura passou a ser um desenho e perdeu a sua propriedade de ser letra e a consequente capacidade de ser editada.

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

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

I.3. LAYERS, TIMELINE e ANIMAO

Antes de saber fazer animaes no Flash preciso entender o que o timeline e saber lidar com os layers (camadas).

Layers
O Flash utiliza na sua forma de trabalho o conceito dos objectos dispostos em layers, como comum nos melhores softwares de desenho e edio grfica disponveis no mercado. Os layers so como folhas de acetato transparentes, sobrepostas, onde poder criar objectos estticos ou animados. Desta forma, cada layer fica independente de todos os outros. Os layers so representados no timeline, conforme a figura abaixo.

130

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.3. LAYERS, TIMELINE E ANIMAO

131

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

Ento poder organizar os seus layers como na figura abaixo.

132

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Olho, Cadeado e Quadrado Colorido


Se observar cuidadosamente a janela do timeline vai ver que existem trs colunas na parte dos layers: Uma representada por um olho, outra por um cadeado e a ltima por quadrados coloridos.

I.3. LAYERS, TIMELINE E ANIMAO


Pode ver pela figura abaixo, a funo de cada um destes cones.

133

OLHO (show/hide layer)


Esta coluna representa a visibilidade d um layer. Se contiver uma e bolinha na linha do layer, significa que este est visvel. Se um X estiver presente, sinal que o layer est invisvel.

CADEADO (lock/unlock layer)


Esta coluna representa o bloqueio do layer. Se uma bolinha estiver presente na linha do layer, significa que o layer est desbloqueado. Caso um cadeado esteja presente, o layer est bloqueado. Isto significa que no pode ser seleccionado na janela de desenhos. A funo til quando precisamos impedir que um layer seja seleccionado na janela de desenhos, quando estivermos a trabalhar em animaes intrincadas.

134

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

QUADRADO COLORIDO (show layer as outline)


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

ficam assim...

I.3. LAYERS, TIMELINE E ANIMAO

135

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

DICA
Para aplicar de uma s vez as propriedades referentes ao olho, cadeado ou outline a todos os layers da animao, basta carregar no smbolo correspondente no alto da coluna.

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

O termo imagens por segundo tambm conhecido como quadros por segundo, ou frames , do ingls. Normalmente usa-se a sigla fps para representar esta grandeza, que significa frames per second.

Tudo o que feito no FLASH tem o nome de filme. A rea de desenho tambm conhecida

como stage (palco).

136

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Agora imagine que deseja construir um crculo e faz-lo aumentar de tamanho em dois segundos. Ento, se est a trabalhar a 12 fps, teoricamente deveria criar 24 desenhos do crculo, para causar a iluso de que ele aumenta de tamanho. Porm, para facilitar a sua vida, o Flash permite o uso de keyframes para a criao das animaes. Um keyframe um frame chave que define um estado em particular do objecto num dado momento no tempo.

KEYFRAMES - representao no timeline


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

O timeline uma das principais partes da interface grfica do Flash. nele que ocorrem todas as aces, interaces e movimentaes dos objectos. Os keyframes so a chave para tudo isso ocorrer.

Estes frames intermdios so conhecidos como in between e o acto de fazer o clculo deles

conhecido como tweening.

I.3. LAYERS, TIMELINE E ANIMAO ACTIONSCRIPT representao no timeline

137

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

LABELS representao no timeline


Existe ainda uma terceira coisa que pode estar presente no timeline: um LABEL. Um LABEL uma etiqueta ou nome, que um determinado frame pode ter. Dar um nome em particular a um frame da animao pode ser interessante para quando se est a criar programas em ActionScript, pois pode-se posteriormente referenciar o frame por nomes como rua, casa, final, etc. e no pelo seu nmero. Imagine a confuso que referenciar dezenas de frames de uma animao pelos nmeros. Vemos por esse motivo que o label uma funcionalidade deveras poderosa. Alm do mais, caso precise alterar algo da animao que venha a mudar os frames antes considerados, teria um trabalho redobrado em actualizar nos outros pontos da animao todas as referncias aos frames alterados. Para acrescentar um label a um frame simplesmente posicione o rato num frame ou regio que j exista no timeline e v janela de propriedades.

138

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Em seguida carregue no quadro que diz <Frame Label> e coloque um nome qualquer. Assim que o fizer, o timeline passa a mostrar a indicao da existncia do label pela colocao de uma pequena bandeira vermelha com o label no local apropriado.

A seguir ento vamos passar a uma primeira simples animao, para que se familiarize com o uso do timeline e com a criao de keyframes. O uso da opo Named Anchor juntamente com a label, permitir que o boto back e forward do browser interajam com o filme. Para utilizar esta capacidade, preciso seleccionar o template Flash with Named Anchors na janela HTML do PUBLISH SETTINGS.

I.3. LAYERS, TIMELINE E ANIMAO

139

A Animao frame-a-frame
Pode pensar na primeira animao que ir realizar aquela na qual determina a posio de todos os objectos em cada um dos frames da animao. Assim, se tem trs frames no total, deve mostrar ao Flash onde quer cada objecto para que a animao seja feita correctamente. Ento podemos comear por algo simples. Imagine que deseja fazer um quadrado a girar e diminuir de tamanho sem que mude de lugar. Comece ento por desenhar um quadrado com a ferramenta 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 prxima etapa transformar esse shape que criou em smbolo4. 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 ento uma janela surgir que deve preencher e marcar conforme mostrado na figura abaixo.

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

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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Esta operao vai criar um novo keyframe no frame 2 da animao, que ficar conforme visto abaixo.

I.3. LAYERS, TIMELINE E ANIMAO

141

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

Repare que existe uma bolinha a marcar o frame 1 e outra a marcar o 2. sinal de que existem dois keyframes criados para o objecto neste 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 smbolo representativo de que est prestes a efectuar uma rotao no objecto, conforme visto a seguir.

142

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Repita o procedimento de criao de keyframe para criar o frame 3 da animao e novamente transforme o objecto para que fique conforme a figura abaixo.

I.3. LAYERS, TIMELINE E ANIMAO

143

Ento ter uma animao correspondente a 3 frames.

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

ao estilo das animaes feitas em vdeo ou pelcula com personagens criadas a partir de massas

de modelar.

144

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

animao7. Ento, se o seu filme est a correr a uma taxa de 12 fps, ter de criar 12 imagens para ter 1 segundo de filme. Os programas que transformam vdeos em Flash, ou que fazem efeitos para o Flash, geralmente fornecem sadas em ficheiros com tudo colocado frame-a-frame. No caso de um vdeo at lgico j que o prprio vdeo em si composto de imagens diferentes frame a frame.

A Animao Motion Tween


A animao do tipo MOTION TWEEN justamente aquela que referimos na seco anterior, como sendo a que permite criar animaes sem exigir a criao de todos os keyframes que correspondem ao seu tempo total. A animao motion tween utiliza o conceito de TWEENING para criar o movimento entre os keyframes base. Assim, se um objecto tem no frame 1 o tamanho de 100 e no frame 30 o tamanho de 10, o programa saber fazer os clculos necessrios para deduzir o tamanho do objecto ao longo dos frames. Desse modo, ao assistirmos a tal filme, veramos o objecto a diminuir de tamanho de 100 para 10 ao longo de 30 frames. Vamos ento criar uma animao deste tipo para ver como funciona. Carregue em FILE > NEW para iniciar um novo filme. Com a ferramenta de criao de ovais na barra de ferramentas crie um crculo de mdio tamanho no centro da rea de desenho. Carregue no ponto preto que simboliza o frame 1 no timeline para seleccionar as duas partes componentes do crculo. Carregue em INSERT > CONVERT TO SYMBOL para transformar os objectos em smbolos e acrescent-los biblioteca8 (falaremos sobre bibliotecas mais adiante).

Vai ver na prxima seco que possvel criar animaes sem ter de criar todos os keyframes .

Deve observar que s possvel fazer animaes motion tween de smbolos e no de grupos, por

isso tivemos que transformar o crculo, at ento apenas um shape, em smbolo.

I.3. LAYERS, TIMELINE E ANIMAO

145

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

Mova o rato at que fique sobre o frame 30 no timeline e carregue no boto da direita. No menu que surgir, escolha a opo INSERT KEYFRAME. O timeline ficar com a aparncia 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 alteraes no tamanho e na aparncia do objecto. Se olhar agora para a rea de desenho vai ver que o crculo est seleccionado e que um quadrado preto com pontos est volta. Veja a seguir.

146

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.3. LAYERS, TIMELINE E ANIMAO

147

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

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

NOTA IMPORTANTE
Cuidado que este tipo de animao s funciona se no layer em questo estiver um nico objecto ou grupo de objectos, como fizemos neste exemplo. No entanto, a situao ideal usar um nico smbolo da Library que ser estudada mais tarde.

Ease In & Ease Out (o controlo do movimento)


Repare na figura relativa s propriedades do frame, que existe uma caixa EASE. Esta varivel controla a forma na qual feita a distribuio da animao ao longo do intervalo de keyframes . Em termos gerais, a varivel regula a forma como a animao chega ou sai de um determinado keyframe. Tecnicamente so conhecidas pelos nomes de EASE IN e EASE OUT.

148

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.3. LAYERS, TIMELINE E ANIMAO

149

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

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

150

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

A vantagem de ser permitido este tipo de ajuste reside no facto de que s vezes preciso criar movimentos acelerados e desacelerados, como o movimento de pndulos ou de bolas que saltam. uma funo til que, se bem entendida, pode ajudar a melhorar a qualidade das animaes produzidas.

Como que o Flash interpreta uma animao?


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

se no for dada nenhuma ordem para que ele actue de forma diferente.

I.3. LAYERS, TIMELINE E ANIMAO

151

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

FRAME(S) 1 at 5 6 at 15

ACO O fumo comea 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 animao equivaleria imagem abaixo.

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

152

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Podero as suas animaes ser compostas por inmeros objectos, animados ou no, interactivos ou no, de qualquer tipo, como filmes dentro de filmes, objectos dentro de objectos, filmes em AVI ou QuickTime, sons, desenhos, etc. No h limite terico para o que pode fazer a no ser o tamanho que o ficheiro final da animao possa ter e, este sim , pode representar um empecilho pelo tempo que demorar a carregar se for via Internet ou requisitos de sistema para poder ser executado conforme planeado. Digamos, por exemplo, que fez uma animao a usar o desenho de uma paisagem campestre de fundo. Por cima deste desenho cria a animao de um sol a nascer e a pr-se. Esta animao tem 200 fra-

I.3. LAYERS, TIMELINE E ANIMAO

153

mes e cclica, ou seja, ao atingir o ltimo frame retorna ao primeiro e repete-se. Porm, no frame 80 desta animao faz surgir uma ovelha que cruza a cena em 40 frames. A ovelha um objecto independente e possui uma animao prpria, de 8 frames , correspondente ao movimento das suas patas como se estivesse a andar. Este movimento tambm cclico. Alm disso, no frame 1 da ovelha coloca o incio do som correspondente ao balir desta. Desta forma, de cada vez que a animao da ovelha comear ser ouvido o som. Como a ovelha est presente durante 40 frames da cena inicial, que o tempo da sua animao contra o fundo, ento automaticamente a sua animao repetir-se- cinco vezes (8 frames x 5 = 40). Imagine que podia pegar no objecto ovelha com a mo e suspend-lo no ar. Veria ento a ovelha com as patinhas a andar. Ento, poderia pegar este objecto e anim-lo contra o fundo e teria sempre as patas a andar independente do outro movimento que fizesse com o objecto. Como v, o objecto tem as suas propriedades e animaes contidas em si prprio.

Animao de formas (shape animation)


Alm do tipo de animao convencional, no qual animado algum parmetro do objecto, como tamanho, posio, rotao, cor, etc., existe um outro tipo particular de animao conhecida pelo nome de SHAPE ANIMATION (animao de forma). Nela, em vez de fazer um objecto deslocar-se de um ponto a outro ou aumentar de tamanho, fazmo-lo mudar de forma. As animaes desse tipo, na realidade, ocorrem por uma animao de movimento dos pontos (sub-objectos) que formam os objectos. Este tipo de animao deve ser usado com cuidado, j que aumenta muito o tamanho final do filme. Para comear uma animao de forma, inicie um novo filme em branco (FILE > NEW) e com a ferramenta de criao de ovais crie um crculo de mdio tamanho no centro da rea de desenho.

154

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

10

conhecidos como ns (nodes), pontos de controlo (control points) ou simplesmente vrtices.

I.3. LAYERS, TIMELINE E ANIMAO

155

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

Pronto! O que acabou de fazer foi modificar a forma do crculo para uma estrela. Porm, como est a trabalhar no frame 30, o que fez foi modificar a forma do crculo apenas nesse frame. Se voltar ao frame 1 vai ver que ele ainda tem a mesma forma naquele ponto. Tem ento agora duas formas: um crculo no frame 1 e uma estrela no 30. preciso agora fazer esses dois frames tornarem-se uma animao de forma. Carregue na bolinha correspondente ao frame 1 (incio da animao) e nas propriedades do objecto visveis na parte central inferior do ecr e mude o campo TWEEN para SHAPE.

Assim que fizer isto vai ver que o timeline ficou verde no intervalo de 1 a 30 e surgiu uma seta a indicar a presena de uma animao neste intervalo. Por causa da cor verde sabe-se que se trata de uma animao de forma. Carregue no rectngulo rosa na rea numrica do time-

156

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

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

I.3. LAYERS, TIMELINE E ANIMAO

157

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

158

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Se reparar nos frames de 6 a 9, vai ver que houve um problema na transformao. Parte do shape entra sobre si mesma, criando buracos. Alm do mais, a animao ocorre de forma pouco agradvel. O objecto fica estranho, amassado, durante o processo. A nica maneira de resolver isso inserir SHAPE HINTS, para mostrar ao Flash de que forma deve ser feita a transformao. O SHAPE HINT funciona segundo a seguinte filosofia: vai-se ao primeiro frame de uma animao de forma e posiciona-se um SHAPE HINT para indicar uma determinada regio de um objecto. Depois, vai-se ao frame final da mesma transformao e move-se o SHAPE HINT para a regio final. Desta forma, o Flash saber que a regio marcada com o SHAPE HINT no primeiro frame a que deve ser transformada para a indicada no mesmo SHAPE HINT no frame final. Os SHAPE HINTS, quando acrescentados, so representados por pequenos crculos coloridos com uma letra no interior. As cores utilizadas so o amarelo para representar o HINT inicial e o verde para representar o final. Caso esteja vermelho significa que o HINT em questo est mal posicionado. Vamos ento correco da animao anterior pelo uso de SHAPE HINTS.

CRIAO DO SHAPE HINT...


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

I.3. LAYERS, TIMELINE E ANIMAO

159

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

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

No Shape inicial...

160

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.3. LAYERS, TIMELINE E ANIMAO

161

Na prtica, o que aconteceu foi o movimento das regies conforme indicado a seguir.

Para os pontos A, B e C...

162

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Animao com Motion Guide


MOTION GUIDE uma possibilidade interessante que o Flash nos oferece para a criao de animaes: fazer com que objectos sigam caminhos (paths) especficos definidos por curvas. Digamos ento que tem o objecto ao lado e que gostaria de o fazer percorrer o caminho indicado na figura seguinte.

I.3. LAYERS, TIMELINE E ANIMAO

163

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

Neste layer GUIDE: AVIO desenhe a curva que deseja utilizar como caminho. V barra de ferramentas e escolha a pena (PEN) para desenhar o caminho. Depois disso, posicione o avio da maneira e no local onde iniciar o movimento.

164

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

No timeline, carregue na bolinha correspondente ao frame 1 do avio e, com o boto pressionado, mova o rato na horizontal at ao frame 30. Solte o boto do rato. Posicione o rato na rea seleccionada e carregue no boto da direita. Escolha a opo CREATE MOTION TWEEN. Isso vai fazer a animao do avio do frame 1 ao 30. Se movimentar a barra de tempo no timeline vai notar que agora o avio j percorre o caminho. Porm, ainda no est orientado segundo o que seria a maneira correcta de movimento.

NOTA
No h necessidade do frame 30 para o guia do avio para que a animao funcione correctamente quando finalizada. Porm , importante que este frame esteja presente durante a construo da animao, para que possa visualizar correctamente o caminho. Assim que for finalizar o filme, elimine os frames desnecessrios do guia mantendo apenas o primeiro. Assim, o timeline ficar com a aparncia abaixo.

I.3. LAYERS, TIMELINE E ANIMAO

165

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

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

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

166

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Mscaras
As mscaras so objectos colocados em layers especiais que limitam a visibilidade de um determinado layer. Digamos que possui o objecto mostrado na figura abaixo e que ele est presente na sua animao por diversas vezes.

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

Poderia criar uma cpia deste objecto eliminando as partes no desejadas. Porm, uma segunda cpia do objecto na animao significa au-

I.3. LAYERS, TIMELINE E ANIMAO

167

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

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

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

Neste caso ento, criaria um layer acima do layer do objecto, e a desenharia uma mscara oval, para limitar o tamanho do objecto. Finalizado o desenho da mscara, basta carregar com o boto da direita em cima do nome do layer no timeline e escolher a opo MASK.

168

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.3. LAYERS, TIMELINE E ANIMAO

169

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

Se por acaso reduzssemos a oval da mscara ligeiramente, poderamos obter o seguinte efeito.

170

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.3. LAYERS, TIMELINE E ANIMAO LAYER DO TIPO GUIDE

171

Se carregar com o boto da direita em cima do nome de um layer e escolher a opo PROPERTIES, vai ver a janela a seguir.

Pode ver pelo campo TYPE que existem diversos tipos de layer, dos quais j falamos, com a excepo do GUIDE. Este tipo de layer no visvel na animao final. S visto durante a construo. exactamente o que o nome diz, um GUIA, para criar as suas animaes, como linhas para orientao ou imagens/objectos que precise colocar em cena apenas para que o possam orientar durante a criao da animao.

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

172

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Repare que a caixa SOUND mostra o nome do ficheiro. Effect (efeitos sonoros) Na caixa EFFECT v a palavra NONE. As opes nesta caixa so: LEFT CHANNEL, RIGHT CHANNEL, FADE LEFT TO RIGHT, FADE RIGHT TO LEFT, FADE IN, FADE OUT e CUSTOM, cujas explicaes se encontram a seguir. LEFT CHANNEL faz com que somente o canal esquerdo seja ouvido (no caso de ser um ficheiro estreo). RIGHT CHANNEL faz com que somente o canal direito seja ouvido (no caso de ser um ficheiro estreo). FADE LEFT TO RIGHT faz com que o som comece no canal esquerdo e progressivamente v passando ao direito onde terminar.

I.3. LAYERS, TIMELINE E ANIMAO

173

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

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

174

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

A explicao para o que acontece na figura acima a seguinte. CANAL ESQUERDO - O volume comea a zero e sobe at ao mximo, decaindo em seguida at um valor baixo, onde fica constante at 0,5s e torna a subir at ao mximo, mantendo-se constante at ao final. CANAL DIREITO O volume comea a zero e sobe at ao mximo, decaindo em seguida at aproximadamente 70% do mximo, onde permanece at ao final.

I.3. LAYERS, TIMELINE E ANIMAO

175

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

Sync (tipo de sincronismo de som) De volta janela de propriedades do som, pode ver o campo SYNC, o qual apesar de inicialmente marcado com a opo EVENT, permite tambm escolher START, STOP e STREAM. A explicao para cada opo dada a seguir.

EVENT

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

176
START

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

STOP

Esta opo impede que o som seja ouvido. A principal utilidade deste evento parar sons que se tenham iniciado com o start ou event. Por exemplo, um loop que sirva de msica de fundo.

STREAM

Esta opo extremamente til quando se est a lidar com msicas ou sons que precisem ficar sncronos com as animaes 11. Quando possuir um som associado a um vdeo e esta opo estiver ligada, ento o Flash ao mostrar a sua produo dar sempre prioridade ao udio em detrimento do vdeo. Far tudo para manter a sincronia e mostrar os frames no momento certo. Como precisa manter o udio a tocar continuamente sem intervalos, vai deitar fora frames da animao, caso a mquina onde esteja a correr no seja capaz de mostrar a animao como seria preciso. Depois de muito produzir para o mercado audiovisual chega-se concluso de que menos incmodo ter frames de vdeo eliminados e o udio a correr bem, a ver a animao a correr cer-

11

Na minha opinio esta deveria ser a opo por defeito j que a mais importante!

I.3. LAYERS, TIMELINE E ANIMAO

177

ta e o udio a engasgar. Quando o vdeo falha ligeiramente, o utilizador tem a impresso de que algo se passou no prprio computador. Quando o udio est a ter problemas, o mesmo utilizador pensa que a animao foi mal dimensionada e pesada demais para ser vista no seu computador. Outro problema que pode ocorrer pela falta de sincronia ter o udio a acabar muito antes do vdeo, caso a mquina no seja rpida o suficiente para mostrar a animao como idealizada. Por isso, deve colocar sempre o udio como STREAM quando precisar de sincronia perfeita. Estes sons so carregados medida que o filme carregado. Inicialmente so carregados apenas 5 segundos de som, que servem de almofada (buffer) para se manterem em memria; medida que o filme decorre, o resto do som carregado. particularmente til para msicas de fundo pesadas.

Como testar as suas animaes


Para saber se as suas animaes esto a funcionar correctamente, deve sempre test-las por meio da funo TEST MOVIE no menu CONTROL. Tambm encontrar por l o comando TEST SCENE, que permite apenas o teste de uma das cenas da animao, caso possua mais de uma. O TEST MOVIE permite visionar a animao final na forma em que ser vista pelo utilizador, seja pela Internet, seja atravs de um CD-ROM ou DVD-ROM que distribuiu. Enquanto que em HTML tradicional o que conta o tamanho final do ficheiro, j que basicamente se trabalham com elementos de tamanho fixo, no Flash alm desta varivel deve ter tambm em considerao o peso que a sua animao pode representar para a mquina em que for correr. Como tudo o que gerado em Flash convertido para informaes vectoriais, preciso usar maior capacidade da mquina para poder desenhar todos os elementos correctamente e nos tempos certos das animaes; ainda mais se contiverem msicas ou sons que

178

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

precisem estar sncronos. Logo, todas as animaes em Flash requerem em menor ou maior grau poder de processamento da mquina. Elementos de tamanhos grandes e com efeitos de transparncias ou degrads, por exemplo, iro requisitar mais processamento da mquina. Se possvel teste as suas animaes na mquina mais modesta que tiver por perto. Se ela conseguir mostrar tudo correctamente um ptimo sinal de que em mquinas mais sofisticadas tudo correr bem.

BANDWIDTH PROFILER

Um outro auxiliar do Flash que poder utilizar para verificar o peso das suas animaes o BANDWIDTH PROFILER. Este mdulo capaz de fazer uma anlise frame a frame da carga da sua animao. Saiba que ao carregar a animao via Internet, por exemplo, a carga ser feita por frames na ordem correcta da animao. Assim, se tiver frames ou conjuntos de frames com uma carga muito grande haver uma demora excessiva quando estes frames tiverem de ser carregados. Isto poder inclusive reflectir um abrandamento da animao durante o play. O ideal que consiga a menor animao possvel e que haja uma distribuio homognea da carga ao longo dos frames da animao a fim de evitar que existam frames com muita carga e outros sem carga alguma que possam interferir no download ou play da animao. Ento poder correr o Bandwidth Profiler para analisar a carga da animao em cada frame. Para isso, primeiro accione o modo de TEST MOVIE do Flash, conforme explicado na seco anterior, e ento no menu VIEW escolha BANDWIDTH PROFILER.

I.3. LAYERS, TIMELINE E ANIMAO

179

Na figura atrs pode ver que a animao em questo tem trs frames, representados pelos pequenos traos verticais na parte de cima das colunas. Cada uma dessas colunas representa a carga do filme em cada um desses frames. A primeira coluna atinge o valor de 8 Kbytes, a segunda atinge aproximadamente 3 Kbytes e a terceira menos de 1 Kbyte. Na seco esquerda da janela pode ver as informaes sobre o filme: tamanho em pixis, taxa de fps, tamanho do ficheiro, quantidade de frames totais da animao e o tempo de carga total do ficheiro (neste caso, 2,6 segundos). No menu DEBUG poder ajustar a velocidade do MODEM ou LINK, para que possa ver como a sua animao seria carregada em diferentes velocidades de download. A linha vermelha que corta horizontalmente os grficos na marca dos 400 Bytes indica o mximo de bytes que poderiam ser trazidos por download para que o frame fosse visto em tempo real. Na prtica, isso significa que se cada frame da animao tivesse no mximo 400 bytes, ento a animao poderia ser puxada da Internet em play normal sem existir nenhum abrandamento na animao. Qualquer valor acima disso causaria um abrandamento do play. Logicamente poder notar isso pelas informaes da coluna da esquerda pois, se a animao tem 3 frames e o Flash est ajustado para PLAY a 12 fps, ento o tempo total de download deveria ser 3/12 segundos. Porm, a janela diz-nos que o tempo total de carga de 2,6 segundos. Por defeito, o Bandwidth Profiler mostra o grfico de carga pelo modo STREAMING, ou seja, a distribuio de carga medida em que feito o download do filme. Se for ao menu VIEW e escolher a opo FRAME BY FRAME GRAPH, ver ento a carga por frame. Outra opo neste menu SHOW STREAMING. Se a accionar vai ver o Flash simular o download do filme na velocidade do MODEM escolhida no menu DEBUG. O primeiro frame de qualquer animao, pela prpria forma como o Flash funciona, geralmente grande. Neste frame so armazenados todos os objectos e smbolos que estaro presentes no filme.

180

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

I.4. SMBOLOS, EFEITOS e BIBLIOTECAS

Quando cria um objecto, seja ele um grfico (graphic), boto (button) ou filme (movie clip) no Flash MX, este colocado em algo chamado biblioteca (library), de onde pode ser recuperado para posterior uso, seja no mesmo projecto, seja em projecto diferente. O Flash MX mantm uma biblioteca para cada projecto que fizer e tambm vem com uma biblioteca com diversos objectos prontos a usar.

As suas prprias bibliotecas


Sempre que estiver a criar pginas ou animaes em Flash de qualquer tipo, deve sempre ter por objectivo conseguir um ficheiro com o menor tamanho possvel que corresponda ao seu trabalho, pois ficheiros menores so mais rpidos a correr e a carregar. Se a animao vai ser vista via Internet mais uma razo para sempre seguir essa regra. Para conseguir isso, dever quase que obrigatoriamente criar e 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 rectngulo vrias vezes num determinado projecto deve criar um rectngulo na biblioteca e de l arrast-lo para todos os pontos onde o for utilizar. Desta forma optimizar e minimizar o tamanho dos seus projectos em Flash, tornando-os menores e mais rpidos. Assim como o Flash tem bibliotecas de objectos, voc tambm poder ter as suas. A vantagem de as ter poder reutilizar objectos previamente criados nas suas animaes em qualquer momento.

182

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Sempre que reutiliza um objecto num projecto, o Flash cria uma instncia deste, que equivale apenas a armazenar informaes acerca de onde e como o objecto est a ser utilizado. Logo, h uma economia de espao uma vez que no precisa armazenar as definies da forma do objecto. Todos os objectos (smbolos) que criar num determinado projecto so automaticamente colocados numa biblioteca prpria referente ao projecto em que estiver a trabalhar. Assim, ao iniciar um novo projecto, poder abrir a biblioteca de um projecto anterior e importar os objectos desejados. Se observar no menu FILE, vai ver um item nomeado OPEN AS LIBRARY. Se o utilizar poder abrir um projecto como uma biblioteca. Faa isso e ver surgir automaticamente a janela correspondente, de onde poder arrastar objectos para o seu projecto actual.

Uma segunda opo no menu FILE a IMPORT TO LIBRARY, que importa a biblioteca de um projecto para a biblioteca na qual est a trabalhar.

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

183

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

Graphics, Button e Movie Clips


Como dissemos, as bibliotecas do Flash MX permitem o armazenamento de trs tipos de smbolos: graphics, movie clips e buttons (grficos, filmes ou botes). Quando cria formas na rea de desenho e sabe que no tero movimento, deve cri-las como sendo GRAPHIC. Os grficos so smbolos estticos como logtipos, imagens de fundo ou elementos que no tero movimento, ou seja, um logtipo esttico pode ser um caso de GRAPHIC mas um boneco a danar no, j que a imagem do boneco modifica-se ao longo do tempo. Um smbolo do tipo GRAPHIC pode entretanto ser animado em tamanho, posio, transparncia ou cor. Um smbolo do tipo MOVIE CLIP, por outro lado, j permite animaes. Enquanto que os GRAPHIC possuem apenas um frame, os MOVIE CLIPS podem ter qualquer quantidade de frames. Ento, se imaginar um MOVIE CLIP como um boneco com as pernas a mexer poder anim-lo a deslocar-se ao longo do ecr sem se preocupar com o movimento das pernas, que j intrnseco ao prprio objecto em si. Os smbolos do tipo BUTTON so os botes ou qualquer outro elemento que deva ter a propriedade de poder ser clicado. Quando o rato encontrar qualquer smbolo deste tipo numa animao automaticamente mostrar que se trata de um elemento clicvel. A definio do tipo do smbolo feita no momento da sua criao ou converso (INSERT > NEW SYMBOL ou INSERT > CONVERT TO SYMBOL), conforme visto na janela a seguir.

184

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

185

Graphic (grficos)
Para criar um smbolo do tipo GRAPHIC no Flash MX, basta ir ao menu INSERT > NEW SYMBOL e, em seguida, desenhar o objecto pretendido. Automaticamente estar a criar uma nova entrada na biblioteca. Em seguida, v a WINDOW > LIBRARY, e faa 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 distoro, animaes, etc. Vai ver que pode fazer com eles o que quiser, com excepo de mudar as cores, com o balde de pintura/tinteiro, ou a forma pelo uso das ferramentas de seleco. Se fizer isto estar a modificar o objecto em si, e todas as cpias deste passaro a ficar com a nova aparncia. Caso precise mudar a cor de uma instncia, a nica forma possvel pelo uso de um efeito, que veremos mais adiante. Porm, o efeito muda a cor do objecto todo em conjunto, ou seja, se possui um objecto com

186

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

diversas cores, ao aplicar um efeito estar a afectar todas as cores deste. Se precisar aplicar mudanas diferentes a cada uma das cores, deve considerar separar as partes do objecto em diferentes smbolos, que depois podero ser agrupados pelo comando GROUPS (CONTROL G) para facilitar a animao ou manipulao deste.

Button (boto)
Criar um boto no Flash um trabalho deveras fcil. Em poucos passos ter o seu a funcionar. Para que seja possvel esta criao basta 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 boto no Flash possui trs estados: UP, OVER e DOWN. O estado UP equivale aparncia que o boto tem quando est normal. Assim que o rato passa por cima deste assumida a aparncia indicada no estado OVER. O estado DOWN representa a aparncia que o boto tem quando nele carregar. Carregue em INSERT > NEW SYMBOL para criar um novo smbolo. Na janela que se seguir nomeie o objecto como boto e ajuste o campo BEHAVIOR para BUTTON.

Vai ver que a rea de desenho fica em branco. Isto porque agora est na rea de desenho do boto. Na parte de cima, o timeline muda de aparncia e passa a mostrar os estados do boto.

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

187

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

Carregue na caixa em branco do timeline, na coluna OVER, e clique com o boto da direita do rato. Escolha a opo INSERT BLANK KEYFRAME para comear a desenhar o novo estado do boto.

188

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

189

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

Movie Clips
Um movie clip um smbolo que em si prprio j um filme, ou seja, possui movimento prprio. Digamos que gostaramos de criar o movimento de uma bola a saltar conforme a figura abaixo.

190

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Ento poderamos imaginar um movie clip como sendo a bola a saltar at encerrar o seu movimento, mas sem se deslocar na horizontal. Em seguida poderia animar o movie clip a deslocar-se na horizontal. Logo, teria uma composio de movimentos que causaria a iluso da bola estar a saltar e a deslocar-se horizontalmente. Veja as figuras abaixo.

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

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

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

191

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

Efeitos de Cor e Transparncia


Existem diversos tipos de efeitos que poder aplicar num determinado objecto da biblioteca, assim que o trouxer para a sua animao. Basicamente, os efeitos relacionam-se com as cores ou com a transparncia 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 opes alm de NONE, nomeadamente, BRIGHTNESS, TINT, ALPHA e ADVANCED. A seguir, vamos explicao de cada uma delas.

192

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

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

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

193

100% cor do objecto original, o que significa que este passa a ter a nova cor. Se colocar 0%, significa que o objecto mantm a sua cor original e no sofre efeito algum de TINT. Alpha O nome ALPHA vem de ALPHA CHANNEL (canal alfa), que a designao mais antiga de que se tem notcia para nomear a informao de transparncia de um material. Se escolher ALPHA como opo de efeito, ver a janela de propriedades com a aparncia abaixo.

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

194

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Se carregar no boto SETTINGS ver ento,

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

OBSERVAO
Logicamente todos os efeitos podem ser animados!

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

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS BUTTONS

195

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

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

196

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

E tambm os do tipo a seguir.

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

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

197

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

A subdiviso COMPONENT BUTTONS ainda lhe traz mais trs botes, o KEYBOARD BUTTON, o PILL BUTTON e o PUSH BUTTON, vistos a seguir.

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

198

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Knobs & Faders Nesta categoria vai encontrar os to desejados botes deslizantes e rotativos para as suas pginas, como os vistos abaixo.

I.4. SMBOLOS, EFEITOS E BIBLIOTECAS

199

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

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

Tambm ter nesta categoria botes como os vistos abaixo.

lgico que depois vai precisar de um pouco de ActionScript para poder ler os valores que o

utilizador ajustar.

200

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Push Buttons Esta ltima categoria traz novamente o boto PUSH BUTTON existente na categoria COMPONENT BUTTONS. Porm, os botes presentes no permitem regular a cor 2. Esto sim presentes em vrias cores pr-ajustadas.

SOUNDS
Outra biblioteca que acompanha o Flash MX e que est de acordo com o objectivo introdutrio deste livro a encontrada em WINDOW > COMMON LIBRARIES > SOUNDS. Ao escolher esta opo far surgir a janela abaixo, que contm diversos sons para que os possa utilizar nas suas animaes.

Pelo menos no sem uso de ActionScript.

I.5. COMPONENTES

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

202

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

A utilizao destes componentes s plenamente aproveitada se tiver subrotinas em ActionScript1 a correr, para ler as propriedades resultantes da interaco dos utilizadores com os componentes e da derivar aces que tornem a pgina mais interessante. Tambm com ActionScript possvel criar componentes on the fly, ou seja, apenas pelo uso da linguagem de programao, sem que estes tenham que estar presentes graficamente nos filmes Flash. A seguir veremos ento cada um destes componentes e as suas funes2.

CheckBox
O CheckBox uma caixa que pode ser marcada ou desmarcada pelo utilizador. Deve ser utilizado quando pretende restringir as possveis respostas dos utilizadores a uma certa questo. Veja o exemplo abaixo.

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

ActionScript a linguagem de programao utilizada no Flash, que possui centenas de comandos

para permitir virtualmente qualquer tipo de criao. 2 Logicamente neste captulo apenas vamos demonstrar a funcionalidade de cada objecto. O uso avanado ser abordado na segunda parte deste livro, onde falaremos de ActionScript.

I.5. COMPONENTES

203

RadioButton
O RadioButton tem praticamente a mesma funo do CheckBox, porm, no permite a marcao de mais de um controlo de mesmo tipo. Assim, se tiver trs componentes RadioButton num formulrio, apenas um 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 no faz sentido permitir a marcao de mais de uma opo. Quando for este o caso usa-se o RadioButton. Outros exemplos so, quando num formulrio perguntar se o utilizador tem ou no e-mail, ou alguma outra questo onde no faa sentido mais de uma resposta.

PushButton
O PushButton o boto que precisa estar presente em todos os formulrios para permitir o envio da informao.

204

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.5. COMPONENTES

205

ComboBox
O ComboBox3, ao contrrio do ListBox, apenas mostra uma opo entrada. No caso abaixo, temos apenas visvel a frase faa uma escolha....

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

Conhecido em muitos programas como DROP DOWN MENU.

206

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

No caso das ComboBox, somente uma escolha possvel.

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 aguar o seu apetite, enquanto no entramos na seco de ActionScript, vamos explicao de como foi feita esta ScrollPane. Logicamente, a primeira coisa criar a ScrollPane; o que feito arrastando-se o componente da janela components para a rea de desenho. Vai ver ento a seguinte figura.

Barras de deslocamento ou scroll bars so as barras existentes nos programas que nos permitem

deslocar textos ou imagens para os lados.


5

Formato SWF

I.5. COMPONENTES

207

Crie um novo smbolo (CONTROL F8), e na janela que se seguir nomeie-o como texto. Ainda nesta janela marque o campo que diz BEHAVIOR como GRAPHIC; marque o quadro que diz EXPORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque tambm a palavra texto. Carregue em ENTER6.

Se estas ltimas opes no estiverem presentes carregue no boto que diz ADVANCED.

208

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

A seguir, escolha a ferramenta de criao de textos, o TEXT TOOL (T), posicione o rato num ponto na parte mdia esquerda da rea de desenho. Carregue no boto do rato e arraste-o para a direita. Vai ver que surge uma caixa para escrita. Escreva o texto pretendido. No canto superior direito da rea de desenho carregue no cone correspondente a uma claquete e escolha a opo 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 visualizao e teste o filme (CONTROL ENTER), para ver o ScrollPane a funcionar.

ScrollBar
O ScrollBar o ltimo campo dos componentes disponveis no Flash MX. A funo dele permitir a construo de caixas com barras de deslocamento. Desta forma, pode-se numa pequena rea colocar grandes quantidade de texto. A aparncia de uma caixa de texto deste tipo assemelha-se criada pelo ScrollPane. Veja na figura abaixo.

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

210

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Com o rato na rea de desenho, crie uma regio 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 seleco activa. Carregue duas vezes com o rato em cima dessa caixa marcada a azul, para entrar no modo de edio de texto. A caixa azul ento muda de cor, ficando negra, e aparece um quadrado no canto inferior direito. Arraste este quadrado para diminuir o tamanho da caixa, voltando a coloc-la dentro da rea de desenho do Flash.

I.5. COMPONENTES

211

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

Isto far com que saia do modo de edio de textos, que o que pretendamos. 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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.5. COMPONENTES

213

Actions (ActionScript)
A ltima seco da interface grfica do Flash sobre a qual ainda falta falar a de ACTIONS, que pode ser encontrada na parte central inferior do ecr, logo abaixo da rea de desenho.

ActionScript a linguagem de programao do Flash. Com ela poder fazer praticamente tudo o que puder imaginar. Quase que a totalidade das pginas em Flash mais sofisticadas precisam fazer uso do ActionScript para poderem funcionar como planeado. A simples colocao de um boto na pgina, que responda aos cliques dos utilizadores com aces previamente planeadas, faz uso de ActionScript para poder funcionar.

Objectos encapsulados
Para melhor visualizarmos a forma pela qual o Flash trata todos os objectos, podemos considerar, por exemplo, o caso da colocao de um boto numa pgina que responda s aces de clique dos utilizadores. As pginas construdas em Flash podem ser consideradas como aplicaes9, j que na sua essncia so exactamente isso. Normalmente so
9

Sim, pode considerar uma pgina em Flash como sendo uma aplicao j que na sua essncia

exactamente isso.

214

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Usamos esta notao porque aproxima-se mais da forma como vai ver as propriedades e

eventos dos objectos quando com eles se deparar.


11

A aco pode ser qualquer coisa que imaginar, por exemplo, o carregar de uma pgina de

Internet.

I.6. COMPONENTES AVANADOS

No site do fabricante do Flash MX, a Macromedia, descobrimos alguns brinquedos interessantes que poder acrescentar ao seu programa e faz-lo brilhar!! Os brinquedos so alguns componentes adicionais para a criao de interfaces grficas e outros para pginas em geral. Para instal-los preciso utilizar um programa da prpria Macromedia, disponvel no site, chamado EXTENSION MANAGER, que um painel de controlo, para a instalao de novos componentes ao Flash MX. Veja no Anexo III como obter o programa, as extenses e como fazer para as instalar. Tendo j feito a instalao das extenses, o primeiro grupo de componentes novos que encontrar no seu Flash MX chama-se Flash UI COMPONENTS SET 2, que so componentes adicionais criao de interfaces grficas avanadas. O segundo grupo o Flash CHARTING COMPONENTS, que so controlos para a criao de grficos nas suas pginas ou aplicaes Flash. Vamos ento a partir de agora, anlise dos componentes.

Flash UI Components Set 2


CALENDAR
O primeiro componente do grupo o CALENDAR (calendrio). exactamente o que o nome diz. Um calendrio completo a funcionar para utilizar nos seus programas e pginas Flash.

216

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

I.6. COMPONENTES AVANADOS

217

trabalhar com as hipteses da decorrentes s possvel pelo uso de ActionScript. Logo a seguir vemos a propriedade MONTHS. Se carregar uma vez em cima da lista dos nomes dos meses ver a janela abaixo.

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

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

OCTOBER, NOVEMBER e DECEMBER.

218

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

SUN, MON, TUE, WED, THU, FRI e SAT so as abreviaturas dos dias da semana em Ingls:

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

I.6. COMPONENTES AVANADOS

219

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

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

220

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

As ltimas quatro propriedades da janela so: Has Close Box, Is Scrolling, Resizable e Has Shader. Elas representam o seguinte: HAS CLOSE BOX indica se a janela tem ou no o X no canto superior direito para permitir que seja fechada pelo utilizador. IS SCROLLING indica se a janela tem ou no barras de 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 no o boto 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, vdeos, etc. Se for um texto, faa o seguinte: Crie um novo smbolo e na janela que se seguir nomeie-o como texto. Ainda nesta janela marque campo que diz BEHAVIOR como GRAPHIC, marque o quadro que diz EXPORT FOR ACTIONSCRIPT e no campo IDENTIFIER coloque tambm a palavra texto. Carregue em ENTER.

I.6. COMPONENTES AVANADOS

221

Siga o mesmo procedimento que utilizou no componente ScrollPane para criar uma caixa de texto dinmica. Na janela do componente DraggablePane, marque o campo ScrollContent com o que preencheu no campo IDENTIFIER da janela acima, ou seja, texto. Coloque o Flash no modo de teste e verifique que o texto est perfeitamente dentro da janela, pelo menos teoricamente...3 Caso seja uma imagem que pretende colocar dentro da janela, siga exactamente o mesmo procedimento, mas aps a criao do novo sm bolo importe uma imagem da biblioteca ou do disco para este novo objecto.

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

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

222

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

I.6. COMPONENTES AVANADOS

223

Se usar esse princpio, poder colocar qualquer coisa dentro da janela!

ICONBUTTON
Com este componente poder criar botes, prontos a usar, e que permitem a colocao de imagens face. Para criar um boto com este componente basta arrast-lo para a rea de desenho. Em seguida, deve criar um novo smbolo, com uma imagem qualquer (utilizamos uma gaivota), pelo mesmo procedimento utilizado no exemplo anterior e dar ao IDENTIFIER deste smbolo o nome gaivota. Carregue no IconButton que est na rea de desenho e na janela das propriedades ajuste o campo que diz ICON para gaivota.

Vai ter ento, um boto com a imagem da gaivota na face. Voil!

224

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

As outras propriedades do IconButton so as seguintes. LABEL permite a colocao de um ttulo (frase) que fica agregada imagem que inserir para a face do boto. LABEL PLACEMENT permite escolher em que posio relativa imagem deve ficar posicionada o tal LABEL acima. As posies possveis so: LEFT, RIGHT, TOP e BOTTOM, ou seja, esquerda, direita, acima e abaixo da imagem, respectivamente. TOGGLE esta propriedade ajusta a forma de funcionamento do boto. Normalmente o boto funciona da seguinte forma. Chamemos de estado A o estado no qual o boto est em repouso e B o estado no qual ele est quando nele se clica. Assim, o boto que est em A s fica no estado B enquanto estiver a carregar com o rato sobre ele. Logo que liberta o boto do rato o boto volta ao estado A. Porm, a propriedade TOGGLE altera essa forma de funcionamento. Esta propriedade est ajustada por defeito como FALSE e neste estado corresponde ao modo de funcionamento normal descrito no pargrafo anterior. Se alterar esta propriedade para TRUE, far o boto funcionar da seguinte forma: inicialmente estaria no estado A e assim que clicasse sobre ele faria que ele assumisse o estado B, assim permanecendo mesmo depois de libertado o boto do rato. Seria preciso outro clique para o fazer voltar ao estado A e assim sucessivamente. INITIAL VALUE O valor normal desta propriedade FALSE, o que faz o boto inicialmente ser mostrado em repouso com a aparncia (A) e com a aparncia (B) enquanto estiver a carregar sobre ele. Se passar a propriedade a TRUE, inverter esta condio. BACKGROUND Esta propriedade surpreendente! No satisfeitos em permitir a colocao de uma imagem na face do boto, tambm permitiram a colocao de outra imagem para o fundo do boto. O procedimento para agregar outra imagem a esta propriedade o mesmo que foi descrito para o campo ICON.

I.6. COMPONENTES AVANADOS

225

MESSAGEBOX
Este componente permite a criao de caixas de mensagem para os seus programas ou pginas Flash.

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

As propriedades vistas nesta caixa significam o seguinte: TITLE permite criar um ttulo para a caixa de mensagens. Colocamos a palavra TTULO neste campo. MESSAGE indica a mensagem a ser mostrada na caixa. Colocamos a frase: ESTA A MENSAGEM neste campo.

226

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

ICON este campo permite a colocao de um cone associado caixa de mensagem, para melhor a ilustrar. partida existem quatro cones definidos por defeito 4: QUESTION, INFO, WARNING e ERROR, que so vistos abaixo nesta ordem.

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

Dizemos isso pois qualquer um dos COMPONENTS pode ser modificado para assumir a aparncia que desejar, pelo uso de skins (peles), como ver no prximo captulo.

I.6. COMPONENTES AVANADOS

227

O procedimento de criao de linhas neste caso, botes, nesta janela, o mesmo visto no Calendar. CLOSE HANDLER Neste campo dever colocar uma string5 que corresponda subrotina6 a ser executada quando a caixa se fechar, ou seja, assim que o utilizador carregar em algum boto e a caixa se fechar, automaticamente o Flash executar a subrotina cujo nome estiver indicado neste campo. BUTTON WIDTH neste campo pode ajustar em pixis a largura dos botes. TITLEBAR HEIGHT e aqui, a altura da barra do ttulo. VISIBLE onde pode ajustar a visibilidade e invisibilidade da caixa de mensagens por ActionScript. Pode ter dois valores, TRUE ou FALSE. O primeiro corresponde caixa visvel e o segundo a ela invisvel. Para finalizar este componente, devemos dizer que encontramos um bug que torna o uso deste componente dentro de uma janela DraggingPane impossvel. No fim, depois dos ajustes acima descritos, poder ter uma caixa assim.

String = sequncia de textos, nmeros ou quaisquer outros caracteres, que para o programa so Conjunto de linhas de programao que fazem determinada funo.

tratados como texto.


6

228

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

SPLITVIEW
O SplitView um componente fantstico que permite dividir uma rea em duas outras independentes, tanto na vertical, quanto na horizontal. Digamos que precisa colocar dois filmes n uma rea na sua pgina Flash, mas o espao mal suficiente para a colocao de um. Pode ento usar o SplitView para dividir a rea, e em cada parte colocar integralmente aquilo que pretende. Ento, ambas as informaes estaro no mesmo stio, divididas por uma barra que poder ser deslocada para um lado e para o outro 7 e assim permitir a visualizao das duas partes. Vamos criar um exemplo para ver como o componente funciona. Arraste o SplitView da janela COMPONENTS para o meio da rea de desenho, e aumente o seu tamanho para que cubra quase toda a rea, conforme indicado abaixo.

Veja que o componente foi deixado no estado normal de divisria vertical.


7

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

I.6. COMPONENTES AVANADOS

229

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

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

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

230

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

Ento, a primeira coisa criar os dois objectos que ficaro associados a cada metade do SplitView. Para criar um objecto com uma imagem, faa INSERT > NEW SYMBOL, e na janela que se seguir preencha o nome como gaivota. Escolha o tipo GRAPHIC e marque o quadro que diz EXPORT FOR ACTIONSCRIPT. Veja a imagem abaixo.

Ao fazer isso, o quadro EXPORT IN FIRST FRAME j aparecer marcado e o campo IDENTIFIER aparecer preenchido com gaivota. Deixe-os como esto e carregue em ENTER para criar o novo objecto. Importe uma imagem com o comando FILE > IMPORT para finalizar este objecto. Repita a sequncia de comandos acima para criar o objecto outro. Porm, em vez de importar uma imagem, crie uma caixa de texto do tipo DYNAMIC TEXT e MULTILINE e insira um texto qualquer. Os parmetros da caixa e a sua aparncia so vistos a seguir.

I.6. COMPONENTES AVANADOS

231

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

232

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

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

I.6. COMPONENTES AVANADOS

233

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

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

234

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

... e toda direita ...

O Componente SplitView tem ainda duas propriedades interessantes: T/L COMPONENTE BEHAVIOR e R/B COMPONENT BEHAVIOR. Cada uma destas propriedades permite trs escolhas: STICK TO BAR , STICK TO PANE e RESIZE. Por defeito, esto ajustadas na opo STICK TO BAR. Se as colocar em STICK TO PANE as imagens passam a ficar estticas em relao ao fundo enquanto desloca a barra

I.6. COMPONENTES AVANADOS

235

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

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

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

TICKER
A funo deste componente permitir a criao de caixas de texto que mostram frases a passar na horizontal ou vertical, similares a equipamentos encontrados em aeroportos que ficam a passar mensagens. Veja a figura abaixo.

Os parmetros do componente so os vistos na figura seguinte.

236

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

A seguir vamos a uma descrio 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 orientao da caixa for horizontal, e colocar esta propriedade como INCREMENTAL, vai ver a frase a deslocar-se da esquerda para a direita e pode inverter este sentido de deslocamento se colocar a propriedade como DECREMENTAL. Se a orientao da caixa for vertical, ento a frase ir deslocar-se de cima para baixo ou de baixo para cima, consoante a propriedade esteja INCREMENTAL ou DECREMENTAL, respectivamente. SPEED representa a velocidade com que a frase se move, medida em pixis por segundo. SMOOTHNESS representa a quantidade de pixis que a frase se move a cada ciclo. Este campo tem relao directa com o SPEED. Isto significa o seguinte: se a velocidade estiver a 10 e o SMOOTHNESS estiver a 1, ento a frase desloca-se a 10 pixis por segundo. Porm, se ajustar SMOOTHNESS com o valor 2, a velocidade passa a ser 20 pixis por segundo, pois a cada deslocamento da frase ela salta 2 pi-

I.6. COMPONENTES AVANADOS

237

xis. Logicamente, quanto menor este nmero, mais suave o movimento aos olhos, por isso o campo tem esse nome8. SPACING a quantidade de pixis 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 sada 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 no se altera passagem do rato. SCROLL LOCATION Permite regular a posio das setas de scroll (deslocamento) da caixa. As opes disponveis so: NONE, TOP, BOTTOM, LEFT e RIGHT, correspondentes a nenhuma seta, setas em cima, setas em baixo, setas esquerda e setas direita, respectivamente. Na figura da caixa, no incio desta seco, a caixa est ajustada com a opo BOTTOM. FRAME WIDTH indica a espessura em pixis da borda da caixa. Se escrever zero, a caixa fica sem border. FRAME COLOR pode nesta caixa regular a cor do border. HIGHLIGHT COLOR nesta caixa pode indicar a cor do highlight, ou seja, quando o cursor do rato passa em cima da caixa com o texto em movimento, uma caixa colorida ilumina a regio do texto imediatamente abaixo do cursor, para indicar que est seleccionada esta regio. Podese ento, por meio desta propriedade, regular a cor da iluminao. DATA PROVIDER indica o nome de um objecto em ActionScript responsvel pelo fornecimento dos textos a serem mostrados na caixa.

smoothness = suavidade a caixa permite a colocao de inmeras frases seguidas, que so mostradas sequencialmente,

independente do tipo de deslocamento, horizontal ou vertical.

238

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

DATA ARRAY Indica uma matriz de elementos a serem mostrados na caixa. Pode ver na imagem que este campo contm a frase que aparece na primeira imagem a falar do Ticker. Se carregar uma vez com o rato sobre a regio onde est a frase vai ver uma janela onde poder inserir todos as frases que deseja mostrar. HEADER TEXT O texto que preencher neste campo ser mostrado como sendo o ttulo da caixa. HEADER LOCATION Nesta caixa poder ajustar a posio em que o ttulo da caixa vai estar. As escolhas possveis so: NONE, TOP, BOTTOM, LEFT e RIGHT, que correspondem a nenhuma, em cima, em baixo, esquerda e direita, respectivamente. HEADER WIDTH indica a largura do ttulo em pixis. HEADER HEIGHT indica a altura do ttulo em pixis. DATA WITDH indica a largura dos itens na caixa em pixis. Esta propriedade faz mais sentido no caso de caixas de deslocamento horizontal, pois iro espaar as frases na horizontal de forma a no se confundirem. DATA HEIGHT esta propriedade indica a altura em pixis das frases. Deixamos para o fim os dois ltimos componentes do primeiro grupo, o TREE e o PROGRESS BAR. No nos estenderemos nas explicaes acerca destes componentes nesta seco, por se tratarem de elementos que apenas podem funcionar quando programados por ActionScript.

TREE
Este componente permite a criao de rvores com informaes em sistema de hierarquia. Poder por ActionScript, criar, apagar, mover e ordenar os ns e as suas ramificaes. Poder descobrir qual a ramificao que foi clicada, e derivar aces correspondentes.

I.6. COMPONENTES AVANADOS

239

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

As propriedades deste componente so: CHANGE HANDLER Deve colocar neste campo o nome da funo (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 invisvel.

240

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Flash charting components


Este o segundo grupo adicional de extenses oferecido pela Macromedia no seu site. Assim como o primeiro grupo de extenses, este tambm requer instalao para que possa ser usado no Flash MX (veja o Anexo III). Assim que o tiver instalado ter sua disposio os seguintes componentes: BAR CHART, LINE CHART e PIE CHART, os quais descrevemos a seguir.

BAR CHART
Com este componente poder criar grficos em barra, como na figura abaixo.

I.6. COMPONENTES AVANADOS

241

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

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

CharTitle Esta propriedade representa o texto que ser o ttulo do grfico. No caso GRFICO DE VENDAS. XAxisTitle Neste campo dever colocar o ttulo correspondente ao eixo horizontal (X). No caso, MESES. YAxisTitle Neste campo dever colocar o ttulo correspondente ao eixo vertical (Y). No caso, EUROS.

242

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

Margin Corresponde ao valor em pixis da margem, ou seja, em relao ao tamanho total do controlo, quantos pixis de margem deseja estabelecer em todas as direces. Se aumentar muito a margem e, consequentemente, diminuir o espao interno dentro do controlo, pode ser que o Flash automaticamente ajuste a rotao dos textos para tentar encaixar o grfico dentro do componente. Veja na figura abaixo o grfico que foi comprimido na vertical, com a retirada das linhas de 25 e 75 e a rotao realizada nas strings dos nomes dos meses.

XlabelMaxHeight No caso de ter sido rodado o texto colocado ao longo do eixo horizontal, conforme visto na figura acima, esta propriedade determina o quanto em pixis deve ser reservado para a colocao dos nomes. Por outras palavras, digamos que se os meses acima tivessem sido escritos por extenso, ento, automaticamente no caberiam no grfico e teriam sido rodados. Assim sendo, poderamos ajustar esse campo, para um valor alto, digamos, 500, e teramos o grfico seguinte...

I.6. COMPONENTES AVANADOS

243

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

LINE CHART
O prximo componente do pacote Flash CHARTING COMPONENTS o LINE CHART. A sua utilidade permitir a criao de grficos de li-

244

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

Line Chart Layout Options


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

I.6. COMPONENTES AVANADOS

245

A primeira opo a Chart Title e representa o ttulo do grfico. Vamos preench-la com a frase RESUMO DE VENDAS. A seguir vemos as propriedades Xaxis Title e Yaxis Title , que correspondem ao ttulo a colocar para o eixo horizontal e vertical, respectivamente. Preenchemos estes campos com as frases valores em euros e meses, respectivamente. As opes a seguir so: LineColor e LineWeight que permitem o ajuste da cor e da espessura da linha. Vemos tambm o campo ShowHighlights, que indica a presena (TRUE) ou no (FALSE) de pequenos crculos de cor diferente a destacar os pontos do grfico. Os campos a seguir, MARGIN e XLabelMaxHeight assemelham-se aos do BAR CHART e tm a mesma funcionalidade explicada anteriormente.

246

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

Line Chart Chart Event Handlers


Ao voltar janela de propriedades do componente, vemos que a prxima varivel 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 grficos podem gerar em relao ao comportamento do rato. Se carregar nestas palavras vai ver a janela a seguir.

Ter de preencher a coluna VALUE com strings que representem o nome das funes em ActionScript a executar, quando cada um dos quatro eventos acontecer. Neste caso, os eventos so: Press (quando o boto do rato for carregado em cima de um ponto do grfico), Release (quando o boto do rato for libertado depois de ter sido carregado em cima de um ponto do grfico), RollOver (quando o cursor do rato passar por cima de um ponto do grfico) e RollOut (quando o cursor do rato sair de cima de um ponto do grfico, depois de ter entrado).

I.6. COMPONENTES AVANADOS

247

Line Chart Category Labels


A seguir, nas propriedades do componente, vemos CATEGORY LABELS. Vai ver que originalmente este campo est preenchido com A, B, C, D e E, que representam as colunas indicadas no grfico. Se 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 prxima 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 grfico vo ter no eixo vertical. Carregue nestes nmeros e vai ver uma janela onde poder regular estes pontos. Nesta etapa deixamos os valores como estavam. Feitos todos esses ajustes, ter transformado o grfico no que pode ser visto a seguir.

248

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

Repare nos highlights volta dos pontos. As questes discutidas no BAR CHART referentes margem e ao comportamento do componente medida que altera os seus valores, tambm so vlidas para o LINE CHART.

Pie Chart
O PIE CHART o prximo componente sobre o qual iremos falar. Com ele possvel fazer grficos PIZZA ou 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 AVANADOS

249

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

Pie Chart Layout options


A primeira propriedade que v na janela a de LAYOUT OPTIONS. Se carregar no valor contido nesta varivel vai ver a janela a seguir.

Os parmetros vistos nesta janela so: CHART TITLE - que corresponde ao ttulo do grfico. MARGIN que pode regular a margem interna do componente (ver explicao dada para o BAR CHART).

250

C ENTRO A TLNTICO C OLECO TECNO LOGIAS F LASH MX: DESIGN, A NIMAO E P ROGRAMAO

SHOW LEGEND varivel que pode assumir os valores TRUE ou FALSE, correspondentes respectivamente ao grfico ter ou no a legenda lateral ao lado direito. As trs prximas propriedades, ou seja, CHART EVENT HANDLERS, CATEGORY LABELS e DATA VALUES tm um funcionamento igual ao explicado para o caso do componente LINE CHART.

Pie Chart Pie Colors


Se carregar nesta propriedade pode regular as cores de cada fatia no grfico.

II PARTE

A PROGRAMAO NO MACROMEDIA FLASH MX

II.1. INTRODUO PROGRAMAO ORIENTADA POR OBJECTOS

Linguagens Processuais ou Procedimentais


Linguagens como o Pascal, o Fortran ou o C, so consideradas processuais ou procedimentais. Denominam-se desta forma, pois o cdigo escrito passo-a-passo. Os programadores que utilizam estas linguagens podem organizar as instrues a ser processadas em partes de cdigo mais pequenas chamadas funes (functions) que para o seu funcionamento utilizam estruturas de dados (data structures). importante salientar que as linguagens processuais mantm as funes e as estruturas de dados separadas estas no esto relacionadas de modo algum. Embora sejam eficientes, as linguagens processuais possuem alguns inconvenientes, um dos quais a dificuldade na reutilizao do cdigo. A sua natureza passo-a-passo obriga o programador a compreender cada linha de cdigo, para conseguir compreender o que o programa faz. Outra desvantagem das linguagens processuais o facto de ignorarem o relacionamento entre as funes e as estruturas de dados.

LINGUAGENS ORIENTADAS POR OBJECTOS


O conceito de linguagens orientadas por objectos foi introduzido, na Web, por linguagens tais como o Javascript, VBScript e mais recentemente pelo Actionscript do Flash. O Actionscript segue as normas ECMA-262 Standard, uma especificao escrita pela European Computer Manufacturers Association, que serve tambm de base linguagem Javascript - da as semelhanas entre as duas linguagens. No entanto, existem ainda alguns pontos onde ambas as linguagens diferem.

254

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

No Flash MX as funes e as estruturas de dados esto agrupadas em classes que podem ser definidas pelo construtor de funes (constructor function). Um construtor de funes um conjunto de instrues que define as propriedades e os mtodos de uma classe. possvel criar mltiplas instncias de uma classe, cada uma delas denominada por objecto, para reutilizar atravs do cdigo. Por exemplo, para obter informaes acerca da taxa de IVA de diversos artigos, criamos um construtor atravs da declarao de uma funo (iva) que possui duas propriedades (preco,taxa) e atravs destas criamos um mtodo (calcTotal) que calcula e devolve o preo do produto com IVA.
function iva (p, t) { this.preco = p; this.taxa = t; this.calcTotal = function() this.taxa)+ this.preco;}; }

{return

(this.preco

Esta funo necessita de dois parmetros (t, d). Assim, a partir desta classe podemos criar instncias deste objecto em que os parmetros variam.
almoco = new iva (5, 0.05); computador = new iva (1000, 0.17);

O operador new foi usado para criar duas novas instncias do objecto iva, s quais atribumos os nomes almoco e computador e para onde passamos os parmetros que se encontram entre parntesis. A utilizao do operador new similar a arrastar um movie clip da biblioteca para o palco, ou seja, criar uma nova instncia de um smbolo (objecto). Nas linguagens orientadas por objectos as classes podem receber propriedades e mtodos umas das outras de acordo com uma ordem especfica. A esta caracterstica denomina-se herana (inheritance).

II.1. INTRODUO PROGRAMAO ORIENTADA POR OBJECTOS

255

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

II.2. CONCEITOS BASE

Dot sintax versus Slash sintax


A slash syntax foi utilizada pelo Flash desde a verso 3 at verso 5. Na verso 5 do programa, foi feita a transio entre as duas notaes, podendo o utilizador funcionar com ambas em simultneo, embora a slash sintax fosse j aconselhada pela Macromedia apenas para abrir ficheiros de Flash mais antigos. Na verso MX a slash sintax j no existe pois foi totalmente substitud a pela dot sintax. Na slash sintax os caminhos so muito semelhantes aos utilizados em HTML. O caminho pode ser absoluto, comeando pela _root (timeline do filme principal) ou relativo se comear numa instncia e seguindo o caminho at ao target (movie clip). Em HTML a ( / ) representa a raiz (_root) e quando se possui um caminho relativo para, por exemplo, subir um nvel na hierarquia este representado por ( ../ ). Em Flash a ( / ) simboliza o palco e para atribuir uma action a um boto que afecte um movie clip chamado bola, no palco, basta digitar /bola. No caso inverso, se possuir um movie que vai accionar uma ordem para o palco, ento no movie dever aparecer apenas / A dot syntax foi introduzida no actionscripting do Flash 5. o mtodo preferencial para identificar o caminho para um movie clip ou para uma varivel. Se ainda trabalhar em Flash 5, a slash sintax deve ser evitada pois foi totalmente substituda pela dot sintax no Flash MX. A dot sintax muito semelhante slash sintax, mas as barras foram substitudas por pontos. Os caminhos podem ser absolutos e relativos e existem duas referncias especiais, _root e _parent. A _root num caminho absoluto refere-se timeline principal (raiz), da mesma maneira

258

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Timeline principal root

Escritrio

Quarto

Figura001 - Target Paths

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

Terminologias utilizadas no Actionscripting


Actions So declaraes que instruem a animao a desempenhar determinada tarefa. Boolean um valor que apenas pode assumir true ou false.

II.2. CONCEITOS BASE

259

Class (classe): Tipo de dados que podem ser utilizados para definir um novo objecto. Constantes So elementos imutveis durante toda a animao. Constructor - Funo utilizada para definir as propriedades e os mtodos de uma classe. Eventos - O evento a aco que ocorre enquanto a animao est a decorrer. Os eventos podem ocorrer quando um movie clip carrega, ou quando o utilizador faz clique sobre um boto. Function (funo): Bloco de cdigo reutilizvel cujos argumentos (parmetros) podem ser passados e de onde os seus valores podem ser extrados. Identifier (identificador): Nome utilizado para identificar uma varivel, propriedade, objecto, funo ou mtodo. O primeiro caracter de um identificador deve ser uma letra, underscore (_), ou sinal $. Cada caracter subsequente deve ser uma letra, underscore (_), sinal $ ou nmero. Keywords Palavras reservadas que possuem uma funo pr-definida no Flash. Method (mtodo): Funo associada a um objecto. Depois da funo associada, pode ser chamada mtodo desse objecto. Object (objecto): Uma instncia de uma classe. Cada instncia contm todas as propriedades e mtodos da classe. Instncias tambm podem conter propriedades e mtodos adicionais no definidos na classe. Nome da instncia Nomes nicos que permitem identificar determinados elementos na animao, como movie clips ou variveis. Property (propriedade): Caractersticas que definem um objecto. Parmetros ou argumentos So contentores que permitem passar valores para dentro de uma funo. Por exemplo, o cdigo seguinte passa o parmetro cor para a funo cores.
function cores (cor) { cor_preferida = "A minha cor preferida " + cor; }

260

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Variable (varivel): Identificador que armazena um valor. Seria possvel definir uma classe de tigres utilizando um construtor de funes. As propriedades destes tigres incluiriam os dentes, tamanho, apetite e forma. Os mtodos incluiriam cdigo para fazer o tigre andar, comer e caar. Depois de definir a classe do tigre atravs de propriedades e mtodos teramos o objecto do tigre. Para construir outro tigre deveramos criar uma instncia da mesma classe, podendo possuir no entanto propriedades e mtodos diferentes da primeira. Cada objecto pode ter as suas propriedades e mtodos no definidos pela classe da qual derivou. Por exemplo, poderia definir uma instncia em que o tigre tem outra cor, mas como seria o nico a possu-la esta propriedade no seria adicionada na classe.

Painel Actions
No Flash utilizado o painel Actions para se escrever os scripts. Este painel pode ser acedido atravs do comando W INDOW > ACTIONS ou da tecla de atalho F9. O painel possui dois modos de edio de scripts, o Normal e o Expert. A diferena entre o modo Normal e o modo Expert est no tipo de ajuda fornecido ao utilizador. Em modo Normal so exibidos no topo do painel os parmetros que so possveis de utilizar com determinada action.

Figura002 Painel Actions em Normal Mode

II.2. CONCEITOS BASE

261

No modo Expert o utilizador introduz os scripts da mesma forma mas tambm o pode fazer digitando-os directamente no painel; para tal deve possuir j bons conhecimentos de actionscripting, sendo este modo aconselhado a utilizadores mais experientes. A rea superior do painel que estava presente em modo Normal desaparece, mas ao digitar os comandos surge uma janela de auxlio com as keywords do programa.

Figura003 - Painel Actions em Expert Mode

INSERIR UMA ACTION


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

262

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Figura004 Boto (+)

Nota:

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

Figura005 Botes do painel Actions

Find Procurar palavras no cdigo.

Figura006 Janela Find

II.2. CONCEITOS BASE

263

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

Figura007 - Janela Replace

Targe t Path - Inserir o caminho relativo ou absoluto para uma instncia. Check sintax Verifica se a sintaxe do cdigo est correcta. Autoformat Formata automaticamente o cdigo de modo a que este fique com um aspecto conciso e de fcil leitura. Show Code hint Mostra uma pequena janela de ajuda enquanto se digita o cdigo.

ALTERNAR ENTRE MODOS NO PAINEL ACTIONS


Para alterar entre modos de trabalho (Expert e Normal) clique no menu pop-up do painel Actions e escolha a opo pretendida.

NAVEGAR ENTRE SCRIPTS NUM DOCUMENTO


No topo do painel actions surge em menu pop-up que permite ao utilizador navegar entre todos os scripts presentes no documento, sem necessitar de seleccionar as instncias ou keyframes onde estes esto aplicados.

264

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura008

Uma outra forma de visualizar as actions presentes num determinado filme atravs do Movie Explorer, que podemos aceder atravs 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. Faa clique sobre o boto (-).

II.2. CONCEITOS BASE

265

VISUALIZAR A NUMERAO PARA AS LINHAS DE CDIGO


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

Figura010 Numerao nas linhas de cdigo

IMPRIMIR ACTIONS
No menu pop-up do painel actions seleccione a opo Print. Surgir a janela com as opes de impresso. Clique no boto Print.

PAINEL REFERENCE
Este novo painel auxilia o utilizador a compreender cada aco listada no painel Actions. Existem tambm alguns exemplos de cdigo, que podem ser copiados para dentro do painel de Actions.

Figura011 Painel Reference

266

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

PARA VISUALIZAR O PAINEL REFERENCE


Para visualizar o painel Reference, seleccione o comando W INDOW > REFERENCE. Se j existir uma linha de cdigo seleccionada no painel Actions pode fazer clique sobre o cone reference que aparece no canto superior direito da janela, que acede directamente ao painel Reference j na descrio da action seleccionada.

Figura012 Icon Reference no painel Actions

PARA ALTERAR A DIMENSO DA FONTE NO PAINEL REFERENCE


Seleccione a opo Large, Medium ou Small do menu pop-up do painel Reference.

ASSOCIAR ACTIONS NA TIMELINE


Ao associar uma action na timeline a aco acontecer assim que a animao atingir essa keyframe. Para associar uma action a uma frame comece por adicionar um novo layer na animao. Se a action for para uma frame, que no seja a primeira da animao, deve ser inserida uma blank keyframe na layer Actions (F7). De seguida com a keyframe seleccionada, active o painel Actions e introduza o cdigo pretendido.

Figura013 Associar actions a um keyframe

II.2. CONCEITOS BASE ASSOCIAR ACTIONS A SMBOLOS

267

Podemos associar actions a frames, timelines de movie clips e botes e directamente s instncias dos movies e botes. Algumas actions so exclusivamente para aplicao em instncias de movie clips e outras apenas podem ser associadas a instncias de botes. Ao criar um smbolo na biblioteca (library) e arrastar uma cpia para o palco acabamos de criar uma instncia do smbolo. Ao associar as actions s instncias em vez de directamente no smbolo, podemos utilizar vrias instncias do smbolo em que cada uma pode conter o seu conjunto de actions, reaproveitando recursos no filme. Para aplicar uma action a um smbolo, basta seleccion-lo e atribuir a action que pretendemos.

Figura014 Smbolo Button na livraria e uma instncia no palco

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

268

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

EVENTOS ASSOCIADOS A BOTES

Figura015 Eventos associados a uma instncia dum boto

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

EVENTOS DE MOVIE CLIPS


Load Ocorre apenas uma vez, assim que a instncia acaba de ser carregada. EnterFrame A aco est constantemente a ser despoletada velocidade do filme. As aces associadas a este evento acontecem antes de qualquer action da timeline do movie clip.

II.2. CONCEITOS BASE

269

Unload A aco iniciada no primeiro frame, depois do movie clip ser removido da timeline. Mouse Down Ao premir o boto do rato sobre a instncia. Mouse Up Ao soltar o boto do rato sobre a instncia. Mouse Move A aco iniciada sempre que o rato movido. Deve utilizar as propriedades _xmouse e _ymouse para determinar a posio do rato. Key Down Acontece assim que uma tecla premida. Deve ser utilizada a propriedade Key.getCode para determinar qual foi a ltima tecla premida. Key Up Ao soltar uma tecla. Utilizar a propriedade Key.getCode para identificar a ltima tecla a ser premida. Data A aco iniciada assim que entram dados no movie atravs da action LoadVariables ou LoadMovie.

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

Figura016 Eventos associados a uma instncia dum movie clip.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

Neste exemplo vamos utilizar actions que controlam o fluxo da animao. Importamos um vdeo em formato QuickTime que iremos controlar com alguns botes. Comece por importar um filme Quicktime para a biblioteca atravs do comando FILE > IMPORT. Active a opo Embed video.

Figura017 Opes na importao de vdeo

No palco crie mais duas layers, uma para os botes e a segunda para as actions. Ver figura 018. No menu W INDOW > COMMON LIBRARIES > BUTTONS, seleccione da categoria Playback um boto para parar o filme, um para retomar a animao e mais dois para recuar e avanar o filme frame-a-frame.

272

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura018

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

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

Para o boto que pra o filme aplique de novo a action Stop.

Figura019 Action Stop

Repare que nenhuma destas duas actions possui argumentos. Tanto a action stop como a play actuam sobre a timeline em que esto inseridas, mas no afectam directamente movie clips presentes dentro da mesma. Assim, se existissem movies no palco nenhum seria afec-

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

273

tado pelas actions que acabamos de inserir, pois as timelines dos movie clips so independentes da animao criada no palco. Restam os botes para fazer o filme recuar ou avanar frame a frame. Para estes utilizaremos a action goto, mas os parmetros devero ser alterados. Assim, teremos:

Figura020 Actions do filme

CRIAR LINKS PARA PGINAS HTML


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

Figura021 Action getURL

274

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

Se esta se encontrar numa pasta diferente, o caminho deve ser digitado desde a pgina HTML que contm o filme de Flash at pgina do link. Para recuar um nvel utilizam-se dois pontos. Ver figura 023.

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

Um link absoluto poder ser para uma pgina fora do nosso site. Com o cdigo seguinte aberto o endereo http://www.centroatlantico.pt numa nova pgina do browser.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

275

Figura024 Action GetURL

Um link e-mail cria automaticamente uma nova mensagem no programa de e-mail que estiver instalado no computador do utilizador, e preenche o endereo de e-mail para onde ser enviada a mensagem.
on (release) { getURL("mailto: geral@centroatl.pt "); }

Se pretendermos preencher tambm o assunto basta completar com:


on (release) { getURL("mailto:geral@centroatl.pt?subject=Opinio"); }

Figura025 Mensagem criada atravs do link e-mail

276

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

CARREGAR FILMES DE FLASH EXTERNOS


Num site totalmente em Flash, os filmes podem tornar-se muito extensos e pesados. Nas animaes mais complexas comea tambm a ser difcil organizar todo o fluxo de trabalho por cenas e muitas vezes necessrio recorrer separao do contedo em diversos filmes. Estes filmes por serem mais pequenos, so mais fceis de organizar e podemos sempre optar por remov-los da animao principal em qualquer altura ou substitu-los quando no esto a ser visualizados pelo utilizador. Um exemplo clssico ser um site que possui como rea fixa uma navegao de botes que pretendemos se mantenha constantemente visvel, enquanto uma segunda rea acomodar todas as animaes referentes a cada um destes botes. Ver figura 026.

Figura026 Interface principal do filme

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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

277

Figura027 - Carregamento de filmes swf

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

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

278

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura028 - Filme secundrio

Guardamos este ficheiro na mesma pasta onde se encontra guardado o filme principal, pois o caminho necessita de ser especificado na altura do carregamento e mais fcil se ambos se encontrarem na mesma localizao.

Figura029 - Exportar o filme

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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

279

Figura030 Action Load Movie

Na opo URL digitamos o nome do ficheiro exportado anteriormente. O nvel dever ser superior a 0 pois este o do filme principal e se o mantivermos o filme principal desaparece para dar lugar ao filme secundrio.

Figura031 Filme swf carregado sobre o principal

Qualquer outro filme que seja agora carregado em nvel 1 far automaticamente a remoo do filme existente (clientes.swf ). No caso de pretendermos remover um determinado filme, basta utilizar a action UnloadMovie e referi-lo atravs do nvel onde se encontra carregado.

280

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura032 Remover um filme

CONTROLAR FICHEIROS EXECUTVEIS COM O FSCOMMAND


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

Figura033 Exportar um executvel

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

281

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

Figura034 Comandos para standalone player

Fullscreen O default true. Se for igual a true o filme ocupar toda a rea do monitor do utilizador. Allowscale A janela do filme ao ser redimensionada, altera tambm as propores dos actores e imagens que fazem parte da animao. Na opo false isto no acontecer. O valor default true. Showmenu Por defeito est activo, assim o utilizador ao fazer clique com o boto direito do rato sobre o filme ver aparecer um menu de atalho que lhe permite controlar vrias opes no filme.

Figura035 Showmenu

282

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Figura036 Icon de projector

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

SMBOLOS
Recapitulando alguns pontos-chave em relao aos smbolos, que sero importantes para compreender a sua integrao com as actions em Flash: - As instncias dos movie clips e botes podem possuir nomes.

Figura037- Nomear movies

- As timelines dos movie clips so independentes da timeline do filme principal, ou seja, um filme pode estar parado, mas os movie clips podem manter as suas animaes.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

283

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

Figura038 Nome da instncia de texto

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

Figura039 - Nome da varivel de texto

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

Figura040 Hierarquia dos smbolos

284

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Para nos referirmos aos mtodos de um objecto a forma anloga utilizada para as instncias. Os mtodos possuem argumentos ou parmetros, que so suportes para valores transportados para o mtodo. Estes argumentos seguem o nome do mtodo entre parntesis, utilizando a sintaxe nomedomtodo (argumentos). Para utilizar a dot sintax na referncia a um mtodo de um objecto, ser preciso primeiro referenciar o n ome do objecto (ou o caminho de um movie clip) seguido de um ponto e de seguida o mtodo. Para referenciar o mtodo (play) de um movie clip (boneco) utilizando a dot sintax:
boneco.play()

ATRIBUIR NOMES A INS TNCIAS DE MOVIE CLIPS OU BOTES

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

Figura041 Atribuir um nome a um movie clip

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO CAMINHOS RELATIVOS E ABSOLUTOS

285

Tal como j foi referido no primeiro captulo desta segunda parte do livro, existem duas formas de fazer referncia ao target path (caminho) dum movie clip. Atravs de referncias absolutas e relativas.

CAMINHOS ABSOLUTOS
A timeline principal do filme, referida como _root no Flash. Todos os movie clips so instncias localizadas na timeline principal e so dependentes da _root. Logo, para iniciar a animao dum movie chamado modelo no palco teremos:
_root.modelo.play()

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

Figura042 Target path absoluto

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

286

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura043 Target path relativo

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

Figura044 Movie clips dentro de outro movie clip

CONTROLAR INSTNCIAS DE SMBOLOS


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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

287

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

Figura045 Animao do movie clip pacman

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

Para completar o comando faa clique na linha de cdigo e complete com o nome do movie clip, seguido de um ponto. Ver figura 046. Para os restantes valores complete as actions mudando apenas o valor da rotao do movie clip.
Figura046 Valores de rotao para as setas

288

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

PROPRIEDADES DOS MOVIE CLIPS


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

Figura047 Alpha 100 e alpha 50

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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

289

Figura048 Low quality vs High Quality

_rotation Valor da rotao de uma instncia.

Figura049 - Propriedade Rotation

_soundbuftime Tempo em segundos antes do filme comear uma animao stream. _target Retorna o valor do target path do movie clip. _totalframes Devolve o nmero total de frames de um movie clip. _url D o endereo URL do filme SWF de onde o movie clip fez download. _visible Visibilidade da instncia. Quando o seu valor false a instncia ficar invisvel, no caso de true a instncia fica visvel. Por defeito, o valor est configurado para true. _width Largura dada em pixis de uma instncia. _x Coordenada do centro de um movie clip visualizada na rgua horizontal do Flash. De notar que a coordenada (0,0) no palco o canto superior esquerdo, enquanto que dentro de um movie clip o centro do mesmo.

290

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

_xmouse Coordenada do ponteiro do rato no eixo x. _xscale Valor em percentagem da largura dum movie clip. _y Coordenada do centro de um movie clip visualizada na rgua 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 dimenso do movie clip que se encontra na biblioteca.

Figura051 - _xscale e _yscale

MTODOS MAIS UTILIZADOS NOS MOVIECLIPS


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

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

291

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

Figura052 Mtodo startDrag

A opo Lock mouse to Centre coloca o centro da instncia a coincidir com o ponteiro do rato. Se no especificarmos Target este ser interpretado com aquele onde a action est a ser aplicada. Para restringir o movimento a uma rea mais pequena, utilize a opo Constrain to rectangle.

Figura053 Constrain to rectangle

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

292

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Para esta situao teremos de aplicar o mtodo stopDrag, mas que apenas ser chamado quando o utilizador soltar o boto do rato. Uma das formas de obter este efeito criar primeiro um boto que contm o actor a arrastar e de seguida colocar esse boto dentro de um movie clip que ser colocado no palco. Seleccione o boto dentro do movie e escolha ACTIONS > MOVIE CLIP CONTROL > STARTDRAG.

Figura054 Actions para drag and drop do movie clip

O boto que colocamos dentro do movie clip possuir ento a programao para arrastar e largar a instncia, mas em eventos diferentes. Ver figura 054. No necessrio especificar Target pois como o boto est dentro do movie clip este automaticamente assumido como o movie que deve ser arrastado. A instncia do movie clip colocada no palco e estar pronta a funcionar.

DuplicateMovieClip e RemoveMovieClip Estes dois mtodos permitem duplicar um movie clip e remover movie clips que tenham sido criados atravs do mtodo DuplicateMovieClip. Comeamos por nomear o movie clip no palco, atravs do painel PROPERTIES.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

293

Figura055 Nomear o movie clip

De seguida para testar seleccionamos o primeiro keyframe da timeline no palco e aplicamos a action MOVIE CLIP CONTROL > DUPLICATE MOVIECLIP. Nos parmetros atribumos o nome do movie a ser duplicado, o nome do novo movie clip e a profundidade (depth) onde ser duplicado. 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 atravs do mtodo DuplicateMovieClip, aplicamos o mtodo RemoveMovieClip onde s necessrio indicar o nome do movie que pretendemos remover.
removeMovieClip("sol2");

Como exemplo vamos criar um simples mouse trail.

294

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura057 Mouse Trail

Na biblioteca criamos um movie clip para servir de rasto para o ponteiro do rato. Este movie pode conter uma animao simples. Colocamos uma instncia no palco e atribumos-lhe um nome. Vamos chamar-lhe rasto.

Figura058 Rasto do ponteiro do rato

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

novonome Parte do nome dos movie clips duplicados. Possuiro nomes do tipo rasto1, rasto2 e assim sucessivamente.
novonome = "rasto" + n;

Comeamos por arrastar o movie rastro.


startDrag("rasto", true);

De seguida duplicamos o movie e atribumos os novos nomes com a varivel novonome e a profundidade n.

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

295

Figura058 Duplicar o movie

Como no queremos mais de seis movies atrs do ponteiro comeamos a remover todos os movies anteriores. Para funcionar o palco deve ter pelo menos duas frames. Acrescente uma frame com a tecla F5. Esta segunda frame faz com que o filme entre em loop e duplique novos movie clips sempre que volta a passar pela primeira keyframe.

Figura059 Script completo

LoadMovie e Unload Movie Estes dois mtodos so especialmente importantes quando pretendemos carregar um filme de Flash externo ou um ficheiro de imagem jpeg numa determinada localizao do filme principal. Tal como foi referido no captulo anterior, nas actions LoadMovie e UnloadMovie um filme carregado sobre a animao principal fica sempre encostado ao canto superior do filme principal. A soluo para o colocar noutra posio do palco utilizar um movie clip como referncia e carreg-lo para dentro deste. Imagine por exemplo que na animao principal possui um televisor com vrios botes, cada um deles ir carregar uma animao diferente.

296

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura060 Filme Principal

Depois de criar as animaes secundrias com a dimenso do monitor do televisor, exportamos cada uma delas para formato swf. No nosso caso chamamos ao filme secundrio exportado programa1.swf . No filme principal vamos criar um movie clip na biblioteca com nome ecr, mas completamente vazio. Este filme s vai servir de referncia para posicionar o filme que iremos carregar.

Figura061 - Filme secundrio

De seguida posicionamos o movie no palco sobre o televisor, tendo em ateno que quando carregados sobre um movie clip os filmes 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 ANIMAO

297

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

Figura063 Aplicar o mtodo loadMovie

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

Figura064 Resultado Final

GetBytesLoaded e GetBytesTotal Estes dois mtodos so muito utilizados na criao de preloaders para filmes. Um preload uma animao muito simples que antecede o filme

298

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

principal enquanto este carrega. Normalmente so aplicados preloaders a filmes com mais de 50 Kb. GetBytesLoaded Nmero de bytes carregados GetBytesTotal Nmero total de bytes do filme (inclui todas as cenas).

Por exemplo, supondo que possumos um filme que tem apenas uma cena e precisamos de criar um preload. Este filme possui sons e imagens bitmap e tem cerca de 200 Kb. Comeamos por criar uma nova cena no filme. Seleccione no menu INSERT > SCENE. A cena de preload deve ser a primeira do filme. Para alterar a ordem das cenas escolha no menu W INDOW a opo SCENE. Arraste a cena do preload de modo a ser a primeira cena do filme.

Figura065 Painel Scene

Na primeira cena criamos uma pequena animao e inserimos uma caixa de texto dinmico qual atribumos o nome percentagem no painel PROPERTIES e que vai mostrar a percentagem de filme carregado.

Figura066 Atribuir nome caixa de texto

II.3 INTRODUZIR INTERACTIVIDADE NUMA ANIMAO

299

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

Figura067 Actions do primeiro frame do preload

_root.getBytesLoaded() OBJECTS > MOVIE > MOVIE CLIP > METHODS > GETB YTESLOADED. Efectua a contagem do nmero de bytes carregados do filme. _root.getBytesTotal OBJECTS > MOVIE > MOVIE CLIP > METHODS > GETB YTESTOTAL . Conta o nmero total de bytes do filme. Math.round OBJECT > CORE > MATH > METHODS > ROUND. Mtodo utilizado para arredondar valores numricos. Substitui a funo Int das verses anteriores do Flash. Dividimos o nmero de bytes carregados, pelo nmero total de bytes do filme e multiplicamos por 100 para obter um valor em percentagem. Para que o valor seja um nmero inteiro aplicamos o mtodo Math.Round a envolver todo o cdigo. percentagem = percent + "%" - Atribumos o resultado caixa de texto dinmico percentagem e acrescentamos o caracter %.

Figura068 Caixa de texto dinmico no palco e em teste

300

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Figura069 Actions do primeiro frame do preload

Para testar o filme seleccione a opo CONTROL > TEST MOVIE e de seguida na janela de teste, escolha a opo VIEW > SHOW STREAMING.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

SINTAXE DO ACTIONSCRIPTING
Chavetas { } So utilizadas para agrupar blocos de cdigo relacionado.
on (release) { play(); }

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

Parntesis () Tem diversas funes dentro do cdigo. A principal utilizao agrupar os parmetros de uma funo.
function empregado (nome, idade){ ... }

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

302

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Caso contrrio seria necessrio utilizar o seguinte script para determinar o valor e criar o objecto:
onClipEvent(enterFrame) { myCor = new Color(this); myCor.setRGB(0xffffff); }

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

Keywords Palavras reservadas que no podem ser atribudas a nomes de variveis e que possuem uma funo determinada pela prpria aplicao.
break case continue default delete else for function if in instanceof new return switch this typeof var void while with

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

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

303

Figura070 Comentrios no cdigo

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

DATA TYPES
Um data type descreve o tipo de dados que as variveis podem conter. Existem dois tipos de data types: primitive e reference. O data type primitive engloba as categorias number, string e boolean, enquanto os reference data types so object e movieclip. Existem ainda dois tipo especiais de data types: null e undefined. O tipo de dados de uma varivel afecta o modo como uma varivel muda o seu valor quando associada a um script.

304

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Number: Um nmero pode ser manipulado utilizando operadores aritmticos como a adio (+), subtraco (-), multiplicao (*), diviso (/), modulo (%), incremento (++) e decremento (- -). String: Uma sequncia de caracteres tais como letras, nmeros e pontuaes. Em actionscripting cria-se uma string envolvendo um determinado valor em aspas. Assim, o seu valor tratado como caracter e no como uma varivel. O operador + passa a actuar como unio entre as duas variveis.
nome= Ana + apelido

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


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

Object: Uma coleco de propriedades. Cada propriedade tem um nome e um valor. O valor pode ser qualquer tipo de dados e os objectos podem estar contidos dentro de outros. Por exemplo, para aceder propriedade da visibilidade de um movie clip, teremos:
carro._visible

movieclip: Um apontador a um smbolo movie clip que permite controlar os seus mtodos.
movie.startDrag(true);

Null: Apenas possui o valor null, que simboliza que a varivel est vazia. Undefined: Tal como o null apenas possui um valor, o undefined, significa que ainda no lhe foi atribudo nenhum valor.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO SCOPE DA VARIVEL

305

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

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

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

Variveis Globais Existem em todas as timelines mesmo que no seja especificado um caminho at elas.

DECLARAR VARIVEIS
Ao declarar uma varivel local deve utilizar o comando var dentro do bloco de cdigo onde esta ficar inserida. Uma varivel local no definida, expira no fim do script.
var pontos=0

Para declarar variveis de timeline, basta utilizar o comando set variable ou apenas indicar o nome da varivel e usar o sinal de igual para atribuio do seu valor.
X=20

No caso da declarao de uma varivel global o nome desta deve ser antecedido do identificador _global.

306

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

_global.time=0

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

Figura071 Interface

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

Figura072 Atribuir nome varivel

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

307

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

Figura073 Actions do boto

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

Figura074 Resultado

308

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

TESTAR O VALOR DAS VARIVEIS


Para testar o valor duma varivel utilize a action Trace (ACTIONS > MISCELLANEOUS ACTIONS > TRACE ) para abrir uma janela de output sempre que o filme for testado e mostrar o valor da varivel que digitarmos entre parntesis.
pontos = pontos+1; trace(pontos);

Uma forma alternativa de testar os valores das variveis utilizar o Debugger. Para visualizar o debugger basta testar o filme atravs do comando CONTROL > DEBUG MOVIE. Este comando alm de testar o filme abre o painel Debbuger onde basta seleccionar o separador Variables e escolher o nvel do filme ou o movie clip onde se encontra a varivel. A animao surge sempre parada no incio. Para comear basta clicar sobre o boto play para dar incio ao filme. No separador PROPERTIES possvel ainda observar as propriedades da _root ou do movie clip que se encontrar seleccionado acima. O separador variables mostra as variveis criadas no filme e os seus valores.

Figura075 Painel Debugger

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO OPERADORES

309

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

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

O resultado da operao 13. Primeiro calculada a multiplicao e s depois ser efectuada a soma.
pontos= (7 + 3) * 2

O resultado desta forma ser 20, pois a soma ser realizada antes da multiplicao por se encontrar entre parntesis. Tipos de operadores Operadores Numricos Desempenham diversas operaes aritmticas mais comuns tais como: + * / % ++ -Soma Multiplicao Diviso Subtraco Mdulo (resto da diviso) Incremento Decremento

310

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura076 Soma

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

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

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


Joana + + Nunes o resultado Joana Nunes

Figura077 Concatenao

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

311

Operadores lgicos Estes operadores comparam valores booleanos ( true / false) e devolvem um outro valor booleano. && || !
If }

e ou negado
(nome==Cristina && idade>25) { gotoAndStop(2);

Operadores de igualdade Determina se dois valores ou identidades so iguais. O valor devolvido booleano. == === != !== igualdade estritamente igual diferente de estritamente diferente

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

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

= += -= *=

Atribuio Soma e atribuio Subtraco e atribuio Multiplicao e atribuio

312
%= /= <<= >>= ^= |= &=

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Modulo e atribuio Diviso e atribuio Mover para a esquerda e atribuio Mover para a direita e atribuio XOR e atribuio OR e atribuio AND e atribuio

Vamos voltar ao exemplo do pacman que j tnhamos colocado a mudar de direco atravs da propriedade _rotation. Agora para o movimento vamos acrescentar uma linha para incrementar o valor da deslocao do movie clip em 10 pixis, sempre que o utilizador fizer clique numa seta de direco. Para tal vamos utilizar os operadores de atribuio.

Figura078 - Operadores de atribuio

CONDIO IF
Continuamos agora com o exemplo apresentado na figura 071. Supondo que necessrio testar se o utilizador introduziu ou no um valor na caixa de texto da cena de entrada. No caso afirmativo, o filme prossegue para a segunda cena, mas no caso negativo surge uma mensagem, a solicitar a introduo do nome de utilizador. Comeamos por acrescentar na primeira cena uma nova caixa de texto dinmico, qual chamamos mensagem.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

313

De novo no boto apagamos as actions anteriores e vamos categoria ACTIONS > CONDITIONS/LOOPS > IF e dentro das aspas digitamos a seguinte condio:
if (utilizador==null){ }

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

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

Todas as instrues que seguirem a condio else sero executadas s no caso de preenchimento do campo utilizador. Como pretendemos que o filme passe para a segunda cena da animao, teremos a action:
gotoAndPlay(filme,1);

Para preencher o campo User com o nome introduzido, basta:


User=Benvindo(a), + utilizador;

314

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura079 Cdigo do boto de entrada

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

Figura080

O boto de entrada dever agora possuir um teste a duas variveis que sero unidas pelo operador e (&&). Este operador vai fazer com que seja necessrio que ambas as variveis devam estar correctas para o utilizador entrar na pgina. Se em vez do operador (e) && estivesse o operador (ou) || bastava uma das caixas estar correcta para o utilizador entrar na cena 2.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

315

Figura081 Programao do boto de entrada

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

Figura082

A condio IF tambm pode ser utilizada para testar as propriedades dos movie clips. Por exemplo, ao testar a propriedade _droptarger

316

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

conseguimos determinar se um movie clip foi largado no sobre outro movie clip. No exemplo seguinte vamos simular um site de compras, em que o utilizador tem de arrastar diversas frutas para dentro de um saco que ir incrementar uma varivel (total).

Figura083- Interface

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

Figura084

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

317

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

Figura085

Seleccionamos a linha 5, e vamos continuar a programao a partir deste ponto, no painel ACTION > CONDITIONS / LOOPS > IF. Para condio digitamos:
eval (this._droptarget) == _root.saco;

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

Figura086 Programao do movie ma

318

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Vamos agora optimizar o cdigo do filme. Se for necessrio aumentar o nmero de tipos de fruta na animao, cada novo boto ter a programao apresentada na figura 086. Como a programao exactamente igual para todos os botes, vamos criar um ficheiro de texto com o cdigo actionscripting. Abra o bloco de notas e cole o cdigo da figura 086.

Figura087 Ficheiro de texto

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

Figura088 Gravar o ficheiro

Na biblioteca edite o movie clip da laranja e seleccione o boto. Para aceder ao ficheiro externo basta digitar #INCLUDE actions encontra-se em MISCELLANEOS ACTIONS.
DROP.AS.

Nas

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

319

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

Figura089 Action #include

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

Figura090

320

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Figura091 Script completo

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

CICLO FOR
A funo principal dos ciclos numa linguagem repetir determinadas actions diversas vezes.

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

321

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

Figura092 - Interface do programa

No boto vamos introduzir um ciclo que gera nmeros aleatrios at um mximo de seis e preenche as respectivas caixas. No painel actions seleccione a categoria CONDITIONS / LOOPS > FOR .

Figura093 Ciclo For

Parmetros do ciclo For: Init O valor onde se ir iniciar o ciclo.

322

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

Figura094 Mtodo Round

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

323

Figura095

CICLO WHILE O ciclo while mais utilizado em casos em que no sabemos qual o nmero de vezes que o loop ir correr. Supondo que pretendemos criar um menu dinmico, que vai buscar as opes a um ficheiro de texto externo. Estas opes podem variar, consoante o utilizador introduza ou apague no ficheiro de texto as variveis. Comeamos por criar o ficheiro de texto com quatro variveis.

Figura096 Ficheiro de texto

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

324

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura097- Boto dentro do movie clip

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

Figura098 Nome da instncia da caixa de texto

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

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

325

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

Figura100 - LoadVariables

Nos parmetros em URL digitamos o nome do ficheiro de texto, que por se encontrar na mesma pasta do filme no necessrio indicar um caminho relativo apenas o nome do ficheiro basta. Location Escolhemos Target e digitamos o valor _root, ou seja a timeline principal ir receber as variveis do ficheiro externo. Acrescentamos uma linha para tornar o movie invisvel. Fazemos isto atravs da propriedade _visible.

Figura101 Actions primeira da keyframe do palco

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

326

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura102 Fazer Debug do filme

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

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

Comeamos o ciclo while que ir correr enquanto a condio for verdadeira. Ou seja, enquanto as opes forem diferentes de null.
while (eval("op"+i) != null)

II.4 ESTRUTURAS AVANADAS DE PROGRAMAO

327

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

Figura103- Programao do boto menu

Dentro do ciclo while, duplicamos o movie clip. Na linha 7 deslocamos os botes adicionando-lhes o valor da altura do movie e multiplicando pelo i -1 (no esquecer que o primeiro valor de i 2, dai subtrair-mos uma unidade). Finalmente, atribum os a cada caixa de texto o valor da varivel respectiva e incrementamos o i. Para alterar o contedo e o nmero de opes o utilizador s tem de editar o ficheiro texto.txt

Figura104 Menu gerado dinamicamente

II.5. FUNES

As funes so pedaos de cdigo reutilizvel. Quando se utiliza uma funo possvel passar uma srie de argumentos para dentro dela e retornar um valor. O Flash possui algumas funes que j fazem parte da sua programao e que podem ser utilizadas sem ser necessrio o utilizador defini-las.
Boolean escape eval getProperty getTimer getVersion isFinite isNaN Number parseFloat parseInt String targetPath unescape

Funo Eval Funo para aceder a variveis ou propriedades e extrair o seu valor. Se for utilizada para aceder a objectos e movie clips extrai uma referncia dos mesmos.
produto1=mel; produto2=acar; resultado = eval (produto+n);

Assim, se n=1, o resultado ser mel, mas se n=2, o resultado ser acar. O Eval avaliou a expresso produto+n e ao obter o valor de n concatenou-o com a palavra produto para extrair o seu valor. No caso da utilizao da propriedade _droptarget a funo eval utilizada pelo Flash para converter o nome de um movie clip em notao slash sintax para a notao dot sintax. Ver figura 086.

330

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

Figura105 - GetTimer

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

Figura106 Funo GetVersion

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

II.5. FUNES

331

Tambm possvel definir funes globais atravs do identificador _global.


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

Funo boolean Converte uma expresso num valor Booleano. O valor retornado depende do tipo de expresso. Se a expresso um valor booleano, o valor devolvido expression. Se a expresso um nmero, o valor devolvido true, caso o nmero no seja 0. O valor zero devolver false. Se a expresso uma string, o mtodo toNumber invocado para converter a string num valor numrico. Se o resultado for diferente de zero retornado true, caso o resultado seja zero, o valor igual a false. Se a expresso undefined o valor devolvido false. Se a expresso um movie clip ou um objecto, o valor devolvido true.
Boolean (expresso)

Funo string Converte uma expresso numa string.


String (expresso)

Se a expresso um valor booleano, a string devolvida true ou false, consoante o valor booleano apresentado pela expresso. Se a expresso se tratar de um nmero, o valor devolvido uma representao em texto do valor numrico que era o resultado da expresso. Se a expresso uma string o valor devolvido expression. Se a expresso um movie clip, valor o target path para o movie clip em slash Sintax (/).

332

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Funo escape Converte um parmetro numa string e codifica-o num formato de URL onde os caracteres especiais so convertidos em sequncias hexadecimais.
escape("parametro")

Funo getProperty Devolve o valor de uma propriedade de um movie clip. O cdigo seguinte devolve o valor da coordenada y de um movie clip chamado carro.
carro_y = getProperty(_root.carro, _y)

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

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

II.5. FUNES
Funo isFinite

333

Avalia uma expresso e devolve o valor true se o resultado for um nmero finito e false se o resultado for infinito.
isFinite(expresso)

Funo isNaN Avalia um parmetro e devolve o valor true se o resultado no for numrico, indicando que estamos na presena de um erro matemtico.
isNaN("carro") // devolve true

Funo parseFloat Converte uma string num nmero de vrgula flutuante. Se a string no comear por um nmero que possa ser convertido, a funo devolve o valor NaN. Espaos que precedem nmeros inteiros vlidos so 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.75relgio") devolve 3.75 parseFloat("0gatos") devolve 0

Funo parseInt Funo que converte uma string num nmero inteiro. Se a string no for possvel de converter em inteiro a funo devolve NaN. Strings comeadas por 0x so interpretadas como nmeros hexadecimais.

334

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Espaos em branco que antecedam valores inteiros vlidos so 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 binrio:
parseInt("1010", 2) // devolve 10 (a representao binria de 1010)

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

Figura107 Definir uma funo

II.5. FUNES

335

Depois surgem os nomes dos argumentos a ser passados que aparecem listados entre parntesis. Os nomes dos parmetros so separados por vrgulas.
function calcTotal (preco, iva)

A seguir basta digitar entre chavetas o cdigo da funo.


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

A outra parte especial duma funo a aco return, que notifica a funo para terminar e retornar um certo valor para o cdigo que chamou a funo.
function calcTotal (preco, taxa) { return (preco, iva); }

Para chamar a funo necessrio escrever algo semelhante a:


calcTotal(50, 1.7);

Vamos criar uma pequena funo para converter valores de escudos para euros. Criamos duas caixas de texto. A caixa para os escudos (escudos) ser do tipo input, enquanto que a que vai apresentar a converso em euros (euros) ser dinmica.

Figura108 Interface

Na primeira keyframe do filme vamos criar a funo. Escolha no painel ACTIONS > USER DEFINED FUNCTIONS > FUNCTION . Defina o nome da funo e o parmetro que vai ser necessrio (escudos).

336

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

De seguida seleccione na mesma categoria a action Return.

Figura109 Definir a funo

Agora basta associar ao boto que vai efectuar o clculo a chamada da funo: Ao introduzir um valor o utilizador preenche o parmetro necessrio para a funo efectuar o clculo. O valor de seguida devolvido para dentro da varivel euros.

Figura110 Actions do boto

II.6. OBJECTOS

Os objectos so blocos de cdigo designados para desempenhar determinadas tarefas. Cada objecto possui propriedades que podem ser manipuladas. Estas propriedades so na realidade variveis. Para alm das propriedades, os objectos possuem ainda mtodos que lhes permitem desempenhar determinada funo. A grande vantagem dos objectos a sua reutilizao. As linguagens orientadas por objectos, como o Actionscript, vm j com alguns objectos incorporados. Os objectos no Flash MX esto divididos em quatro categorias: Objectos nucleares (core) que so tambm comuns especificao ECMA Array, Boolean, Date, Function, Math, Number, Object e String. Objectos de Movie que so caractersticos do Actionscript Accessibility, Button, Capabilities, Color, Key, Mouse, MovieClip, Selection, Sound, Stage, System, TextField e TextFormat Objectos Client / Server que so tambm especficos do Actionscript e que permitem comunicar entre cliente e servidor - LoadVars, XML, e XMLSocket. Objectos Authoring que permitem configurar o Flash - CustomActions e Live Preview.

Aceder s propriedades de um objecto


Para aceder s propriedades de um objecto utiliza-se o ponto (.) como operador. O nome do objecto surge do lado esquerdo separado pelo ponto e o nome da propriedade que pretendemos aceder.

338

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Object.name

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


Objecto.name = Helena;

Invocar o mtodo de um objecto


O operador ponto (.) tambm permite aceder aos mtodos de um determinado objecto. No exemplo seguinte chamamos o mtodo setRGB para o objecto Color.
onClipEvent (load) { myColor = new Color(this); myColor.setRGB(0xFF66FF); }

Objectos da categoria core


UTILIZAR O OBJECTO DATE
Objecto que constri uma nova data e/ou hora capturada atravs da data e hora do computador do utilizador. Para este exerccio, comece por criar um movie clip na biblioteca que vai conter uma caixa de texto dinmico chamada hora_txt.

Figura111

II.6. OBJECTOS

339

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

Figura112

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

UTILIZAR O OBJECTO ARRAY


Um array um objecto cujas propriedades podem ser acedidas atravs de um nmero que determina a sua posio no array. O primeiro 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 nmero do elemento a que se pretende aceder. Por exemplo, o seguinte array possui quatro valores, associados a cada um dos nmeros do array. O array deve ser sempre iniciado com o construtor new Array().
novoArray=New Array(); novoArray[0] = "Liliana"; novoArray[1] = "Manuela"; novoArray[2] = "Luisa"; novoArray[3] = "Sara";

O mesmo array tambm pode ser descrito de uma forma mais extensa do seguinte modo:
novoArray=New Array("Liliana","Manuela","Luisa","Sara");

340

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Vamos agora completar o exemplo do relgio acrescentando mais um movie clip para conter a data completa. Dentro deste movie clip est outra caixa de texto qual demos o nome de data_txt. Na primeira keyframe do filme criamos dois novos arrays.

Figura113 Criar os arrays

Para a instncia do movie clip que ir conter a data, teremos:

Figura114 Actions da instncia

UTILIZAR O OBJECTO MATH > MTODO MAX


Devolve o maior valor de dois valores ou resultados de expresses numricas.
Math.max(x,y)

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

II.6. OBJECTOS UTILIZAR O OBJECTO MATH > MTODO MIN

341

Devolve o menor valor de dois valores ou resultados de expresses numricas.


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

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

UTILIZAR O OBJECTO MATH > M TODO PI


Constante matemtica 3.14159265358979... .
Math.PI()

equivalente

ao

valor

do

Pi,

ou

seja,

UTILIZAR O OBJECTO MATH > MTODO ROUND


Utilizado para arredondar uma expresso numrica ou um valor. O resultado da seguinte expresso numrica 56.
Math.round(55.98)

UTILIZAR O OBJECTO MATH > MTODO RANDOM


Retorna um nmero aleatrio entre 0 e 0.9999...
Math.random()

342

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Figura115 Random e Round

UTILIZAR O OBJECTO MATH > MTODO SQRT


Determina a raiz quadrada de um nmero ou expresso numrica.
Math.sqrt(x)

Parmetros: x Nmero ou expresso numrica maior que 0.

Figura116 Raiz quadrada

Objectos da categoria movie


UTILIZAR O OBJECTO COLOR
Com este objecto possvel alterar a cor RGB a um movie clip. Depois de atribudos os valores podem ainda ser guardados para reutilizar mais tarde.

II.6. OBJECTOS

343

Deve ser sempre usado o construtor new Color() para definir uma nova instncia. Mtodos do objecto Color.getRGB - Devolve o valor numrico RGB atribudo pelo ltimo mtodo setRGB. Color.getTransform Devolve a informao do ltimo mtodo 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 atravs da introduo de valores RGB. Para isso vamos criar trs caixas de texto, para as trs cores primrias do modelo RGB.

Figura117 - Interface

Na primeira keyframe do filme iremos criar o construtor new Color().


alvo_color=new Color(alvo_mc);

De seguida, seleccionamos o movie clip e atribumos os valores das caixas instncia atravs do mtodo setRGB.

Figura118 Aplicar o mtodo setRGB ao movie clip

344

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Os valores devem ser introduzidos pelo utilizador em cdigo hexadecimal.

Figura119 Inserir os valores

UTILIZAR O OBJECTO MOVIECLIP > MTODO HITTEST


Vamos usar o mtodo hitTest para detectar quando um movie clip se encontra sobreposto com outro.
movieClip.hitTest(target)

Parmetros: target O target path da rea de coliso com o movie clip. Continuamos no exemplo do filme pacman. Criamos um novo movie na biblioteca e colocamos uma instncia no palco. Atribumos um nome instncia (laranja) e na primeira keyframe do filme vamos criar uma funo.

Figura120 Nomear a instncia

A funo vai permitir-nos reutilizar cdigo, pois os quatro botes vo necessitar de testar a sobreposio do movie.

II.6. OBJECTOS

345

Figura121 Actions da keyframe

Nos botes basta acrescentar o cdigo para chamar a funo sempre que o movie clip deslocado. Ver a figura 122.

Figura122

UTILIZAR O OBJECTO SOUND


O objecto Sound permite controlar o som de um filme. Ao utilizar este objecto sem especificar Target, todos os sons do filme sero controlados. Deve ser utilizado o construtor new Sound() para criar uma nova instncia de som antes de ser possvel utilizar os seus mtodos.
musica = new Sound();

Como exemplo, vamos criar uma animao para onde um som carregado e controlado atravs de dois botes. Um boto pra o som e outro recomea o som de novo a partir do incio. Comeamos por criar na primeira keyframe do filme um construtor para a nova instncia de som. Logo de seguida carregamos um som externo, ou seja, que no foi importado para a biblioteca do filme.

346

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura123 Actions da primeira keyframe

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

Figura124 Boto Play

musica.start(secondOffset, loop)

secondOffset Permite comear o som numa determinada posio. Este valor opcional e o seu valor deve ser introduzido em segundos. Loop Nmero de loops que o som ir efectuar Para o boto de paragem do som, teremos de usar o mtodo stop.

Figura125 Parar o som

musica.stop("idName");

II.6. OBJECTOS

347

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

Figura126

UTILIZAR O OBJECTO CAPABILITIES


Este objecto permite analisar caractersticas do sistema do utilizador, tais como resoluo, cores e capacidades udio ou vdeo. Para utiliz-lo necessrio usar tambm o objecto system . Por exemplo, para verificar se o sistema tem capacidades udio:
System.capabilites.hasAudio

Propriedades do objecto capabilities: System.capabilities.hasAudioEncoder Mostra os encoders de udio suportados. System.capabilities.hasAccessibility Indica se o sistema possui os standards de acessibilidade requeridos. System.capabilities.hasAudio Se o sistema possui ou no capacidades udio. System.capabilities.hasMP3 Possibilidade de ler ou no MP3.

348

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

System.capabilities.language Indica a linguagem suportada pelo FlashPlayer. System.capabilities.manufacturer Indica o fabricante do Player do Flash. System.capabilities.os Indica o sistema operativo do computador que est a correr o Player do Flash. System.capabilities.pixelAspectRatio Indica a proporo dos pixis do ecr. System.capabilities.screenColor Indica se o monitor a cores ou a preto e branco. System.capabilities.screenDPI Indica o nmero de pontos por 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 verso mais antiga suportada pelo Player do Flash. System.capabilities.hasVideoEncoder Mostra os encoders instalados para vdeo.

Figura127

Para exemplificar, no palco desenhamos algumas caixas de texto, s quais atribumos propriedades do objecto capabilities. O resultado do filme depois de testado aparece na figura 128.

II.6. OBJECTOS

349

Figura128

Objectos da categoria client/server


UTILIZAR O OBJECTO LOADVARS
Este objecto utilizado como alternativa action LoadVariables, para transferncia de dados entre um servidor e o filme de Flash. necessrio utilizar o construtor new LoadVars() antes de invocar os seus mtodos. Mtodos do objecto LoadVars: LoadVars.load Faz download de variveis de um URL especfico. LoadVars.getBytesTotal Devolve o nmero de bytes carregados atravs do mtodo load ou sendAndLoad. LoadVars.getBytesTotal Devolve o nmero total de bytes aos quais ser feito download atravs do mtodo load ou sendAndLoad. LoadVars.send Publica as variveis de um objecto LoadVars para um determinado URL. LoadVars.sendAndLoad Publica as variveis de um objecto LoadVars e faz download da resposta do servidor para um objecto. LoadVars.toString Devolve uma string de URL codificada que contm todas as variveis enumeradas pelo objecto LoadVars.

350

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Eventos do objecto LoadVars: LoadVars.onLoad Invocado quando uma operao de load ou sendAndLoad completada. Iremos criar um menu dinmico, que vai buscar os valores das suas opes e links do boto a um ficheiro de texto externo.

Figura129 Ficheiro texto

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

Figura130 Boto dentro do movie com a caixa de texto

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

II.6. OBJECTOS

351

Figura131 Instncia do movie no palco

Na primeira keyframe do filme iniciamos as actions criando um construtor LoadVars ao qual atribumos o nome dados_lVars.
dados_lVars=new LoadVars();

Na segunda linha aplicamos a funo 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 contm os dados que necessitamos para criar o filme.
dados_lVars.load("links.txt");

E vamos criar a funo que atribui os valores carregados aos botes, que so gerados dinamicamente atravs de um ciclo While. Atribumos ao primeiro boto o valor do primeiro texto e do link que lhe corresponde dentro do ficheiro de texto.
botao1.botao_txt.text=dados_lVars.txt1; botao1.link=dados_lVars.link1;

352

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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


I=2;

Iniciamos o ciclo while. Enquanto existirem novos textos no ficheiro externos duplicado um novo boto e deslocado 40 pixis na vertical:
while(eval("dados_lVars.txt"+i)!=null){ eval("botao"+(i-1)).duplicateMovieClip("botao"+i,i); eval("botao"+i)._y+=40;

Finalmente so atribudos ao boto duplicado o seu texto, o seu link e a varivel i incrementada em uma unidade, para criar a prxima instncia de boto.
eval("botao"+i).botao_txt.text=eval("dados_lVars.txt"+i); eval("botao"+i).link=eval("dados_lVars.link"+i) i++; }

Figura132 Script completo

UTILIZAR O OBJECTO XML


Utiliza-se para carregar, manipular e construir documentos de XML.

II.6. OBJECTOS

353

necessrio criar primeiro um construtor new XML() antes de chamar os mtodos do objecto. Antes de mais, e visto que estamos a tratar de um assunto relativamente recente, vamos falar um pouco da estrutura de um documento XML, atravs de um exemplo simples:
<?xml version="1.0"?> <!DOCTYPE lista de pessoas> <pessoas> <pessoa codigo=E345> <nome>Jos</nome> <Idade>54</idade> </pessoa> <pessoa codigo=F546> <nome>Maria</nome> <Idade>32</idade> </pessoa> </pessoas>

Neste exemplo, estamos a transmitir as caractersticas nomeadamente um cdigo, o nome e a idade - de duas pessoas. Para quem conhece o HTML, decerto j notou as semelhanas. Qualquer documento XML, comea pela declarao da verso. De seguida, a declarao do tipo de documento, que opcional. A partir da, surge a descrio dos dados. A estrutura sempre a mesma. Cada bloco de dados est encarcerado entre uma etiqueta de declarao de incio e outra de fim. No exemplo, os dados de cada pessoa comeam pela declarao <pessoa>, e terminam em </pessoa>. Dentro de cada pessoa, esto os dados que lhe pertencem. Se for necessrio declarar elementos vazios, usa-se apenas uma etiqueta: <pessoa/>, que equivalente a <pessoa></pessoa>. Desta estrutura resulta uma hierarquia de dados em rvore (figura 133). Cada uma das bifurcaes, denomina-se n (Node no Flash). Aos segmentos de informao chamam-se textos. Cada um dos ns pode conter atributos, ou sub-ns especiais os de texto, que no contm

354

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

atributos, nem sub-ns. O texto declarado entre as etiquetas de incio e fim. No exemplo, temos o nome e a idade. Os atributos so declarados dentro da etiqueta de incio. No exemplo, o cdigo. Os ns so pais (parent) e filhos (child) uns dos outros. Por exemplo, pessoa filho do documento, mas pai de nome e idade.

Figura133 Estrutura de um documento XML

Como exemplo, vamos criar uma agenda em Flash que acede aos dados contidos num ficheiro de XML. O nosso ficheiro encontra-se na mesma pasta do filme e contm a 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 Referncia ao primeiro filho do n especificado. xml.nextsibling Refere-se prxima 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 TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Na segunda linha iremos aplicar a propriedade IgnoreWhite para o Flash ignorar todas as quebras de linha do documento de texto.
agenda_xml.ignoreWhite = true;

De seguida acrescentamos uma linha para uma funo de nome carregado correr assim que o ficheiro de XML esteja carregado.
agenda_xml.onLoad = carregado;

A quarta linha carrega o ficheiro. Utilizamos o mtodo Load para esse efeito.
agenda_xml.load("teste.xml");

Agora criamos a funo para fazer referncia que vai ser executada depois do carregamento.
function carregado() { agenda = agenda_xml.firstChild; pessoa = agenda.firstChild; apresentaDados(); }

E de seguida a funo que vai apresentar os dados:


function apresentaDados() { codigo = pessoa.attributes.codigo; valor = pessoa.firstChild; nome = valor.firstChild.nodeValue; valor = valor.nextSibling; telefone = valor.firstChild.nodeValue; }

Para as actions dos botes, vamos introduzir utilizar a condio if para determinar se os dados do ficheiro de XML j terminaram ou no.

II.6. OBJECTOS

357

Figura136 Botes de navegao no documento

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

Figura137 Janela Components

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

Fig138 Biblioteca

360

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

O painel PROPERTIES mostra a informao para configurar o componente atravs da definio dos seus parmetros. Cada componente tambm por si s uma instncia e deve-lhe ser atribudo um nome nico no filme. Para alterar o aspecto de qualquer um dos componentes, basta alterar os movie clips que se encontram dentro da pasta Component Skins.

Fig139 Painel Properties com um componente seleccionado

Os componentes podem ser visualizados tal e qual como aparecero no filme publicado se o modo de visualizao Live Preview ( ONTROL > C LIVE PREVIEW) estiver activado. No entanto, os componentes no esto operacionais desta forma. Teste-os com o comando CONTROL > TEST MOVIE.

Figura140 Sem live preview vs Live preview

Existem sete componentes no painel Components.

Checkbox
Permite adicionar caixas de verificao ao documento. As caixas permitem escolhas mltiplas. Parmetros: Change Handler - String de texto que permite indicar a funo que dever ser executada quando o valor da checkbox alterado. A funo

II.7. COMPONENTES

361

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

Figura141 Opes Checkbox

ComboBox
Possibilita adicionar menus drop-down com vrias opes. Estes menus podem ser editveis ou estticos. Cada item da caixa tem um valor, sendo o primeiro equivalente a 0. Parmetros: Change Handler - String de texto que permite indicar a funo que dever ser executada quando o valor da checkbox alterado. A funo deve estar definida na mesma timeline da checkbox e o nome da combobox pode ser aceite como parmetro. Data um array de strings de texto que especificam os valores associados a cada uma das entradas do menu. Editable Determina se a caixa editvel ou no. Labels Ttulos que surgem para escolha dentro do menu. Row Count Nmero de itens listados no menu.

Figura142 Opes ComboBox

362

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

ListBox
Permite adicionar listas de escolha nica ou mltipla. Estas listas podem possuir scrollbars. Parmetros: Change Handler String de texto que permite indicar a funo que dever ser executada quando o valor da checkbox alterado. A funo deve estar definida na mesma timeline da checkbox. Este parmetro opcional e s necessrio incluir se pretendermos que algo acontea quando um item seleccionado. Data um array de strings de texto que especificam os valores associados a cada uma das entradas da lista. Labels Ttulos que surgem para escolha dentro da caixa. Select Multiple Especifica se a lista permite ou no escolha mltipla. Se a opo False for seleccionada, a lista no permite escolhas mltiplas; este o valor por defeito.

Figura143 Opes ListBox

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

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

II.7. COMPONENTES

363

RadioButton
Permite adicionar botes de escolha nica ao documento. Parmetros: Change Handler String de texto que permite indicar a funo que dever ser executada quando o valor do radio button alterado. A funo deve estar definida na mesma timeline do radio button. Este parmetro opcional e s necessrio incluir se pretendermos que algo acontea quando um item seleccionado. Data um array de strings de texto que especificam os valores associados a cada uma das entradas da lista. Group Name Especifica a que grupo de botes pertence o boto. Vrios botes podem pertencer ao mesmo grupo. Initial State Indica se o boto est ou no seleccionado de incio. Label - Texto que aparece ao lado do boto. Label Placement Indica se o label aparece direita ou esquerda do boto.

Figura144 Opes ComboBox

Scrollbar
Permite adicionar um scrollbar vertical ou horizontal ao documento. a forma mais simples de adicionar scrollbars a caixas de texto. Para adicionar um scrollbar a uma caixa de texto, crie uma caixa de texto do tipo dinmico ou input. Escolha a opo multiline para poder escrever em vrias linhas.

364

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

Figura145 Scrollbar

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

Figura146 Opes Scrollbar

ScrollPane
Permite adicionar janelas com scrollbars horizontais e verticais para mostrar movie clips. especialmente indicado para mostrar muita informao em pouco espao de documento. Parmetros: Drag Content Indica se o utilizador pode arrastar o contedo do painel, ou tem de utilizar as scrollbars.

II.7. COMPONENTES

365

Horizontal Scroll Determina se a barra horizontal est a ser mostrada ou no. O valor por defeito auto, em que apenas mostrada se for necessria.

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

Figura147 Linkage

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

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

366

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Figura149

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

Fig150 Formulrio

Nomes das instncias: Checkbox = participa Combobox = viagem com trs opes: Maldivas Istanbul Cuba Radio button 1= Meio_av Radio button 2= Meio_comb Para capturar os valores de todos os campos criamos uma funo na timeline do filme e associamos essa funo ao boto Enviar. Comeamos por nomear a instncia do boto e digitamos em Click Handler o nome da funo que ser chamada quando o boto for premido.

II.7. COMPONENTES

367

Figura151

Agora na primeira keyframe do filme criamos a funo que vai ficar associada ao boto.
function clicar (enviar) { }

Comeamos por recolher os dados da checkbox. Em ACTIONS > UI COMPONENTS > FCHECKBOX > METHODS > GET VALUE
function clicar (enviar) { trace(participa.getValue()); }

FLASH

Para recolher os dados do grupo de radio buttons:


function clicar (enviar) { trace(participa.getValue()); trace(RadioGroup.getValue()); }

Para recolher o nome do label seleccionado na combobox, acrescentamos ainda:


function clicar (enviar) { trace(participa.getValue()); trace(RadioGroup.getValue()); trace(viagem.getSelectedItem().label); }

O resultado depois de fazer CONTROL > TEST MOVIE:

368

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Fig152 Resultado

Anexo 1. SISTEMA HEXADECIMAL

Este sistema de numerao foi inventado para "simplificar" o trabalho de lidar com nmeros muito grandes. Ns, humanos, utilizamos um sistema de numerao de base 10, decorrente do facto de termos dez dedos. No nosso sistema, a posio de um determinado algarismo relevante, ao contrrio, por exemplo, dos nmeros romanos onde isto no acontece. Outra particularidade do nosso sistema de numerao que cada casa decimal apenas pode variar de 0 a 9. Quando precisamos representar nmeros acima da faixa que uma determinada casa decimal pode 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 dgito imediatamente esquerda do 9. Como neste caso o 9 tambm pode ser visto como 09, ento devemos passar o 9 a 0 e o 0 a 1, criando assim o nmero 10. Imagine o contador de quilmetros de um automvel. Se o colocar a zero, medida que o automvel se desloca, o primeiro dgito da direita sobe progressivamente de 0 a 9, voltando em seguida a 0, e nesta volta causando o incremento do dgito imediatamente sua esquerda, que passa ento de 0 a 1, passando assim a representar o nmero 10. Processo similar ocorre quando estes dois dgitos atingirem o valor 99 quando ento passaro a 00 e acrescentaro 1 ao dgito da esquerda, passando a 100. Agora pense que o seu contador est a trabalhar na base 16. Ele pode contar de 0 a 15 antes de ter de increm entar o dgito esquerda. Como a contagem na base 10 utiliza smbolos que ocupam uma s posio para representar cada um dos nmeros, ento na base 16 tambm

370

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

deveremos criar smbolos para representar todos os algarismos de 0 a 15. J temos porm os dez primeiros que podemos pedir emprestados base 10, ou seja, 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para os nmeros de 10 a 15 foi decidido utilizar sequencialmente as letras A, B, C, D, E e F. Como um algarismo dentro de um determinado nmero pode ter valores diferentes consoante a sua posio, podemos desmembrar um nmero de acordo com a sua posio relativa. Ento, por exemplo, o nmero 5.326 pode ser lido como cinco milhares, trs centenas, duas dezenas e seis unidades. Se pensarmos bem, um milhar igual a 10 vezes 10 vezes 10. Da mesma forma, uma centena igual a 10 vezes 10, sendo logicamente uma dezena igual a 10. Colocando isto de uma maneira que nos facilite a visualizao, temos o resultado abaixo:
POSIO MILHAR CENTENA DEZENA UNIDADE Valor da coluna 1000 100 10 1 Pode ser visto como 10 x 10 x 10 10 x 10 10 1 Ou ... 3 10 2 10 1 10 0 10

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

As posies agora tm aspas porque no fazem mais sentido no novo sistema. Servem apenas para que identifique a posio relativa do algaismo de um determinado nmero.

ANEXO 1. SISTEMA HEXADECIMAL

371

Ento, se tivermos, por exemplo, o nmero 2F, podemos descobrir o seu valor na base 10, multiplicando-se o valor que o F tem relativamente sua coluna e somando o valor que o 2 tem na coluna que ocupa. O F vale 15 e est na coluna zero. Ento, 15x16 =15 e 2x16 =32, logo o nmero 2F equivale ao nosso nmero 47. Por raciocnio anlogo, o nmero ABCD ser: A = 10. B = 11. C = 12. D = 13. Como est na coluna 3 (16 ) ento 10 x 16 = 40.960 Como est na coluna 2 (16 ) ento 11 x 16 = 2.816 Como est na coluna 1 (16 ) ento 12 x 16 = 192 Como est na coluna 0 (16 ) ento 13 x 16 = 13
0 0 1 1 2 2 3 3
1 0

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

372

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

Se olharmos agora para os nmeros resultantes, de trs para a frente, teremos os nmeros 15, 10 e 0, que correspondem a F, A e zero, logo, na base 16, o nmero 4000 FA0 16.

Anexo 2. WEB COLORS

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

Como um bit possui dois estados possveis, ou seja, 0 ou 1, ento 8 bits possuem 256 estados possveis, uma vez que 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256.

Anexo 3. EXTENSION MANAGER como instalar as extenses adicionais ao Flash MX

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

Certificando-se de que no tem o Flash MX aberto.

376

C ENTRO A TLNTICO C OLECO TECNOLOGIAS FLASH MX: DESIGN, A NIMAO E P ROGRAMAO

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

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

As extenses existem em verses diferentes para o Flash MX de PC e para o de MAC. Apesar disso, tm os mesmos nomes.

ANEXO 3. EXTENSION MANAGER

377

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

Você também pode gostar