Ferramentas de Utilizador

Ferramentas de Site


dev_web:actionscript:site_simples_flash_actionscript

Criar um site simples

Com este tutorial vai aprender a criar um site simples usando Flash e ActionScript.

Construção da parte visual

  1. Criar um novo filme com as seguintes características:
    • Largura de 500px;
    • Altura de 300px;
    • Cor do fundo em branco (#FFFFFF);
  2. Criar 3 Layers (Camadas):
    • A primeira Camada deve chamar-se "actions";
    • A segunda Camada deve chamar-se "botões";
    • A terceira Camada deve chamar-se "Fundo";
  3. Desenhar o fundo, na layer fundo:
    1. Desenhar um quadrado azul (#0099FF) com o seguinte tamanho e localização:
      • Largura de 500.0px;
      • Altura de 200.0px;
      • Posição: x - 0.0px, y - 100.0px;
    2. Desenhar um outro quadrado com a cor cinza (#333333) com o seguinte tamanho e localização:
      • Largura de 500.0px;
      • Altura de 100.0px;
      • Posição: x - 0.0px, y - 0.0px;
  4. Criar os botões (no tutorial serão apenas criados 2 botões (2 links)), com uma animação simples:
    1. O botão "Home":
      1. Carregar em "Ctrl+F8" (para criar um novo símbolo), nas opções seleccionar "button" e no campo "name" colocar "link1".
      2. No "timeline" haverá 4 frames "Up" (normal), "Over" (quando o rato passa por cima), "Down" (quando se clica), "Hit" (área onde se pode efectuar o click). Na frame "Up" inserir um quadrado de 100x30px de cor verde (#00FF00) e alinhá-lo ao centro;
      3. Seleccionar a frame "Hit" e carregar em "F6" (para inserir uma keyframe);
      4. Seleccionar a frame "over" e carregar em "F6" novamente:
        • Clicar sobre o quadrado e modificar a sua cor para azul (#0099FF);
      5. Inserir um novo layer com o nome "texto", o layer "texto" deve estar acima do layer "Layer1";
      6. Na frame "Up" inserir um campo de texto estático e escrever "Home", alinhado ao centro;
    2. O botão "Links":.
      1. Apertar "Ctrl+F8" (para criar um novo símbolo), nas opções seleccionar "button" e no campo "name" colocar "link2".
      2. Repetir os mesmos procedimentos utilizados no primeiro botão, mudando apenas o texto de "Home" para "Links".
  5. Inserir os botões no site:
    1. Pressionar "F11" ou "Ctrl+L" para abrir a biblioteca de arquivos;
    2. Clique na layer "botões" e arrastar os dois botões da biblioteca ("link1" e "link2") e alinhe-os sobre o quadrado cinza;
  6. Criar os "links" ou "telas", ou seja quando um utilizador clicar num determinado link um determinado filme será mostrado na parte azul:
    1. Criar um novo filme. Neste filme pode ser inserido o conteúdo que se desejar. Este aparece quando o utilizador clicar no botão "Home". Criar com as seguintes características:
      • Largura de 500px;
      • Altura de 200px;
      • Cor do fundo em branco (#FFFFFF)
    2. Carregar em "Ctrl+Enter" para testar;
    3. Criar um outro filme que será para o segundo link "links" com as mesmas características que o anterior mas com outro conteúdo.

Actions

  1. Abrir o painel de acções e colocar no modo "expert";
  2. Na layer "actions" clicar na 1º frame:
  3. Vamos colocar as actions de maneira a que o filme comece parado e com o "link1" iniciado:
    1. Escrever o seguinte código:
      Stop();//Para que o filme comece parado
      createEmptyMovieClip("mc1", 5);//Cria um movieclip que se chamará "mc1"
      mc1.loadMovie("home.swf")//O "mc1" carrega o filme "home.swf"
      //Posição do "mc1"
      mc1._x = 0.0
      mc1._y = 100.0
    2. Clicar sobre o botão "Home" e inserir no painel de acções:
      on(press) {
          createEmptyMovieClip("mc1", 5)
          mc1.loadMovie("home.swf")
          mc1._x = 0.0
          mc1._y = 100.0
      }

      Esta acção sempre que o botão for pressionado;

    3. Clicar sobre o botão "Links" e inserir no painel de acções:
      on(press) {
          createEmptyMovieClip("mc2", 5)
          mc2.loadMovie("links.swf")
          mc2._x = 0.0
          mc2._y = 100.0
      }

      Esta acção sempre que o botão for pressionado;

dev_web/actionscript/site_simples_flash_actionscript.txt · Esta página foi modificada pela última vez em: 2015/01/31 19:31 por Rui Carlos