painéis dinâmicos no axure

5
1 1 Painéis Dinâmicos 1 (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 descompacteo 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 Email: [email protected]. Nov 2013. Blog: http://colecaoaprender.blogspot.com.br

Upload: daniela-carvalho

Post on 25-Jan-2015

577 views

Category:

Education


62 download

DESCRIPTION

Conteúdo traduzido no treinamento essencial da Axure. Disponível em

TRANSCRIPT

Page 1: 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  

Page 2: Painéis dinâmicos no Axure

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”.  

                   

Page 3: Painéis dinâmicos no Axure

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”.  

           

Page 4: Painéis dinâmicos no Axure

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).  

         

Page 5: Painéis dinâmicos no Axure

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.