domingo, outubro 04, 2009

Projeto em Flash

Olá a todos.
Depois de um longo tempo sem postar nada no blog resolvi trabalhar um projeto mais longo, criar uma apresentação completa em flash usando AS3. Desde a criação da estrutura do arquivo até a criação dos códigos para comandar a timeline. Nesta apresentação iremos carregar imagens externas, textos externos, videos e música, e, numa pequena variação, criaremos uma pequena interação do flash com PHP para criar um formulário de contato por mail, para que a apresentação possa ser usada como um pequeno site e possa ser publicado na web. Claro que o projeto é meio longo, portanto os posts serão feitos aos poucos, iniciando com este primeiro onde iremos criar a estrutura do arquivo em Flash, portanto mãos à obra! Neste momento inicial não irei me preocupar absolutamente em nada com o layout, depois de criada a estrutura do documento irei fazer o meu layout e substituirei os desenhos básicos aqui criados por um layout trabalhado e aí cada um fará o seu layout, isto não vai interferir no funcionamento do documento.

Abra o Flash e crie um novo documento selecionando a opção de AS3, assim que o documento for criado vá até o menu MODIFY>>DOCUMENT e altere o formato para 650x500 pixels, conforme a figura 1.












pensando na estrutura da nossa timeline criaremos camadas para cada um dos conteúdos que serão trabalhados, e as seções na verdade serão arquivos de flash independentes que serão carregados para o filme principal (esse que criaremos hoje), para que o conteúdo não fique concentrado em um só arquivo que ficaria muito pesado e complicaria a edição, portanto esse arquivo que criaremos hoje será a base, nele os outros arquivos serão carregados assim que solicitados. Vamos às camadas conforme a figura 2.











Para criar novas camadas clique na na pequena página que aparece no canto esquerdo do painel TIMELINE. Começando pela camada "base", onde poderemos colocar alguma imagem ou desenho, apenas para layout, em seguida crie a camada "conteúdo", onde iremos carregar os conteúdos que necessitem de camadas, a camada "menu", onde colocaremos os botões para comandar a timeline, a camada "marcação" que usaremos para que o indivíduo que esteja vendo a apresentação ou o site saiba em que seção ele está. Em seguida a camada "labels", onde nomearemos os frames e finalmente a camada "ações" onde colocaremos todo o ActionScript, já que no AS3 não se coloca Script nos objetos e sim apenas na timeline. Por costume eu transformo a camada ações em um GUIDE LAYER (botão direito do mouse diretamente na camada e selecione a opção GUIDE), apenas para uma visualização diferente, isso não interfere no funcionamento.
Vamos agora fazer os frames ao longo da timeline e instanciá-los para que possamos chamá-los através de ActionScript.
Pois bem, vamos clicar no frame 2 da camada "ações" e pressionando a tecla SHIFT clicar no frame 2 da camada "base", assim toda a linha de frames ficará selecionada, em seguida vá ao menu INSERT>>TIMELINE>>KEYFRAME, conforme a figura 3, isso criará keyframes em todas as camadas (o atalho para este comando é F6).









Repita o procedimento para os frames 10, 20, 30 e 40. Para o frame 50 ao invés de criar KeyFrames criemos um frame comum. Com o frame 50 de todas as camadas selecionado vá ao menu INSERT>>TIMELINE>>FRAME (atalho: F5). A timeline deve ficar conforme a figura 4.









Feito isso vamos instanciar os frames da camada "labels" conforme o conteúdo que iremos exibir.
Clique no frame 2 da camada "labels" e no painel PROPERTIES digite no quadro NAME a palavra intro. Clique no frame 10 e no quadro NAME digite fotos. No frame 20 digite videos, no frame 30 digite musicas e no frame 40 digite contato, conforme a figura 5.














Bem, já trabalhamos o suficiente para salvar nosso arquivo. Vá ao menu FILE>>SAVE e vamos criar uma pasta com o nome Projeto Flash e salvar o nosso arquivo dentro desta pasta com o sequinte nome: index.
Bem, como eu havia dito não me preocuparei com layout por enquanto, então usarei botões do próprio flash para este momento, vá ao menu WINDOW>>COMMON LIBRARIES>>BUTTONS, clique e escolha os botões para fazer mos o menu, eu usarei os da pasta buttons bar, conforme a figura 6.

















Clique no frame 2 da camada "menu" e arraste o botão "bar blue" do painel LIBRARY - BUTTONS>FLA para stage. Clique no botão que você arrastou para o stage e no painel PROPERTIES, na opção INSTANCE NAME digite: intro_btn. Por favor preste muita atenção ao digitar o instance name de objetos no painel PROPERTIES, pois estes nomes serão usados no ActionScript e deverão estar EXATAMENTE iguais aos que você instancia no painel PROPERTIES. Veja na figura 7 o detalhe do botão clicado e no painel PROPERTIES o instance name intro_btn.
















O que faremos em seguida é fechar o painel LIBRARY - BUTTONS.FLA e abrir o nosso painel LIBRARY, indo ao menu WINDOW>>LIBRARY, deve haver apenas um botão, bar blue, vamos renomeá-lo no painel LIBRARY para intro, basta dar dois cliques SOBRE O NOME do botão dentro do painel LIBRARY e renomear (figura 8).























Pois bem, agora vamos dar uma pequena editada no botão, clique duas vezes SOBRE O BOTÃO no stage e digite intro na caixa de texto que fica na camada "text" conforme a figura 9.























Volte para a timeline principal clicando no botão scene 1 que fica no alto da área do stage. Pois bem, agora vamos duplicar este botão DENTRO DO PAINEL LIBRARY, clique com o botão direito do mouse SOBRE O BOTÃO NO PAINEL LIBRARY e escolha a opção DUPLICATE e ao abrir a caixa de diálogo digite fotos, conforme a figura 10.







Em seguida arraste este botão do painel LIBRARY para o stage, de um duplo clique SOBRE O BOTÃO no stage e digite Fotos, conforme fizemos com o anterior, veja a figura 11.
















Repita todo este procedimento para criar os botões: videos, musicas e contato, em seguida arraste estes novos botões para o stage, edite os nomes e posicione no stage, conforme a figura 12.














Instancie cada um deles no painel PROPERTIES com os seguintes nomes:
o botão fotos: fotos_btn
o botão videos: video_btn
o botão musicas: musicas_bnt
o botão contato: contato_btn.
Novamente devo frisar: muita atenção ao instanciar os botões no PAINEL PROPERTIES, EXATAMENTE como pedido acima.
Aqui botei uma barra na camada base, uma barra igual a que existe dentro dos botões para que eles não aparecessem isolados. Note na timeline que a camada "base" tem conteudo, é a barra.
Para finalizar por hoje, clique com o botão direito do mouse no FRAME 1 da camada "menu" e selecione a opção CLEAR KEYFRAME. Isso fará com que o keyframe do frame 2 vá para o frame 1, depois selecione o frame 10, pressione a tecla SHIFT e clique no frame 40, toda a linha de frames ficará ativa, clique com o botão direito do mouse e selecione novamente a opção CLEAR KEYFRAME, esta camada ficará com apenas um Keyframe que é o frame 1. Repita o procedimento para a camada "base", conforme a figura 13.












Por hoje é o bastante, no próximo post criaremos as marcações e iniciaremos com os códigos para comandar a timeline. Então, até logo!

Um comentário:

henriquemb disse...

Poxa! Você começou o tutorial e não terminou! estava muito animado para avançar para a próxima etapa. se você não continuou, remove este post, para outra pessoa não perder o mesmo tempo que o meu fazendo este início de tutorial! :/