contador em flash

Olá a todos, desculpem mas ando com a agenda hiperlotada e devido a isto não postei nada a um tempo. de passagem pela web encontrei um vídeo bacana sobre como criar um contador em flash usando actionscript 3.0 e ai vai para vocês.
De suas sugestões ou críticas, Se gostou, comente !!

Countdown Timer - Actionscript 3.0 tutorial from Jaap den Hertog on Vimeo.

Qualquer dúvida, comente.

do fireworks ao flash com Shapes

Iniciando uma sessão de vídeos tuts audio(inglês) flash CS3, neste post será uma vídeo aula sobre shapes ( formas básicas vetoriais ). Em Outros posts irei lhes mostrar diversas maneiras para se trabalhar com shapes..

De suas sugestões ou críticas, Se gostou, comente !!

Qualquer dúvida, comente.


Fonte: flashbuilding, youtube

Interpolação de forma com máscara

De suas sugestões ou críticas, Se gostou, comente !!

PASSO 1

Procure alguma imagem que goste para este exercício.



PASSO 2

Abra um novo documento de flash



PASSO 3

Pressione "ctrl + j", para poder alterar as dimensões de seu documento, deixe do tamanho da foto que deseja utilizar neste projeto, selecione alguma cor para o fundo de seu trabalho e configure também para 32 seu FPS. então clique em OK.







PASSO 4

Escolha Arquivo> Importar> Importar para o stage ou pressione ctrl+R e importe alguma imagem para dentro do stage do flash.



PASSO 5

Enquanto a imagem estiver selecionada, vá ao painel de alinhamento (ctrl+K) e siga os seguintes passos:


1. tenha certeza de que o botão ALIGN/DISTRIBUTE to STAGE esta ligado.

2. Clique no botão de alinhamento centralizado horizontal

3. Clique no botão de alinhamento centralizado vertical





Agora você tem sua imagem centralizada em relação ao fundo



PASSO 6

Dê um duplo clique na camada 1 (layer1) e renomeie-a para imagem, feito isto clique no quadro (160) desta mesma camada e pressione o botão f5



PASSO 7

Crie uma nova camada Acima da camada imagem e de o nome de pincel.



PASSO 8

Tranque a camada imagem e selecione a camada pincel. Depois disso, selecione a ferramenta pincel (B) e seu tamanho, pegue a maior possível. Veja a imagem a seguir.







PASSO 9

Então, desenhe um caminho ao lado da imagem. Veja a imagem a seguir






PASSO 10

Clique no quadro 20 da camada pincel e pressione o botão F6. Então, no caminho existente, desenhe um novo caminho em cima da imagem tipo a imagem a seguir.







PASSO 11

Clique no quadro 40 pressione F6 e desenhe caminhos utilizando a ferramenta pincel (B).







PASSO 12

Clique no quadro 80 e pressione o botão F6. Então desenhe um caminho em cima da imagem já existente:







PASSO 13

Clique no quadro 100 e pressione o botão F6. Então, desenhe estes caminhos, ou melhor continue pintando a imagem. Veja a imagem a seguir.







PASSO 14

Clique no quadro 120 e pressione o botão F7 para inserir um quadro chave em branco. Então, enquanto estiver no quadro 120, pegue a ferramenta retângulo(R). Bloqueie as cores de contorno, para o preenchimento escolha qualquer cor e desenhe o retângulo acima da imagem.







PASSO 15

selecione a camada pincel e no painel de propriedades logo abaixo (ctrl+F3). Ao lado esquero haverá um campo chamado Tween. Em seu menu escolha "SHAPE", veja a imagem abaixo.



imagem aqui

PASSO 16

Select a camada pincel e converta-a para máscara com o botão direito do mouse, em seguida escolha MASK, veja a imagem abaixo.







PASSO 17

Agora, terás isto. e pronto







Fonte-inspiração: www.toxiclab.org
Fonte-Recurso: Rodrigo.

Flash - animações

Olá a todos que se encontram nesta matéria. Veremos aqui quais as principais diferenças entre interpolações o qual são um total de 2 (forma e movimento), também descubrirá maneiras divertidas e eficazes para se fazer um trabalho rápido e agradável..

Conceito

É chamado de interpolação todos os cálculos de entre quadros que o flash fica responsável para o seu filme produzido, quando são criadas

animações quadro a quadro ( frame by frame ), é descartado o uso destas interpolações pois, manualmente serão reproduzidas as animações

sendo diferenciadas a cada frame.

Já quando criamos em um quadro ( frame ), um desenho qualquer, foto ou até mesmo vetor e em seguida pulando uma quantidade x destes

quadros (frames). Assim estariamos usando algum tipo de interpolação.

interpolações de movimento. ( motion tween )

Determina a necessidade apenas de um quadro inicial e final, não importanto a quantidade de quadros existentes entre meio a estes. Usa-se

quando temos que realizar algum tipo de movimentação dentro de nosso palco (stage) podendo usar seus efeitos de cores (transparência, brilho,

cores, etc...).

Pode ser utilizado de diversas maneiras pois este tipo de interpolação é o que possui sua linha do tempo (timeline) mais sensível, nos

proporcionando mais facilidade com seu uso.






Vamos criar uma animação quadro a quadro



PASSO 1

Ao abrir seu flash versão que utilizarei será a cs3, mas podem utilizar apartir da versão 8.
Escolham flash document na tela de arquivo

novo.


PASSO 2

Pressione ctrl + j ( document properties), para configurar seu palco de trabalho. w= 500px h= 400px fps= 20.


PASSO 3

No painel de ferramentas utilize a ferramenta de retângulo, atalho (R). Selecione uma cor no balde de tinta para o preenchimento de seu vetor.

Agora com a ferramenta de retângulo ainda selecionada, clique e arraste para criar seu retângulo na tela em branco. ( crie de um tamanho

razoavel, nem muito grande e nem tão pouco pequeno).


PASSO 4

Pronto seu primeiro quadro da animação foi criado, para proceguirmos em outro quadro (frame), precisamos criar um novo quadro. Existem várias

maneiras para isso a mais prática seria pressionar (F6), verificando se na Na linha do tempo (timeline), foi criado um novo quadro tendo agora dois

quadros cinzas com bolinhas pretas internas, caso não tenha criado pressione novamente (F6).


PASSO 5

No passo anterior criamos um novo quadro com o mesmo conteúdo do quadro um em mesma posição, agora pegando a setinha preta atalho (v)

ou indo no painel de ferramentas, selecione dando dois cliques no preenchimento de seu retângulo e mova-o para um outro local qualquer.


PASSO 6

Repita o processo do passo 4 e 5 novamente.


PASSO 7

Desta maneira temos agora três quadros chaves com o mesmo conteúdo em posições diferentes. Pressione (ctrl + enter) para visualizar, reparem

que este tipo de animação não satisfaz sua ideia de animação pois vêmos que os quadros mudam bruscamente de posição.


Esta foi a animação quadro a quadro. Trabalhosa, antipática e menos compensatória.

Criando agora então uma interpolação de movimento.


PASSO 1

Primeiro iremos criar uma nova camada. Acesse o menu (insert>timeline>layer) ou (inserir>linha do tempo>camadas).


PASSO 2

Nesta nova camada (layer2), reparem na linha do tempo que temos dois quadros em branco sendo que o primeiro temos um quadro chave em

branco. Selecione o primeiro quadro desta camada criada ( o que tem um quadro chave em branco ), escolha uma nova cor nas cores de

preenchimento no painel de ferramentas e crie uma elipse, atalho (o).


PASSO 3

Após ter criado nosso quadro chave mudou, reparem na linha do tempo (timeline), agora esta cinza com uma bolinha preta. Como a animação

quadro a quadro temos apenas três (3) quadros, iremos nesta escolher trinta (30) quadros, para que possamos reparar melhor em nossa

interpolação de movimento.


PASSO 4

Na linha do tempo, selecione o quadro trinta (30) da camada superior (layer2), com este agora selecionado precione (F6) para criarmos um quadro

chave idêntico ao primeiro desta camada. Escolha a ferramenta de seleção atalho (v), selecione a elipse e mova-a de local. Pronto terminamos

nossa animação, restando apenas colocarmos a interpolação.


PASSO 5

na camada (layer2), entre os quadros um (1) e trinta (30), clique em qualquer um destes com o botão direito do mouse e escolha (create motion

tween), é a primeira opção do menu que irá apareçer. Agora esta camada estará de cor roxa e com uma linha de seta dentro dela, assim

reconheçemos que temos uma interpolação de movimento neste trecho da camada. Pressione (ctrl + enter) para visualizar o trabalho.

Apresentação

Em sua visualização no flash player (quando pressionar ctrl + enter) estarão juntos tanto sua animação quadro a quadro como sua interpolação de

movimento, reparem que a interpolação fica mais agradável, suave, e mais rápida do que (quadro a quadro). Desta forma deixamos o flash

(programa utilizadO) responsável pelo cálculo de movimento entre o quadro chave inicial e final.

Interpolação de forma

Temos os mesmos passos da interpolação de movimento porém, ao invés de utilizarmos no passo 5 acima, o (create motion tween) será criado

(create shape tween). Porém as versões anteriores ao FLASH CS3, não disponibilizam com o botão direito no quadro da camada.

Para isso deverá ser selecionado o quadro entre os quadros chaves da camada onde irá ponhar seua interpolação de forma, indo no painel abaixo

da tela, propriedades haverá uma opção chamada TWEEN, onde seu valor estará como NONE, este valor deverá ser mudado para shape. Quando

o mudar repare sua camada na linha do tempo, estará de cor verde com uma seta interna.

Fonte: Rodrigo luiz genz

arquivo .fla para download clique aqui.
download .swf para visualização clique aqui.

Criando um banner animado em Flash

A seguir neste post um passo a passo de como fazer um banner atrativo com fotos. Programa para este trabalho recomendo Adobe flash cs3, mas também pode ser feito a partir do macromedia flash 8. Veja o exemplo abaixo:



download | visualizar arquivo

Instruções sobre webstandards , técnicas de codificação, como dar mais ênfase a sua acessibilidade beleza e usabilidade dentro de seus padrões. junto com esta matéria, também um slide.

Muitos desenvolvedores já adotaram os Webstandards, mas seguem apenas os padrões que beneficiam a produção das páginas. Existem técnicas de codificação que podem aumentar a acessibilidade, a usabilidade e a beleza das páginas, mas elas não estão muito difundidas.





Passo 1.


Procure fotos para o seu banner, fotos limpas ( sem textos ou propagandas ).


Passo 2.


Pressione Ctrl + J tecla em seu teclado, irá abrir a janela (Document Properties) e crie suas definições de altura e largura, em meu caso usarei W=800 por H=600. Ou se preferir utilize as mesmas dimensões do seu doucment como as dimensões da foto. Selecione cor branca como cor de fundo (background color). Defina o seu filme flash da taxa de quadros o (frame rate) de 44fps e clique em OK.


Passo 3.


Vamos Renomear a camada atual para foto 1. Para isso Dê um duplo clique sobre seu nome (Camada 1), se estiver em inglês como o meu estará como (layer 1). Pressione a tecla Enter para confirmar depois de ter digitado o novo nome!


Passo 4


Escolha agora Arquivo> Importar> Importar para a fase (Ctrl + R) ou em inglês ficando (File > Import > Import to stage) e importar qualquer foto das que baixou. Enquanto a fotografia ainda estiver selecionada, vá para o painel Align, pode-se abri-lo pelo atalho (Ctrl + K) e faça o seguinte:

1. Certifique-se que o Alinhar / Distribuir a Fase, em inglês (to stage) o botão é ligado,

2. Clique no botão Alinhar ao centro horizontal e

3. Clique no botão Alinhar ao centro vertical.




Passo 5.


Enquanto a fotografia ainda estiver selecionada, precione a tecla F8 (Converter para Símbolo) para convertê-la em um clipe de filme, em inglês (movie clipe) Símbolo.






Passo 6.


Clique agora no frame 30 da camada (foto 1) e pressione a tecla F6. para inserir um quadro-chave.


Passo 7


Volte no primeiro quadro (frame) de sua camada , escolha a ferramenta de seleção atalho (V) e clique uma vez sobre a foto para selecioná-la. Em seguida, vá para o Painel de Propriedades localizado na parte inferior de sua tela, caso não estiver aberto pressione (Ctrl + F3). À direita, você verá o menu Color. Selecione Avançado (advanced) no mesmo, clique no botão Configurações e faça os ajustes como segue:
red (vermelho)-255

green (verde)-255

blue (azul)-255

alpha (transparencia)- 0


Passo 8


Pressione o Botão direito do mouse em qualquer lugar na área cinzenta da camada (foto 1) entre os dois quadros-chaves (keyframes) e escolha Create Tween Motion a partir do menu que aparecer, é a primeira opção deste menu que surgiu.


Passo 9


Clique agora no quadro (frame) 100 e pressione a tecla F5. Irá preencher com quadros (frames).


Passo 10


Crie uma nova camada acima da camada (foto 1) e nomeá-la como máscara.


Passo 11


Selecione a camada máscara, pegue a ferramenta Rectângulo, atalho (R) e desenhe um retângulo com as medidas W15 x H800px e coloque-o na posição, como é mostrado na imagem abaixo!






Passo 12


Clique agora no quadro (frame) 30 da camada máscara, pressione (F6) para inserir um quadro-chave, selecione a ferramenta de seleção ou atalho(V) e faça como é mostrado na imagem abaixo!






Passo 13


Clique agora no frame 45 da camada (máscara), pressione (F6) para inserir um quadro-chave, selecione novamente a ferramenta de retângulo ou atalho (R) e desenhe um retângulo com as dimensões do tamanho da tela (stage), no meu caso usei w800 x h600, então estas serão minhas medidas. Veja a imagem abaixo!






Passo 14


Com o Botão direito do mouse em qualquer lugar na área cinzenta entre os quadros (frames) 1 e 30 e quadros (frames) 30 e 45 na linha do tempo da camada (máscara) e escolha Create Shape Tween (criar interpolação de forma) a partir do menu que apareçe. No meu caso com o flash cs3 ou cs4 existe esta opção. Caso utilize uma versão anterior a estes, deverá de ir abaixo no inspetor de propriedades e alterar o (tween) none para shape.


Passo 15


Clique agora no frame 100 da camada máscara e pressione a tecla F5, para completar os quadros desta máscara. Agora para finalizar esta camada (máscara), precisamos transformar ela em uma verdadeira máscara, para isto clique com o botão direito do mouse sobre o nome da camada (máscara) e escolha MASK, talvez em português esteja máscara. Prontinho, para testar pressione ctrl + enter.

Estamos agora com a primeira foto pronta. Repita esse processo também para todas as outras fotos que desejar adicionar neste banner.


Download do projeto.fla