1
	
  

Painéis	
  Dinâmicos1	
  
(Dynamic	
  Panels)	
  
	
  

	
  

	
  

Crie	
  um	
  novo	
  arquivo	
  

A.	
  Adici...
2

B.	
  Converter	
  para	
  painel	
  dinâmico	
  e	
  adicionar	
  estados	
  
	
  

	
  
1.	
  Converter	
  para	
  pa...
3
	
  

C.	
  Adicione	
  uma	
  imagem	
  para	
  cada	
  estado	
  
	
  
	
  

	
  
1.Abra	
  o	
  estado	
  
BikeMiddle...
4
	
  

D.	
  Faça	
  que	
  ao	
  clicar	
  no	
  botão	
  “Next”,	
  vá	
  para	
  o	
  próximo	
  estado	
  
	
  

	
  ...
5

	
  
	
  
	
  

Gere	
  o	
  protótipo	
  

	
  
Gere	
   o	
   protótipo.	
   Clique	
   no	
   botão	
   “Next”	
   p...
Próximos SlideShares
Carregando em…5
×

Painéis dinâmicos no Axure

1.251 visualizações

Publicada em

Conteúdo traduzido no treinamento essencial da Axure. Disponível em <http: />

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.251
No SlideShare
0
A partir de incorporações
0
Número de incorporações
150
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Painéis dinâmicos no Axure

  1. 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   2.  Adicione  os   componentes.  Coloque  um   componente  de  imagem   bit.ly/AxureBikePics (Image)  e  um  de  botão   e   descompacte-­‐o   em   uma   (Button  Shape)  no  painel   pasta  no  seu  computador.   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:   daniela.carvalho@esamc.br.  Nov  2013.  Blog:  http://colecaoaprender.blogspot.com.br   1
  2. 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”.     2
  3. 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”.     3
  4. 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).     4
  5. 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.   5

×