Design de UI/UX: crie formulário de registro interativo no Axure RP | Irfan Rosandi | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Design de UI/UX: crie formulário de registro interativo no Axure RP

teacher avatar Irfan Rosandi, Product Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

10 aulas (55 min)
    • 1. Introdução

      0:33
    • 2. Vamos começar!

      6:02
    • 3. Como desenhar campo de texto personalizado

      3:54
    • 4. Interação de rótulos flutuantes

      2:18
    • 5. Como concluir os campos de formulário

      6:00
    • 6. Interação de linha

      6:18
    • 7. Criar tela de agradecimento

      8:26
    • 8. Animação de carregamento

      5:07
    • 9. Animação de sucesso de registro

      11:38
    • 10. Publicando seu protótipo!

      5:00
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

503

Estudantes

1

Projeto

Sobre este curso

Você quer criar um protótipo realista para seu projeto? Você quer obter feedback precoce para seu aplicativo antes de desenvolvimento? Junte-se à Irfan Rosandi para um curso divertido para projetar um protótipo de formulário interativo em menos de uma hora. Seja você um Designer de UX, Designer de UI, desenvolvedor ou qualquer pessoa que queira criar um protótipo realista, este curso é para você. Neste curso, você vai aprender a usar uma das melhores ferramentas de prototipagem chamadas Axure RP para criar um protótipo interativo.

Inscreva-se agora!

Conheça seu professor

Teacher Profile Image

Irfan Rosandi

Product Designer

Professor

Irfan is a product designer that passionate about designing digital products that work for the business and create a positive impact on the life of people. He specializes in enterprise and SaaS applications. He experienced designing for various industries and platforms. Irfan has helped early stages startups to Fortune 500 enterprises to achieve their goals through his product and design skills.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Bem-vindo ao realmente trouxe a aula de datilografia. Meu nome é um amigo, e eu uso muito real para prototipagem realmente desperdiçou a melhor alma para prototipagem rápida . Ele pode corrigir de simples a interação complexa em real nesta classe o óleo e como corrigir um protótipo de formulário de registro interativo simples. Vamos trabalhar com widgets personalizados de painel dinâmico em animações. Você vai aprender a ficar processo bíceps e coração equipado, protótipo de forma interativa do zero e palestrante Vamos começar e clicar e rolar. 2. Vamos começar!: Tudo bem, vamos começar. Disse que a primeira coisa que vamos fazer, vamos abrir. Na verdade, vamos abrir novamente, na verdade, e então vamos corrigir qualquer projeto indo para o arquivo e clique em Novo. Então está abrindo novos documentos por padrão. Real cria automaticamente quatro arremessos para você. Mas desta vez nós não comemos toda esta página alguns indo para as férias do lago quando eu uso o tardio no meu teclado. Clique em Sim. Para adicionar novo Bates, você pode clicar nos segundos na baía Chaikin clique nele e então eu vou nomeá-lo para ser e então eu quero dizer para este projeto por ir para arquivo e seguro, nós vamos salvar para ser forma e seguro. Tudo bem, vamos clicar duas vezes sobre ele para upend e. Eles estão trabalhando aqui, assim como contra ainda está vazio. Vamos reparar o seu novo Brosa é contra o maior aço vazio. É branco. Não há nada aqui. Certo, vamos voltar para a verdade e eles iam mudar suas cores de fundo. Nós vamos estilo na parte de trás das seções de cor íamos fazer para ser cinza Vamos voltar e eu vou atualizá-lo, então uma mudança. Legal. Voltamos à acção e depois adicionamos ao mendigo outra forma. Eu vou usar um dólar e clicar nele e arrastá-lo e eles vão definir o com os 500. E isso tinha que ser 500, só isso. E arrastá-lo e, em seguida, eu quero esconder esta borda da caixa um clique nele E então nesta linha com a seção eu estou clicando neste drop down E quando é tão parecido que ele não é e eu vou adicionar a sombra sobre ele clique sobre este derrubado Eu sinto muito E este outro sombra e, em seguida, ativar as opções de sombra Eles vão dizer que o X e y para ser zero porque ele queria sombra para ser centrado. E quero mudar a cor da sombra. Fizemos estes scullers para que possamos ter sombra mais suave. E isso faria com que isso fosse executado. Nós clicamos na caixa e nas seções prontas da esquina vamos colocar a isca. Então nós financiamos no canto. Vamos fazer isso antes que você volte para o ônibus. É legal. Voltamos para a verdade e agora vamos trancar esta caixa. Então não vamos movê-lo acidentalmente quando projetamos. Fazemos isso por mercadorias organizar e depois olhar. Então beije igual olhar, localização e tamanho. E agora vamos adicionar rótulo ao formulário que clink desses ícones de pesquisa levou a um rótulo de pesquisa . Vamos digitar rótulo, arrastamos e vamos editar o rótulo. Nós clicamos duas vezes sobre ele vai abrir o editor, então eu vou fazer com que seja, bem, o encontro Zeina e eles iam mudar o tamanho do nível, clicar nele e dizer que para ser 25 porque não há 2012 aqui, Então nós vamos É que eu minimamente 25. Certo, então vamos adicionar outro nível. Bebi. Vou adicionar a linha de tecnologia para ser o meu designer Jain Food. Tudo bem, então agora vamos adicionar botão ao formulário. Eu quero usar caixas, clique no livro um e arrastá-lo como definir o com para ser 400 pixel e odeio ser 50 pixel . E eles vão mudar as cores hoje para ser descobre 666699 e então eu vou adicionar texto. Então eu clique duas vezes sobre isso. E o registo de anúncios. Não, eu vou fazer para ser branco e dizer que o formulário para ser 14 e torná-lo ousado. Eu quero fazer esses botões para ser arredondado também. Então, como você pode ver, há um pequeno triângulo aqui. Clique nele e, em seguida, arraste-o para secar assim. Tudo bem, tudo bem. E agora quero movê-lo para o fundo. Legal. E isso nós vamos no Tex. Vamos ter um imposto. Vamos revistar o Texel. Estamos arrastando. Vamos definir o com para ser como o botão. E agora vamos adicionar o espaço reservado dois distritos, vamos obter as propriedades, e então na seção de dicas, vamos adicionar um suporte perigoso. Então, porque este vai ser o primeiro nome, então vai fazer com que ele seja o primeiro nome. Tudo bem, então vamos ser livres em Bryce, senhor, eu estou rapidamente fresco. Tudo bem, então nós temos que sexual com espaço reservado. Então, quando eu digitar, ele se foi. Não, vamos voltar ao extra 3. Como desenhar campo de texto personalizado: Não, vamos fazer o texto, será como design material. Então eu vou “Oi”. Os pedregulhos deste imposto vão dar certo. Clique nele e, em seguida, apenas esconder borda E então eu vou adicionar linha e eu quero configurá-lo para ser coisa decisiva, Mas então também. E eu quero definir a largura dessas linhas para isso. E quero definir a capacidade para 10%. Você pode encontrar opacidade sob o estilo de toques, e então eu quero ampliar. Você pode o Comando Leste colocar o ismo em. Eu quero fazer isso. É um pouco mais perto da linha e eu quero fazê-lo decidir ser um caminhante. Tudo bem, então eu quero fazer isso um pouco mais perto. Tudo bem? Legal. Estou indo faz um mês. E então vamos revogar livre só Brosa quando tivermos tempo. Legal. Não, vamos voltar ao extra. Não, vamos adicionar o rótulo flutuante. Então o que queremos é que quando você vê, clique neste primeiro nome pilhas para que o espaço reservado desapareça e o rótulo flutuante foram shows permite que você torná-lo a primeira coisa que eles estavam indo para fazer? Vamos adicionar o rótulo flutuante. Nós vamos usar rótulo e eles querem definir decide bater fora. E eles iam mudar as cores para serem ótimos. Eu vou usar algo como este Crate minha coisa, também é. Então, ok, eu acho que eu sou quando eu uso descobre. Tudo bem, Cool. E agora vamos mudar para ser o primeiro nome. Nós vamos fazer isso em alguns. Então o que nós queremos isso vai este apace e eles classificam shows. Então vamos colocar o nome nesta seção. Nós vamos fazer isso para ser rótulo flutuante primeiro nome e isso para ser obrigado. E também, vamos adicionar o nome também à linha. Então, o que? Precisamos adicionar o nome a este rígido. Precisamos nomear os widgets se quisermos adicionar instruções a esses widgets. Porque isso é importante. Porque quando vamos para propriedades e, em seguida, sobre essas seções de interação, quando adicionamos a interação, Por exemplo, se eu quiser adicionar o sobre clique interações e, em seguida, eu quero mostrar ação. Então esta é a lista de possíveis ações que podemos fazer. Então precisamos encontrar widgets específicos Então é por isso que é realmente importante nomear o inteligente que possamos encontrar os widgets exatos aqui. Portanto, certifique-se de nomear seus widgets se você quiser adicionar interação nele. Então, contra o tipo, que nós apenas você quer adicionar as instruções. Tudo bem, então em um grupo de enxofre. Então nós nomeamos estes para ser rótulo flutuante primeiro nome e este primeiro nome de texto e este primeiro nome de linha. Tudo bem, então, por padrão, nós vamos dizer para ser escondido disse escondido. E agora vamos à interação. 4. Interação de rótulos flutuantes: para as primeiras interações que queremos. Quando você vir, clique neste decks de primeiro nome vamos querer mostrar a este rótulo de base como fazer isso? Dissemos como esta mensagem, Phil. Então é selecionado e anomalias em seções de foco. Vamos adicionar as interações. Então nós vamos mostrar este rótulo flutuante para que você possa fazer nós vamos para essas seções shows e nós clicá-lo para que isso é significa que nós vamos adicionar instruções show e então nós apenas que nós vamos mostrar porque nós estamos indo para mostrar estes nome do rótulo. Então nós selecionamos isso, então a testemunha disse que seria show e nós vamos rebocar em qualquer missão nós vamos usar o ligeiro aumento, emissões e o tempo. Vamos definir para ser 200 milissegundos e clicar. Certo, então vamos reparar a Bursa. Quando eu tinha um fresco quando Na verdade ele mostra o primeiro nome, mas você percebe que o lugar tudo ainda está lá, Isso é porque se vamos provavelmente é um bom clique no primeiro nome do texto e vamos nas seções dicas. Percebemos que o oculto se esconderá depois de digitarmos. Então, por exemplo, se eu for lutar com pessoas quando eu digitar, é quando o rei estará escondido. Então, o que queremos que ele será escondido quando clicarmos neste texto, vontade. Então vamos voltar para, na verdade, eu vou definir para ser foco para que o cabelo para que ele fique escondido quando ele está em foco. Então vamos voltar ao Prosser e nos atualizar. Então eu vou clicar nele. Você pode ver que é arma, então eu vou rotular com shows. Tudo bem. Bom trabalho, pessoal. 5. Como concluir os campos de formulário: que criaram com êxito a interação para o primeiro nome. E agora vamos adicionar outra vontade de texto, que é sobrenome e e-mail. Então vamos fazer a mesma coisa por isso. Nós só vamos copiar isso você pode criar do zero, mas este vídeo, eu quero copiá-lo. Então, como fazer isso? Vou selecioná-lo por Click it e, em seguida, eu vou manter minha tecla shift em meus teclados. E então eu seleciono outros widgets. Então eu clique no primeiro nome leva o primeiro nome. Bem, eu estou segurando minha tecla Shift no meu teclado, e então eu vou clicar nesta linha também. Então ele foi selecionado, e então eu quero movê-lo um pouco para fazê-lo para cima. E não há cópia de comando divertido, vê? E então eu vou acelerá-lo usando taxa de recomendação e eu estou arrastando, e então eu quero copiá-lo novamente para o e-mail. Então eu estou usando o comando V porque ele foi copiado. Tudo bem, então vamos fazer alguma pequena edição aqui, então eu não deveria isso quando clicarmos duas vezes, o primeiro nome será mudado para ouvir. E este também. Quero mudar para e-mail. E então, como você pode ver, o espaço reservado. Ainda é o primeiro nome. Vamos mudar isso. Vamos mudar para ouvir. E este também ainda primeiro nome quando eu mudei para e-mail. Outra coisa importante que precisamos mudar é o nome dos widgets. Então, como você percebe quando clicamos, ele ainda é rodapé rótulo. Primeiro nome. Então vamos precisar renomeá-lo, porque vamos adicionar a interação a ele também. Certo, então é por isso que precisamos renomeá-lo. Então só vamos dar o nome para estar disponível a ouvir flutuando para podermos diferenciar nesta seção de instruções mais tarde. Quando somos as interações, este também precisa diminuir o Linus. Bem, linha, eu vou fazer o mesmo por e-mail. Vou disponibilizar para o correio CC esta única linha de texto no mural. Certo, então vamos preferir você sob Brosa fresco quando Ecklie aparecer. Certo? Mas a unidade foi quando perdemos o foco. O rótulo não está oculto. A gravadora não está se escondendo. Estou tão disposto a adicionar mais instruções aqui. O que ganhamos quando você disse que perdeu o foco nesses bifes, o rótulo flutuante do Will será altura de volta. Então, o que podemos fazer com este texto? Primeiro nome. Vamos adicionar outras interações. Então, o que queremos nessas seções, a menos que se concentrem, vamos fazer isso etiquetado para se esconder. Então vamos adicionar nas seções do show e que nós adicionamos, e então o que queremos esconder. Queremos esconder o nome deste rótulo flutuante. Então vamos procurar. Então rotular 14 primeiro nome. Vamos selecioná-lo. E em vez de mostrar, vamos escondê-lo. Estamos em uma altura. Vamos adicionar quaisquer missões que eu vou usar deslize para baixo e clique. OK, então vamos ver em Bruxelas quando eu faço fresco quando eu clicar nos shows. Mas quando eu perdi o foco na aposta vai, digamos que eu clique neste sobrenome Dixville. Notou que a etiqueta flutuante vai se esconder de novo? Tudo bem? Não, não adicionamos dois ontem à noite. Vamos adicionar isso bem, então vamos voltar para realmente selecionamos no texto Sobrenome. Isso é quem adicioná-lo no, a menos que, é claro, seções. Quando eu vou mostrar e isso quando uma coisa boa. Vamos nomear e eu quero ajustá-lo apertado quando eu usar o ligeiro para baixo em um clique missão. OK, vamos fazer a mesma coisa por e-mail, a menos que as seções circulares no programa. Isso é o que fazemos para e-mail quando eu escondê-lo e o slide principal clique para baixo. Ok, tudo bem. Como vemos no pincel. Vou atualizar quando clicar no primeiro nome mostra. Tudo bem, você pode fazer isso consolações. 6. Interação de linha: Não, vamos adicionar outras interações. Vamos adicionar a interação da linha. Então, quando os usuários clicam no primeiro nome, esta linha será alta coletada. Então vamos fazer isso voltar à ação e então vamos adicionar outras interações. Então, clicamos no primeiro nome do texto, e então vamos adicionar um anúncio em tração sobre isso, a menos que em seções de foco. Então, clicamos duas vezes nele e eu vou em uma interação noturna. Queremos adicionar as instruções de capacidade definida para que ele clique na capacidade. Então, o que queremos quando você vê clique neste texto, será a opacidade fora desta linha será mudança. Sabe, esta linha de passagem agora é de 10 pessoas. Então, o que queremos quando você vê clique sobre estes texto vai querer mudar a opacidade desta linha 21 pessoa mão. Então é para ser 100% preto, então parece que é isso que está sendo iluminado. Então vamos fazer isso na capacidade central vamos encontrar o primeiro nome da linha. Então é por isso que é realmente importante nomear seu widget. Vamos ajustar a capacidade para 100 porcento. Eu quero usar animação, facilidade em manter fora, e eu quero torná-lo para ser 100 milissegundos e clique. Certo, então vamos voltar para Brussel no C.D C.D Sua alma. Vou refrescar-me. E quando eu clico, há destaque. Vamos voltar ao extra agora vamos acrescentar e eu fiz uma interação que está em baixo de seções de circo baixas . Então você percebe quando quando nós, a menos que um questionário sobre outro texto vai Esta linha ainda está comprando alta coletado. Então, quando eu clicar nele para que esta linha ainda está comprando alta coletado o que queremos quando é quando esses textos Willis a menos que vocais esta terra será ajustado de volta para 10% a capacidade desta linha ou ser enviado de volta para 10%. Então isso é adicionar outra interação. Vou copiar isto. Como fazer isso? Você clica nele uma vez e, em seguida, apenas usando o assento de comando, Cupido ou Controle. Veja se ele está usando BC Eu estou copiando e, em seguida, um clique uma vez no menos foco segundo e, em seguida, eu vou acelerá-lo usando o comando uma taxa e, em seguida, eu dobrar rápido. Eu quero definir isso para 10% porque basicamente o valor dessas interações e essa interação é sobre Lee sobre isso uma passividade. Então é por isso que eu apenas copiei um clique. OK, e então vamos ver eles mesmos indo lá um fresco quando eu clicar. Mostra quando eu mais claro, está sendo dito de volta para 10%. Certo, ligue para Não, vamos fazer o mesmo com o sobrenome e e-mail para o qual eles retornam. Na verdade, eu quero adicionar a interação para o sobrenome para nós. Então eu clico no sobrenome do texto e, em seguida, nas seções desfocadas eu vou adicionar que as interações disseram que a capacidade dizia uma linha positiva menos nome, e eu quero enviá-lo para 100 pessoas. E então ele fez uma cena cúbica com 100 milissegundos. Clique em OK e, desta vez, quero fazê-lo manualmente. Então, basicamente, poderia ter entrado. E eu disse que a capacidade que eu vou encontrar linha menos nome então nós ajustá-lo de volta para 10% para uma emissão está fora cúbica maravilha Melissa Kans! Tudo bem, então quanto mais você usar real, você provavelmente terá mais chances de copiar em Pace. Mas para este vídeo para empréstimo, vou adicioná-lo manualmente. Então eu clico no e-mail. Vamos adicioná-lo novamente ao e-mail. Antes disso, deixe-me ver o irmão. Tem sido um fresco quando eu clicar nele quando eu clicar no sobrenome. Este não é um coletado novamente. Quando eu clicar de volta no primeiro nome Cool, ele funciona como um pedaço. Vamos voltar para, na verdade, vamos adicionar nas seções desfocadas Vamos adicionar capacidade novamente, disse uma cidade passe para e-mail linha por um e-mail. Quando eu definir para 100% eu preciso fazer uma cena a 100 milissegundos cúbicos. Clique em OK e, em seguida, nas seções A menos que circo. Vamos ajustá-lo de volta. Quando eu disse um paucity volta para 10% um e-mail 10% e permaneceu. Ele não é? Cúbico? 1%. Certo, vamos voltar para Bruxelas. Precisamos fresco quando eu clicar e primeiro nome mostra sobrenome um e-mail. Tudo bem. Na escola. Funciona muito bem. Parabéns. 7. Criar tela de agradecimento: Tudo bem, nós projetamos com sucesso nossas formas e temos interações auxiliando nos formulários. E agora vamos fazer um pequeno ajuste para os formulários antes de fazer as telas de agradecimento ou as telas de carregamento. Tudo bem, então o que podemos fazer? Vamos consertar isso um pouco. Eu quero mudar a cor menos bem, e eu quero Murphy um pouco em ambos com esta parede. Então você quer vender, como, como, vários widgets, certifique-se de pressionar a tecla Shift e selecionar os widgets para selecionar mais de uma bruxa. É dizer que eu quero apenas um pouquinho. Tudo bem. Legal. E agora eu quero crescer mordido. Então eu clique nele inteiro shifty clique ganho e clique nesta linha e clique com o botão direito do mouse grupo Ping. E eu queria a mesma coisa para o sobrenome. Certo? Clique placa raiva Klay. Clique com o botão direito com raiva, Eric. Tudo Então eu quero meus pés um pouco no topo. Cheio. Ah, certo. Isso é o que você está sentindo, Brossel fresco. Tudo bem, Cool. Parece muito bom. Depressa, gays. Parabéns. Não, vamos criar as telas de agradecimento para as quais voltamos, de fato, para que possamos fazer. Vamos usar o Dynamic Bennell, CIA. Assim, apenas para sua informação, os painéis dinâmicos permitem que você pesquise o local do widget. Painéis dinâmicos. Painel tão dinâmico. É como um recipiente, mas tem vários estados. Como você pode ver, há este ícone. Tem como mentirosos, então você pode projetar este formulário nas primeiras camadas, e então você pode projetar a tela de agradecimento nas outras camadas. Você pode projetar outra tela em outras camadas que praticamente painéis dinâmicos. Você pode definir essas camadas que querem mostrar, por exemplo, por exemplo, se as pessoas clicarem nesses botões, em seguida, colocá-las em outras camadas. Então é isso que temos que fazer para que você possa criar Dine McDonnell. Apenas arraste e solte. Ele pode arrastar, e então você começa a adicionar mentirosos. Você pode adicionar camadas. Então, no painel dinâmico, é chamado de design de pensamento de ST Second. Por exemplo, quando eu clicar duas vezes nele, ele abrirá a Etapa 1, e eu posso começar a projetar um estado um e então eu voltar para a reserva novamente. Eu vou no passo dois e eu dobrar rápido e eu projetei o estado para que é um fora do caminho como fazer com o painel de diamante como projetar com painéis dinâmicos. Mas desta vez, quando eu usar outros métodos, então eu vou atrasá-los. Então o que queremos fazer é que eu vou selecionar todos os widgets. Mas antes disso, eu vou e registrar estes bons para organizar Lucking e desbloquear. Tudo bem, então vamos copiar, não copiá-lo apenas Celac Nós ainda vamos, como todos os widgets e alterar o seu selecionado Nós clicamos com o botão direito sobre isso. E então, como você pode ver, há um conforto nos painéis dinâmicos. Então vamos clicar nele para que todos esses widgets tenham sido feitos para um painel dinâmico. E agora vamos nomear este painel dinâmico, então eu vou usar DP o P representa painéis dinâmicos e o que eu vou usar para um formulário DP. Tudo bem, então quando você clicar duas vezes na unidade do painel do estômago, por favor. Este é o primeiro estado que é o estado um. Então nós vamos cada nome que compra, clique direito, e então quando ah nome para ser cheio de entrada. E então vamos adicionar outro estado. Você pode adicionar clicando sobre isso em Aikens, ele lhe dará o estado vazio como este quando você abri-lo, é antigo e design. Mas outra maneira de fazer isso você pode copiar. Você pode fazer aplacar. Então desta vez vai atrasar o que um. O que eu quero é que eu quero duplicar então um clique duplicado e eu vou fazer para ser obrigado . Obrigado. Então este é da entrada. E o 2º 1 é “Obrigado”. Você percebe que há uma camada de modo que a primeira camada é formada entrada. E o 2º 1 é obrigado, Lee. Você pode ter vários estados e não há você pode fazer um monte de estados, mas desta vez precisamos apenas de estado para entrada. E obrigado. O que queremos fazer mais tarde é quando você vê clique nos botões de registro queremos definir o painel impressionante para fazer Obrigado sua tela. Isso é muito simples. Então, vamos projetar isso. Agradeça a sua tela. Vamos abrir com o dobro do Rei e o pontapé duplo. Por isso, quero atrasar isto. Todos eles vão atrasar vão clicar e segurar shifty. Ok, então eu vou dilatar. Tudo bem, então eu quero olhar para o jogo que nós vamos adicionar as cores a isso que iria adicionar cor para a caixa. E então quando eu disse as cores para ser este cores este 1666699 e vamos orar por você em Bruxelas quando nós Bafin onde clicamos em seus convidados e agora nada acontece. Isso é porque não adicionamos as interações. Então vamos adicionar a interação. Agora voltamos para a palestra. Então abrimos o painel dinâmico na formação. Coloque o folheto sobre isso. Reguladores regulam agora botões que adicionam a interação. Então, quando você disse clique nele para que nós adicionamos a interação nas seções em clique. Então, queremos definir o painel, que é o formulário de painel dinâmico experiente para agradecer. Então, quando você diz, clique no registro agora botões definir estado de formulário Bennell dinâmico para as telas de agradecimento, certo, então vamos clicar. OK, vamos varrer graffiti no Brosa. Voltamos para o Firefox e vamos atualizar, então não estamos clicados. Isso mostra, então vamos adicionar qualquer missão a ele. Nós clicar duas vezes novamente para editá-lo, e então qualquer acasalamento, agoniza o destino e as emissões. E então eu uso 300 milissegundos depois. Certo, vamos voltar à pressão. Fresco. Nós clicamos em levantar agora. Então não é aquele grelhador que Isa Pantani está mostrando este estado para. Mas há um destino e emissões, tudo bem, então vamos brincar com animações sobre isso agora mesmo. Vamos voltar na verdade e depois fechamos e depois voltamos e clicamos nas telas de afundamento. Então, o que você quer? Queremos adicionar a animação. Aqui estão as partes divertidas começam, mas antes disso, vamos adicionar os widgets que queremos animar. 8. Animação de carregamento: Vou procurar um bilhete. Eu não posso. Então vamos arrastá-lo, e então vamos usar o rótulo. Então, para as primeiras animações, o que queremos, você quer fazer isso grudar em qualquer feito, como, como muitos eu como este. E então essa gravadora será, tipo, ano de reserva para ficar tudo bem, então vamos fazer qualquer minuto de animação que isso. Então eu quero fazê-lo para ser apagado e, em seguida, tese também para ser branco. Quero fazer com que seja centrado. Quero saber se será enviado. Tudo bem, então eu quero fazer isso para ser enviado para nós. Bem, tudo bem. Legal. E agora vamos adicionar as emissões finais. Então vamos dar um nome, você ganha um nome que eu possa conseguir, eu vou nomeá-lo para ser rótulo boo. Pegando seu ingresso. Tudo bem. Legal. Então, qual é o feno? Quais são os gatilhos? Então, esta animação vai começar após este formulário de painel dinâmico mudar os estados. Então, quando clicamos nos botões regulares agora, vamos mudar de entrada de formulário de estado para estado. Obrigado. Então as três meninas é quando a proibição do estado doente mudar. Então vamos acrescentar que os gatilhos de defesa. Então, neste formulário DP e na mudança de estado no painel que é onde colocamos as interações Então nós clicamos duas vezes nele. Então vamos adicionar as animações que vamos usar mover aqui. Vamos adicionar mais interações. Então, o que? Queremos mudar-nos. Queremos mover isto. Eu posso multar. Então deixe-me encontrar Aiken pode bilhete com clique. Eu quero movê-lo deve subir um pouco. Então, na seção, mova-se no eixo y Nós vamos torná-lo mais malvado, malvado, tão malvado. Se não fizermos isso maldade, ele vai se mover para o fundo para que ele quer movê-lo para o topo. Vamos conseguir ser ministro. Vamos fazer as animações para ser swing. É isso que clicamos. OK , então vamos ser livres. E Brosa, voltamos para cinco pessoas quando eu estiver fresco, de certa forma, eu clique em registrar. Agora você vê, está se movendo. Não, vamos fazer isso. Mova-o de volta para a parte inferior. É isso que voltamos à ação. Quem adicionar outro movimento. Satya. Ele falou para o topo e depois Bixel, vamos configurá-lo para ser movido de volta para o fundo, depois pixel. Então eu quero uma cópia com um NC de gelo e então eu vou basear Isso louva E então nós vamos mudar o valor para mim. Niss para ser positivo. Então, a primeira vez que ele executou esta linha, você vai se mover para se levantar, e então quando eles executarem esta linha, você vai executar e magnética ela dois d coloca-lo novamente em 10 pixels e então clique em OK, e vamos ver, Voltem para fritar, pessoal. Quando eu clico Fresh e Wycliffe Gregerson agora eu clico direito Está se movendo. Não, vamos copiá-lo várias vezes eu vou copiar e publicamente, e vamos segurar minha chave de turno. E então eu posso selecionar o segundo 1 que eu quero poderia estar começando E e então eles vão Eu vou para o ritmo duas vezes em uma base uma vez e doente clique OK, e vamos voltar para o Firefox. Eu vou clicar em um novo quando eu clicar em registrar agora, então é como qualquer reunião legal. Então vamos voltar ao real 9. Animação de sucesso de registro: E agora, depois destas animações, vamos mostrar outro nível. Vamos adicionar isso e arrastá-lo. Vamos fazer algo como o seu bilhete. Foi bom para o seu e-mail. Então, Jess, vejo você, está bem, então eu vou fazer isso, e é para cima. Então eu vou fazer isso para ser centrado em uma linha. Eu vou dizer para ser branco também. Oh, este. Andi, quero usar o ciclo distrital do ícone dos cheques. Eu quero fazer isso. Por que faz bem, tudo bem. Então, a não ser que o nomeemos, vamos ser que eu possa verificar. E este aqui para ser rótulo. Veja, você está bem. Legal. Então o que queremos ferida depois destes, animando o bastão, é animar. Vamos esconder isso e eu vou mostrar essa gravadora e Aiken está bem. Mas antes disso, vamos escondê-lo para nós. Vamos ficar escondidos com um clique direito e ficar escondidos. Vamos fazer isso aqui e então vamos adicionar as interações. Então, depois que ele está se movendo lá fora, é suave. Vamos escondê-lo. Então, vamos na interacção de altura. Vou usar a busca no bilhete de busca. Este bilhete não aguento . E vou me esconder com animação. Fé. E também, eu vou esconder o rótulo dis bem, bloqueando seu para obter rótulo assim vai esconder sua parede com o destino e emissões. E agora vamos varrer para você na força do navegador. Estamos frescos quando eu clicar em Reagan Zanele, espere, o que desaparece? É porque não temos em suas interações de peso. Então, que ação faz quando real lê esses comandos? Significa que vamos nos mudar, mas vamos ler isso ao mesmo tempo. É tudo assim quando eles executaram também vai executar esta altura. Então é por isso que este stick ele e seu nível bem desaparece mesmo que isso não está sendo executado tudo porque na verdade tem olhado há alto comando aqui, então na verdade vai executar este comando ao mesmo tempo. É tão difícil oferecer empresas. Somos para empresas. Adicionando interações de peso, vamos usar o peso. Então, quantos doentes realmente? Temos que esperar. Vamos esperar pela quantidade total das animações. Então, desta animação para esta animação, precisamos de 1000 milissegundos. Então, se adicionarmos tudo isso. Precisamos de 21 mil milissegundos desta vez desta animação e destino. Então isso é tudo o que precisamos. 3000 milissegundos. Então vamos esperar 3000 minutos de novo. Então você vai dizer real quando na verdade todos os doentes executar toda esta linha. Então, na verdade, quando eles foram realmente executar Espere, na verdade, vamos esperar 3000 milissegundos completos. Tudo bem, então vamos clicar, OK? E voltamos ao Firefox quando estivermos frescos. Quando Ferguson agora. Então você sabe, na verdade, vamos esperar até que termine, em seguida, ele vai esconder o rótulo. Certo, então vamos ver essas interações. Vamos movê-lo para o topo. Então, depois de escondê-lo com um re esconder esses ícones e o nível, vamos fazê-lo movido para o topo, e então vamos fazê-lo mostrar. Não, nós vamos dobrar aqui hoje à noite, então vamos mostrar este ícone em um show. Eu verifico as armas. E então quando eu mostrar a vocês com fé e emissões 200 milissegundos e então vamos mover, vamos usar Move. Vamos mover este ícone também. Então vamos encontrar economia. Posso verificar. Vamos nos mover por 300 pixels. Então eu me lembro que ele quer movê-lo para o topo. Precisamos adicionar sonhos. Vamos usar qualquer balanço de missão. Vamos fazer 500 milissegundos e então é tentar com o irmão quando estamos acabados enfrentando Rogozin Agora diga o seu peso. Ok, então parece muito, muito rápido. Então vamos consertar isso. Voltamos para a verdade, e como você sabe, é um pouco alto demais, então vamos consertar. Então vamos consertar isso. Então nós queremos movê-lo em torno para lidar com isso e 50 e então eu vou chegar a um Tencent e 500 milissegundos na animação. Não mudei para ser fácil agora? Cúbico. Bem, você pode brincar com animação. Há várias animações que você pode reproduzir execuções na realidade, ele pode apenas experimentar. E então vamos usar o Oriente na arte Cubic para este tempo. E então vamos semana como gays e voltamos para cinco pessoas e ficamos mais frescos quando eu clicar em Coraghessan agora. Então é qualquer reunião, certo? É muito suave. Então, depois que ele está se movendo para o topo, vamos mostrar o rótulo disponível. Sheer See Iran, Síria na Oracle. Então, por padrão, queremos que este nível seja movido também para o topo ao mesmo tempo quando este widget se mover, Frank. Então, queremos acrescentar isso. Portanto, não estamos apenas movendo a verificação de ícones, mas também queremos mover este ícone ao mesmo tempo. Então encontramos os rótulos do Irã. Vamos encontrar. Então este rótulo ver Orion será movido esta parede por sua mão e 50 pixels. Isso é que nós verificamos. Vamos ter uma parede de fitness. Maldade 250 pixels. Mas desta vez ainda não vamos mostrar. Ainda não vamos mostrar este rótulo. Mostramos o Eiken verificado, mas ainda não mostramos este rótulo. Então, neste estado, só o movemos. Então, depois de o mudarmos, vamos mostrá-lo. Então vamos adicionar outra interação, que é mostrar que vamos mostrar este rótulo rótulos Huron durante o show pode torná-lo um ágil com fé e emissões. Quando eu fizer 500 milissegundos e esperar, vejo o GNC, estamos usando qualquer missão aqui. Então precisamos usar essas animações para atuar para nós. Então, como de costume, precisamos adicionar peso. Então, com peso, Khomeini milissegundos precisamos. Precisamos de 1000 e 500 milissegundos. Vamos adicionar 500. Desculpe, vamos adicionar maravilhas e 500 milissegundos e clique em OK e vamos varrer Livre e Broza indo um clique de Fresh onde Click Greg não está agora. Tudo bem, é muito bom. Então vamos consertar um pouco. Parece que ainda hábitos para o assunto. Deixe-me fazer o jogo. Então, quando mudei para 200, estamos mudando. Vamos mover a alimentação para 200 200 neste. Então são 100. Então e depois devagar. Se você está em Bruxelas, por que clicar em Rogozin agora? Tudo bem, é muito legal. Parabéns, Case. 10. Publicando seu protótipo!: Ou, eu acho, parabéns novamente. Então você conseguiu projetar uniformes com sucesso. Você ainda pode jogar no fazer isso experimentar com os formulários, mas a idéia principal é que você começa a entender como criar esses formulários interativos. Então agora o que vamos fazer, vamos enviar este tipo de corpo para o Klatt. Isso é o que chamamos de compartilhamento real os Shays reais quando você pode capacidade, protótipo e para a nuvem. E então você pode sombrear seu protótipo para seus amigos, para seus clientes ou para qualquer um. E então eles podem abrir as partes, como no computador, usando o link fornecido pelo seu Então vamos aplaudir este protótipo. Podemos fazer isso por ir para publicar, e então você pode ver que há uma seção publicada Vamos clicar em publicar para realmente compartilhar com Click. É e, em seguida, há várias opções aqui você pode Cranie Project pode substituir um projeto existente . Então, eu estava tentando fazer upload disso antes, então, como você pode ver, existem projetos existentes. Então, o aviso real de que este projeto foi carregado antes, então é greve meu projeto, i D. Mas desta vez queremos criar novos projetos. Eles querem enviar esta parte cyp para um novo projeto de nuvem. Então eu vou criar qualquer projeto e apenas nomeá-lo. Quero nomear o formulário. Posso nomear o que quiser e depois publicamos e pronto. Nós esperamos para real aplet nosso tempo parcial. E então, bem, está feito. Tudo o que você pode ver lá está doente aqui. Então essa coisa que vamos compartilhar com seus amigos ou sua faculdade seus clientes para qualquer um. Então eu vou copiar e depois fechá-lo e voltamos para cinco pessoas e então eu vou acelerá-lo . Unidade. Isso é isto? Eles têm certeza que vou vender o meu local, então eu vou baseá-lo. E é por isso que vemos. Então este é o pessoal da rádio online e ele é pensado. Aqui vamos nós. Podemos estudar diversão, intuição de sanidade. Regular agora. Tudo bem, está perfeitamente feito. Parabéns de novo, Gates, mas espere. Como você sabe, esse tipo despótico, é como se não estivesse centrado, certo? Então, como consertar isso? Como fazer com que ele o enviou? Podemos fazer isso. Tchau. Volte para, na verdade. Então, clicamos com o botão direito na dinâmica. O Bennell. Nós direito, clique e, em seguida, clique sobre o ser para navegador, clique nele uma vez e, em seguida, faz você clicar nele bean em Brother Window e apenas verificar centro. Vamos torná-lo mental e apenas levantá-lo. Apenas faça isso desmarcado. Então clique em OK, eu estou indo para seguro dentro. Vamos preferi-lo em peles locais quando nós para alguns no local. Então ele foi centrado agora, mesmo que quando eu isso faz isso desaparecer então ele está centrado agora quando eu recitei Blossom , ele está centrado agora artigo. Mas desta vez ainda é local. Não está sendo aplicado para compartilhar, então quando eu atualizá-lo, ainda não é século. Por quê? Porque nós não carregamos novamente para realmente compartilhar. Então vamos voltar para a verdade, vamos aplaudir novamente. Vamos publicar e, em seguida, publicar compartilhamento de estrutura. Então, desta vez não vamos criar um novo projeto. O que queremos queremos queremos atualizar o projeto existente, que é este projeto tão real automaticamente detectado. Portanto, queremos substituir este projeto. O projeto existente. Vamos clicar em publicar, publicar e esperar. Então isso realmente está gerando o lado largo. É esperar Então este é o curso de realmente pode atualizar os protótipos e os links. Continua a mesma coisa. A colocação não é alterada, então você pode. Seu cliente, seus amigos podem tirar o Lecter do seu protótipo. Isso é o quão incrível, se real. Então fechamos e voltamos para cinco pessoas e por que você é um novato. Então é dele online e foi enviado. Certo, agora é Burbank. Relação correta. Caras muito animados. Vamos fazer o seu projeto.