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

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