Ir para o conteúdo

Criar um site simples

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

Construção da parte visual

  • Criar um novo filme com as seguintes características:
    • Largura de 500px;
    • Altura de 300px;
    • Cor do fundo em branco (#FFFFFF);
  • 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;
  • Desenhar o fundo, na layer fundo:
    • 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;
    • 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;
  • Criar os botões (no tutorial serão apenas criados 2 botões — 2 links), com uma animação simples:
    • O botão Home:
      • Carregar em "Ctrl+F8" (para criar um novo símbolo), nas opções seleccionar button e no campo name colocar link1.
      • 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;
      • Seleccionar a frame Hit e carregar em "F6" (para inserir uma keyframe);
      • Seleccionar a frame Over e carregar em "F6" novamente:
        • Clicar sobre o quadrado e modificar a sua cor para azul (#0099FF);
      • Inserir uma nova camada com o nome texto. A camada texto deve estar acima da camada Layer1;
      • Na frame Up inserir um campo de texto estático e escrever Home, alinhado ao centro;
    • O botão Links:
      • Apertar "Ctrl+F8" (para criar um novo símbolo), nas opções seleccionar button e no campo name colocar link2.
      • Repetir os mesmos procedimentos utilizados no primeiro botão, mudando apenas o texto de Home para Links.
  • Inserir os botões no site:
    • Pressionar "F11" ou "Ctrl+L" para abrir a biblioteca de arquivos;
    • Clique na camada botões e arrastar os dois botões da biblioteca (link1 e link2) e alinhe-os sobre o quadrado cinza;
  • Criar os "links" ou "telas", ou seja, quando um utilizador clicar num determinado link um determinado filme será mostrado na parte azul:
    • 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)
    • Carregar em "Ctrl+Enter" para testar;
    • 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

  • Abrir o painel de acções e colocar no modo "expert";
  • Na layer actions clicar na 1.ª frame;
  • Vamos colocar as actions de maneira a que o filme comece parado e com o link1 iniciado;
  • 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
    
  • 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
    }
    
  • 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
    }