Painéis dinâmicos no Axure
-
Upload
daniela-carvalho -
Category
Education
-
view
576 -
download
62
description
Transcript of Painéis dinâmicos no Axure
1
1
Painéis Dinâmicos1 (Dynamic Panels)
Crie um novo arquivo
A. Adicione uma imagem (Image) e um botão (Button Shape) Faça o download das imagens em bit.ly/AxureBikePics
1. Faça o download e descompacte o arquivo. Baixe o arquivo no link bit.ly/AxureBikePics e descompacte-‐o em uma pasta no seu computador.
2. Adicione os componentes. Coloque um componente de imagem (Image) e um de botão (Button Shape) no painel Wireframe, como apresentado.
3. Selecione a imagem. Duplo clique no componente de imagem e selecione a primeira imagem.
4. Clique abrir (Open). Clique “Open” para usar a imagem. Clique em “Yes” quando questionado para auto dimensionar a imagem. 5. Edite o texto do botão. Edite o texto no botão para “Next”.
1 Traduzido pela Profa. Daniela Carvalho Monteiro Ferreira, para a disciplina de Web Design, nos cursos de Publicidade e Relações Públicas E-‐mail: [email protected]. Nov 2013. Blog: http://colecaoaprender.blogspot.com.br
2
2
B. Converter para painel dinâmico e adicionar estados
1. Converter para painel dinâmico. Clique com o botão direito na imagem e selecione [Convert > Convert to Dynamic Panel].
2. Rotule o painel dinâmico. Rotule o novo painel dinâmico como “DynamicPanel1” no campo Label (Rótulo) no painel de Propriedades do Componente (Widget Properties).
3. Adicione mais dois estados. Clique com o botão direito no DynamicPanel1, no gerenciador de painel dinâmico (Dynamic Panel Manager), e selecione [Add State]. Repita o passo duas vezes para ter no total três estados.
4. Rotule cada estado. Nomeie os estados (states) “BikeLeft”, “BikeMiddle” e “BikeRight”.
3
3
C. Adicione uma imagem para cada estado
1.Abra o estado BikeMiddle. Duplo clique no estado BikeMiddle no gerenciador de painel dinâmico (Dynamic Panel Manager) para abrí-‐lo no painel Wireframe.
2. Adicione o componente de imagem. Coloque o componente de imagem em (0, 0). As linhas pontilhadas representam a área visível do painel dinâmico.
3. Importe a imagem. Duplo clique no componente de imagem e importe a segunda imagem.
4. Clique em “Open”. Clique em “Open” para usar a figura. Clique em “Yes” quando questionado para redimensionar a imagem. 5. Repita os passos para BikeRight. Repita os passos 1-‐4 para colocar a terceira imagem no estado “BikeRight”.
4
4
D. Faça que ao clicar no botão “Next”, vá para o próximo estado
1. Selecione o botão “Next” (próximo). Selecione o botão “Next” na Home page.
2. Adicione um caso (Case) para OnClick. Duplo clique no evento OnClick para o botão para adicionar um caso (case).
3. Adicione uma ação. Selecione a ação na coluna da esquerda para “Set Panel state(s) to State(s)”.
4. Especifique as opções. Selecione as opções correspondentes para a ação, conforme apresentado acima. 5. Clique Ok. Clique no botão OK para adicionar a ação (Action).
5
5
Gere o protótipo
Gere o protótipo. Clique no botão “Next” para avançar as imagens. Quando você chegar na terceira imagem, ele voltará para a primeira. Referência: AXURE. Axure RP Training. Disponível em <http://www.axure.com/learn>. Acesso em Nov 2013. AXURE. Axure Core Training. Disponível em <http://d3g1p8ush40lh4.cloudfront.net/Tutorials/AxureCoreTraining.pdf>. Acesso em Out 2013.