O Flash permite que tenhamos variáveis em um arquivo de texto externo e carregueas no momento que considerarmos viável, facilitando a atualização dos textos utilizados.
1- Vamos abrir o arquivo duvidas.fla (criado anteriormente)
2- Na pasta da lição temos o arquivo texto_para_site.txt. Abra-o e na primeira linha deste arquivo digite: nome=AlfaAdventure
3- Salve o arquivo txt e retorne para o arquivo duvidas.fla
4- Crie uma nova layer e selecione a ferramenta Text Tool com o texto do tipo Dynamic selecionado, colocando seu nome de instância de “valor” e com a opção Multiline marcada na opção Character.
5- Renomeie esta layer para “texto” Ao escolhermos um texto do tipo Dynamic Text, definimos que o texto digitado na área pode mudar de acordo com a programação que viermos a fazer.
6- Crie uma nova layer com o nome de “acoes” e no seu primeiro frame digite:
var endereco:URLRequest=new
URLRequest(“texto_para_site.txt”);
var carregar:URLLoader = new URLLoader();
carregar.dataFormat=URLLoaderDataFormat.VARIABLES;
carregar.load(endereco);
Na primeira linha criamos uma instância chamada endereço a partir da
classe URLRequest para armazenar o endereço onde se encontra o arquivo que será
carregado.
Na terceira linha definimos para a instância chamada carregar sua propriedade
dataFormat que identifica como serão interpretadas as informações que forem
carregadas através do URLLoader. No exemplo as informações serão interpretadas
como variáveis (VARIABLES), ou seja, respeitarão a forma que criamos no txt.
7- Agora em uma nova linha digite:
carregar.addEventListener(Event.COMPLETE,carregou);
function carregou(evento:Event):void{
valor.text=carregar.data.nome;
}
Criamos um ouvinte para a instância carregar que vai observar quando o arquivo estiver carregado (Event.COMPLETE) e depois executa a função “carregou”.
Em seguida criamos a função que será executada quando o arquivo estiver carregado.
Na próxima linha definimos que a caixa de texto chamada valor terá o conteúdo de seu texto (valor.text) recebendo (=) a variável nome (que esta no arquivo txt) entre os dados da instância carregar.
8- Teste o filme e veja que já estamos carregando o texto. Para colocarmos um scroll para o texto iremos usar um componente chamado UIScrollBar, que criará uma barra de rolagem no texto.
9- Selecione o menu: Window > Components e na opção: User Interface escolha o componente: UIScrollBar.
10- Arraste para o palco uma instância deste componente (menu: windows/components) encaixando ao lado da caixa de Texto.

Padrões com a Ferramenta spray brush

A ferramenta Spray Brush age como um borrifador de partículas, permitindo que “pincelemos” um padrão de formas no Palco de uma única vez. Por padrão, o Pincel de borrifar emite uma borrifada de partículas de pontos, usando a cor de preenchimento selecionada no momento. No entanto, podemos usar o Pincel de borrifar para aplicar clipe de filme ou símbolo gráfico como um padrão.

1- Crie um Movie Clip através do menu Insert > New Symbol.

2- Desenhe uma estrela e crie uma interpolação de movimento para a mesma, de forma que ela “pisque”.

3- Retorne a Scene 1

4- Selecione a ferramenta Spray Brush.

5- No Inspetor de propriedades da ferramenta clique em Edit da opção Symbol para selecionar um símbolo personalizado na Biblioteca. Selecione a estrela.

6- Marque as opções do painel Properties semelhante a imagem.
► Podemos usar qualquer clipe de filme ou símbolo gráfico na Biblioteca como uma “partícula”. Essas partículas baseadas em símbolos oferecem um grande controle criativo sobre a arte criada no Flash e deseja que o padrão seja exibido.
8- Teste a animação

Desenhando com a Deco Tool

As ferramentas de Desenho decorativo permitem que transformemos as formas gráficas em padrões geométricos complexos. As ferramentas de Desenho decorativo usam cálculos algorítmicos conhecidos como modelagem procedural. Esses cálculos são aplicados a um clipe de filme ou símbolo gráfico que está na biblioteca. O efeito Vine Fill permite que preenchamos o Palco, um símbolo ou uma região fechada com um padrão de videira. Podemos substituir a sua própria arte pelas folhas e flores, selecionando símbolos da biblioteca. O padrão resultante fica contido em um clipe de filme que contém os símbolos que formam o padrão.

1- Crie arquivo novo

2- Selecione a ferramenta Deco.

3- No painel Properties deixe marcado como na imagem.
4- Clique no palco com a ferramenta Deco.
5- Teste a animação.
Branch angle: especifica o ângulo do padrão de ramificação. Patern scale: o dimensionamento de um objeto o reduz ou o amplia horizontalmente (ao longo do eixo x) e verticalmente (ao longo do eixo y). Segment Lenght: especifica a extensão dos segmentos entre os nós da folha e da flor. Animate Pattern: especifica que cada iteração do efeito seja desenhada em um novo quadro na linha de tempo. Esta opção cria uma seqüência animada quadro a quadro do padrão de flor conforme ele é desenhado Frame Step: especifica a quantidade de quadros a serem interpolados por segundo do efeito que está sendo desenhado.

Ferramenta Deco Tool Flash CS5

Trabalhando com linhas de tempo

Como os filmes, os documentos Adobe® Flash® CS5 Professional dividem espaços de tempo em quadros. Na Linha de tempo, trabalhamos com esses quadros para organizar e controlar o conteúdo do documento. O quadro-chave é um quadro em que aparece uma nova ocorrência do símbolo na Linha do tempo pela primeira vez. Podemos adicionar um quadro-chave em branco à Linha do tempo como alocador de espaço dos símbolos que planejamos adicionar posteriormente ou para deixar explicitamente o quadro em branco. O quadro-chave de propriedade é aquele em que definimos uma mudança nas propriedades de um objeto para uma animação. O Flash pode interpolar ou preencher automaticamente os valores de propriedade entre os quadros-chave de propriedade a fim de produzir animações fluentes. Como os quadros-chave de propriedade podemos produzir uma animação sem desenhar cada quadro individualmente, eles facilitam a criação da animação. Uma série de quadros contendo animação interpolada é chamada de interpolação de movimento. Um quadro interpolado é qualquer quadro que faça parte de uma interpolação de movimento. Um quadro estático é qualquer quadro que não faça parte de uma interpolação de movimento. Organizamos quadros-chave e quadros-chave de propriedade na Linha do tempo para controlar a sequência de eventos no seu documento e na animação correspondente.

A Timeline com Keyframes no Flash CS5

8- Clique no primeiro quadro da layer1 e escolha a opção Create Motion Tween. Automaticamente o Flash cria 24 quadros na linha de tempo.

9- Com a cabeça leitora do frame 24, no painel Properties opção Color Effect e escolha Alpha no menu Style. Deixe o Alpha em 0%.
10- Para ver a animação clique em CTRL + Enter. Podemos observar: Uma extensão de quadros com um plano de fundo azul indica uma interpolação de movimento. Um ponto preto no primeiro quadro da extensão indica que a extensão interpolada tem um objeto de destino atribuído a ele. Losangos pretos indicam o último quadro e todos os outros quadros-chave de propriedade.

11- Salve este arquivo na pasta da lição como ceu.fla

Usando Símbolos e Animando

Os elementos desenhados no Flash com as suas ferramentas de desenho correspondem a formas vetoriais. Esses desenhos não suportam determinados tipos de animação que o Flash pode realizar, bem como não permitem diversas aplicações. Para tornar o elemento compatível com as aplicações, é necessário convertê-lo em símbolo. Ao transformarmos um desenho ou objeto em um símbolo, aplicamos um comportamento a esse objeto, indicando que agora ele deve receber ações e comportar-se de forma específica. Todo símbolo criado é armazenado na Library (Biblioteca) e pode ser reutilizado diversas vezes, o que não aumenta de forma significativa o tamanho final do filme.

Tipos de Símbolos

Cada símbolo possui uma Linha de tempo e um Palco exclusivos e completos, com camadas. Pode adicionar quadros, quadros-chave e camadas à Linha de tempo de um símbolo, da mesma forma que na Linha de tempo da cena principal. Temos os seguintes símbolos no Flash: – Gráficos (Graphic): usamos estes símbolos gráficos para imagens estáticas e para criar partes reutilizáveis de animação vinculadas à Linha de tempo principal. Os símbolos gráficos operam em sincronização com a Linha de tempo principal. Em uma sequência de animação de símbolo gráfico, os controles e sons interativos não funcionam. Os símbolos gráficos adicionam menos tamanho ao arquivo FLA do que botões ou clipes de filme, pois não possuem Linha de tempo. – Botões (Button): usamos estes símbolos para criar botões interativos que respondam a cliques do mouse, rolagens ou outras ações. – Clipe de Filme (Movie Clip): com estes símbolos podemos criar partes reutilizáveis de animação. Os clipes de filme têm a sua própria Linha de tempo com vários quadros, independente da Linha de tempo principal: imagine-os como aninhados dentro de uma Linha de tempo principal que pode conter controles e sons interativos e até outras ocorrências de clipe de filme. Também podemos criar botões animados, colocando ocorrências de clipe de filme dentro da Linha de tempo de um símbolo de botão. Para criar um símbolo siga os passos:

1- Crie uma forma semelhante a uma “lua” no palco.

2- Com essa forma selecionada, clique no menu:
Modify > Convert to Symbol ou pressione a tecla F8. Abre-se a tela Convert to Symbol. Nessa tela, além de nomeá-lo, podemos definir que tipo de símbolo o objeto será. Ao definir o tipo de símbolo, estamos determinando de que forma nosso objeto se comportará.

3- Atribua um nome ao seu símbolo, definindo que ele deve ser um Movie Clip. Observe que ao lado das opções de comportamento do símbolo temos uma opção denominada Registration, na qual podemos definir o ponto de registro do símbolo, o qual é muito útil, uma vez que permite determinar o ponto de rotação de um símbolo, por exemplo.

4- Deixe marcada a opção padrão (ponto superior esquerdo).

5- Clique em OK.

Transformar em símbolo movie clip, button ou graphic no Flash CS5

Biblioteca

Os símbolos ficam armazenados para que possamos utilizá-los a qualquer momento no Flash.
Para abrir a biblioteca escolha o menu: Window > Library ou utilize as teclas de atalho: CTRL + L.
Para aplicar um símbolo no palco que esteja na biblioteca, basta arrastá-lo da biblioteca para o palco. Quando um elemento é levado da biblioteca para o palco recebe o nome de instância, uma vez que ele é apenas uma aparição do símbolo na tela. Podemos ter um símbolo aparecendo diversas vezes na tela. Neste caso teríamos diversas instâncias do símbolo no palco. Uma vez que modifiquemos um símbolo, todas as instâncias que o usam como referência também sofreram a alteração.

6- Vamos criar uma estrela. Selecione a forma PolyStar Tool e na janela Properties clique em Options e selecione a opção Star.

7- Desenhe esta forma no palco do Flash e transforme-a em um símbolo do tipo Movie Clip. Observe que nossos dois símbolos criados estão na biblioteca. Ao convertemos um objeto em Movie Clipe, atribuímos a ele a possibilidade de ser animado independentemente do filme principal.

8- Vamos entrar no modo de edição do símbolo “estrela”. Dêum duplo clique nela. Na edição deste símbolo temos camadas, o que significa que podemos animar a estrela na sua própria linha de tempo.

Library e edição de símbolos no Flash CS5

O painel Align

O painel Align permite que alinhemos os objetos selecionados ao longo do eixo horizontal ou vertical. Podemos alinhar os objetos verticalmente ao longo da borda direita, do centro ou da borda esquerda dos objetos selecionados ou horizontalmente ao longo da borda superior, do centro ou da borda inferior dos objetos selecionados. Quando a opção To stage estiver selecionada indica que todas as modificações serão aplicadas em relação à Stage. Temos uma facilidade no Flash quanto temos mais de um elemento no palco.
Enquanto arrastamos algum objeto aparecem linhas pontilhadas indicando um possível alinhamento em relação a outro elemento. Este é o modo Snap Align. Para ativar este ajuste, escolha a opção de menu: View > Snapping > Snap Align (por padrão esta opção já vem habilitada).

O Painel Align - Flash CS5

O painel Colours

Modelos de cores descreve as cores que vemos e com que trabalhamos em gráficos digitais. Cada modelo de cor, como RGB, HSB ou CMYK, representa um método diferente para descrever e classificar cor. Os modelos de cores usam valores numéricos para representar o espectro visível da cor. O espaço de cor é uma variante de um modelo de cor e tem uma gama (intervalo) específica de cores. Por exemplo, dentro do modelo de cores RGB, há vários espaços de cores: Adobe® RGB, sRGB e Apple® RGB Embora cada um desses espaços de cor defina a cor usando os mesmos três eixos (R, G e B), as respectivas gamas são diferentes. Como cada dispositivo tem o seu próprio espaço de cores, cada um pode reproduzir cores apenas na sua gama. Ao criarmos cores para uso em documentos Flash, devemos lembrar que, embora seja impossível coincidir com exatidão todas as cores em dispositivos diferentes, podemos obter bons resultados considerando os recursos de exibição gráfica dos dispositivos em uso por nosso público-alvo.
O painel Color permite que modifiquemos a paleta de cores de um FLA e alteremos as cores de traçados e preenchimentos. – Para aplicar a cor na arte existente, selecione um objeto ou objetos do Palco e selecione Window > Color. – Para selecionar a tela do modo cores, selecione RGB (configuração padrão) ou HSB no menu do painel no canto superior direito. – Clique no ícone Stroke ou Fill para especificar o atributo a ser modificado. Um gradiente é um preenchimento multicolorido no qual uma cor gradualmente muda para outra cor. O Flash permite que apliquemos até 15 transições de cor em um gradiente. A criação de gradiente é uma boa maneira de criar uma graduação suave de cores em um ou mais objetos. Para aplicar um preenchimento gradiente em arte existente, selecione um objeto ou objetos do Palco: – Se o painel Cor não estiver visível, selecioneWindow > Color. – Selecione o tipo de gradiente no menu Style:
Linear: cria um gradiente que matize do ponto inicial ao final numa linha reta. Radial: produz um gradiente que se mistura para fora em um caminho circular a partir de um ponto focal central. Depois de aplicado o gradiente podemos modificá-lo selecionando a ferramenta Gradient Transform. Pressione Shift para restringir a direção do preenchimento gradiente linear para múltiplos de 45°.

Painel Colours - Flash CS5

Laboratório: Iniciando a montagem do HotSite

1- Crie um arquivo de 500×500 pixels. 2- Desenhe um retângulo com preenchimento de gradiente em tons de cinza, deixando as bordas um pouco arrendondadas. 3- Posicione esta forma no centro do palco. 4- Mude a cor de fundo do palco a seu gosto. 5- Salve este documento como index.fla

Ajustando e remodelando os segmentos

Para ajustarmos um segmento reto ou curvo, selecione a ferramenta
Subselection (seta brabca) e selecione o segmento. Use-a, também, para arrastar um ponto de ancoragem do segmento para uma posição nova. Ao selecionarmos o ponto, veremos uma ou duas alças que orientam a curvatura. Para alterar a curva, podemos arrastar as extremidades dessas alças até que a forma esteja do nosso agrado. Para ajustar a forma da curva nos dois lados do ponto de ancoragem, arraste o ponto de ancoragem ou a alça. Para remodelar uma linha ou contorno da forma, arraste qualquer ponto da linha usando a ferramenta Selection (seta preta). O ponteiro muda para indicar o tipo de remodelagem que pode executar na linha ou no preenchimento. O Flash ajusta a curva do segmento de linha para acomodar a nova posição do ponto movido. Se o ponto reposicionado for um ponto final, a linha será alongada ou encurtada. Se o ponto reposicionado é um canto, os segmentos de linha que formam o canto permanecem retos enquanto se tornam mais longos ou mais curtos.
Para modificar os pontos usamos a ferramenta Subselect . Para isso devemos selecionar a linha com a ferramenta e clicar sobre os pontos que desejamos alterar.

Remodelando Formas no Flash CS5

Transformando Objetos

Podemos realizar transformações individuais ou combinar várias transformações, tais como mover, girar, dimensionar, inclinar e distorcer, usando a ferramenta Free Transform. Siga os procedimentos abaixo: – Selecione um objeto gráfico, grupo, ocorrência ou bloco de texto no Palco.

- Clique na ferramenta Free Transform. ► Mover o ponteiro sobre e ao redor da seleção faz com que o ponteiro mude para indicar qual função de transformação está disponível. – Para transformar a seleção, arraste as alças. – Para mover a seleção, posicione o ponteiro sobre o objeto na caixa delimitadora e arraste o objeto para uma nova posição. Não arraste o ponto de transformação. – Para definir o centro de rotação ou dimensionamento, arraste o ponto de transformação para um novo local. – Para girar a seleção, posicione o ponteiro perto da parte de fora da alça do canto e arraste. A seleção gira em torno do ponto de transformação. Arraste com a tecla Shift pressionada para girar em incrementos de 45°. – Para girar ao redor do canto oposto, arraste com a tecla Alt pressionada. – Arraste com a tecla Shift pressionada para redimensionar proporcionalmente. – Para dimensionar somente na respectiva direção, arraste uma alça do canto ou uma alça lateral horizontal ou verticalmente.
- Para inclinar a seleção, posicione o ponteiro no contorno entre as alças de transformação e arraste. – Para finalizar a transformação, clique fora do item selecionado. ► Pode ser usado, também, o modificador de Envelope que permite uma deformação nos objetos. Um envelope é uma caixa delimitadora que contém um ou mais objetos. As alterações feitas em uma forma de envelope afetam a forma dos objetos no envelope. Editamos a forma de um envelope ajustando seus pontos e alças tangentes. Para acioná- lo clique me Modify > Transform > Envelope

Ferramenta free transform tool Flash CS5