1

1

 

Rolagem  Dinâmica  com  Links1  (Dynamics  Scrolling  with  Links)  

 

 Crie  um  novo  arquivo  

 

A.  Adicione  um  componente  “Image  Map  Region”    

   

1.  Faça  o  download  do  arquivo  AchorLinks.rp.    Baixe  o  arquivo  no  link  bit.ly/AxureAnchorLinks  e  descompacte-­‐o  em  uma  pasta  no  seu  computador.  

2.  Adicione  o  componente  de  mapear  região  de  imagem  (Image  Map  Region).  Arraste  um  componente  Image  Map  Region  no  topo  da  primeira  resposta  (1.Q:  ).      

 

   

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:  daniela.carvalho@esamc.br.  Nov  2013.  Blog:  http://colecaoaprender.blogspot.com.br  

2

2

B.  Rotule  o  componente    

   1.  Selecione  o  componente.  Clique  no  componente.   2.  Rotule  o  componente.  Rotule  a  região  como  “Q1”  no  

campo  Label  (Rótulo)  no  painel  de  Propriedades  do  Componente  (Widget  Properties).  

                   

3

3

 

C.  Adicione  um  caso  no  evento  OnClick  para  a  Questão  1  (Question  1)      

   1.Selecione  a  primeira  questão.  Clique  na  primeira  questão  para  selecioná-­‐la.  

2.  Selecione  “OnClick”.  No  painel  de  propriedades  do  componente,  clique  em  “OnClick”  e  depois  “Add  Case”  (adicionar  caso),  ou  duplo  clique  no  evento  para  abrir  a  caixa  do  editor  de  caso  (Case  Editor  Dialog).  

           

4

4

 

D.  “Scroll  to  Image  Map  Region”    

   1.  Ative  a  ação  de  rolagem.  Na  caixa  de  editor  de  caso  (Case  Editor  Dialog),  clique  em  “Scroll  to  Image  Map  Region”  na  lista  da  coluna  da  esquerda.  

2.  Marque  Q1.  Marque  a  caixa  ao  lado  da  Q1  (Image  Map  Region)  na  coluna  da  direita.  

3.  Clique  Ok.  Clique  no  botão  OK  para  fechar  o  editor  de  caso.  

     

5

5

 

E.  Adicione  um  componente  “Image  Map  Region”  no  topo    

 

   

1.  Adicione  um  componente.  Adicione  um  componente  “Image  Map  Region”  no  topo  da  página  para  criar  um  link  âncora  para  voltar  para  o  topo  (“Return  to  top”).  

2.  Rotule  o  componente.  Rotule  este  componente  como  “PageTop”  no  painel  de  propriedades  do  componente  (Widget  Properties).  

           

6

6

 

E.  Retornar  para  o  topo    

   1.  Ative  o  link  âncora.  Em  baixo  da  questão  1,  selecione  o  texto  “Return  to  top”.  

2.  Adicione  uma  ação.  Adicione  um  caso  “OnClick”  para  rolar  para  o  componente  “PageTop”.  

   

       

7

7

   

 Gere  o  protótipo  

 Gere   o   protótipo.   Clique   na   primeira   pergunta   e   vai   pular   para   a   resposta.   Clique   em   “Return   to   top”   embaixo   da  resposta  para  voltar  para  o  topo  da  página.    Referência:    AXURE.  Anchor  Links  Tutorial.  Disponível  em  < http://www.axure.com/learn/basic/interactions/anchor-­‐links-­‐tutorial>.  Acesso  em  Nov  2013.