SlideShare uma empresa Scribd logo
1 de 7
Baixar para ler offline
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	
  

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

	
  

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

	
  

3
4
	
  

D.	
  “Scroll	
  to	
  Image	
  Map	
  Region”	
  
	
  

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

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

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

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

	
  

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

7

Mais conteúdo relacionado

Mais de Daniela Carvalho

Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008
Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008
Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008
Daniela Carvalho
 
As tecnologias da_inteligencia
As tecnologias da_inteligenciaAs tecnologias da_inteligencia
As tecnologias da_inteligencia
Daniela Carvalho
 

Mais de Daniela Carvalho (20)

HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008
Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008
Livro denis alcides_rezende_sistemas_informacoes_organizacionais_3ed_2008
 
UML - Casos de Uso Avançado
UML - Casos de Uso AvançadoUML - Casos de Uso Avançado
UML - Casos de Uso Avançado
 
UML - Casos de Uso
UML - Casos de UsoUML - Casos de Uso
UML - Casos de Uso
 
Jogo da forca - Diagrama de Classe
Jogo da forca - Diagrama de ClasseJogo da forca - Diagrama de Classe
Jogo da forca - Diagrama de Classe
 
Conceitos Essenciais de Orientação a Objetos
Conceitos Essenciais de Orientação a ObjetosConceitos Essenciais de Orientação a Objetos
Conceitos Essenciais de Orientação a Objetos
 
Classe - Paradigma Orientado a Objetos
Classe - Paradigma Orientado a ObjetosClasse - Paradigma Orientado a Objetos
Classe - Paradigma Orientado a Objetos
 
Introdução ao Paradigma Orientado a Objetos - 2
Introdução ao Paradigma Orientado a Objetos - 2Introdução ao Paradigma Orientado a Objetos - 2
Introdução ao Paradigma Orientado a Objetos - 2
 
Introdução ao Paradigma Orientado a Objetos
Introdução ao Paradigma Orientado a ObjetosIntrodução ao Paradigma Orientado a Objetos
Introdução ao Paradigma Orientado a Objetos
 
Animação para web
Animação para webAnimação para web
Animação para web
 
Animação na web
Animação na webAnimação na web
Animação na web
 
Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
Sintaxe do CSS - Aprenda a estrutura das regras e suas propriedades.
 
Widgets e Masters no Axure 7.0
Widgets e Masters no Axure 7.0Widgets e Masters no Axure 7.0
Widgets e Masters no Axure 7.0
 
Um website desenhado
Um website desenhadoUm website desenhado
Um website desenhado
 
As tecnologias da_inteligencia
As tecnologias da_inteligenciaAs tecnologias da_inteligencia
As tecnologias da_inteligencia
 
As múltiplas alfabetizações midiáticas
As múltiplas alfabetizações midiáticasAs múltiplas alfabetizações midiáticas
As múltiplas alfabetizações midiáticas
 
Elements pt
Elements ptElements pt
Elements pt
 
Podcasting
PodcastingPodcasting
Podcasting
 
Audacity Edicao Audio
Audacity  Edicao AudioAudacity  Edicao Audio
Audacity Edicao Audio
 
Audacity Edicao Audio
Audacity  Edicao AudioAudacity  Edicao Audio
Audacity Edicao Audio
 

Último

Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
azulassessoria9
 
Aprender as diferentes formas de classificar as habilidades motoras é de extr...
Aprender as diferentes formas de classificar as habilidades motoras é de extr...Aprender as diferentes formas de classificar as habilidades motoras é de extr...
Aprender as diferentes formas de classificar as habilidades motoras é de extr...
azulassessoria9
 
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdfatividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
Autonoma
 

Último (20)

aprendizagem significatica, teórico David Ausubel
aprendizagem significatica, teórico David Ausubelaprendizagem significatica, teórico David Ausubel
aprendizagem significatica, teórico David Ausubel
 
O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.O que é arte. Definição de arte. História da arte.
O que é arte. Definição de arte. História da arte.
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
 
Novena de Pentecostes com textos de São João Eudes
Novena de Pentecostes com textos de São João EudesNovena de Pentecostes com textos de São João Eudes
Novena de Pentecostes com textos de São João Eudes
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
INTERTEXTUALIDADE atividade muito boa para
INTERTEXTUALIDADE   atividade muito boa paraINTERTEXTUALIDADE   atividade muito boa para
INTERTEXTUALIDADE atividade muito boa para
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
 
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptxSlides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
 
AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022AULÃO de Língua Portuguesa para o Saepe 2022
AULÃO de Língua Portuguesa para o Saepe 2022
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de LedAula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
Aula 67 e 68 Robótica 8º ano Experimentando variações da matriz de Led
 
Aprender as diferentes formas de classificar as habilidades motoras é de extr...
Aprender as diferentes formas de classificar as habilidades motoras é de extr...Aprender as diferentes formas de classificar as habilidades motoras é de extr...
Aprender as diferentes formas de classificar as habilidades motoras é de extr...
 
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
 
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdfatividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
atividade-de-portugues-paronimos-e-homonimos-4º-e-5º-ano-respostas.pdf
 
Acessibilidade, inclusão e valorização da diversidade
Acessibilidade, inclusão e valorização da diversidadeAcessibilidade, inclusão e valorização da diversidade
Acessibilidade, inclusão e valorização da diversidade
 
M0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptxM0 Atendimento – Definição, Importância .pptx
M0 Atendimento – Definição, Importância .pptx
 
Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)
 
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdfMESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
Aula 1 - Psicologia Cognitiva, aula .ppt
Aula 1 - Psicologia Cognitiva, aula .pptAula 1 - Psicologia Cognitiva, aula .ppt
Aula 1 - Psicologia Cognitiva, aula .ppt
 

Rolagem dinâmica no Axure

  • 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   1
  • 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).     2
  • 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).     3
  • 4. 4   D.  “Scroll  to  Image  Map  Region”       1.  Ative  a  ação  de  rolagem.  Na  caixa   2.  Marque  Q1.  Marque  a  caixa  ao   de  editor  de  caso  (Case  Editor  Dialog),   lado  da  Q1  (Image  Map  Region)  na   clique  em  “Scroll  to  Image  Map   coluna  da  direita.   Region”  na  lista  da  coluna  da   esquerda.           3.  Clique  Ok.  Clique  no  botão  OK  para   fechar  o  editor  de  caso.   4
  • 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).   5
  • 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”.     6
  • 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.     7