Você não precisa ser um especialista em Flash para criar protótipos. A flexibilidade do programa permite prototipagem com conhecimento limitado do ActionScript 3 . A prototipagem rápida ajuda os usuários a visualizar o produto final. O Flash permite criar protótipos de fidelidade variados ( como de perto o protótipo assemelha-se ao produto final) , tornando mais fácil para atualizar as camadas interativas e conceitos de design de wireframes simples para detalhados, projetos concluídos . Instruções
Preparação
1
Crie imagens que representam as telas necessárias e estados, usando softwares como o Photoshop ou o Fireworks , Corel . A fidelidade de suas imagens podem ser em qualquer lugar a partir de wireframe para projetos visuais (ver referência 2).
2
Open Flash e clique em "Arquivo " e clique em "Novo" e clique em " Flash File (ActionScript 3.0) "no menu que se abre. Clique em " janela" no menu principal e clique em "Propriedades" e , em seguida, clique em "Propriedades " novamente no menu desdobrável . Digite " 1024px " no campo "W " e " 768px " no campo "H".
3
Salve o arquivo , clicando em " Arquivo" no menu principal , em seguida, clicando em " Salvar como ", digitar um nome (como" proto " ) e , em seguida, clicar em" Salvar ".
4
Importar suas imagens , clicando em" Arquivo ", depois clicar em" Importar " e , em seguida, clicando em" importar para biblioteca . " Navegue até onde as imagens são, então, clique em " Abrir". Se as imagens estão em seqüência , o Flash irá importá-los automaticamente como quadros-chave sucessivos da camada selecionada no momento , caso contrário você terá que adicionar keyframes clicando com o botão direito do mouse no quadro, em seguida, clicar em " Inserir quadro-chave " no menu pull-out para cada imagem (ver referência 3).
5
Nome da camada " Wire" , clicando duas vezes sobre a " layer 1" e pressionar "Enter " no seu teclado . Adicionar keyframes entre as imagens na linha do tempo , clique no primeiro quadro-chave e pressionando "F5" no teclado quatro vezes (ver referência 2 ) .
6
Dê a sua imagem quadros nomes clicando em "Window" no menu principal, em seguida, clicando em "Propriedades" e depois clicando em "Propriedades" novamente no menu desdobrável . Com uma imagem Frame destaque , digite o nome da imagem no campo " Rótulo do quadro " . Repita este processo para as outras imagens (ver referência 2).
7
Crie uma nova camada clicando em " Camada Insert" na parte inferior da linha do tempo e nomeá-lo " AS3 ". Clique com o botão direito do mouse sobre o Quadro 1 da camada " AS3 " e clique em "Ação " no menu desdobrável . Digite o seguinte código:
stop ();
( . Consulte a Referência 2)
Botão
8
duas vezes clique em " Fill Color" na barra de ferramentas , clique em "None" para a cor (que será a caixa com uma linha vermelha na diagonal) . Clique duas vezes em "Stroke Color" na barra de ferramentas e digite um valor de "3" para "Stroke Altura " e clique em qualquer cor (ver referência 2).
9
Clique na ferramenta " Retângulo " na barra de ferramentas e , ao mesmo tempo mantendo o mouse, arrastar pelo palco para desenhar um retângulo . O retângulo deve ser um tamanho adequado para áreas clicáveis . Clique na ferramenta " Retângulo " , em seguida, no menu principal, clique em " Modificar ", clique em "Convert to New Symbol " no menu desdobrável . Clique na caixa radial "Button" e digite " Button_btn " para o nome (ver referência 2).
10
Dê um duplo clique no botão para entrar em sua linha do tempo. Botão direito do mouse sobre o quadro rotulado como " Hit ", e escolha a opção " Inserir quadro-chave . " Alterar a cor do botão. Faça o mesmo para " Over". Excluir a cor para " Up". Isto lhe dará um botão invisível que será realçado quando o usuário mouses sobre isso. Clique em " Cena 1 " na parte inferior da linha de tempo para sair do cronograma do botão. Excluir o botão do palco (ver referência 2).
11
Crie uma nova camada clicando em " Inserir Camada " na parte inferior da linha do tempo , e nomeie a nova camada "Botões ". Insira keyframes no " Buttons " camada com os mesmos números de quadro como as imagens na camada " Wire" ( ver referência 2).
12
Arraste um "botão" da biblioteca e colocá-lo em o palco . Clique em " janela" no menu principal e clique em "Propriedades" e , em seguida, clique em "Propriedades " novamente no menu desdobrável . Com o botão ainda realçado , digite um nome de instância única, como o nome da página que irá navegar para , por exemplo, " page1_btn " (ver referência 2).
13
botão direito do mouse Quadro 1 da camada de " AS3 " e clique em "Ação" no menu pull -out. Digite o código a seguir , substituindo " Página1 " para seus nomes rótulo de quadro :
page1_btn.addEventListener ( MouseEvent.CLICK , onPage1 , false, 0, true);
função onPage1 ( evt : MouseEvent ) : . void {
gotoAndStop ( " Página1 "); }
14
Repita o processo para outras páginas
< br >
