Introduo

Como muitas tecnologias criativas, a plataforma Flash (no apenas o soft-

ware, mas tambm a comunidade) explodiu durante os ltimos anos, im-
pulsionada por computadores mais rpidos e mais baratos, pela chegada
do acesso de banda larga econmico e pelo crescente papel que a Internet
desempenha em nossas vidas pessoais e profissionais. Se voc est lendo
este livro seja voc um desenvolvedor ou designer (ou talvez um membro
da nova categoria denominada devigner, um programador difcil de rotular)
porque o Flash desempenha ou desempenhar uma funo em sua vida
profissional. Independentemente do seu nvel de experincia, voc ver que
o Flash um aplicativo que tem muito a oferecer.
O Flash CS4 Professional adicionou ainda mais recursos sua poderosa
caixa de ferramentas. A linguagem de script interna do Flash, o ActionS-
cript 3.0, foi aperfeioada em reas importantes e muitos controles novos
foram adicionados interface do aplicativo. Recursos como a manipulao
de ativos 3D simples, a cinemtica inversa para animao e um novssimo
editor de movimento (Motion Editor) esto entre as alteraes disponveis
aos usurios do Flash, com ou sem habilidades de programao.
Porm, com todos esses recursos, vem a complexidade. O Flash tem grande
abrangncia e profundidade, e aprender rapidamente por conta prpria
um desafio. Como discutido no Prefcio, este livro apresenta os recursos
fundamentais do Flash com exemplos da utilizao desses recursos em um
projeto de portflio. Voc vai aprender a interface do Flash, com uma pita-
da de ActionScript para obter o efeito final desejado.
NOTA
Quando estiver pronto para aprender mais sobre ActionScript, o livro Aprendendo
ActionScript 3.0: guia para iniciantes poder ajud-lo. Para mais informaes, con-
sulte o Prefcio.
FUNDAMENTOS
DA INTERFACE
CAPTULO 1
NESTE CAPTULO
Introduo
Conhecendo a interface
do Flash CS4
Personalizando sua
interface
Progresso do projeto
Aprendendo Flash CS4 Professional 28
Conhecendo a interface do Flash CS4
O primeiro passo na aprendizagem do Flash explorar a interface do apli-
cativo, s vezes chamada de ambiente de desenvolvimento integrado (IDE).
Desde a aquisio do Flash pela Adobe, a interface sofreu mudanas para
melhorar a coerncia e a interoperabilidade com outros aplicativos do Ado-
be Creative Suite. O Flash CS4 Professional se aproximou mais do objetivo
de ter elementos comuns de interface do usurio do que qualquer outra
verso anterior do programa. Antes de continuar, porm, voc precisa criar
um novo documento.
Criando um novo documento
Se voc for iniciante em Flash, talvez se surpreenda com a tela de boas-vin-
das ao iniciar o programa. Essa tela (mostrada na Figura 1-1) dividida em
cinco reas principais.
Figura 1-1 A tela de boas-vindas.
Captulo 1 Fundamentos da interface 29
Open a Recent Item
Apresenta uma lista resumida dos documentos abertos anteriormente.
Essa lista estar vazia na primeira vez em que voc iniciar o programa,
mas guardar os oito arquivos utilizados mais recentemente e uma op-
o para abrir qualquer arquivo existente. Para abrir um item recente
listado, clique em seu nome. Para abrir um documento que no esteja
listado, clique no boto Open; um navegador de arquivos padro apa-
rece para que voc possa encontrar e abrir o documento.
Create New
Voc vai usar muito os itens dessa lista e, no trabalho com este livro,
a opo Flash File (ActionScript 3.0) normalmente ser a escolhida.
Ao clicar nesse boto, ser criado um arquivo Flash nativo (extenso
de nome de arquivo .fla) que foi previamente configurado a utilizar o
ActionScript 3.0 como sua linguagem de script. Essa opo instrui o
Flash a usar a sintaxe adequada ao verificar e compilar seus scripts.
Create from Template
Clique nesse boto para abrir uma caixa de dilogo que exibe modelos
prontos para vrias dimenses de publicidade. Clicar em um modelo
abre um arquivo configurado previamente com os ativos do modelo.
Voc vai criar e usar um modelo posteriormente neste captulo.
Extend
O link dessa seo leva ao Adobe Exchange online, que permite fazer
download de extenses que adicionam funcionalidade ao Flash.
rea de Link
A faixa na parte inferior da tela de boas-vindas fornece links para ma-
teriais online com contedo introdutrio, novos recursos, recursos adi-
cionais, dicas, podcasts e muito mais.
Caso prefira no usar a tela de boas-vindas, desabilite-a marcando a caixa
de seleo do recurso Dont show again no canto inferior esquerdo da
tela. Todos os recursos da tela de boas-vindas esto disponveis nos menus
File e Help, e voc pode restaurar a tela posteriormente nas preferncias do
aplicativo, se quiser.
Usando a nova janela do aplicativo
Dependendo de quanto voc usa o Flash e de quanto voc produz no apli-
cativo propriamente dito (em vez de criar ativos em outros aplicativos, por
exemplo), a interface pode se tornar confusa com muitas janelas e painis.
O Flash CS4 Professional ajuda a tratar esse problema reunindo a maioria
dos recursos dentro de uma janela principal do aplicativo. Voc pode ajus-
tar essa configurao de inmeras maneiras, facilitando e personalizando a
organizao de seu ambiente de trabalho ao mesmo tempo.
NOTA
Embora a quantidade limitada de
ActionScript abordada neste livro
foque exclusivamente a verso
3.0, ainda possvel criar arqui-
vos baseados no ActionScript 1.0
ou 2.0 escolhendo a opo Flash
File (ActionScript 2.0) durante o
processo de criao do arquivo.
Selecionar a verso do ActionScript
que ser usada em cada arquivo
muito importante. O Flash Player
9 e posteriores, por exemplo, po-
dem executar arquivos do Flash
criados em ActionScript: 1.0, 2.0
e 3.0. As verses 1.0 e 2.0 podem
coexistir e so representadas pela
opo ActionScript 2.0. Porm,
no possvel que um nico FLA
inclua tanto o ActionScript 3.0
quanto qualquer uma das verses
anteriores.
A boa notcia que voc no est
preso a essa deciso ao criar um
novo arquivo. possvel alterar
a verso do ActionScript que um
arquivo utiliza aps ele ter sido
criado. Isso no ir modificar o
cdigo que voc escreveu, mas in-
formar ao Flash como verificar
e compilar os seus scripts.
Aprendendo Flash CS4 Professional 30
Se voc j utilizou o Flash antes, pode se surpreender com a configurao da
rea de trabalho na primeira vez em que iniciar o aplicativo. Embora algumas
reas da interface permaneam familiares, outras mudaram de local, forma e
funcionalidade. Examine o layout padro da interface na Figura 1-2.
Pasteboard
Timeline
Painel Properties
Painel Tools
Barra de edio Guias do documento
Controles da janela do sistema operacional e a rea de menus
(barra de menus utilizada no Macintosh) Menu do espao de trabalho Pesquisa Help
Stage
Figura 1-2 A janela do aplicativo.
O foco do layout padro o Stage e o Pasteboard juntos. O Stage a rea de
seu arquivo final que estar visvel durante a reproduo. O Pasteboard a
rea cinza em torno do Stage que no ser exibida em tempo de execuo.
Isso til para a movimentao de ativos dentro e fora da visualizao. Por
exemplo, um ativo que esteja situado no Pasteboard em princpio no ser
visvel e poder ser animado no Stage. Da mesma forma, um ativo pode ser
movido para o Pasteboard para ser ocultado da visualizao.
medida que voc for lendo este livro, ele o ajudar a fazer comparaes
entre o mundo Flash e o mundo real do teatro ou filme. Pense no Stage como
o palco ou o set de cinema em que uma pea ou um filme executado. Pense
no Pasteboard como os bastidores do teatro ou o estdio, usado pelos artistas
e pessoal tcnico para suporte, trocas de roupas e para entradas e sadas.
NOTA
A Figura 1-2 representa o works-
pace Essential. Voc pode alterar
o workspace para vrios layouts
predefinidos e personaliz-los
como desejar. Consulte Selecio-
nando e editando um workspace,
posteriormente neste captulo.
Captulo 1 Fundamentos da interface 31
Por padro, sempre que um documento Flash aberto, ele exibido como
uma guia logo acima do Stage dentro da janela principal do aplicativo. To-
dos os documentos Flash so reunidos como guias em um layout logo aci-
ma do Stage, dentro da janela principal do aplicativo. Voc pode arrastar
essas guias para reorden-las, arrast-las para fora do layout disposto em
guias para criar novas janelas de documentos e arrast-las novamente para
o layout disposto em guias para consolidar as janelas.
Se voc abrir dois documentos, eles aparecero como guias na ordem em
que foram abertos. Por exemplo, MyDocument1.fla e MyDocument2.fla.
Se voc arrastar MyDocument1.fla para a direita da guia MyDocument2.
fla, as guias sero reordenadas. Se voc arrastar uma guia de documento
para baixo, longe de seu local original, o documento ser transferido para a
sua prpria janela. Posteriormente, voc pode arrastar a barra da janela no-
vamente para a srie de guias e o documento reaparecer como uma guia,
descartando a janela inutilizada.
Cada janela de documento contm um Stage e um Pasteboard, assim como
um pequeno grupo de ferramentas de navegao e de zoom conhecidas coleti-
vamente como Edit Bar. A Edit Bar o ajuda a percorrer os ativos aninhados da
mesma forma que o sistema operacional permite que voc navegue pelas pastas
aninhadas, mantendo um rastro do seu progresso conforme voc se aprofunda
nos nveis do contedo aninhado. Isso tambm permite selecionar cenas, que
so anlogas s cenas de sua pea ou filme e smbolos, que so anlogos aos
atores em uma pea. Voc aprender mais sobre isso nos captulos posteriores.
Por fim, voc pode usar o menu Zoom no canto direito da Edit Bar para ver o
documento em vrios tamanhos. O menu oferece tamanhos entre 25% e 800%
e possvel inserir manualmente valores de zoom variando de 8% a 2000%.
Acima do Stage, est a barra principal da janela, contendo os controles do
sistema operacional; os controles da janela para as duas plataformas e o
menu completo do aplicativo na plataforma Windows (a barra de menus
do sistema operacional padro usada na plataforma Macintosh). Tambm
est includo nessa barra da janela um menu de configurao da interface e
um campo de pesquisa Help.
Abaixo do Stage, est a Timeline. Como o nome indica, a Timeline usa um
simbolismo baseado no tempo para a execuo de todo o seu arquivo e
anlogo a um carretel de filme. Por padro, o cabeote de reproduo do
Flash ou o marcador de frame atual percorre a Timeline durante a reprodu-
o, exibindo cada frame linear do projeto da forma como a luz projeta cada
frame do filme sequencialmente sobre uma tela.
Sempre que voc coloca um ativo no palco durante a criao, ele aparecer
na Timeline de forma muito parecida como um evento representado em
uma Timeline histrica. Por exemplo, um evento curto pode ser representa-
do como um ponto, enquanto uma linha com extenso de vrios anos pode
fazer referncia a um evento mais longo. A Timeline do Flash funciona de
modo semelhante.
Voc pode controlar quando os ativos so exibidos em seu arquivo colo-
cando-os em frames especficos da Timeline. Por exemplo, se voc quiser
NOTA
As cenas so usadas para dividir
Timelines muito longas em blocos
gerenciveis. Voc pode usar o
painel Scenes (WindowOther
PanelsScenes) para adicio-
nar, renomear, percorrer e ex-
cluir cenas.
Aprendendo Flash CS4 Professional 32
que uma imagem de plano de fundo aparea em toda a sua apresentao,
esse ativo deve se estender a todo frame usado. Por outro lado, um menu s
pode aparecer em um frame. Alm disso, caso queira que algo fique visvel
por pouco tempo, voc poder remover o elemento da Timeline aps um
curto intervalo de frames.
Porm, ao contrrio do filme, o tempo no fixo na reproduo da Timeline.
Voc no s pode alterar a taxa de frames do arquivo, algo como produzir um
efeito de cmera lenta ou avano rpido, como tambm usar o ActionScript
para produzir um salto no cabeote de reproduo do Flash, movendo-o de
um frame qualquer para outro e ainda par-lo em um determinado frame por
um perodo qualquer de tempo. Dessa forma, podemos imaginar a execuo
de um arquivo Flash como algo muito parecido a assistir um filme em DVD.
AVI SO
Outra diferena entre o comportamento do modelo de Timeline do Flash e de um filme
que as animaes Flash em computadores mais antigos podem ser reproduzidas de
forma mais lenta do que a taxa de frames solicitada. Assim, importante testar seu
trabalho em vrios computadores sempre que possvel.
Ancorados direita do Stage e da Timeline (como visto na Figura 1-2) esto
os painis Properties, Library e Tools. Os painis exibem grupos de parme-
tros e controles relacionados para o fcil acesso. Voc utilizar os painis
com frequncia e poder reorganiz-los para que se adaptem ao seu fluxo de
trabalho. Voc pode exibi-los ou ocult-los baseado em suas necessidades,
organiz-los em grupos lgicos e reorganiz-los como achar melhor.
O painel Tools contm vrias ferramentas de criao e manipulao de ativos.
O painel Library usado para organizar smbolos e ativos semelhantes do
Flash e, portanto, se parece um pouco com um camarim de teatro que rene
os atores para o desempenho de uma pea. Finalmente, o painel Properties
o local onde voc far os ajustes necessrios nas muitas propriedades do
documento e do ativo, como tamanho e posio. Esses trs painis, e alguns
outros, sero discutidos de forma mais detalhada na seo seguinte.
Compreendendo os painis
Os painis so os verdadeiros burros de carga da interface do Flash e enca-
ram todo o servio pesado que voc executa ao trabalhar em um arquivo.
Ao longo do livro, voc trabalhar com esses painis. Assim, esta discusso
um meio de lhe proporcionar uma breve viso geral de alguns painis
utilizados com mais frequncia.
Tools
Dividido em seis sees principais, o painel Tools do Flash o painel de
entrada que contm as ferramentas que voc usar em todo o seu trabalho
(Figura 1-3). O painel Tools tambm contm menus de ferramentas relacio-
nadas (Figura 1-4), nos quais somente uma pode ser usada em um determi-
nado momento. A lista a seguir descreve as seis sees do painel Tools.
Seleo e
transfor-
mao
Desenho
e texto
Opes
contextuais
Panormica
e zoom
Cores
Cinemtica
inversa e
retoque
1
2
3
4
5
6
7
Selection (V)
Subselection (A)
Transform
3D
Lasso (L)
Pen
Text (T)
Line (L)
Primitives
Pencil (V)
Brush/Spray
Deco (U)
I.K.
Paint/Ink
Eye Dropper (I)
Eraser (E)
Hand (H)
Zoom (M)
Stroke Color
Fill Color
Black and White
Swap Colors
Snapping
Smooth
Straighten
Figura 1-3 O painel Tools; os
atalhos de teclado esto listados
entre parnteses.
Captulo 1 Fundamentos da interface 33
GRUPOS DE FERRAMENTAS
SECUNDRIAS PADRO
Os grupos de ferramentas secundrias
padro, detalhados por nmeros, esto
relacionados na Figura 1-3.
1 Transform
2 3D
3 Pen
4 Primitives
5 Brush/Spray
6 Inverse Kinematics
7 Fill/Stroke
Figura 1-4 Menus de ferramentas padro acessados do painel Tools; os atalhos de
teclado esto listados entre parnteses.
Seleo e transformao
A primeira seo do painel Tools dedicada s ferramentas de sele-
o e transformao. Aqui, voc encontrar trs maneiras de selecionar
elementos para a manipulao. As ferramentas Selection e Lasso fun-
cionam do mesmo modo que na maioria dos aplicativos, permitindo
selecionar objetos clicando ou arrastando sobre eles, respectivamente.
A ferramenta Subselection permite selecionar pontos individuais e alas
de controle de vetores em vez de todo o objeto.
Nessa seo, tambm encontramos dois menus de ferramentas de trans-
formao. O menu Transform contm as ferramentas 2D Free Transform
(para redimensionar, girar e inclinar objetos) e Gradient Transform (para
a execuo de manipulaes similares em preenchimentos degrads).
O menu 3D contm as ferramentas 3D Rotation (para girar objetos em
torno dos eixos x, y e z no espao 3D) e 3D Translation (para mover as
posies dos objetos ao longo dos mesmos trs eixos no espao 3D).
Desenho e texto
Essa seo do painel Tools contm as ferramentas de criao, como Text
e Line. Text cria elementos de texto e Line cria linhas (tambm chama-
das de traados [strokes] no Flash). Aqui, voc tambm encontrar um
menu de formas primitivas, incluindo retngulos, elipses, polgonos e
estrelas. As ferramentas Pencil, Brush e Pen funcionam do mesmo modo
que em outros aplicativos, exceto que, no Flash, as ferramentas de de-
senho criam vetores em vez de pixels.
Aprendendo Flash CS4 Professional 34
Pencil e Brush so ferramentas de desenho mo livre, enquanto Pen
usada para desenhar curvas de Bzier curvas interpoladas pelo com-
putador que adquirem forma arrastando pontos e alas de controle.
O menu Pen contm ferramentas adicionais para o controle granular
sobre os cantos e a suavizao dessas curvas.
O menu Brush contm uma ferramenta nova no CS4 denominada
Spray Brush. Herdada do Adobe Illustrator, a Spray Brush permite pul-
verizar formas e smbolos no Stage, aplicando a eles os possveis ajustes
de redimensionamento e rotao.
De caracterstica semelhante, a ferramenta Deco distribui formas ou
smbolos ao longo de uma grade, um padro simtrico ou ainda um
algoritmo de videira em crescimento. O ltimo fornece opes de arte
de folha e de flor e opes avanadas, como a rotao de ramos e com-
primento do segmento. Voc usar a ferramenta Deco no prximo ca-
ptulo para criar seu primeiro exerccio interativo.
Cinemtica inversa e retoque
No CS4, voc agora pode usar a ferramenta Bones e sua companheira
Bind para criar armaes para a animao de objetos vinculados. Por
exemplo, voc pode usar a ferramenta Bones para vincular e animar um
brao robtico. A movimentao da garra na extremidade do brao faz
mover cada segmento do brao, com restries adicionais como limites
de rotao de articulao. Isso conhecido como cinemtica inversa.
No Flash, as ferramentas Eye Dropper, Eraser e Paint Bucket funcionam
de modos no tradicionais. Como acontecem com as ferramentas Brush
e Pencil, elas manipulam exclusivamente vetores, no pixels. A ferra-
menta Paint Bucket tem uma prima denominada Ink Well, que aplica
cor e outras caractersticas s linhas do modo como uma Paint Bucket
afeta preenchimentos.
Panormica e zoom
O ltimo lote de ferramentas dedicadas consiste nas ferramentas Hand,
para mover o entorno do palco dentro da janela, e Zoom (lupa), para
alterar os graus de ampliao.
Cores
O segmento de cores do painel Tools trabalha com outras ferramentas,
fornecendo acesso rpido a cores predefinidas para traados e preen-
chimentos. Como com outros aplicativos, voc tambm pode selecio-
nar um conjunto de cores preto-e-branco padro e trocar as duas cores
com o clique de um boto.
Opes contextuais
O segmento final do painel Tools uma rea contextual que varia de-
pendendo de qual seleo est ativa. A Figura 1-3 mostra as opes da
ferramenta Selection, que incluem ativar e desativar o ajuste, e a suavi-
zao e o acerto das linhas selecionadas.
Captulo 1 Fundamentos da interface 35
Properties
O painel Properties (tambm chamado de Property Inspector [Inspetor de pro-
priedades]) o principal local para o ajuste de valores de propriedades de
objetos como tamanho, local, orientao e efeitos de cor. Os usurios das
verses anteriores do Flash notaro uma grande diferena: o novo painel
vertical e oferece acesso a um nmero maior de propriedades. Ele ainda
contextual, ocultando e revelando propriedades de acordo com qual objeto
esteja selecionado. Para acomodar um grande nmero de propriedades, o
painel fornece barras de rolagem quando necessrio e est agrupado em
categorias que podem ser recolhidas ou expandidas.
Ao selecionar uma ferramenta no painel Tools, suas propriedades se tor-
nam ativas no painel Properties. Se uma ferramenta no tiver atributos
configurveis, o painel Properties mostrar as propriedades do documento,
como tamanho e cor do palco. Voc configurar essas propriedades ao criar
seu primeiro FLA, mas til se acostumar com a natureza contextual do
painel Properties.
Library
Como voc viu nas guias na parte superior da rea do painel na Figura 1-2,
o painel Library est agrupado com o painel Properties no layout do espao
de trabalho padro. Para selecionar outro painel em um grupo, basta clicar
em sua guia na parte mais alta do grupo de painis. O painel selecionado
ficar em primeiro plano.
Library (mostrado na Figura 1-5) um repositrio de ativos reutilizveis
como bitmaps, sons e tipos de ativos nativos do Flash como botes e movie
clips. Um movie clip, por exemplo, um ativo de animao que tem a sua
prpria Timeline dedicada. Voc pode criar uma animao em um movie
clip e, em seguida, tratar toda a animao como um nico ativo.
Os smbolos sero discutidos em detalhes no Captulo 3, mas o principal a
ser lembrado agora que eles contribuem para a eficincia de seu arquivo. Os
smbolos podem ser usados muitas vezes em um arquivo sem influir muito
no tamanho inicial dele. Alm disso, voc pode manipular uma nica instn-
cia de um smbolo no Stage sem afetar as outras instncias desse smbolo.
O canto inferior esquerdo do painel Library apresenta os botes para (da es-
querda para a direita) criar novos smbolos, criar pastas para organizar seus
ativos internos, editar as propriedades de smbolos e excluir smbolos. As
bibliotecas de todos os arquivos abertos aparecero no menu na parte supe-
rior de Library, permitindo que voc alterne entre as bibliotecas e arraste os
ativos de qualquer biblioteca aberta para qualquer arquivo aberto.
Os dois botes no canto superior direito do painel Library podem ajudar
em relao a isso. Com o uso do boto New Library (mostrado em azul),
voc pode criar outra janela para Library para permitir arrastar ativos de
uma biblioteca para outra (sem ter de adicionar o contedo ao Stage). Voc
tambm pode fixar uma biblioteca a um arquivo Flash (usando o boto
parecido com um pino de fixar anotaes). Isso assegura que, ao alternar
Figura 1-5 O painel Library.
Aprendendo Flash CS4 Professional 36
entre arquivos, a Library selecionada sempre ser ativada. Isso til quando
alternamos entre muitos documentos abertos.
Voc pode pesquisar a Library usando o campo de pesquisa de entrada entre
a lista de ativos e a miniatura. Novo no Flash CS4 Professional, esse recurso
filtra os ativos exibidos na Library pelo nome. Com o uso dos cabealhos de
colunas na parte superior da lista de ativos, voc tambm pode classificar a Li-
brary por nome, nome/classe de ligao (usado com o ActionScript e discutido
no Captulo 6), contagem de utilizao, data da modificao e tipo de ativo.
Outros painis comuns
Aqui esto alguns painis adicionais utilizados com mais frequncia, todos
podendo ser acessados do menu do Window:
Align
Align uma ferramenta abrangente que alinhar, distribuir e espaa-
r os ativos de acordo com as restries desejadas, assim como far a
equiparao dos tamanhos dos ativos.
Info/Transform
Esses dois so um duo de painis de transformao relacionados que
permite alterar propriedades especficas de ativos selecionados. O pai-
nel Info exibe a posio (coordenadas x e y) e cor (vermelho, verde,
azul e valores alpha) sob o mouse e permite editar a largura, altura e as
coordenadas x e y de um objeto selecionado. O painel Transform per-
mite alterar a escala, rotao, inclinao, ponto de rotao 3D e o ponto
de transformao 3D de um ativo.
Color/Swatches/Kuler
Nesse trio de painis de cores relacionados, Color o mais eficaz e
aquele em que voc definir com mais frequncia no apenas cores
personalizadas, mas tambm degrads. O painel Swatches contm uma
coleo de amostras que voc pode editar, salvar e carregar, e onde
sero armazenados cores e degrads personalizados para rpido aces-
so. Kuler um sistema online para o compartilhamento de famlias de
cores. O painel encontrado no submenu WindowsExtensions e
necessria uma conexo de Internet para ser usado.
Motion Editor/Motion Presets
O Motion Editor um poderoso companheiro para a Timeline e o
painel de edio do novo modelo de animao CS4. O painel Motion
Presets contm uma lista e uma animao da visualizao de muitos
conjuntos de movimentos prontos, como salto, voo e ampliao e re-
duo de frame. Esses painis sero detalhados no Captulo 5.
Components/Component Inspector
Components e Component Inspector proporcionam maneiras para adicio-
nar funcionalidade complexa e elementos da interface de usurio (UI)
aos projetos usando pouco ou nenhum ActionScript. Voc aprender
mais sobre componentes no Captulo 9.
Captulo 1 Fundamentos da interface 37
Actions/Output/Compiler Errors/Debug Console/Variables
Esses painis so usados na criao do ActionScript. Actions o editor
de script interno do Flash, Output e Compiler Errors so usados para
monitorar a integridade e a sada do script e Debug Console e Variables
so usados durante a depurao para rastrear por meio da execuo
do script e monitorar valores de variveis. Os dois ltimos painis so
encontrados no submenu WindowsDebug Panels.
History
O painel History mantm uma lista de quase tudo o que voc faz no
Flash e permite voltar s tarefas concludas anteriormente. Caso esteja
familiarizado com os painis History no Adobe Photoshop ou no Ado-
be Illustrator, voc se sentir em casa com esse painel.
Embora essa lista no aborde todos os painis disponveis no Flash
CS4 Professional, trabalhar com vrios desses utilitrios deve dar a
voc a experincia necessria para explorar outros painis quando
necessrio.
Compreendendo a Timeline
Como discutido anteriormente, a Timeline uma representao baseada no
tempo de seu arquivo de projeto e pode ser associada a um rolo de filme.
Como autor de um documento Flash, voc o diretor de um filme. Voc
usar a Timeline para navegar pelo arquivo, compor cenas, posicionar os
atores e controlar suas entradas e sadas.
Examine a Figura 1-6, uma viso detalhada da Timeline. O retngulo ver-
melho realando o nmero 1 e a fina linha vermelha que abrange a altura da
Timeline compem o cabeote de reproduo. Esse marcador indica o quadro
atual exibido para a sua audincia. Os visualizadores do seu arquivo conhe-
cero o contedo colocado nesse frame; vero os ativos visuais, ouviro os
sons e assim por diante.
Figura 1-6 A Timeline.
Aprendendo Flash CS4 Professional 38
Para trabalhar com outros frames de uma Timeline de frames mltiplos,
voc pode mover o cabeote de reproduo clicando ou arrastando ao lon-
go da faixa de nmeros na parte superior da Timeline. O tempo aumenta ao
mover para a direita e voc observar que os nmeros dos frames aumen-
tam para 5, 10 e assim por diante, at que a figura termine no frame 25.
O posicionamento do cabeote de reproduo em qualquer frame permite
visualizar ou editar seu contedo, incluindo a manipulao de ativos no
Stage e a edio da Timeline. Por exemplo, voc aprender como desenhar
arte no Stage no Captulo 2, como adicionar som Timeline no Captulo 13
e como adicionar ActionScript a um frame no Captulo 6.
Os trs nmeros no canto inferior direito da Figura 1-6 exibem informaes
relativas ao tempo atual e taxa de reproduo do arquivo. O primeiro
nmero mostra que o cabeote de reproduo est no frame 1. O nmero
seguinte indica que a taxa de frames, ou a velocidade com a qual essa Time-
line ser executada, de 24 frames por segundo. O ltimo nmero mostra
o tempo decorrido ou o equivalente baseado no tempo do frame atual. Nesse
caso, o frame atual o 1, que reside em 0.0 segundos. Se o cabeote de re-
produo estivesse no frame 24, o tempo decorrido indicaria 1.0 segundo,
porque a taxa de frames de 24 frames por segundo.
esquerda dos indicadores de tempo, logo abaixo do marcador do cabeote
de reproduo, est um cone que se parece com uma verso minscula do
cabeote. Clique nesse boto para rolar automaticamente a Timeline para
centralizar o frame atual. Os cones direita desse boto permitem exibir e
editar frames mltiplos ao mesmo tempo. Isso ser discutido no contexto
de animao no Captulo 5.
Camadas
At aqui, a discusso da Timeline teve um enfoque no plano horizontal,
enquanto o cabeote de reproduo percorre os frames com o tempo.
Tambm h um componente vertical do painel Timeline. Caso examine
novamente a Figura 1-6, voc ver que a Timeline est dividida em li-
nhas (denominadas camadas [layers]). Com um propsito similar s ca-
madas no Adobe Photoshop ou Illustrator, as da Timeline proporcionam
uma maneira de definir uma ordem de empilhamento visual em seus
projetos. A camada mais abaixo est no fundo da pilha e a camada supe-
rior aparece acima de todas as outras. Por exemplo, no frame 1 da Figura
1-6, os contedos da camada background aparecem abaixo do contedo
da camada logo.
Embora a maioria das camadas contenha algum tipo de contedo visual,
elas tambm servem a outras finalidades, algumas das quais esto repre-
sentadas na Figura 1-6. Por exemplo, voc pode adicionar sons Timeline
para a reproduo de udio sem ter de fazer nenhuma programao. Voc
pode nomear os frames para localizar uma parte do filme com facilidade
ou para executar a navegao do script usando o ActionScript. Os scripts
escritos por voc so adicionados Timeline e podem ser consolidados em
uma camada dedicada para essa finalidade. Tambm possvel organizar as
camadas em pastas para manter tudo em ordem.
Captulo 1 Fundamentos da interface 39
Ao organizar o contedo, voc pode adicionar ou excluir camadas ou pastas
usando os cones no canto inferior esquerdo do painel e pode ainda reno-
mear uma camada dando um duplo clique em seu texto. Por fim, voc pode
ocultar, bloquear ou exibir os contedos das camadas como contornos cli-
cando na coluna apropriada da camada (os cones do olho, do cadeado e da
caixa, respectivamente).
Keyframes e frames interpolados
Como diretor, importante que voc controle muitos aspectos de seu filme.
No basta posicionar seus atores em primeiro plano e os sets em segundo plano
(usando camadas), voc tambm deve sugerir as entradas em cena de seus per-
sonagens. Isso executado com os keyframes, frames especiais que voc adicio-
na a uma camada para desmembr-la em segmentos e controlar seu contedo.
Por exemplo, os keyframes aparecem nos frames 1 e 15 da camada logo,
indicados pelos cones dos crculos que se encontram nesses frames. Um
crculo preenchido indica que h contedo no frame, enquanto um crculo
vazio mostra que o frame est vazio. Aps definir os keyframes, voc pode
deixar o Flash fazer todo o trabalho de calcular o aparecimento dos frames
intermedirios. Isso ser discutido detalhadamente no Captulo 5, no qual
voc vai ler mais sobre animao. Os pequenos retngulos verticais nos fra-
mes 14 e 25 da camada logo marcam o final de um intervalo de frames.
Personalizando sua interface
Agora que voc j viu os pontos altos da interface do Flash CS4 Profes-
sional, est na hora de entrar em ao. Caso j tenha usado o Flash antes,
voc pode estar se sentindo um pouco desorientado devido s alteraes
de tamanho e de local de vrios painis. A boa notcia que a interface
personalizvel e fcil de ajustar ao seu gosto.
Selecionando e editando um espao de trabalho
Ao personalizar a interface, a melhor maneira de comear visualizar as
predefinies de espao de trabalho disponveis. No canto superior direito
da janela principal do aplicativo, prximo ao campo de pesquisa Help, voc
encontrar um menu de predefinies (mostrado na Figura 1-7) otimizadas
para vrios perfis de usurios.
Comece examinando como cada predefinio est configurada e determine
qual delas melhor atende o seu perfil antes de editar. Os usurios acostuma-
dos s verses anteriores do Flash, por exemplo, podem querer comear com
o espao de trabalho Classic. Essa configurao coloca o painel Tools no lado
direito, a Timeline na parte superior e um conjunto padro de painis direi-
ta do Stage, reproduzindo layouts de aplicativos de verses anteriores.
Se voc quiser retornar ao perfil original durante o processo de personaliza-
o, basta escolher a opo Reset no menu de predefinies. Aps persona-
lizar a interface, voc pode usar esse menu para salvar seu layout como uma
Figura 1-7 Selecione e geren-
cie o Workspace Layout com o
menu Workspace.
Aprendendo Flash CS4 Professional 40
nova predefinio. Voc tambm pode usar a opo Manage Workspaces caso
precise renomear ou excluir predefinies.
Minimizando painis
Voc pode visualizar todos os painis em tamanho completo ou em um dos
dois estados minimizados: visualizao nome-e-cone ou visualizao so-
mente-cone. O estado minimizado padro a visualizao nome-e-cone.
A Figura 1-8 mostra as trs opes de visualizao.
Clique no cone de seta dupla no canto superior direito de cada painel para
alternar entre a visualizao de tamanho completo do painel e a sua opo de
estados minimizados. Quando minimizado, voc pode arrastar um painel de
uma ou de ambas as extremidades verticais (dependendo de onde o painel es-
tiver ancorado) para reduzir sua aparncia a uma visualizao somente-cone.
Seja qual for o estado minimizado, clique no cone ou no nome (quando pre-
sente) para liberar o uso em tamanho inteiro do painel, como mostrado na Figu-
ra 1-9. Baseado na sua opo de configurao de preferncias, o painel pode ser
minimizado automaticamente quando voc estiver trabalhando com qualquer
outro elemento da interface ou permanecer aberto at que opte em fech-lo.
Consulte a seo A caixa de dilogo Preferences para obter mais informaes.
Agrupando e ancorando painis
Alguns painis j estaro ancorados interface em cada predefinio de works-
pace layout e outros abriro em um estado de flutuao livre. Qualquer painel
pode ser agrupado, desagrupado e ancorado (agarrado a um local definido
como a parte superior, a parte inferior ou os lados de uma janela, em vez de
flutuar livremente), bastando arrast-lo pela guia para o destino desejado.
Para agrupar painis, arraste um em direo a outro. Na Figura 1-10, o painel
autnomo Swatches agrupado em um conjunto de painis com o painel Co-
lor. O grupo do painel de destino realado com um contorno azul que ajuda
a mostrar para onde o painel est sendo arrastado. Voc pode remover um
painel de um grupo arrastando-o para longe do conjunto pela sua guia.
Figura 1-10 Arrastando um painel para um grupo de painis existente.
Figura 1-8 Painis mostrados
nas visualizaes de tamanho
completo, nome-e-cone e
somente-cone.
Figura 1-9 Os painis podem
ser abertos a partir da visualiza-
o do nome ou do cone.
Captulo 1 Fundamentos da interface 41
Para ancorar um painel, arraste-o para uma das extremidades do painel de
destino ou grupo de painis. A Figura 1-11 mostra o contorno azul que o
Flash fornece quando voc ancora ou agrupa painis. A linha azul indica
onde o painel acaba. Como a figura mostra, voc pode ancorar acima, abaixo,
esquerda ou direita de um painel ou de um conjunto. Voc tambm pode
adicionar um painel a um grupo, ainda que o grupo esteja minimizado.
Ancorar ou agrupar?
Optar em ancorar um painel por si s ou agrup-lo com outros painis
uma questo de preferncia. Sem um monitor muito grande, o uso da inter-
face ficaria confuso se todo painel estivesse em flutuao livre. A ancoragem
de painis o ajuda a impor o controle sobre sua rea de trabalho porque os
painis podem ser minimizados com facilidade sem perd-los de vista.
O agrupamento de painis tambm pode ajud-lo a criar um local onde pai-
nis relacionados usados regularmente possam ser encontrados. Por exem-
plo, comum encontrar os painis Color e Swatches agrupados e os painis
Align, Transform e Info reunidos em um grupo.
NOTA
Lembre-se de que a maioria dos elementos da interface do Flash so painis, portanto,
eles podem estar em flutuao livre ou ancorados em praticamente qualquer configu-
rao de linhas e colunas. Os painis tambm podem ser redimensionados arrastando
suas extremidades. Por exemplo, o Flash CS4 Professional a primeira verso do
aplicativo que pode organizar o seu painel Tools em um layout no vertical. O painel
Tools aparece quase como um quadrado no espao de trabalho predefinido Designer,
mas uma nica linha horizontal no espao de trabalho predefinido Developer.
A caixa de dilogo Preferences
Devido sua complexidade, o Flash tem um grande nmero de configura-
es de preferncias grande demais para que todas sejam discutidas em
detalhes aqui. Em vez disso, mostrarei algumas configuraes relevantes
para as discusses deste captulo. Examinaremos outras configuraes de
preferncias em captulos posteriores. Para acessar a caixa de dilogo Prefe-
rences (Figura 1-12), selecione a opo Preferences no menu do aplicativo
Flash Professional (Mac) ou no menu Edit (Windows).
Agrupando um painel vertical-
mente, abaixo de um grupo de
painis existente. Os painis
tambm podem ser ancorados
acima de um grupo existente.
Ancorando um painel horizon-
talmente, esquerda de um
grupo de painis existente.
Tambm possvel ancorar
direita de um grupo.
Adicionando um painel parte
inferior de um grupo de painis
existente.
Os painis tambm podem ser
adicionados a outras posies
em um grupo, como entre dois
painis, como mostrado aqui.
Figura 1-11 Dicas visuais refe-
rentes ao arrasto do painel.
Aprendendo Flash CS4 Professional 42
Figura 1-12 Preferncias do aplicativo.
Na caixa de dilogo Preferences, as configuraes de preferncias esto
organizadas em muitas pginas. Neste captulo, examinaremos as opes
General:
On launch
A configurao On launch permite ditar o que ocorre quando o apli-
cativo aberto pela primeira vez. Voc pode optar em no exibir do-
cumentos, criar um novo documento, abrir o mais recente documento
editado ou exibir a tela de boas-vindas. Caso tenha optado em descar-
tar a tela de boas-vindas e deseje restaur-la, essa a configurao na
qual isso possvel.
Captulo 1 Fundamentos da interface 43
Undo
O Flash oferece dois sistemas de armazenagem de operaes a serem des-
feitas. Voc pode especificar um histrico Document-level Undo, em que
uma lista de histrico mantida para cada documento ou um histrico
Object-level Undo, em que uma lista de atividades anteriores gravada
para cada objeto principal do aplicativo. Embora a ltima opo fornea
um grau mais granular para desfazer uma ao, ela tambm aumentar
o tamanho dos arquivos de criao (no tem efeito no tamanho dos ar-
quivos em tempo de execuo). Talvez seja melhor voc ficar com a op-
o Document-level Undo padro para comear e, depois, determinar se
precisar trocar para o armazenamento de histricos ao nvel de objeto.
Nos dois casos, voc pode definir o nmero de nveis para desfazer uma
ao armazenado em cada lista de histrico.
Open test movie in tabs
Uma vez que comece a trabalhar com os arquivos FLA, voc precisar
verificar o trabalho compilando arquivos SWF de teste. Por conveni-
ncia, provavelmente voc desejar visualizar os arquivos de teste na
interface do Flash e apenas ocasionalmente test-los em um navegador.
Ao visualizar um SWF no Flash, a opo Open test movie in tabs permi-
tir especificar se o arquivo de teste resultante ser aberto em uma nova
guia, agrupada como todas as outras guias de documentos abertos ou
em uma nova janela.
A melhor opo aqui uma questo de gosto e depende do comporta-
mento de outros elementos da interface do Flash; especificamente, de
quais painis permanecem visveis enquanto um arquivo de teste est
em foco e como esse comportamento difere quando o SWF est em
uma guia ou em sua prpria janela. Recomendo que tente configurar os
dois modos e determine qual abordagem voc prefere.
Auto-Collapse Icon Panels
A configurao Auto-Collapse Icon Panels determina como os painis
ativos se comportam quando ativados a partir de uma ancoragem mi-
nimizada. Quando essa opo est habilitada, o painel minimizado
novamente no momento em que voc interage com qualquer outro
elemento da interface. Quando a opo est desabilitada, o painel per-
manece aberto at que voc o feche manualmente.
Personalizando o painel Tools
Aps ter despendido algum tempo com a interface do Flash, voc pode
estar ansioso para reorganizar as ferramentas do painel Tools. Por exem-
plo, voc pode querer tornar a ferramenta Subselection uma filha da
ferramenta Selection ou agrupar ferramentas de funcionalidades seme-
lhantes. Voc pode querer mover Lasso para imediatamente abaixo das
ferramentas de seleo ou mover Text para a parte inferior do grupo de
desenho e texto. Isso pode ser executado com facilidade usando o item
de menu Customize Tools no menu do Flash Professional (Mac) ou o
menu Edit (Windows).
Aprendendo Flash CS4 Professional 44
Como mostrado na Figura 1-13, o layout do painel Tools atual apa-
rece no lado esquerdo da caixa de dilogo. Para alterar essa confi-
gurao, primeiro selecione um slot no painel Tools e, em seguida,
escolha quais das ferramentas disponveis aparecero no slot. A fer-
ramenta na parte mais alta aparecer no painel e todas as outras apa-
recero em um submenu. Voc tambm pode remover ferramentas
do slot selecionado. Por ltimo, caso acabe produzindo uma terrvel
confuso, voc sempre pode restaurar a configurao padro usando
o boto Restore Default.
Figura 1-13 Personalizando o painel Tools.
Keyboard Shortcuts (Atalhos de teclado)
O recurso Keyboard Shortcuts (Figura 1-14) no menu do Flash Professional
(Mac) ou no menu Edit (Windows) permite configurar quais atalhos de
teclado disparam quais itens de menu.
O campo Current Set inclui configurao de atalhos de teclado predefinidos
segundo outros aplicativos. Caso seja um usurio frequente de algum dos
aplicativos destacados, voc pode querer copiar uma dessas configuraes
de teclado. Voc pode duplicar, renomear, exportar e excluir qualquer uma
dessas predefinies. Para evitar a perda permanente das configuraes de
teclado, voc deve duplicar uma predefinio ou criar uma nova predefini-
o antes de poder modificar suas configuraes.
Caso deseje alterar o atalho de teclado atribudo a algum menu, voc pri-
meiro dever selecionar a categoria de menu apropriada. Depois, expanda o
nome do menu e selecione o item de menu desejado. Por fim, selecione um
atalho existente a ser alterado ou remova seu valor, atribua um novo atalho
ou ainda adicione um atalho se mais de um tiver utilidade. Ao alterar ou
adicionar valores selecionados, digite o novo atalho no campo Press key e
clique no boto Change.
NOTA
Independentemente da orientao
do painel Tools, as ferramentas
ainda aparecero em sequncia,
correspondente s linhas sequen-
ciais dessa caixa de dilogo. Por
exemplo, compare a ordem das
ferramentas na caixa de dilogo
mostrada na Figura 1-13 com a
ordem da tira de ferramenta ver-
tical mostrada na Figura 1-2.
Captulo 1 Fundamentos da interface 45
Figura 1-14 Personalizando atalhos de teclado.
Progresso do projeto
Ao longo deste livro, voc usar sua criatividade, far experincias com re-
cursos especficos e tentar executar tarefas isoladas. Entretanto, o Flash
um programa muito grande e fcil assimilar habilidades e nunca us-las.
Com isso em mente, um projeto abrangendo todo o livro envolver essas
habilidades ao longo dos captulos. Essa abordagem de aprendizado no s
permite que voc reveja o que leu em um captulo, mas tambm rena tudo
isso para a criao de um site ou aplicativo Flash.
O projeto escolhido para este livro o portflio de um designer. Permane-
cer simples, ajudando a concentrar sua ateno no contedo disponvel,
mas a meta do projeto abordar o mximo possvel do material discutido.
Neste captulo, voc criar um modelo que simplificar a criao de outros
ativos do projeto em captulos posteriores.
Aprendendo Flash CS4 Professional 46
Criando seu primeiro FLA
Antes de poder salvar um modelo, voc deve criar um novo arquivo e con-
figurar as propriedades do documento. Os arquivos criados a partir desse
modelo assumiro essas propriedades, assim as configuraes devem se
corresponder quelas que voc deseja usar em futuros arquivos.
1. Crie um novo arquivo ActionScript 3.0 na tela de boas-vindas ou sele-
cionando FileNew.
2. Selecione ModifyDocument para acessar a caixa de dilogo Docu-
ment Properties (Figura 1-15). Voc tambm pode acessar essa caixa
de dilogo clicando em Edit na seo Properties do painel Properties,
aps clicar no Stage.
3. Defina a largura e a altura do documento para 750 e 500, respectiva-
mente.
4. Desabilite a opo Adjust 3D Perspective Angle. Voc aprender mais
sobre isso no Captulo 8, mas, resumidamente, a desabilitao desse
recurso assegurar que uma configurao 3D que afete a perspectiva
seja baseada no tamanho do novo documento, no no tamanho do
documento anterior.
5. Altere a opo Background color para preto. Essa configurao defini-
r a cor do Stage de todo arquivo criado a partir desse modelo.
6. Defina a opo Frame rate para 24 e a opo Ruler units para Pixels.
Figura 1-15 Configurando as propriedades do documento.
Importando seu primeiro ativo
Voc aprender mais sobre como criar novo contedo no Captulo 2 e como
importar contedo no Captulo 3, mas uma rpida incurso nessas reas ago-
ra melhorar a funcionalidade e demonstrar um recurso do seu modelo.
1. Se ainda no o fez, faa o download dos arquivos fonte deste captulo
a partir do site associado, www.LearningFlashCS4.com.
NOTA
As dimenses do projeto 750500
foram escolhidas de forma que o
seu projeto seja exibido com fa-
cilidade para o maior nmero de
usurios possvel. Esse tamanho
se ajustar sem rolagem em uma
janela de navegador, em um mo-
nitor com uma resoluo to bai-
xa quanto 800600.
Captulo 1 Fundamentos da interface 47
2. Selecione o primeiro frame da camada Timeline e importe o ele-
mento grfico content_ui_guide.jpg fornecido selecionando
FileImportImport to Stage. Selecione o bitmap no Stage e, usan-
do o painel Properties, defina suas propriedades x e y para 0.
3. D um duplo clique no nome da camada e a renomeie como guide.
Bloqueie a camada clicando no ponto em frente ao nome da camada
na coluna sob o cadeado.
Criando sua primeira forma
Em seguida, voc criar um ativo de espao reservado que poder ser usado
para adicionar rapidamente contedo a arquivos futuros. Voc aprender
mais sobre como desenhar no Flash e a criar tipos de ativos nativos do Flash
nos prximos captulos. Basta acompanhar agora e se certificar de testar seu
progresso por meio deste exerccio. Quando tiver concludo, compare seus
resultados com os arquivos de exemplo fornecidos.
1. Crie uma nova camada na Timeline e atribua o nome content a ela.
Voc deve ter duas camadas: a guide, bloqueada, e a content, vazia.
Clique no frame da camada content, assim voc estar pronto para
criar seu prximo ativo.
2. Selecione a ferramenta Rectangle no painel Tools e desenhe um retngu-
lo em qualquer local do Stage. Voc ajustar essa forma daqui a pouco.
3. Troque para a ferramenta Selection e arraste-a sobre o retngulo para
selecionar a forma. Use o caixa de cor Fill para selecionar uma cor
brilhante.
4. Crie um tipo de ativo movie clip selecionando ModifyConvert to
Symbol. Quando a caixa de dilogo Convert to Symbol for exibida,
atribua o nome content ao ativo e selecione Movie Clip no menu
Type. Finalmente, clique na caixa minscula no canto superior esquer-
do da grade de nove caixas prxima opo Registration (voc apren-
der muito mais sobre essas opes nos prximos captulos). Clique
em OK para finalizar o processo. O retngulo que voc criou no passo
2 foi convertido em um smbolo de movie clip Flash.
5. Usando a ferramenta Selection, clique no movie clip que voc acabou
de criar e examine o painel Properties. Se o painel no abrir, acesso-o
selecionando WindowProperties. A parte superior do painel mostrar
que voc selecionou o movie clip. Olhe na seo Position and Size do
painel Properties e clique nos links azuis prximos s propriedades x e
y. Defina os dois para 0, como mostrado na Figura 1-16. Seu movie clip
agora foi deslocado para o canto superior esquerdo do Stage.
Se voc pode ver com facilidade o seu ativo de espao reservado no ele-
mento grfico guia que voc importou, considere essa parte do exerccio
concluda. Caso contrrio, voc pode dar um duplo clique no espao reser-
vado para edit-lo. Depois de clicar duas vezes, use a ferramenta Selection
para arrast-la sobre todo o retngulo para selecionar tudo e, em seguida,
Figura 1-16 Propriedades da
instncia de movie clip no painel
Properties.
NOTA
Os campos de entrada de texto
que se parecem com links da Web,
como aqueles representados na Fi-
gura 1-16, so chamados de cam-
pos hot text. Eles funcionam como
campos de texto normais quando
clicados, mas voc tambm pode
arrastar seu mouse para a esquer-
da e para a direita para ajustar
seus valores de forma interativa.
Aprendendo Flash CS4 Professional 48
arraste-o com o mouse para um local mais visvel. Voc tambm pode ex-
perimentar outras ferramentas de desenho para tornar o espao reservado
mais visvel. O arquivo de exemplo adicionou texto ao movie clip. Voc
aprender um modo simples de trabalhar com texto no prximo captulo.
Essa abordagem livre para o ativo de espao reservado tima, porque voc
excluir esse recurso aps substitu-lo pelo contedo do projeto.
Testando seu arquivo
Agora a hora de testar o seu arquivo. Voc far isso muitas vezes ao longo
de todo o livro portanto, bom comear agora. Selecione ControlTest
Movie e o Flash compilar seu arquivo FLA somente para criao em um
arquivo com a extenso .swf, prprio para a distribuio. Devido extenso,
esses documentos so chamados de arquivos swiff.
Voc deve ver tudo o que adicionou em seu arquivo, incluindo o elemento
grfico guia que foi importado e o movie clip que voc criou. Feche a janela
ou a guia em que o seu SWF se encontra e retorne ao FLA. Se voc estiver
satisfeito com os resultados, continue com o projeto. Caso contrrio, abra o
arquivo template_01.fla nos arquivos fonte integrantes e d prosseguimento
a ele. Esse documento modelo fornecido para sua convenincia.
Criando uma camada guia
Ao criar um modelo, voc desejar projet-lo de forma que exija o mnimo
de confuso na criao de novos arquivos utilizveis. O movie clip de espa-
o reservado til porque ele j foi posicionado e voc pode edit-lo com
facilidade para adicionar novo contedo. Porm, o elemento grfico guia
no deve aparecer novamente em arquivos publicados.
Para resolver esse problema, voc precisa converter a camada normal em
que o elemento grfico guia reside em um tipo de camada especial deno-
minada camada guia (guide layer). D um duplo clique no cone esquerda
do nome da camada guia e, na caixa de dilogo Layer Properties, selecione
o tipo Guide. Clique em OK para fechar a caixa de dilogo e testar o seu
filme novamente.
Voc agora deve ver somente o movie clip de espao reservado. A cama-
da guia visvel no modo de criao para ajud-lo a posicionar os ativos
e orientar o seu projeto e o desenvolvimento, mas ela no includa no
arquivo SWF publicado final. Compare seu trabalho com template_02.fla.
Continue com o projeto se voc estiver satisfeito ou use o arquivo fonte
fornecido desse ponto em diante.
NOTA
Embora no seja necessrio sem-
pre que um teste for executado,
til salvar seu arquivo pelo menos
uma vez antes do teste. Por pa-
dro, os arquivos SWF so com-
pilados no mesmo diretrio e rece-
bem os mesmos nomes que os seus
FLAs correspondentes. Saber onde
o FLA foi salvo o ajudar a encon-
trar o SWF depois, se necessrio.
Salvar o seu trabalho aumenta a
probabilidade de recuperao de
um possvel problema.
Captulo 1 Fundamentos da interface 49
Adicionando camadas utilitrias
As ltimas coisas a serem adicionadas em seu arquivo so trs camadas va-
zias que voc utilizar mais tarde nos arquivos criados recentemente.
1. Selecione a camada de contedo para ter a certeza de que as novas
camadas aparecero na parte superior da pilha de camadas.
2. Clique no boto de camada New no canto inferior esquerdo do painel
Timeline e crie trs novas camadas.
3. Nomeie as camadas, de cima para baixo, actions, labels e sounds.
4. Bloqueie as camadas para evitar edies indesejadas e compare seu
trabalho com o arquivo fonte, template_03.fla.
Salvando seu arquivo como um modelo
Tudo o que voc precisa agora salvar seu arquivo como um modelo. Em
vez de usar a opo Save padro, utilize FileSave as Template. A caixa
de dilogo Save as Template ser exibida e voc poder nomear o arquivo,
atribu-lo a uma categoria e escrever uma descrio simples. Siga as confi-
guraes da Figura 1-17, atribuindo o nome Content ao modelo e criando
uma categoria denominada Learning Flash CS4.
Figura 1-17 Salvando um FLA como um modelo.
Deste ponto em diante, voc pode criar um novo arquivo a partir desse
modelo, em vez de um arquivo novo vazio, como mostrado na Figura 1-18.
Experimente isso e voc descobrir que o novo arquivo est corretamente
dimensionado e que contm as camadas corretas, o movie clip em espao
reservado e a camada guia estabelecida.
Aprendendo Flash CS4 Professional 50
Figura 1-18 Usando um modelo para criar um novo arquivo.
Caso no obtenha xito por completo, no se preocupe. Ainda estamos no
incio do desenvolvimento do projeto e os captulos subsequentes explica-
ro os passos que voc executou aqui de forma mais detalhada. Se voc pre-
ferir, abra o arquivo fonte template_03.fla fornecido e salve o seu trabalho
como um novo modelo para dar continuidade aos seus esforos.
O projeto continua...
No prximo captulo, voc comear a criar contedos para o seu portflio.