Flash

Dicas, sites e links úteis sobre / para / de /em Flash

Apresentação de slides no FlashExtraindo som de vídeoInterpolação de movimento no Flash CS5 Centralizando Flash (vertical e horizontal)Flash em página inteira do navegador

Prcocura curso / aulas de Flash ou serviços em webdesign, no Rio de Janeiro (RJ)? Fale com Wallace Vianna, designer.

Centralizando layout Flash no HTML (vertical e horizontal)

Seu filme Flash normalmente fica alinhado à esquerda e ao topo da tela do navegador, quando você publica/converte a animação (arquivo .FLA, de projeto) para a  internet (arquivos .html e .swf)

Você pode fazer o seu filme  centralizado na tela do navegador, configurando a publicação em file/arquivo > publishing settings/configuracao de publicação:

O seu filme irá ficar centralizado na tela do navegador, em qualquer resolução de tela.

Flash em página inteira do navegador

Seu filme Flash normalmente fica alinhado à esquerda e ao topo da tela do navegador, quando você publica/converte a animação (arquivo .FLA, de projeto) para a  internet (arquivos .HTML e .swf)

Você pode fazer o seu filme ocupar toda a tela do navegador, configurando a publicação em file/arquivo > publishing settings/configuracao de publicação:

O seu filme irá ocupar toda a página de internet, se ajustando a qualquer resolução de tela, em escala, sem distorções.

Criando interpolação de movimento no Flash CS5

Há duas maneiras de criar interpolação de movimento (motion tween) no Flash a partir da versão cs4: a interpolação clássica (classic tween) e a interpolação “Nova” (a atual).

Atenção: salvar seu Flash com interpolação de movimento “nova” em versão anterior a versão CS4 vai transformá-la em animação quadro-a-quadro, portanto se você vai trabalhar em projetos que envolvam versões anteriores do Flash, talvez seja interessante usar a interpolação clássica.

Criando uma interpolação de movimento

  • Crie um filme Flash novo, vazio
  • Faça um desenho ou importe uma figura (foto ou desenho) no Flash.

  • Clique com o botão direito do mouse no quadro-chave de seu desenho e escolha “criar interpolação de movimento (create motion tween);

  • o Flash informa que seu desenho não é um símbolo (objeto do Flash) e pergunta se deseja convertê-lo. Responda sim.
  • Observe que o Flash estendeu o quadro-chave de sua interpolação.

  • Vá ao quadro final e mova sua figura para outro lugar – você criou o quadro-chave final da interpolação e o “caminho” de sua animação está visível.

 Obs.: você pode editar o caminho da animação como uma linha de desenho, curvando-o com ferramentas de desenho.

  • Aperte a tecla ENTER ou teste seu filme (teclas CTRL + ENTER) para ver a animação fora da interface do Flash

Criando uma interpolação de movimento “clássica”

  • Crie um filme Flash novo, vazio
  • Faça um desenho ou importe uma figura (foto ou desenho) no Flash.

  • Clique com o botão direito do mouse no quadro-chave de seu desenho e escolha “criar interpolação de movimento Clássica (create classic tween);

  • Crie o quadro final da sua animação (se estiver no quadro1, crie um quadro-chave no quadro 30)

  • No quadro final mova sua figura para outro lugar – você criou o a posição final da interpolação

  • Aperte a tecla ENTER ou teste seu filme (teclas CTRL + ENTER) para ver a animação.

Criando apresentação de slides no Flash MX2004 e 8

Objetivos:

Ensinar a fazer rapidamente uma apresentação de slides usando o FlashMX2004 ou superior, a partir de modelo de apresentação do próprio Flash.

Pré-requisitos:

  • Possuir instalado em seu computador Flash MX2004 ou superior
  • Curso de Flash (design) básico ou saber:
  • a interface dos produtos macromedia/adobe para web como Dreamweaver, Fireworks ou Flash MX2004 ou superior (usando painel Behaviours, guia de documentos, painel Actions)
  • usar a interface do Flash (MX em diante) como os paineis Library (Biblioteca), Linha do tempo (Timeline)
  • usar as ferramentas de desenho e texto do Flash

Se você já usa o MS Powerpoint isso facilita a compreender o “conceito” das apresentações em Flash.

1) Criando um documento de apresentação de slides novo

Na tela inicial do Flash(MX2004 ou superior) escolha na categoria Create from template/Criar a partir de modelo a opção Slide apresentation/Apresentação de slides.

Se estiver com um documento já aberto, escolha o menu File/Arquivo > New/Novo; pelos dois caminhos surgirá a tela a seguir:

Escolha na coluna Templates/Modelos um layout de apresentação (você pode modificá-lo mais tarde). Clique no botão Ok depois para exibir a interface de trabalho do Flash.

Feito isso salve a apresentação em seu computador (pasta Meus Documentos, por exemplo) com o nome desejado (apresentação, p.ex.).

2) Entendendo a interface de apresentação de slides do Flash

  • A barra de documentos (1 e 2) exibe não as “cenas” da apresentação, mas os slides;
  • Há uma tela com miniaturas (3) de slides (screen feature, que chamaremos de Painel de slides) onde pode-se visualizar os slides por ordem ou hierarquia;
    • O primeiro slide dessa tela seria o “slide-mestre” a base na qual o layout e recursos de programação são montados.
    • Abaixo dele está oconteúdo da tela inicial (title)
    • A seguir está o gabarito (content header) ou segundo slide-mestre dos demais slides da apresentação.
    • Abaixo destes três está o conteúdo dos demais slides (marchSales, widgetSucess, etc) ou seja, a apresentação propriamente dita.
    • Todo o conteúdo dos slides é distribuído em camadas (4), no painel Linha do tempo (Timeline) no FlashMX2004. Na versão 8 em diante a linha do tempo é omitida neste tipo de documento (ficando tudo armazenado em uma única camada).

3) Nomeando slides

Você pode clicar duas vezes nas miniaturas das camadas para (re)nomear os slides.

4) Selecionando, movendo, adicionando e removendo slides

Para inserir um slide novo você pode clicar com o botão direitro do mouse no slide (como na figura abaixo) e escolher Insert Screen/Inserir tela ou Insert nested screen/Inserir tela aninhada. Insira novos slides selecionando o quarto slide, por questão de organização, apenas.

Exemplo de Tela (1) e tela aninhada(2):

inserir tela insere a tela no “nível” hierárquico que você está (como a árvore de pastas do seu Sistema operacional -Windows, p.ex.). Tenha em mente que o “slide-pai” irá ditar o layout da “slide-filho” (“slide pai” como um gabarito para os “slides-filhos” ou sub slides-mestres). Os slides a serem apresentados de fato são sempre os “slides-filhos”, na ordem (ou hierarquia) apresentados no painel de slides.

Para mover um slide basta clicar nele, segurar e arrastar até o ponto desejado no Painel de slides (dentro de uma hieraraquia de slides ou abaixo do slide-mestre – primeiro slide).

Para apagar um slide basta selecionar o slide e apertar a tecla Delete (ou botão direito do mouse e escolher Delete Screen/Deletar tela).

5) Adicionando conteúdo a um novo slide

Você pode usar as ferramentas/recursos do Flash para modificar o slide (“pai” ou “filho”) de acordo com suas necessidades. Tenha apenas o cuidado de não apagar as setas de navegação do primeiro slide (presentation/apresentação), pois ele contém código (action script) para avançar/voltar cada slide.


Outra opção é usar a Biblioteca/library da apresentação para incluir elementos; observe que nem todos os elementos (como botões de navegação) já contém o código para avançar/voltar slides.

6) Navegando pela apresentação

Para navegar na apresentação você tem de executar o filme (ou publicá-lo em formato de animação do Flash)

  • apertando as teclas Ctrl + Enter ou
  • indo no menu Control/Controle > Test movie /Testar filme;
  • indo no menu File/Arquivo > Publish/Publicar (tem de ir na pasta onde a apresentação está salva e abrir o arquivo .HTML ou .SWF gerado)

Feito isso, você pode apertar as teclas de direção do teclado ← → para avançar e voltar um slide; e as teclas ↑ ↓ para ir para o início e final da apresentação. Paralelamente sua apresentação tem botões (com a programação necessária) para avançar e voltar um slide.

Para adicionar um botão de navegação personalizado, (a fim de avançar ou voltar para um determinado slide),

  • Vá no primeiro slide (slide-mestre) e selecione o botão desejado;
  • Copie esse botão e cole-o no slide desejado;
  • Com o botão selecionado vá no painel Actions/Ações e remova (apague) todas as ações ali contidas;

Obs.: você tem a opção de criar seu próprio botão, ou usar botões da biblioteca do Flash.

  • Ainda com o botão selecionado, vá no painel Behaviours/Comportamento e selecione o botão “+” e escolha Screen > Go to slide/Ir para slide

  • Procure na árvore de objetos o slide desejado e clique no botão Ok.

  • Execute o filme e teste o botão novo.

7) Adicionando efeitos de transição a slides

Para adicionar efeitos de transição a um slide, selecione o slide desejado no Painel de slides (1) e abra o painel Behaviours/Comportamentos do Flash (2);

Ali você pode clicar no botão “+” para adicionar o efeito desejado escolhendo Screen/Tela > Transition/Transição

Escolha a transição desejada, modifique as configurações (visualizando o resultado na tela à esquerda, abaixo) e dê ok.

Por padrão o Evento (ação do usuário) é Reveal/Revelar, ou seja, mostra a transição escolhida ao entrar no slide.

Mas você pode escolher uma segunda transição e definir o evento (ação da apresentação) Hide, ou seja, ao sair do slide (ou ao passar para o próximo slide).

Extraindo som de vídeo usando o Flash (versões MX, MX2004, 8 e CS3)

Antes de prosseguir, configure seu monitor para resolução de, no mínimo, 1024 x 768 pixels. Crie uma camada nova, chamada vídeo, e selecione o quadro1 dela. Vá ao menu Arquivo/File → Inserir/Insert → Importar/Import → Video Na tela que aparece, clique em Procurar/Browse e localize o vídeo (neste exemplo, LojaeLar.mpg).

extraindo-video-flash1

Atenção: se por acaso não conseguir importar o vídeo, é porque seu sistema operacional não possui: – o programa QuickTime player 6 (ou superior). Você pode baixa-lo do site da Apple: http://www.apple.com.br – os codecs (programas que reconhecem vídeos gravados com determinados compactadores – ou codecs); neste caso, tente baixar e instalar um codec de vídeo em seu computador. Recomendo o K-Lite Codec Pack por ser o mais popular para PCs com Windows, e um dos mais completos. Você pode fazer uma busca na internet por esse codec ou baixar deste endereço: http://codecs.r8.org/

Clique em Next/Avançar.

extraindo-video-flash2

Deixe marcada a última opção – Embed vídeo in SWF and play in timeline/Incorporar vídeo no SWF e tocar na linha do tempo; aqui o vídeo será inserido direto na linha do tempo do Flash.

extraindo-video-flash3

Em Audio Track escolha a opção Separate, para separar o áudio do vídeo;

Clique em Next/Avançar.

extraindo-video-flash4

Nesta tela, em Por favor selecione um perfil de compactação para vídeo Flash/Please select a Flash Video enconding profile e escolha Melhor qualidade/Better quality; clique na guia Audio; em configurações adicionais/Show adicional settings e procure a opção Taxa de dados(de áudio)/Data rate. Configure o maior valor (256 kbps) para manter a qualidade do áudio.

Clique em Next/Avançar.

extraindo-video-flash5

Nesta última tela desta sequência o Flash informa que serão criados dois arquivos, um vídeo o nome original (p.ex. lojaelar.mpg) e outro de áudio, com o mesmo nome (p.ex. lojaelar.mp3), Como o restante das informações são técnicas, desmarque a última opção (Após importar vídeo, ver tópicos na Ajuda do Flash/After importing vídeo, view video topics in Flash Help).

Clique em Next/Avançar.

extraindo-video-flash6

Tela com barra de progressão do tempo, informando sobre a inserção do vídeo no filme Flash.

extraindo-video-flash7

No painel de biblioteca estão os dois arquivos (áudio e vídeo), sendo que na linha do tempo apenas o vídeo estará inserido. Para poder exportar o áudio, primeiro crie uma camada nova, selecione-a e arraste o áudio para o palco doFlash. O áudio será exibido como um histograma (gráfico que representa o áudio). O Flash só exporta o que estiver na linha do tempo.

extraindo-video-flash8

Para exportar o áudio vá em File/Arquivo > Export/Exportar > Export movie/Exportar filme Escolha o formato desejado (áudio = .wav) e dê um nome para o áudio.

extraindo-video-flash9

Escolha a melhor configuração para o áudio a ser exportado (vide exemplo)

extraindo-video-flash10

Seu áudio agora é um arquivo à parte do vídeo, para ser utilizado onde for mais adequado em seu projeto (em outro filme Flash ou outro programa de multimídia).

Código em Action Script, Flash

PixelPlant.com: Conversor online de Action Script para HTML 5
Jobe Makar Blog e Stat Silk: Dicas para converter de Actions Script versão 2 para versão 3
Flash Explained.com: dicas de Flash; aqui como fazer um quadro branco com caneta colorida que escreve, em Flash.

1 comentário (+adicionar seu?)

  1. Haydee
    maio 05, 2013 @ 23:20:43

    MUITO OBRIGADA !!!!!!!!! Vc me salvou ! O áudio não entrava e agora sei que tenho que separa ! Valeu !

    Responder

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: