ProtoPie completo — aprenda prototipagem avançada sem código

1. Introdução de protoPie total: Oi lá e bem-vindo a profissionais totais e meu nome é cama Darren e eu sou um designer com mais de 30 anos de experiência na indústria de design. Waves foi gasto no espaço digital onde eu tenho projetado experiências web e experiências a partir de dispositivos móveis. E estar apresentando a vocês meus designs favoritos de interação ou prettify. Então vamos aprender o perfil do zero. Você não precisa abrir este solo antes de não precisar de nenhum conhecimento prévio. E vamos levar o aprendizado passo a passo ou os fundamentos e elevá-lo a um nível de experiência onde você vai se sentir confiante para poder usar essa ferramenta em seu trabalho em seus projetos na indústria real. E você vai ter o benefício de eu ter usado é total nos últimos três anos na indústria em projetos reais e na construção de aplicativos reais. Então vamos usar um aplicativo falso. As usinas de carvão são nossa maneira de explorar as diferentes pints de resolução de problemas e técnicas que vamos, vamos usar. E eu escolhi este aplicativo porque é uma boa mistura de usar padrões de design móvel padrão, bem como um monte de padrões de design personalizados e animações também. Então vamos nos divertir muito construindo alguns desses recursos. Vai começar. Aprendemos a usar gráficos interessantes de outras ferramentas suportadas do setor, como Fichman, sketch e Adobe XD. Vamos aprender a criar animações padrão e personalizadas. Vamos criar um fluxo de login real, juntamente com o tratamento de erros, criará um recurso favorito que irá dinamicamente salvar conteúdo com base na escolha do usuário. Usando lógica condicional, irá explorar a navegação e criar um ATS tinha sido tão baixo por sua vez usa um componente reutilizável que você pode usar em qualquer projeto. Construirá um aplicativo de fotos real usando recursos de protoplastos para integrar com hardware do dispositivo, como a câmera do seu telefone. Vá explorar recursos complexos, como variáveis e quais profissionais na PyCon, minutos completos, instruções discretas, que são fáceis de aprender e oferecem potência avançada, mas sem a necessidade de conhecimento avançado, você ficará surpreso sobre como é fácil sentir recursos realmente avançados, então tomar nosso aplicativo e fazer alguns componentes reutilizáveis, transformando-os em uma biblioteca de componentes que pode ser usado em vários projetos. Finalmente, teremos uma visão abordada pela nuvem e como você pode testar e compartilhar seus protótipos para usar testes de usabilidade ou para compartilhar com as partes interessadas. E como você pode usar receitas de interação para comunicar facilmente o seu live in, trabalhar em design de interação com desenvolvedores sem a necessidade de criar chato, longo. E nós vamos dar uma risada. Estou aprendendo sonda Heights de novo. Eu realmente acredito que o único design de interação, assim no mercado no momento, que realmente vale a pena investir o seu tempo. Especialmente se você não quiser aprender a codificar ou se você achar que codificar uma proposta assustadora. A altura da sonda é uma ferramenta que foi criada para os designers explorarem essas ideias de design desde o início até o fim. Então, se isso é algo que você está interessado em aprender, então pegue este curso e eu te vejo na aula. 2. Como instalar o ProtoPie: Oi lá. Então, antes de começarmos, precisaremos instalar o software protoplastos se você ainda não o tiver. Então, se for esse o caso, vá para o protótipo. Este é o site de protoplanetas aqui. E este toque no triunfo do link livre. Você será redirecionado para esta página onde você só precisa colocar em seu e-mail e, em seguida, se inscrever e você receberá o arquivo do instalador. E é apenas um átomo normal. Então, instala da maneira normal para Mac e Windows. Então certifique-se de fazer isso antes de passar para o próximo vídeo. A outra coisa que eu quero chamar sua atenção é que os ativos phi também anexados a este vídeo é um arquivo zip para todos os ativos. Se nós apenas clicar duas vezes sobre isso e apenas dar uma olhada dentro daqui. Então, há apenas alguns ativos. Então você tem arquivos do Adobe XD. Se você estiver acompanhando o Adobe XD, também temos sigma, e temos os arquivos de esboço. Nós não usamos recursos de cada vídeo, mas há algumas das palestras para as quais precisamos de recursos se você quiser acompanhar. Outra coisa que eu incluí é o carinho é um Google Fonts livre para usar. Mas eu tinha apenas por conveniência, eu coloquei na pasta de ativos também. E, finalmente, temos outra pasta Ativos dentro da pasta de ativos. E dentro daqui, alguns pré-exporta gráficos HD que estamos usando na avaliação de vídeos. Então você deve ser capaz de encontrar tudo o que você precisa aqui e você deve estar pronto para ir. Ok, então é sobre isso para este vídeo. Então, estamos ansiosos para vê-lo no primeiro vídeo e começar a entrar em prettify. Vejo você lá. 3. 3 Um tour rápido do ProtoPie Studio: Certo, então vamos começar dando uma olhada no estúdio da sonda. Quando você lançar o estúdio, você será apresentado na janela inicial. Então vamos criar um novo arquivo. Ok, então agora temos um novo arquivo sem título. Então, no sensor, você verá o ARPU onde você criará seu protótipo. E logo acima aqui está o menu de predefinições do dispositivo. Então é aqui que você pode escolher o tamanho do seu protótipo. E há uma série de predefinições aqui para iOS, Android e desktop. E também temos a capacidade de criar um tamanho personalizado. À esquerda, aqui está o nosso painel Camadas. Então, quando importamos gráficos do nosso aplicativo de ataque gráfico, ou criamos objetos nativamente, eles podem reparar aqui. À esquerda aqui, queremos abrir painéis. Então este primeiro é o padrão das cenas. E logo abaixo, temos o painel Componentes. Só me movendo para o fundo aqui. Temos os painéis de variáveis. Então é aqui que vamos criar nossas variáveis que usamos para certas características lógicas dentro Pr pi. E logo à esquerda aqui você verá que temos acesso à nossa conta pro pi e também algumas configurações de aplicativos de estúdio. Aqui à direita temos nossos controles de zoom para que você possa ampliar e reduzir o zoom da nossa Apple. E para a direita aqui, nós temos a habilidade de nosso dispositivo em um off. Agora, nem todas as predefinições têm quadros, mas algumas das principais têm, como o iPhone. E podemos descer e dar uma olhada, digamos, no Galaxy S 10, que também tem um quadro de dispositivo. Certo, mova para a direita. Temos como o painel Gatilhos. Então é aqui que você vai criar todas as suas interações. E ao lado disso, temos o painel Propriedades. Portanto, este painel será contextual dependendo do que você selecionou no momento. Atualmente, temos o mesmo selecionado para que possamos ver as profecias para nossa cena. E logo acima, no painel Propriedades, temos uma visualização, uma área de visualização de imagem. E logo acima disso, essas fontes parecem bastante familiares para você. Ferramentas de alinhamento que temos. Então podemos alinhar objetos no loop. Neste canto aqui temos algumas flechas esquerda e direita. Então esta é uma navegação de história. Assim, à medida que nos movemos de parece para semear ou dentro de objetos ou componentes, podemos navegar para frente e para trás ao longo da história de onde estivemos. Enfrentando bastante útil. Está bem, subindo para o topo. Então nós temos um monte de botões e menus em toda parte de cima aqui. Então, no lado esquerdo aqui, temos impulso. Então é aqui que podemos importar nossos gráficos do esboço do Adobe XD Fichman. Temos um botão de imagem que permite importar imagens do nosso sistema de arquivos. Temos um menu de mídia que permite importar outros tipos de mídia, como vídeo booleano. O menu de forma aqui, dá-nos alguns objetos primitivos básicos que podemos desenhar diretamente dentro de um pro fornecimento de estruturas, retângulos e círculos. E o menu de impostos nos permite também adicionar algumas necessidades de objetos HIV. Então nós temos um texto objetos rótulo, e nós também temos um campo de texto de entrada objetos. Ao lado disso, temos o menu do contêiner. Assim, você pode pensar em contêineres como sinônimo de grupos em seu aplicativo gráfico. Então nós temos um contêiner básico, mas você também tem esses outros contêineres especializados. Temos rolagem conter Fora que nos permite fazer visões roláveis. E temos um contêiner de paginação que nos permite fazer exibições de paginação. E finalmente aqui no lado direito temos o botão Componente. Então podemos clicar nisso para criar novos componentes. Está bem, movendo-se para o lado direito. Então esse grupo de botões tem tudo a ver com ele visualizando nossos protótipos. Então nós temos o botão de visualização para que eu apenas trarei nossas janelas de visualização para a frente. Então a janela de pré-visualização será sempre ativista uma janela separada, mas vai estar atrás do nosso arquivo todo. Então podemos levar isso para a frente da minha apatia escondida. Ao lado disso, temos o menu do dispositivo. Então é aqui que conectamos dispositivos reais ao estúdio. Então podemos enviar um protótipo para um iPhone ou um telefone Android ou um tablet. E para fazer isso, usamos o botão Executar. Então, ao contrário da visualização, onde a atualização automática anterior, medida que construímos o nosso protótipo, precisamos enviar manualmente o nosso protótipo para um dispositivo com o botão Executar. Finalmente, neste canto superior direito, temos nuvens para que possamos carregar nossos protótipos para a Nuvem. E o Cloud tem um monte de recursos que estarão indo para o laser. Coisas como a capacidade de compartilhar nosso Prosite com outras pessoas. E, claro, chamado controle de versão dentro da nuvem e um monte de outras coisas vão olhar para mais tarde. E para carregar seu protótipo para a nuvem, use o botão Upload aqui. Ok, então isso completa a nossa rápida turnê pela interface do estúdio precipício. Então, como você pode ver em que é bastante familiar para outras ferramentas gráficas que você provavelmente usa. Certamente ferramentas, como esboço de espessura no dia em que XD. E nós vamos começar muito mais familiarizados conosco enquanto trabalhamos através do curso. Então isso é um invólucro para a ferramenta rápida. Vejo você no próximo vídeo. 4. Organize seus arquivos - práticas: Antes de entrarmos nos recursos específicos de entrada, acho que vale a pena falar sobre algumas práticas recomendadas quando estamos estruturando, importar nossos arquivos durante gráficos é uma mentalidade muito diferente. Interações loucas. Ao longo do tempo, você vai aprender como swaps pasta de gráficos mojo no folheto. Mas se você é novo em protótipos ou design de interação, provavelmente precisará fazer alguma limpeza de arquivos antes de importar. Aqui estão o meu top set para coisas que facilitarão a sua vida. Dica número um, nomeie suas camadas. Se você quer permanecer sã enquanto protótipo neste é uma obrigação. Todos nós estivemos aqui com esse tipo de estrutura de nomes sobre quando estamos dentro do proto pi, vamos usar os nomes e objetos como referência para adicionar interações. Então, queremos ter certeza de que todos os nossos objetos permitirão que gráficos dentro do nosso arquivo tenham nomes lógicos para que possamos encontrá-los quando precisamos adicionar interação a eles. Dica número dois, evite grupos aninhados desnecessários. Então, como você pode ver aqui, nós temos esses, esses grupos que efetivamente são grupos vazios que vão adicionar muito mais complexidade ao nosso arquivo. E vai tornar mais difícil para nós encontrarmos coisas. Então este é o tipo de coisa que queremos evitar. O que é remover qualquer um dos grupos aninhados desnecessários. Dica número três, agrupe a interface relacionada. Então, quando você está projetando para interação, o movimento, você vai querer agrupar as coisas logicamente. Então, como exemplo, se eu passar para esta tela aqui, e você pode ver que eu tenho este, este tipo de grade de imagens. E se olharmos para baixo no painel de camadas, podemos ver que todas as minhas imagens estão agrupadas neste grupo poderia arrefecer o fluxo de fotos. E eu fiz isso porque este grupo de fotos vai ser uma visão rolável e eu vou querer que tudo rolem juntos. Então pense sobre o seu design e pense sobre quais bits estão relacionados juntos, quais apostas vão se mover juntas, e então certifique-se de agrupá-las do conjunto certo, final. Reordenar suas camadas para a hierarquia corresponde à interface do usuário. Então, do que é que eu estou a falar? Então isso é ir para esta tela de login. Então você pode ver aqui eu tenho esses objetos que tipo de escuro de cima para baixo. E se olharmos para o painel de camadas, você pode ver que na verdade exatamente na mesma ordem. Então, se eu passar o mouse sobre esses objetos e se você manter seus olhos nas camadas, você pode ver que eles estão todos na mesma ordem. Então, quando você está animando, quando você está em uma interação, isso faz muito mais sentido para seu cérebro do que a forma como os programas gráficos normalmente fazem isso. Então, como exemplo, podemos ver aqui, eu tenho este quadro com essas duas imagens, pilha e pilha também. Se eu duplicar, o que são essas imagens? Você pode ver que ele realmente o adiciona acima. A imagem indicou e não abaixo. E isso faz total sentido quando eu estou dentro de programas gráficos são provavelmente vai querer mover este objeto vai fazer pesquisas objetos traços afastados. Então, tê-lo no topo torna acessível. Esforço foi adicionado por baixo. Eu teria que selecionar no painel de camadas ou mover algo para fora do caminho. Mas quando estamos em uma interação dentro de uma ferramenta como proto pi. Isto é, na verdade, torna muito mais difícil para nós, porque é meio que na ordem inversa da forma como parecia na tela. E isso mexe um pouco com nossos cérebros. Ok, então essas são as minhas melhores dicas para impulso, organizar seu arquivo para impulso antes de ir para Pi para Pi. Então, em seguida, vamos estar pegando essas primeiras telas e importando-as de sigma para pi. Vejo vocês no próximo vídeo. 5. Importação do Figma: Então, o primeiro passo de carga nosso protótipo é melhorar nossos projetos de atos. Através deste curso, vamos estar construindo um novo aplicativo legal chamado descanso de piedade. Não sei quanto a você, mas eu adorava tortas. Então ter um aplicativo onde eu posso olhar para fotos do dia piezo soa como o céu. Antes de importar nossas plantas para nós designers embora, eu gostaria de correr através de algumas das nuances quando importa Sigma em separado. A primeira coisa que eu quero falar sobre seus componentes, quando você Greg e colocar um impulso em prettify, ele vem em um grupo editável. Mas há algumas restrições à forma como esse grupo pode ser importado, uma vez que existem algumas desvantagens. Então, uma das desvantagens é que se você adicionar um preenchimento ao contêiner, ao contêiner Fieger, isso não vai ser trazido através do importador para pinheiro intérprete. Outra coisa que não é suportada a partir de componentes é cantos arredondados. Então, há coisas suficientes em torno de componentes que são, que são negativos diz infelizmente no momento, o que significa que eu normalmente não quebrar meu componente, componentes separados em sigma, Eu trazê-lo em separado. Ok? A segunda coisa é se você contratou uma camada em sigma que irá suprimir a importação para o protótipo. Então, essa é realmente uma boa maneira se você quiser ter camadas que você não deseja importar, você pode simplesmente escondê-las dentro de um bitmap. As camadas de texto são cabeças de impulso no processador Pi como camadas prontas para texto. E o que isso significa é que eles não vão aparecer instantaneamente como texto editável. Eles vão manter você vai ter a capacidade de convertê-los em texto editável e refrigerante. Mas para preservar a fonte, eles vêm como texto pronto, então eles são efetivamente ainda GraphX. E, mas isso, isso significa que eles irão, eles suportarão as fontes e as fontes que você escolher. Quando você converte um layout pronto para impostos em tortas de crédito para texto real. Você vai ter que vir, nós vamos, nós vamos, nós vamos passar por isso. Você terá que carregar o telefone no dispositivo, digamos, quando estiver testando no dispositivo para garantir que ele seja processado corretamente. Ok, então se você reduzir a opacidade de um quadro em sigma para um componente ou grupo, ele é ignorado um impulso. Assim, a única opacidade que é reconhecida aplicada a camadas de objetos reais, laboratórios de objet FISMA. E, finalmente, se você aplicar quaisquer efeitos de texto, como acidente vascular cerebral, será impulso porque o, como eu disse anteriormente, que é laser-like hexadecimal em seu formato pronto imposto. Mas se você convertê-los em texto editável, e para mim você vai perder esses efeitos. Então, apenas algumas coisas para ter em mente quando você está preparando seus arquivos sigma antes de trazê-los para o prettify. Ok, então se você está seguindo junto, por favor baixe o grosso anexado consulte o curso que Seção 2, ativos de alta tensão. E eu já preparei este arquivo, então ele está de acordo com todas as diretrizes de importação que eu lhe dei. Então você não precisa se preocupar com nada disso. Mas este arquivo em particular, certifique-se que você tem o arquivo aberto em sigma. Com isso aberto, como podem ver aqui, vamos prepará-lo. E vamos criar um novo cachimbo. Então isso vai apenas criar um arquivo sem título padrão, e ele vai para o padrão para o iPhone 11 pro. Então vamos construir este aplicativo para o iPhone 11 pro. Então, vamos apenas usar um presets padrão. Então isso é absolutamente bom. E a primeira coisa que vamos fazer é ir para este menu de impulsos aqui. Então, podemos ver que temos as três opções que U3 suportou aplicativos, Adobe XD, esboço figurativo. Então vamos escolher Sigma. E nós vamos imediatamente obter esta caixa de diálogo de permissões do protoplaneta. Então, como o figo murmura uma ferramenta online, precisamos dar permissão para acessar nossos perfis falsos. Então, nós estamos indo apenas para tocar no botão de lucros Browser. Isso vai abrir uma janela do navegador. E vamos ser convidados a dar acesso ao eixo S e R. Então, isso está feito. Podemos voltar e continuar. Então isso é Voltar para importar e escolher sigma novamente. Ok, então agora temos a caixa de diálogo de importação sigma aberta. Então vamos passar pelas opções que temos aqui. Então a primeira coisa que podemos ver é esta caixa suspensa, que nos mostra todos os quadros que temos dentro de nosso Figaro deseja sentar no fundo e deslizar para a direita aqui, temos as opções para escolher o tamanho de entrada. Assim, você pode ver que é padrão adicionar 3x, que é o mesmo que a densidade de pixels da nossa predefinição do iPhone 11. Mas temos a opção de mudar isso para outra densidade. Você quer se certificar de que essa densidade corresponde à densidade predefinida. Se estamos orgulhosos do ISIL, caso contrário, seus gráficos vão entrar nos sites incorretos. A próxima coisa que temos algumas opções é como importamos camadas. Então, por padrão, ele vai imple toda a última estrutura. Então o que isso significa vai pegar a estrutura da camada sigma e vai duplicar isso corretamente dentro do protótipo. Para a maior parte é como você deseja puxar seus designs para predicado. Há uma opção secundária que é apenas camadas MLT para exportações. Então, se você quiser ter um pouco mais de controle granular sobre o que você importa da fig. Você pode exportar camadas específicas. E se você escolher esta opção, então só vai, digamos, vai importar as camadas exportadas para o seu, para o seu perfil de crédito. O resto dos oxigênios estão todos a respeito de uma outra característica dentro da reimportação de protótipos. Você pode reimportar um arquivo FISMA depois de ter importado inicialmente no e isso tem um tipo de limites, cabeças, benefícios. Certamente, do meu ponto de vista, eu realmente não uso isso muito, mas apenas para meio que passo para a opção para que você entenda o que eles significam. Assim, por padrão, os dois primeiros oxigênios Hecht, que são posições de sobreposição de camadas e sobrescrever tamanhos de camadas. Então, se você já importou seu arquivo e você voltar e você alterar a posição do layout ou você alterar o tamanho de um, eles são tão efeitos que você está alterando o design é quando você reimportar o conjunto, ele vai atualizar todos os das camadas onde você fez essas alterações. As outras duas caixas de bate-papo, que são ordens de camada de atualização e instrução de grupo. Então, novamente, se você mudou a instrução de grupo ou você mover para as camadas em torno novo fema vai aplicar essas alterações à sua importação Quando você re-importar para o protótipo. E, finalmente, temos camadas removidas, excluí-las ou tornadas invisíveis na marca grossa. Então, como você viu antes, quando eu disse que se você tornar sobre a camada invisível, isso vai impedir que ela seja importada. Então isso vai acontecer se você marcar esta opção onde se você reimportar. Mas apenas para reiterar, isso só está relacionado a se você usar o recurso de reimportação. E isso não é realmente algo que usamos muito. Ok, então nós vamos inicialmente trazer a nossa primeira tela, que é a nossa tela inicial. Então ele vai apertar o botão Importar. E vai ligar a Sigma. E vai importar todas essas camadas. E como pode ver, foi trazido. Se olharmos para o painel de camadas aqui no lado esquerdo, você pode ver que S renderizou com precisão todas as nossas camadas e nomes de terra como eles apareciam dentro de uma FISMA. E uma das coisas a apontar aqui é que quando você usa as importações são de sigma interpretador pi, ele vai importar tudo como arquivo PNG. Então eles vão ser gráficos baseados em pixels. Ele vai, ele vai fazer grupos fora do, fora dos quadros que você tem. Então isso é tudo renderizado como para tipo entre os dois. E aqui está uma daquelas camadas de impostos que eu estava falando. Então você pode ver que tem um pouco de chá no círculo base do canto, um ícone de imagem. Então isso significa que seus ataques camada e eu posso convertê-lo em imposto, mas no MOM, ainda apenas uma imagem. Ok, então esses são os nossos primeiros arquivos para a nossa primeira tela, importá-lo. Isso é bom. Então agora nós queremos puxar as outras duas telas que têm uma tela de login e nós temos piscina tela inicial. Você pode ver aqui a coruja primeira tela tem um pequeno rótulo visto um. Então o protoplaneta tem o conceito de cenas e nós vamos ser presença e mais parece empregar nossa outra tela. Então nós vamos ser muito breves, quebrando nosso hype imprensa para baixo usando o recurso de cenas dentro do protoplaneta. Então, se passarmos para este pequeno ícone logo abaixo do botão Importar que usamos, e nós apenas tocá-lo. Podemos ver C1 e podemos ver este botão mais. Então podemos usar isso para adicionar uma nova cena. Então eu vou adicionar algumas cenas. E temos um duplo clique em s2. Então certifique-se de que temos atividade. Vou voltar para imple Sigma. E vamos importar nossa segunda tela, que é a tela de login. Mais uma vez, vamos deixar tudo. É padrão e pressione Importar. Baixando camadas lá e lá vamos nós, bang. Temos nossa tela inteira renderizada dentro de um protótipo. Ok, então isso vai para a nossa terceira e última cena. Então clique duas vezes sobre isso. E vamos voltar para a piscina. E vamos trazer nossa tela inicial. Ok, isso parece bom. Eu só vou renomear essas cenas para que possamos renomear essas coisas seja clicando duas vezes sobre elas. Então eu vou chamar isso de começo. Este vai ser o login. E finalmente, terceiro. Legal. Ok, então vamos voltar para o nosso começo a ver por um segundo. Então vou clicar duas vezes sobre isso. E eu quero falar um pouco sobre SVG. Você pode empregar SVG no prettify. Infelizmente, os importadores, e isso vale para todos os importadores, bebidas pessoas espalhadas por dxdy. Eles não apoiam SVG no momento. No momento, eles estão exatamente como vimos trazendo PNGs. Mas há algumas características com ele, crédito pi onde você vai querer ter SVGs dentro do seu, dentro do arquivo. Então eu só vou mostrar a vocês como importar um SVG e é relativamente indolor. Então o que vamos fazer é um exemplo disso é que vamos substituir o estresse do platô e o logotipo aqui. Então, se pularmos de volta para Sigma e encontrarmos nossa tela inicial, e nós vamos apenas selecionar o logotipo do descanso pipes e vamos clicar com o botão direito do mouse ou com a tecla Control pressionada. E se você não tem um mouse de dois botões e nós vamos apenas escolher copiar colar, que está na parte inferior do menu. E nós vamos escolher copiar como SVG. Ok, então isso é pular de volta para o protótipo. E vamos fazer uma pasta irregular aqui. Comando V, controle o veículo usando janelas. E você pode ver que temos nosso logotipo, mas você pode ver que é muito menor. E isso é porque temos essa coisa de densidade de pixels acontecendo. Então, nosso iPhone 11 atual está em 3x, mas SVGs, porque sua resolução independente, eles realmente não têm uma densidade de pixels. Então, dê crédito apenas trazendo-os em um x. tão efetivamente, em nosso tamanho de tela atual, isso é facilmente, facilmente corrigido. Então, se mantivermos nosso, nosso SVG selecionado e vamos vir aqui para os valores de tamanho. E dentro destes, essas entradas que podemos fazer. Fazemos algumas matemáticas simples. Então nós vamos apenas multiplicar essa largura por três e apenas certifique-se que isso deve estar ativado por padrão porque certifique-se de que você tem o cadeado pequeno bloqueado. Então isso vai olhar como proporção. Então podemos colocar três vezes neste campo e ele vai escalar nosso logotipo corretamente. Ok, então agora nós temos nossos logotipos de crédito Gao. Nós vamos apenas posicionar isso mais ou menos no lugar correto onde OWL, onde nosso logotipo baseado em pixel atual está. E nós vamos para permitir Pam, eu vou excluir o logotipo baseado em pixel. Então nós temos este SVG, então isso tem sim, outro ícone. Então você pode ver que tem um pequeno ícone de imagem com este pequeno círculo no canto inferior direito. E nós vamos apenas clicar duas vezes sobre isso no nome e nós vamos apenas chamá-lo de cima. Certo, então isso encerra para o vídeo de importação de figos. Então, como você pode ver, é relativamente indolor trazer seus ativos em uma torta de Sigma. Existem algumas otimizações, são algumas coisas que você precisará fazer para preparar seu arquivo apenas para que você tire o melhor proveito do importador. E eu também mostrei como você pode trazer SVGs para, em prettify a partir da figura também. Então, se a figura é a sua ferramenta de escolha, então você pode pular o próximo par de vídeos. Não se esqueça de assistir ao impulso do vídeo do sistema de arquivos embora. Então há algumas coisas aí que você precisa saber antes de progredirmos. E te vejo no próximo tutorial. 6. Importação do esboço: Oi lá. Então, neste segundo vídeo, vamos estar olhando para como podemos melhorar nossos gráficos de scatch ends abordagem a pi. E nós vamos construir nosso novo aplicativo legal chamado Prender Piratas. O único aplicativo no mercado que permite que você veja fotos de tortas durante todo o dia. Devíamos, francamente, parece incrível. E o que eu quero fazer antes de entrar em impor nossos gráficos InterPro pi é que eu quero apenas passar por alguns dos gotchas que você precisa estar ciente de quando você está importando gráficos do esboço. Então, a primeira coisa que eu gostaria de chamar sua atenção é o fato de que o protocolo, ele não suporta componentes de esboço ou símbolos. Se você tem um design que está usando componentes do Sketch e você importá-lo para o presser pi. O que vai acontecer é que o protocolo vai converter todos esses componentes em bitmaps nivelados. Então eu tenho que dizer fora de borda aqui só para ilustrar o que eu quero dizer e o que vai acontecer. Então você pode ver aqui, eu tenho um logotipo e componente de linha de cinta. E se eu não quebrar isso, então ele vai ser achatado. O segundo cenário em que isso vai acontecer é se eu tiver um grupo que tem uma mesquita dentro disso, novamente, se você mascarar objetos dentro do scatch antes de trazê-los para o processador Pi, protoplasma vai converter isso em um bitmap nivelado. Agora isso pode ser algo que é desejável, especialmente se você tem muitos gráficos que não são adicionar uma interação para, você pode usar essas duas estratégias para piscar as coisas automaticamente, que é realmente bastante útil. Então o que eu vou fazer agora é eu só quero mostrar a vocês o que acontece quando eu falar disso comprado no processo Pi. Então vamos passar para o processo pi. E vamos criar um novo arquivo de pilha. E eu acabei de ter uma configuração pro iPhone 11. Então eu estou usando essa predefinição padrão. E para importar o intérprete gráfico Pi, você precisa vir ao menu de importação e eu vou escolher o esboço. E você pode ver instantaneamente que o protocolo está olhando para o arquivo de esboço que fica atrás. E ele pode ver todos os quadros de arte que estão dentro do nosso arquivo de esboço. Então eu vou selecionar as esculturas de início. E eu vou voltar a este menu e explicá-lo. Mas só por agora, vamos deixar todos os padrões e impulsos. Ok, então você pode ver aqui no painel Layers precipício, meus dois logotipo e cinta objetos de linha. Então, em scatch, o primeiro era um componente, e no esboço o segundo era que grupos mesquitas. Assim, você pode ver que é apenas esmagá-los em um bitmap achatado. Certo, então vamos desfazer isso. Vamos voltar ao esboço. E nós vamos dar uma olhada nesses outros arquivos gráficos que eu tenho aqui. E quero falar um pouco sobre algumas outras características que o importador tem. Então, uma das coisas que é realmente legal é você pode fazer muitas coisas dinâmicas com camadas de texto. Então você quer ter certeza de que suas camadas de texto de esboço são tampas exatamente como, assim. E quando os importamos, perfil vai mapear as camadas de texto do esboço para suas próprias camadas de imposto nativas. E nós vamos ser capazes de fazer algumas coisas com eles e isso é, isso é muito legal. Uma última coisa que eu quero chamar sua atenção é o fato de que quando você traz gráficos através das importações do Sketch, intérprete pi vai converter todos os seus gráficos em bitmaps. Então, no momento, prettify não suporta os gráficos importantes ou vetoriais, um impulso santo versões bitmap de seus gráficos vetoriais. E, na maior parte, isso não é um problema muito grande. E você tem a capacidade de criar algumas formas nativas com incrivelmente alta e exploraremos algumas dessas coisas mais tarde no curso. Mas além disso, você pode esperar que o proto pi respeite para permitir a hierarquia. Tudo o que está em uma pasta será convertido em versão protótipo de uma pasta de arquivos, que é um contêiner. Mas para todos os efeitos, é exatamente a mesma coisa e todo o resto vai aparecer na ordem em que você tem dentro do seu arquivo de esboço. Certo, então com essas pegadinhas fora do caminho, vamos dar o nosso primeiro passo. Nós vamos importar alguns gráficos intérprete pi e começar a criação do nosso aplicativo de descanso lugar. Antes de fazermos isso, vou livrar-me do meu stock captchas são comida. Livra-te disso fora dos acordes. Não queremos ficar confusos com isso. E vamos pular dois pi. E nós temos nosso arquivo py que criamos há pouco, o que é absolutamente bom. Podemos começar com este. E como fizemos antes, vamos importar e escolheremos o esboço. E quando escolhermos isso, vamos ter este pop-up de diálogo é Importar diálogo. E por padrão, ele vai ler o arquivo de esboço ativo que está sentado em segundo plano. Neste caso é como a seção dois, tubos descansar ativos. E também será capaz de ver todas as saídas que temos configuradas em nosso arquivo. E vai listá-los neste menu da Apple aqui. Aqui temos o tamanho da entrada. Portanto, dependendo do dispositivo para o qual você está prototipando, você vai querer certificar-se de que os gráficos têm o tamanho da densidade de pixels correta. E novamente, como o protocolo não suporta a importação de gráficos vetoriais e através das importações no momento, você vai precisar se certificar de que seus gráficos de bitmap estão na densidade correta porque eles são dependentes da Resolução . Então, para o iPhone 1011 pro, sabemos que o tamanho do impulso está em 3x, então vamos deixá-lo no padrão. Protocolo sabe disso também, é que sabe o que o dispositivo pré-vendas. E como ele vai pregar, escolha o tamanho do impulso, que é correto para nós. Certo, indo até aqui, temos duas opções sob impulso lateral. Então, podemos importar toda a última estrutura ou podemos optar por apenas impulsar camadas exportáveis. Então, se você já sentou certas camadas para ser explorável em scatch, ele só vai importar essas camadas. Isso é algo que eu realmente não faço isso. Se isso é algo que é desejável para você, então você pode escolher isso como uma opção. A última parte do impulso são I, uma vez que ele vem rapidamente chats sobre é esta re-importação opções. Assim, os profissionais Pi tem a capacidade de reimportar gráficos que acabaram de ser importados, só se lembra dos últimos gráficos que você importou. Portanto, não há nenhum tipo de ligação dinâmica entre todos os gráficos que você está importando e as áreas específicas em seu arquivo de pilha ondulado importante também. Então, se você acabou de ver algo que você precisa mudar rapidamente, então pode haver uma opção útil. Mas para ser honesto, não é algo que eu realmente uso. Se isso é algo que você faz para obter valor nós mesmos, então você tem algumas opções aqui. Então nós temos a capacidade de substituir posições de camadas. Então, se você já importou alguma torta de intérprete de gráficos e deseja alterar as camadas ao redor. Você pode alterar as camadas no Sketch e, em seguida, reimportar. E ele vai reorganizar as camadas dentro do seu arquivo PY, sobrescrevendo tamanhos de camadas. Novamente, se você alterou qualquer tamanho em suas camadas e as espalhou, reimporte, ele irá atualizá-los . Atualize ordens de camada em grupo e estrutura. Novamente, se você reorganizar suas camadas de seus grupos dentro um esboço quando você reimportar, ele aplicará essas atualizações. E, finalmente, remover camadas excluídas no esboço. Então, se você excluir qualquer esboço duradouro e, em seguida, reimportar, ele irá remover essas camadas também. Ok, então nós estamos indo para efetivamente deixar todas essas opções é formado, vai definir os últimos morcegos são todos estrutura de camada e nós vamos importar nossa tela inicial. Ok, então nossos gráficos agora são impulsivos. E se você der uma olhada, você pode ver que a hierarquia de camadas corresponde ao nosso arquivo de esboço. As pequenas caixas com as linhas pontilhadas. Estes são grupos, estes são efetivamente os grupos e esboços, e estes são nossos contêineres pro fornecedor. Você pode ver aqui nós temos um objeto de texto e esta era uma camada de texto nativa dentro de scatch. Foi importado, interpreta ou pi como é um esboço especial. Desculpe, esta camada de imposto especial. Você pode ver que tem um pouco de C na base do canto inferior também tem um ícone gráfico também. E o que isso significa efetivamente é que no momento ainda é um gráfico, mas temos a capacidade de convertê-lo em tanques se quisermos. Portanto, nem todas as suas tags serão imediatamente convertidas em textos nativos. Você será capaz de selecionar um V, escolher qual pedaço de texto você realmente quer ser nativo. E isso normalmente são apenas as coisas que você quer adicionar, alguma interação também. Ok, então essa é a nossa primeira camada importada. Então vocês podem ver aqui que temos este nome aqui que diz c1. Então protoplaneta tem o conceito de cenas e podemos usar parece quebrar nosso protótipo. Então vamos adicionar mais algumas cenas. Então, se chegarmos ao painel de cenas voar para fora, que é logo aqui à esquerda você pode ver que temos como C1. Então eu só vou adicionar mais temporadas porque nós queremos importar nossos outros que telas do nosso arquivo de esboço. E vamos apenas clicar duas vezes em s2. Como é que vamos voltar para o sketch de importação? E desta vez vamos escolher o login. Temos que deixar tudo nos padrões e clicar nas entradas. Isso é bom. E finalmente queremos ir para a nossa terceira cena. Vá para o esboço de impulso. E vamos escolher a casa e clicar em importar. Coastal, são nossas casas vistas importadas. Então o que vamos fazer agora é mudar o nome destas três cenas. Então vamos ligar para o primeiro, começar. O segundo, vamos chamá-lo de login. E terceiro vínculo, vamos chamá-la. Agora. Eu disse que através do importador, você só pode importar gráficos no formato bitmap. E isso é verdade. Mas há outra maneira de impulsioná-lo gráficos de esboço em pi de louvor, onde você não poderia realmente imple gráficos como vetores. Então protoplanetas suporta o formato SVG e há a funcionalidade para ser capaz de importar SVG integra apenas não diretamente através das importações estão neste momento. Então o que vamos fazer é ir para a tela inicial. E eu vou abrir o grupo dele e eu vou pegar meu logotipo, meu logotipo Pintrest. Eu quero trazer isso como um SVG porque nós vamos estar adicionando algumas animações onde mais tarde. Então não ia fazer é eu vou voltar para esboçar e eu vou encontrar o meu grupo de logotipo. Então este aqui, só quer as partes da marca do logotipo. E vou clicar com o botão direito do mouse na pasta dentro do painel Camadas. E eu vou escolher Copiar código SVG. Ok, então eu vou voltar para o protótipo. E eu vou fazer um comando regular do Colar aqui. Agora você vai ver que meu Logos importado em. Chama-se imagem larga e tem este ícone. Este é o ícone SVG, mas você notará instantaneamente que é muito, muito pequeno. Então, atualmente, impressionado com cinco pontos 05, há um problema com as importações SVG, onde a importação só traz o arquivo, adiciona seu tamanho físico em 1X, e ele não reconhece a densidade de pixels do seu tamanho do arquivo. Então nós só precisamos fazer um pouco acima de mapas e um pouco de manipulação para corrigir isso é SVG, vetor tão escalável. Então o tamanho não é um problema para nós. Então, vamos apenas manter isto selecionado e vamos para o Tamanho. Então aqui nós temos a largura e nós temos o mais alto. E dentro desses campos, eu posso realmente fazer matemática simples. Então eu vou me certificar de que meu cadeado está trancado, que irá bloquear a proporção. E no campo de largura esquerda, eu vou amarrá-lo asterisco, que é o símbolo para multiplicar e olhar para a sua altura três. E efetivamente vamos multiplicar esse valor por três. Então, vai bater em “Return”. Ok, então agora temos nosso logotipo dimensionado até o tamanho correto porque ele está em 3x densidade de pixels. Multiplicamos por três e temos o tamanho correto. Ok, então eu vou colocar isso no lugar. Isso parece certo. E eu vou mudar o nome deste logotipo. E agora eu posso remover com segurança meu grupo logotipo faz este aqui. E, de fato, isso é apenas colocar o logotipo dentro deste grupo aqui. E agora substituí meu logotipo de bitmap por um gráfico vetorial escalável. Então que sobre encerra nosso olhar sobre impulso em gráficos de Sketch intérprete pi. No próximo vídeo, veremos como imploramos gráficos do Adobe XD interpreta uma pizza. Mas se esboçar sua ferramenta de escolha, então você pode pular esse vídeo com segurança. Certifique-se de assistir ao vídeo onde eu falo sobre importar do sistema de arquivos, porque há algumas coisas nesse vídeo que você precisará saber. Então eu vou te ver no próximo tutorial. 7. Importação do Adobe XD: Oi. Neste terceiro vídeo, veremos como importamos gráficos do Adobe XD para criar este novo aplicativo chamado Pipes rest. Eu não sei quanto a você, mas eu adoro quando eu conheço essas coisas que eu amo, como pi's e prototipagem. Quero dizer, Rule procurando por nossos projetos de sonho, certo? De qualquer forma, antes de introduzirmos nossos projetos, eu quero conversar um pouco sobre algumas das nuances entre XD e Presser pi. Então algumas das coisas que eu quero discutir com vocês é sobre a maneira como você tende a projetar gráficos nesses tipos de softwares. Todos os três aplicativos de software que são suportados com orgulho de pi, Adobe XD, se cronograma de ignorância tem o conceito de componentes, todos têm o conceito de camadas de texto e estilos. Então, há certas coisas que todos nós estamos fazendo quando estamos criando gráficos fazem muito sentido quando estamos criando esses gráficos nesses, nesses aplicativos. Mas há algumas nuances entre como criamos esses gráficos e como precisamos importá-los para proto pyre e como protótipo tem tipo de SAP para interpretar os gráficos que nós, que adicionamos. E você verá se assistir a todos os três vídeos, como as diferenças sutis entre o funcionamento dos três aplicativos? Então, para o Adobe XD , suas nuances são, são estas. Então, a primeira coisa que vamos falar é sobre componentes. Então, componentes do Adobe XD. Então, quando você importar um componente, que é um componente do Adobe XD e importá-lo para o proto pi, ele será importado como um grupo Pi de processo. Então, isso é realmente muito bom. Ele permite que você ainda use componentes dentro de seus projetos do Adobe XD sem medo de perder ou qualquer funcionalidade ou ter que manipular esses componentes de uma maneira particular como você pode ter que fazer em alguns dos outros aplicativos. Portanto, os componentes são importantes como grupos. E todos os gráficos, além das camadas de texto, são transformados em bitmaps. Agora isso é algo que é bastante comum em toda a importação é no momento atual, todos os gráficos são transformados em bitmaps quando são importados, interpreta upaya pressionado por não suporta dentro do impulso, o impulso de gráficos vetoriais. Mas isso sendo dito, o fato de que você pode ter um componente no Adobe XD e trazê-lo para o processador Pi e ainda manipula o cabelo. E também para o fato de que as camadas de texto são preservadas e realmente mapeadas diretamente para pressionar por camadas de texto é uma coisa boa. Está muito frio. A segunda coisa sobre a qual quero falar são camadas mascaradas. Então W x D tem um par de maneiras diferentes de lidar com imagens e massa. Então nós temos aqui nesta tela inicial, nós temos essa, essa forma, que tem essa máscara aplicada a ela. Então, se você importar uma mesquita na torta de intérprete do Adobe XD , vai achatar esse grupo inteiro de objetos. Vai assumir que é apenas uma única camada. Então isso pode ser algo que você realmente quer usar. Você pode usar camadas de massa para condensar a interface do usuário e às quais você não precisa adicionar interação. E fazer isso, na verdade, condensa o tamanho do arquivo do seu protótipo e também condensa a complexidade. Então isso é realmente algo que é bastante útil. Mas tenha isso em mente que se você tiver uma simulação, objetos dentro do dxdy serão achatados. Então algo que você não quer fazer. Você não quer uma mesquita, um grupo onde você tem uma camada de imposto e N, por exemplo. E você pode querer usar essa camada de imposto melhora aplicada dinamicamente porque você está indo, você vai perder essa habilidade de edição quando você transferir. Ok, então se você, outra coisa a ter em mente é se nós apenas passarmos por cima de dois novamente, casa, esta cena em casa aqui. E se eu olhar para dentro, deixe-me apenas destacar isso. E nós vamos entrar no fluxo de fotos aqui. E nós vamos apenas abrir uma das imagens, na verdade Cisco Sekhmet uma. Então você pode ver aqui que eu tenho apenas um único objeto. É uma imagem que é efetivamente é um retângulo de canto arredondado onde eu acabei de soltar uma imagem. E de acordo com o Adobe XD é funcionalidade nativa é instantaneamente marca essa imagem. E eu realmente tenho cantos arredondados aplicados a isso. Agora, o problema, bem, pode não ser um problema, mas apenas algo para estar ciente é que se você quiser manipular esses cantos arredondados dinamicamente dentro de um proto pi, você vai ter que repensar a maneira como você traz objetos para dentro em para, para este tipo de coisa. Assim, a maneira como o protocolo funciona é que ele permite que você adicione ao redor dos cantos para grupos, para grupos proto pi nativos. E você também tem funcionalidade que permite animar dinamicamente esses cantos arredondados e alterar esses cantos arredondados. Então, se isso é algo que você vai precisar fazer quando você está, quando você começar a prototipagem. Em seguida, você vai querer tirar os cantos arredondados fora dentro do Adobe XD. Basta trazer suas imagens quadradas e, em seguida, agrupar e aplicar os cantos arredondados dentro de um protótipo. Ok, então isso é realmente a única coisa para chamar sua atenção. Além disso, você pode continuar projetando exatamente do jeito que tem sido no Adobe XD. Sabendo que você será capaz de trazer seus gráficos em prosa upaya, sem qualquer, qualquer estranho acontecendo. Ok, então agora nós vamos realmente importar alguns gráficos para mamão em prosa do Adobe XD. Então, e nós estamos indo para importar gráficos desta seção para P3s Assets arquivo, que está disponível nos arquivos para download. E o que eu vou fazer é mudar para produzir uma torta. E eu vou criar um novo cachimbo. E, por padrão, vou conseguir esse iPhone 11 Pro Acts, que é o tamanho do telefone que vamos usar durante todo esse curso de treinamento. E o que eu vou fazer é me livrar da prévia aqui. Então a primeira coisa que vou fazer é importar meus gráficos. Então, se eu for até aqui e você pode ver que eu tenho este menu de importação. E se você assistiu aos outros dois vídeos, você já viu isso. Isso é exatamente o que eu passei com os outros dois com os dados para aplicativos. Então, para este vídeo em particular, vamos importar do Adobe XD. Então eu vou escolher o Adobe XD no menu. E eles vão receber esse diálogo. E este diálogo é quase idêntico para, na verdade, é completamente idêntico para todos os três aplicativos. Apenas algumas coisas terminológicas que diferente? Então, para Adobe XD, eu posso ver aqui meu arquivo que está aberto. Então você tem que ter seu arquivo aberto no Adobe XD sentado em segundo plano e prettify vai pegar esse arquivo e ele vai introspectar esse arquivo e ele vai ser capaz de olhar para todos os aeroportos que você tem. Então, neste menu aqui, inicialmente eu posso ver as placas de arte que eu tenho dentro do meu arquivo XD. Aqui, você pode ver o tamanho do impulso. Então, porque como eu disse antes, todos os gráficos serão transformados em, ou a maioria dos gráficos será transformado em bitmaps. Precisamos ter certeza que esses gráficos são importantes, que o tamanho correto. E para dispositivos porque temos um, tenho certeza que você está ciente, porque temos telas de densidade de pixels com densidades diferentes e diferentes de pixels, então vamos ter que nos certificar de que trazemos nosso gráficos que têm o tamanho correto. Então, porque estamos projetando em um iPhone 11 Pro, pressionamos aplicar. Ele já sabe que isso é, que é uma densidade 3x. Então ele já pré-escolheu a densidade correta para nós. Ok, então, movendo-se mais para baixo, temos camada para importar. Então, há duas opções aqui. Podemos importar todas as nossas camadas na mesma última estrutura que fica em nosso arquivo EXE. Ou podemos selecionar apenas camadas marcadas para Exportação em Lote. Então eu tendem a usar apenas a estrutura OLAP. Mas o só para saber que você tem que pairar a opção lá e disponível para você se você quiser apenas importar certas camadas. Toda a parte inferior tem a ver com algo chamado reimportação. Agora, a reimportação é um recurso dentro do proto pie no qual permite que você reimporte um design que você acabou de importar. E isso permite que você faça qualquer alteração em seu arquivo Adobe XD. Talvez você tenha notado que um gráfico não foi posicionado corretamente ou que você queria que as camadas em uma ordem diferente ou algo assim. Em seguida, você pode fazer suas alterações no Adobe XD e, em seguida, usar as opções de reimportação dependendo do que você definiu inicialmente aqui. As opções de reimportação do Azure quando você importar pela primeira vez, é isso que será atualizado quando você fizer qualquer reimportação futura. Então, há quatro opções aqui. São todos bastante auto-explicativos. Então temos a posição sobremadura das camadas. Então, se você fizer uma alteração posicional em suas camadas no XD, ele vai sobrescrever e fazer a sua preparação. Sobrescrever tamanhos de camadas. Então, novamente, se você alterar o tamanho das camadas, isso vai ser atualizá-lo. E então você tem essas outras duas opções, layout de atualização, ordens e estrutura de agrupamento, e remover camadas excluídas no Adobe XD, novamente, bastante auto-explicativo, mas eles permitirão que você faça essas alterações. E quando você reimportar seu arquivo, essas alterações serão feitas. Como eu já disse anteriormente, eu realmente não uso muito o recurso de reimportação. E há muitas razões pelas quais eu costumo mudar as coisas uma vez como a empresa, mas isso é algo que é de valor para você, então o recurso está lá. Ok, então nós vamos apenas deixar isso ou nos padrões e certificando-se que temos toda a última estrutura e nós vamos tocar entradas. Ok, então nossa tela inicial foi impulsiona isso. Você pode ver aqui no último painel, a hierarquia de camadas foi respeitada e preservada. Você pode ver que todos os meus gráficos, que eram vetores, agora são convertidos em bitmaps. Além das minhas camadas de texto que têm este ícone de lei fiscal especial. E camadas de texto por padrão GET impulso disse como camadas de texto gráficas. E o que isso significa é que não é um texto apropriado até que eu realmente convertido em texto. Então isso, isso permite que você não tenha que ter todo o texto convertido por padrão. Existem alguns problemas quando você está visualizando seus protótipos, por exemplo, na nuvem ou na Web. Não podemos, não podemos carregar fontes personalizadas na Web. Portanto, qualquer fonte que você usa precisa ser suportada por fundos que tiveram seu navegador tem acesso. Então coisas assim, talvez razões pelas quais você pode não querer converter todas as suas, todas as suas fontes em fontes nativas. Então, mas além disso, temos nossos grupos, que são efetivamente os grupos que estavam no Adobe XD. E tudo o resto é bem arrumado. Ok, então você deve ter notado que na verdade nós temos este pequeno título de cena de Haeckel Então isso aludirá ao fato de que pro supply tem o conceito de cenas. E você pode pensar em cenas como uma forma de compartimentar seu protótipo em partes gerenciáveis. E nós vamos estar usando cenas bastante com, através deste curso você vai aprender muito sobre como usar cantar e os prós e contras das cenas. Vamos trazer nosso 3C inicial, três cenas, três telas para interceder. E para fazer isso, nós vamos para este menu de submenu de cenas, e nós vamos adicionar um par de cenas extras nós apertando o botão de adição aqui. E nós vamos mudar para parecer também, apenas clicando duas vezes nele. E quando eu voltar ao nosso impulso, morcegos, Adobe XD, e vamos trazer nossa segunda tela, que é nossa tela de login. Vamos escolher isso de novo. Nós vamos deixar todas as outras opções no padrão e vamos para o relógio de entrada. Então, agora temos nossa tela de login importada. Vamos para a cena final, vendo três, e importaremos nossa tela inicial. Eu só vou escolher o para nós em casa aqui. E nós vamos importar. Está bem, fixe. Então está tudo bem. Então, como eu disse anteriormente, pro fornecedor apenas bitmaps de impulso, mas eles estão lá em cima há realmente uma maneira de adivinhar vetores, pira interpretadora, e isso é através do uso de SVG. Então, pro supply suporta SVG. Ele tem uma quantidade limitada de suporte agora, mas permite que você impulsione gráficos individualmente como SVGs. Então o que vamos fazer para dar uma olhada nisso enquanto nós, eles vão para o nosso C1. Então nós temos este logotipo é o logotipo do descanso de peice. Podemos ver que seis estão aqui neste grupo e tem a camada de texto lá, mas tem essa marca de logotipo, que é um gráfico. E eu realmente quero aplicar alguma animação a isso. Nós vamos, vamos fazer isso em um vídeo futuro. Então, uma vez prestes a escalar para cima e para baixo, eu não quero que ele bitmap, então eu vou trazer um SVG. Então, o jeito que eu vou fazer isso não vai voltar para o Adobe XD. E eu vou encontrar o meu logotipo, estou acordado. Então é apenas dentro deste grupo aqui. E eu vou selecionar set e eu vou clicar com o botão direito do mouse e eu vou escolher a opção Copiar código SVG. Ok, então eu vou voltar para o processador Pi, e eu vou apenas fazer uma pasta regular aqui para colar nosso logotipo. E você pode ver nossos logotipos entrando, mas é insanamente pequeno o que está acontecendo? Então, a partir da versão atual do protocolo que é sondado por 5-0 cinco, há um problema quando você traz SVG no sentido de que ele vem em um atua agora porque nosso protótipo é um iPhone e é nossa densidade de pixels ou 3x. Não é levar isso em conta, mas é um efeito fácil. Temos um SVG depois de tudo, então podemos nos inscrever. E porque sabemos exatamente o multiplicador em que precisamos dimensioná-lo, podemos apenas fazer alguma massa básica. Então, uma das coisas legais sobre prós império e seu impulso parece que um amor pelo rap diz que você pode fazer matemática básica, cálculos matemáticos dentro dos próprios campos. Então nós vamos vir aqui para o tamanho e onde podemos ver nossa largura e nossa altura. E certificando-se de que o cadeado está trancado. Então ele bloqueia a proporção. Vamos colocar uma vez três dentro deste campo. Agora, os tempos dentro do software tendem a ser os asteriscos, então é isso que vamos usar. Então Astra S é vezes e vamos apenas digitar o número três. E vamos bater no “Return”. E eis que agora temos nossa marca de logotipo dimensionada até o tamanho correto. Está bem. Então, essa é a posição na posição correta logo sobre o nosso logotipo bitmap MAC atual. E nós vamos mover a imagem um que é o nosso SVG, que vai mover isso para o grupo logger. E nós vamos renomeá-lo simulação de logotipo, apenas clicando duas vezes na marca. E agora podemos remover com segurança o nosso grupo de bitmap do logotipo. Não precisamos mais disso. E substituímos com sucesso nosso gráfico de bitmap por um gráfico SVG. Certo, uma última coisa que precisamos fazer é mudar o nome dessas cenas. Então vamos dar um nome a este começa. E então temos login. E finalmente chegamos em casa. Ok, então que sobre encerra tudo para o nosso olhar sobre impulso em gráficos no Adobe XD. Nós abordamos algumas nuances e coisas que serão boas para você saber se Adobe XD é sua ferramenta de escolha e você deseja usá-las em conjunto com a prosopagnosia. E no próximo vídeo, vamos ver como você importa gráficos do sistema de arquivos. Então, há algumas outras coisas que são bastante úteis para saber na medida em que seu impulso em gráficos do sistema de arquivos, vez de apenas usar os impulsos. Então, eu vou te ver no próximo tutorial. 8. Importação do sistema de arquivos: Então neste vídeo, vou mostrar como você pode importar GraphX do sistema de arquivos. Então você pode querer fazer isso se estamos usando uma ferramenta, uma ferramenta gráfica para criar ou gráficos que não é uma das três ferramentas de suporte. Tem uma entrada especializada. Então, por exemplo, algo como o Photoshop. Ou se você foi fornecido gráficos por outra pessoa e você só precisa tipo de obtê-los em um caso. Portanto, há algumas maneiras diferentes de trazer imagens do sistema de arquivos. Também suporta vários formatos de arquivo de imagem. Então suponha PNG, JPEG e SVG. E para ilustrar isso, vamos começar navegando até a tela inicial. E nós vamos apenas substituir uma dessas imagens de pizza por, uma alternativa. Agora, uma outra coisa a ter em mente é que quando você exporta gráficos para fora, eles precisam ser a densidade de pixels correta. Então, quando os importadores importam eles resolveram isso para você. Mas se você estiver fazendo isso com outra ferramenta, como Photoshop, Você vai ter que salvar a imagem OWL em um tamanho maior, dependendo do que você deseja que sua densidade de pixels é. Então, porque estamos fazendo, quando estávamos construindo nosso editor de protótipos, iPhone 11 Pro, podemos verificar com a densidade de pixels aqui. Então, para nós, é 3x, o que basicamente significa que qualquer gráfico que trazemos precisa ter três vezes o tamanho do site físico. Então, por exemplo, se tivéssemos uma imagem de 100 quadrados quando garantimos que exploraríamos o Photoshop Africano em 300 pixels quadrados, para que ele fosse o insight correto do tamanho sobre a fotosférica. Ok, então uma das primeiras maneiras que eu quero mostrar a vocês como trazer imagens do sistema de arquivos é apenas usando o botão de imagem normal aqui. Então, mais metade disso vai abrir uma janela do Finder. Eu vou navegar para esta pasta onde eu tenho algumas leis, nós temos imagens de piras aqui. Vou selecionar este. E vamos importá-lo que apenas meio preso na parte superior do painel de camadas aqui. E eu vou substituir este primeiro pi no fluxo de fotos, então image1 com o meu, minha entrada para danificar. Então vou arrastar isso para dentro do contentor. E eu vou apenas reposicionar isso em 0-0, então ele está na mesma posição. Agora eu posso remover isso, isso existe em image1 e clicar duas vezes sobre isso para apenas renomeá-lo para imagem um. Ok, então essa é a primeira maneira de substituirmos nossa primeira imagem. Agora, há alguns problemas com o ruim se dissermos, por exemplo, que quer substituir. Então nós, nós efetivamente substituímos uma imagem por outra imagem, então substituindo o gráfico existente. E, e o problema com isso é que se nós, se já tivéssemos adicionado algumas interações através do painel Gatilhos aqui. Vai quebrar e interações que adicionamos se formos tags nessa imagem em particular. E a razão para isso é que esta, esta camada de imagem aqui, você pode pensar nela como um recipiente. Então, quando isso é importado e quando nós segmentamos, digamos image1 com um sobre interações, ele realmente vai atingir o ar. Isto, isto como um contentor. Não vai ser apenas o nome da imagem ou vamos escolher o nome da imagem, mas na verdade é um objeto único. E você pode pensar aqui como um contêiner de imagem que tem uma imagem dentro dela em vez de apenas uma imagem normal. Portanto, há outra maneira de substituir os gráficos existentes. E eu vou te mostrar isso agora. Então, se mantivermos nossa imagem selecionada e olharmos para aqui, podemos ver que há um botão de substituição. Então isso vai nos permitir realmente substituir a imagem dentro do recipiente de imagem por uma imagem diferente. Então, se apertarmos um botão de substituição, vamos navegar de volta para o nosso, nossas piras e vai escolher um jogadores diferentes quando esses gostos profundos s, Isso é substituir a nossa imagem atual a partir deste. Então vamos abrir. E você pode ver agora que nossa imagem foi colocada. Não foi substituído dentro do contêiner existente, o nome do arquivo ainda. E se fizermos isso dessa maneira e tivermos algumas interações anexadas, então elas ficarão bem e eu vou ser quebrada de qualquer maneira. Então, se você precisa substituir os gráficos, esta é a maneira que você deve fazer isso. Ok, então essa é uma maneira de trazer imagens do sistema de arquivos para o seu arquivo de pilha. Há outra maneira de fazer isso. Então, para ilustrar isso, eu só vou saltar Eu era tela de login válida. E se você se lembrar, no vídeo anterior, substituímos nosso preço para o logotipo S em nossa tela inicial por um SVG. Mas nós temos esta instância do mesmo logotipo neste, nesta segunda tela de login também. E você pode ver que este é um grupo de contêineres. Tem um número de imagens separadas que compõem. Foi assim que foi importado de Sigma. Portanto, não posso usar o comando Substituir. Não existe porque só existe quando há uma única imagem. Então, se eu selecionar uma dessas imagens, você pode ver que eu o substituí porque nossa marca de logotipo é composta de vários gráficos, isso não vai funcionar. Então eu vou ter que trazer uma imagem para novo. Mas desta vez. Vou trazê-lo diretamente para a área de trabalho. Portanto, isso é subapoiado no, em, no sistema atual MCAT. Então FI aqui eu vou encontrar este logotipo, SVG. Eu só vou arrastar e cair para trás. E você pode ver que isso é entrada para isso também. Então isso é apenas trazer que n Agora como antes, ele menor porque é apenas um ato porque é o arquivo independente de resolução. E nós vamos apenas dimensionar isso. Nós estamos apenas indo para o globo ocular como eles dizem, levá-lo para mais ou menos para a ciência correta que parece bem perto. E novamente, você sabe, é um SVG tem este ícone muito especializado com o ícone de imagem e este pequeno círculo no canto inferior direito. Então agora posso me livrar do meu grupo com segurança. E agora fui reduzido com base nisso com o SVG. Certo, então isso nos leva ao fim da ação de impulso. Agora você deve ter uma boa compreensão das diferentes maneiras de importar seu GraphX junto com a nova série antiga de todas as diferentes ferramentas de interface do usuário suportadas, tanto quanto o importador Cellar de vx, o esboço com FISMA. Em seguida, vou apresentá-los ao precipício modelo conceito e explorar que vamos agraciar nossas primeiras interações. Então vejo você no próximo tutorial. 9. O modelo de conceito: Protocolo funciona conceitualmente, mas objetos do mundo real, não há nenhum código, apenas objetos, gatilhos e respostas. Se você pensar no senhor, você pode aplicá-lo a qualquer coisa que você faz no mundo, como derramar um copo de água. Você tem que tocar, que é o objeto. Você precisa ligar a torneira, que é o gatilho, e depois despeje um pouco de água, que é a resposta. Em princípio, há muitos gatilhos ou respostas. Alguns também são contextuais. Por exemplo, se tivermos uma olhada no gatilho de arrastar, ele só permite que as respostas se movam, escalam e giram. Outros, como tag, praticamente fora de cada resposta que a oração tem para oferecer. As respostas também alteram suas propriedades dependendo do gatilho usado. Para dar um exemplo disso, quando você adiciona uma resposta de movimento ao gatilho de ataque, você pode mover para um local ou pelo nosso número de pixels em relação à posição atual dos objetos. Em uma resposta movimento para um gatilho cadeia, no entanto. E desta vez você é solicitado por uma gama de valores. Como a natureza da cadeia é conectar os atributos de um objeto a outros objetos afeta, nós os encadeamos juntos. Os gatilhos são agrupados em várias categorias. Estes são toque, condicional, mouse, chave, entrada e sensor. Então você pode ver que há alguns gatilhos para brincar. As respostas também são agrupadas. Mas eu não tenho nenhum nome de categoria. Mas gosto de pensar nisso como propriedades de tradução. Movimento, navegação, entrada, audiovisual e um grupo final de diversas respostas não-visuais. A resposta final não é realmente uma resposta, mas uma maneira de organizar e várias outras respostas com base em certas condições. Você adicionaria uma resposta condicionada se quisesse criar uma interação com vários resultados. Por exemplo, um login estará fazendo exatamente isso em um vídeo futuro dentro deste curso. Ok, então isso é seis blog chamado set model com um exemplo simples. Vou desenhar um quadrado e um círculo. Vou fazer cores diferentes. Vamos adicionar um gatilho de tabulação ao nosso círculo. Agora vamos adicionar uma resposta de rotação e escolher o quadrado como nosso alvo. E vamos fazê-lo girar 180 graus. Quero que a praça gire do centro. Então precisamos mudar o ponto de origem. Por padrão, o ponto de origem é o canto superior esquerdo. Ok, então menos perda para a janela de visualização. Agora, como você pode ver, toda vez que eu toco para circular, os quadrados se encaixam é que eu posso adicionar várias respostas a um único gatilho. É assim que a resposta escalar fará a escala quadrada em 5%. Vamos pré-visualizar isso. Então agora toda vez que eu toco no círculo, o quadrado gira e ele escala. É importante saber que a ordem na qual as respostas são executadas é baseada no tempo e não no mais antigo e eles as têm no painel Gatilhos. Posso controlar cada resposta, início e duração com esses valores aqui embaixo. Há também uma linha do tempo muito simples. E eu posso controlar ambos os valores dentro desta mina mais alta também. Então, demora, duração. Então, como você pode ver, a criação de interações é super fácil de fazer. Existem algumas exceções e é verdade que cada resposta de gatilho tem suas nuances. Mas com um pouco de brincadeira ao nosso redor e tentativa e erro, todos eles são bastante fáceis de entender. A imprensa bastante documentação é muito bom. Além disso, você pode acessar os documentos de cada item selecionando o ponto de interrogação ao passar o mouse sobre o item no gatilho ou no painel de respostas. Então podemos ir saltar aqui. E isso me levou direto para a documentação do salto. Então agora você deve ter uma compreensão básica do modelo de conceito e como objetos, gatilhos e respostas funcionam juntos. Na próxima palestra, aplicaremos algumas das teorias que aprendemos aqui. Comece a construir o aplicativo de descanso do nosso planeta. 10. Criando sua primeira interação: Se você está acompanhando, abra seu arquivo anterior com seus gráficos de importação. Caso contrário, você pode baixar o arquivo inicial a partir deste tutorial. Ok, então a primeira coisa que vamos fazer é selecionar CTA e adicionar um gatilho de toque. E agora vamos adicionar uma resposta chamada Jump. Então salto é uma resposta que permite a transição de uma cena para outra. Então saltamos selecionado, vamos selecionar como C, e vamos escolher login. E vocês podem ver aqui que temos algumas transições pré-construídas que podemos usar. Então nós temos fade, POP, deslizar para dentro, deslizar para fora e virar. Para esta primeira transição, vamos usar “fade”. E essa é a nossa primeira interação criada. Então foi fácil, não foi? Ok? Então, vamos conectar nossa tela de login à tela inicial. Se você quer pausar o vídeo e ter um objetivo para você, faça isso agora. Ok, se você teve uma chance de ligar a segunda tela para cima, eu espero que tenha corrido bem. Deixa-me só apanhar-te e fazê-lo também. Então eu vou selecionar o botão Continuar no login para tem que ir para o nosso login parece. Então vamos agora continuar botão. Vou adicionar outro gatilho de abas. Como antes. Vou adicionar uma resposta de salto. E desta vez eu vou selecionar a tela inicial. E vamos manter este como um desvanecimento também. Certo, então vamos testar isso. Primeiro de tudo, precisamos ter certeza de que nosso arquivo está na cena inicial antes de entrarmos em prévias de S, clique duas vezes na equipe. Pré-visualização. E vamos acertar o login. Boa transição de desvanecimento em nossa tela de login. E depois vamos bater em Continuar. E um bom desvanecimento na nossa tela inicial. Ótimo, então agora conectamos as três telas usando alguns gatilhos básicos e respostas. Em seguida, vamos criar uma entrada de texto real e estamos ansiosos para vê-lo lá. 11. Criando um formulário de login: Ei, bem-vindo de volta. Neste vídeo, vamos criar um formulário de login de trabalho. Para fazer isso, vamos usar entradas de texto especiais prettify, o que nos permite digitar imposto real usando o teclado nativo. Certo, então vamos ter certeza de que você está na cena do login. Se você não o fez, se você não tem acompanhado, você pode baixar um arquivo Python iniciante. Então você pode acompanhar. Então a primeira coisa que vamos fazer é arrastar uma entrada de texto. Vamos criar entrada de texto aqui a partir do menu de impostos. E queríamos estilizar este SAT de entrada reflete nosso design aqui. Então a primeira coisa que vamos fazer é definir o tamanho para ser o mesmo tamanho. Então nós verificamos aqui é 343 por 48. Então isso é feito o mesmo. Certo, e vamos querer curvar as curvas. Então vamos definir os cantos do raio. Isto achatado. Então vamos definir o raio para 24. E vamos definir o preenchimento de fundo da entrada para branco. Ok, então nós também queremos combinar este estofamento. Então vamos adicionar um pouco de estofamento à esquerda. E vamos adicionar um pouco de estofamento. É quando C e eu vou definir a fonte vai mudar o polegar. Você pode usar o que quiser. E eu vou usar os sons do Museo, 516 pixels de tamanho. E nós vamos mudar o, aqui é onde ele diz entrada ponto-ponto. Este é o texto do espaço reservado. Então eu vou mudar a cor disso. Então eu vou encontrar texto de espaço reservado. E eu vou mudar isso para sete. Ok, então como você pode ver agora, que entre cada um remove, vamos nos livrar dessa fronteira. Então, vou desmarcar isso. Essa era a borda cinza original. Está bem. Então isso parece bom. Vamos mover a posição das vans logo acima do campo de e-mail. E eu quero alterar o texto do espaço reservado. Então eu vou mudar isso para e-mail. Está bem? E vamos mudar o nome desta entrada, e-mail. Entrada. Ok, então isso é duplicar isso. Então, Comando ou Controle D. E vamos nomear essa senha. E vou posicionar isso sobre o campo de senha. Mas também vou mudar a ordem dentro do painel de camadas. Ok, então isso mudou o texto do espaço reservado para senha. E se deslocarmos para baixo até as opções do teclado aqui, que possamos alterar o tipo de teclado para um número de teclados. Então, por padrão, ele usa o teclado fiscal onde temos URL, e-mail, número, texto e senha e número senha. E vamos mudar o teclado para senha de imposto. Ok, então, na verdade, se eu voltar para o meu campo de entrada de e-mail, eu também vou mudar esse teclado para e-mail. E eu só vou nos dar o símbolo do aplicativo no teclado. Ok, então isso é apenas testar isso rapidamente, ver o que temos. Então, se eu tocar no e-mail, você pode ver agora um teclado aparece. Agora este teclado aqui em pré-visualização não é um teclado real. Isso é apenas para mostrar que a funcionalidade do teclado está funcionando. Mas se isso estivesse conectado a um dispositivo real, você teria um teclado funcionando de verdade. Quando estiver, quando estiver a testar na pré-visualização, poderá continuar a utilizar o teclado real que está ligado ao computador. Você simplesmente não pode digitar ou tocar em nenhuma dessas teclas dentro da janela de visualização, essa rede. Então, se eu puder digitar no meu teclado aqui e você pode ver que eu estou recebendo tudo o que eu preciso. Então eu digo meu e-mail e se eu digitar senha, se eu começar a digitar, você verá que eu vou obter os pontos de senha porque escolhemos a senha de imposto como o, como o tipo de teclado. Ótimo, então agora substituímos com sucesso nosso TextField gráfico, temos reais interativos. Assim, você pode ver quando tocamos em qualquer um desses campos, o teclado aparece e obscurece nosso botão Continuar. E então vamos lidar com isso de duas maneiras. Primeiro, vamos fazer o botão ir funcionar para que quando tivemos, quando tocamos , navegamos para a tela inicial. Então vamos fazer isso agora. Então vamos adicionar outro gatilho e vai ser um gatilho de retorno. E na lista suspensa de camadas, vamos escolher o campo de senha, entrada de senha. E porque estamos efetivamente usando a mesma transição que já configuramos sem capturar, e vamos apenas copiar essa resposta de salto. Então Comando Z ou Controle Z, se suas janelas, e nós vamos colar isso. E nós testamos isso agora devemos navegar para a tela inicial. Então, vamos dar uma chance. Então, se eu tocar no meu campo de senha e, em seguida, apertar o botão de retorno, você pode ver que eu fiz a transição para a tela inicial. Ok, então isso é legal, mas nós ainda queremos tornar nosso botão visível como uma opção também. Então precisamos animar acima do teclado quando ele aparecer. A primeira coisa que precisamos fazer é acionar a animação quando um usuário está no campo de e-mail. Ok, então isso é movido os campos de texto juntos e agrupá-los. E isso vai colocá-los dentro de um recipiente. Podemos realmente remover como camadas de senha gráfica também. E vamos nomear este formulário de contêiner. Ok, então isso é abrir isso e selecione o campo de e-mail. E agora vamos adicionar um manipulador de gatilho de foco. A queda, nós temos que satisfaz, que é o que queremos. Está bem? Então isso é que um duns nós refletimos como se forma. E agora vamos adicionar uma resposta de movimento dentro do nosso gatilho de foco. Observe que nesse espaço temos nossa forma selecionada. Isso é melhor. Vou ajustar o fio para 3-20. Ok, então vamos testar isso. Então, quando nós pessoas no campo de e-mail, podemos ver que o nosso formulário se move para cima com boa aparência. Certo, então vamos voltar ao nosso protótipo. E isso é duplicar esse movimento. Então isso diz Comando Z ou Controle D. E desta vez vamos escolher o CTA principal, que é o nosso botão Continuar aqui embaixo. Vou definir isso como o alvo. E vamos definir o y para quatro 55. E isso é testar isso de novo. Então, selecionamos em nosso campo de e-mail, podemos ver que nosso formulário agora se ajusta para sentar-se acima do teclado. Está bem, fixe. Então, agora criamos nosso formulário de login. Por enquanto, está bem feito, mas vamos adicionar alguma lógica condicional em um vídeo posterior para fazê-lo funcionar de verdade. Então nós cobrimos algumas coisas muito legais já com entradas e anima-lo com base no foco de entrada. E o aplicativo já está começando a se sentir mais real. Torná-lo ainda mais real, porém, é experimentá-lo em um dispositivo real, que é o que estaremos fazendo no próximo vídeo para vê-lo lá. 12. Teste em dispositivos reais: Olá e bem-vindo de volta. Então, neste vídeo, eu só vou levá-lo através do aplicativo companheiro para protótipo superior, que você pode baixar para iOS e Android, respectivamente, é aplicativo gratuito e é um aplicativo de jogador. E esta é uma ótima maneira de testar seus protótipos em dispositivos, na verdade, é essencial para você também, e ser capaz de testar seus protótipos em dispositivos. Não posso enfatizar como é importante para testes no dispositivo. Obviamente depende. Também em vigia o seu prédio. Há algumas coisas que você precisará testar no dispositivo. E, na verdade, neste curso, vamos usar alguns recursos que são apenas dispositivos. Então coisas como nós vamos estar construindo um aplicativo de câmera e nós vamos estar usando feedback háptico mais tarde no curso. Então você vai precisar ser capaz de usar um dispositivo para experimentar isso. Então, como funciona com dispositivos? Então, se tivermos uma olhada aqui nesta área de menu aqui podemos ver que temos esta opção de dispositivo e temos esta opção Executar. Então você pode ver agora que o ícone do dispositivo é realmente verde. Então, se eu tocar nisso, você pode ver que meu iPhone está conectado. Sabemos que está conectado porque está em azul e é aquele pequeno ícone de jogo ao lado dele. E há algumas maneiras diferentes de conectar dispositivos. Então eu estou conectado via USB, então eu tenho um cabo USB conectado do meu computador ao meu telefone. Então essa é uma maneira de fazer isso. Você também pode se conectar via Wi-Fi. Você só precisa ter certeza de que o seu computador é o fogo selvagem e o wifi do seu telefone é o mesmo. E então você pode se conectar. Então você também pode, se você usar Wi-Fi e, em seguida, você pode, você pode digitalizar este código QR. E você pode acessar este código QR de dentro do fornecimento pro em que também irá poupar-lhe o problema de digitar o endereço IP do seu, do seu wifi. Assim, você garantirá que seus telefones estejam conectados em uma dessas opções. E então o botão executar basicamente envia um protótipo para o seu dispositivo. Então, ao contrário da pré-visualização, onde é meio automático. Então pré-visualização, se eu mostrar que aqui, nós temos isso também ônibus. Assim que eu fizer uma alteração no seu ambiente de três vai ser atualizado automaticamente na Pré-visualização. Não é assim que funciona para o dispositivo. Você vai ter que apertar o botão Executar. Você vai ter este pequeno som de carrilhão e você vai vê-lo carregar no seu dispositivo. E então você vai ser capaz de testar isso. Então nós vamos realmente dar uma olhada em nosso site host como ele está atualmente em nosso dispositivo. Então eu vou mudar para o nosso dispositivo agora. Então vocês podem ver aqui, agora estou vendo meu protótipo no meu, no meu dispositivo. Então eu vou apenas arrastar da parte inferior da tela para revelar o menu. Então temos algumas opções aqui dentro do player, que é o nome do aplicativo que você baixar para iOS e Android. E temos a capacidade de parar, temos a capacidade de reiniciar o protótipo e temos a capacidade de salvar. Então podemos salvar o protótipo no próprio dispositivo, o que é realmente útil se você tiver uma conexão de internet muito ruim, se você estiver fazendo alguns testes de usabilidade. Também temos uma base para mudar a velocidade do jogador e também podemos mudar a cena que estamos vendo. Então nós podemos, nós podemos fazer isso dentro do painel de controle. E se eu parar o protótipo aqui você pode ver que esta é a tela padrão que você verá. Onde você pode ver eu posso conectar via USB ou eu posso digitalizar o código QR. Você pode ver que estamos conectados via USB na parte inferior. Então, apenas para chamar sua atenção para a barra de abas na parte inferior. Então eu tenho a capacidade de acessar a Nuvem. Posso fazer login e ver meus protótipos que enviei para o Cloud. Tenho a pasta onde posso acessar os protótipos que salvei no meu dispositivo. Uma coisa que eu quero mostrar a vocês, que é muito, muito importante é o gerenciador de fontes aqui, que temos dentro das configurações gerais. E se eu clicar nisso, você pode ver o, Eu tenho certas fontes instaladas. Então, se você quiser usar a capacidade de tipo dinâmico dentro do Pro pi, que definitivamente será usado em vídeos futuros, você pode realmente baixar fontes personalizadas para o seu dispositivo. E você pode se certificar de que o protótipo renderiza corretamente. E isso é muito, muito útil. Há algo que não é suportado dentro da nuvem, dentro da web, a parte web da imprensa Aplicar. Mas você pode totalmente fazer aplicativo em dispositivos. E a maneira como você faz isso é desde que você possa compartilhar essas fontes com um aplicativo no seu telefone. Então, seja por e-mail ou por nuvem de escória ou, ou de qualquer outra forma, qualquer outro aplicativo onde você possa transferir esses arquivos para o seu telefone, você pode simplesmente compartilhá-los. Produzimos uma torta no menu Compartilhar e você pode baixá-la para o seu dispositivo. Ok, então vamos começar nosso protótipo apertando o botão play aqui. Ok, então eu estou no meu aplicativo, então eu estou indo apenas para a introdução do meu aplicativo. Vamos apertar o botão de login e eu vou apertar o botão continuar e isso me conectou em casa. Ok, então é assim que você visualiza seus protótipos em dispositivos. É essencial para muitos recursos dentro de um plano de PPO. Eu realmente encorajo você a testar seus protótipos em dispositivos desta maneira. E há alguns outros recursos dentro do aplicativo que você pode querer ler, como a capacidade de ativar e desativar dicas. Então, sim, é um aplicativo muito, muito bom e é uma ótima maneira de ver seus protótipos. Ok, então isso sobre encerra nosso vídeo para ver como você visualiza no dispositivo. E vejo-te no próximo vídeo. 13. Criando o photostream scrollable: Ei aí. Então, neste vídeo, vamos criar um fluxo de fotos roláveis. Então abra seu arquivo se você está seguindo junto. Caso contrário, há um arquivo estrela que você pode baixar. Então eu queria falar sobre contêineres. Portanto, existem três tipos de recipientes. Há um contêiner normal que é como um grupo. Há um contêiner rolável e há um contêiner de paginação, e você pode acessá-los neste menu aqui. Uma forma de aceder a eles. Mas principalmente você vai ser contêineres loucos por um grupo em camadas juntos. E há, há uma, há uma boa razão para isso. Então, se eu apenas criar um espaço em branco parece apenas por causa da demonstração. Então eu crio um contêiner a partir daqui. E é efetivamente uma caixa vazia. E você pode vê-lo aqui, meu painel Camadas. Então lute conosco para criar um retângulo. E eu vou apenas posicionar meu retângulo aqui. E vou arrastar isso para o contentor. Então você pode ver que quando eu passar o mouse sobre o meu contêiner, o limite do contêiner é, mas meu retângulo é uma fábrica fora desse contêiner. Então agora eu vou precisar posicionar manualmente meu retângulo na posição que eu quero. E o que você pode ver é que, se eu pegar meu contêiner, eu posso mover isso por aí. Você pode ver que os retângulos se movem com o recipiente. Se eu selecionar o retângulo, você pode ver isso se movendo separadamente. Mas há muito trabalho manual aqui para colocar tudo na posição correta. Se eu quiser ter certeza de que meus retângulos em um, em uma posição no canto superior esquerdo. E você pode ver aqui se eu selecionar Retângulo que a posição é relativa ao recipiente. Por isso, neste momento, se eu, deixa-me mudar isto para 00. Assim, você pode ver quando eu passar o mouse sobre que meu retângulo está inteiramente no canto superior esquerdo e sua posição é relativa ao recipiente. Se eu selecionar o contêiner, você pode ver que sua posição é um valor diferente porque é relativa à cena. Portanto, há essa relação pai-filho entre contêineres e objetos que são aninhados dentro de contêineres. Ok. Então essa é uma maneira de, de, de usar contêineres. Mas, como eu disse, vamos estar agrupando contêineres, o que é, é muito mais útil e mais fácil de obter coisas, talvez. Então, apenas como um exemplo disso. Então, se eu, se eu criar um retângulo e um oval, e eu vou apenas mudar selecionar aqueles, e eu vou agrupar eles juntos. Então esse é o comando G no controle do Mac G nas janelas. Você pode ver agora que eles foram colocados dentro de um recipiente. E você pode ver que o limite de contêineres corresponde exatamente à área que é ocupada pelos dois objetos. Portanto, esta é, de longe, uma maneira muito melhor de criar contêineres. E provavelmente você vai se encontrar fazendo rastreando contêineres dessa maneira mais frequentemente do que do outro jeito. Certo, então vamos nos livrar dessa cena. Vamos chamar a nossa atenção de volta para a cena em casa. E vamos fazer nosso fluxo de fotos. Então, nosso contêiner de fotos aqui com imagens de fiação. E nós vamos fazer isso em um contêiner rolável para que possamos rolar para cima e para baixo. A primeira coisa que vamos fazer é selecionar a sequência de fotos. E se rolarmos para baixo no painel Propriedades, você verá que há uma seção chamada paginação de rolagem. Então vamos selecionar rolagem. E isso agora transformou nosso contêiner normal em um contêiner de rolagem. E você pode dizer isso de algumas maneiras. Número um, você pode ver que os ícones mudam para essas duas pequenas setas dentro, que significa que é um contêiner de rolagem vertical. E também quando eu selecionei rolagem, você pode ver que eu tenho mais algumas opções que foram reveladas para mim. Então, ou seja, o terceiro, que é a direção do rolo, que padrão é vertical. Isso tende a ser a direção de rolagem mais popular. Por pode mudá-lo para horizontal com um desejo. E eu também tenho esta opção chamada sobre rolagem, que é o equilíbrio que você começa quando você rolar recipiente e você chegar ao final do recipiente e você meio que puxá-lo qualquer como preenche seu não elástico. Este é muito um padrão iOS. E você pode ter o que é alternado por padrão aqui você também pode desativá-lo se desejar. A opção final é esta posição de rolagem. Então eu posso definir a posição padrão dos meus contêineres ou ser algo diferente de 0. Vamos manter 0 por enquanto, mas é isso que é se você estiver, se estiver curioso. Ok. Então, no momento, então nós temos este contêiner de rolagem. Mas no momento, se eu apenas visualizar isso, para que você possa ver que eu não posso mesmo me mudar para cá. E isso porque temos esse grupo no topo é o grupo de dispositivos e molduras, que está efetivamente bloqueando nosso acesso ao fluxo de fotos. Então isso é algo a ter em mente se você está, se você está tentando rolar contêiner e não está rolando, então há uma boa chance de que há algo mais alto no painel de camadas que é Bloquear em que. Há algumas maneiras de lidar com isso. Ross, não precisamos desse grupo, então podemos deletar aqui. Mas eu só quero te mostrar outra maneira de lidar com o ar. Então, se eu quisesse manter este grupo, se eu o mantivesse selecionado. E aqui, na parte inferior do painel Propriedades, você verá que essa opção torna as camadas inferiores tocáveis. Então, se eu selecionar isso, o que é eficaz vai fazer, vai dizer ao meu cursor para ignorar este grupo, este recipiente, e todos os objetos dentro dele. Então eu vou ser capaz de efetivamente clicar através dele e chegar ao meu fluxo de fotos. Então, se nós apenas visualizar isso novamente, certo, então você pode agora ver que eu posso olhar de rolagem, eu posso rolar meu fluxo de fotos. Não exatamente por que um, mas pelo menos eu posso chegar a ele. E aqui você pode ver isso sobre a inação de rolagem. Ok, nós vamos realmente apagar este grupo, se não precisamos dele. Foi algo que veio do espessamento Ripple. Ok, e nós vamos voltar a nossa atenção de volta para o recipiente de rolagem do fluxo de fotos. Então, a maneira como você faz realmente rolar é que você precisa definir a área rolável. Então essa é a área visível. Então, para nós, áreas alveolares vão ser este tipo de área de telas de telefone celular. Então ele começa logo abaixo do slogan, mas queremos que ele termine logo acima da barra de abas aqui. Então, a maneira como fazemos isso é que nós só precisamos mudar o tamanho da caixa delimitadora do próprio contêiner de rolagem. Podemos apenas arrastar de baixo para aqui, colocá-la mais ou menos em sua posição. O único. Então isso parece bom. Então vamos pré-visualizar isso. Ok, então agora você pode ver que eu posso realmente rolar todo o caminho até o fundo. Mas todo tipo quando eu estou rolando como ele vai sob as categorias que eu queria, eu fui para efetivamente desaparecer quando ele vai sob os scripts gato. Então, como fazemos isso? Então o que vamos fazer é garantir nossos contêineres de rolagem do fluxo de fotos sejam selecionados novamente. E vamos voltar ao painel Propriedades. E vamos selecionar essa opção chamada clipes subcamadas. Então clipes acima camadas é efetivamente nós pesamos a maneira como nós mascarando processo pi. E você pode ver imediatamente ele é cortado o, o, o, o conteúdo da rolagem para a minha caixa delimitadora de rolagem. Então, se agora visualizarmos isso, podemos ver que estamos efetivamente cortados dentro disso, dentro desta janela. Parece bom. Mas agora eu realmente não gosto do jeito que é, está meio que vindo na tela. Eu queria tipo de imagens para estar debaixo da barra de abas. Só não quero que desapareçam debaixo das categorias. Então, vou estender isso de volta. Ok? E vamos pré-visualizar isso novamente. Ok, então isso está mais bonito, mas agora não posso rolar mais longe. E isso acontece porque a exibição de rolagem apenas rola até a profundidade máxima do conteúdo que está dentro. E os últimos objetos que eu tenho dentro do meu pergaminho consentimento ou essas duas imagens são? Então eu preciso fazer um pequeno hack para forçá-lo a rolar um pouco mais longe. Então vamos criar um retângulo. E vamos chamar esse pergaminho de “hack”. E vamos arrastar isso para o fluxo de fotos. Vou ficar sentado lá no fundo. E preciso posicionar isso. Então só para os lambdas e apenas para desclicar o sublattice para que eu possa ver o que estou fazendo. E eu só vou praticar até o fundo. Certo, então é só dar uma olhada nisso. Então precisamos descobrir qual é a distância. Então nós temos como barra de tabulação, que é 52. Então vamos fazer isso. Ok. Agora podemos ver um caso que parece bom. Isso é quase sempre caminhos. Mas não quero ver esta caixa cinzenta. Então eu vou voltar para esta caixa cinzenta e eu vou transformar a visibilidade para preencher a opacidade abaixo para 0. Então não podemos ver. Ok, vamos pré-visualizar isso uma última vez. Ok, então agora eu tenho a posição correta de rolagem e tudo parece bom. Doce. Agora temos um bom fluxo de fotos de rolagem. As visualizações de rolagem são a patente de workhorse para dispositivos móveis. E como você pode ver no pro upaya, é realmente fácil criá-los. Então é isso para este vídeo. Juntou-se a mim no próximo vídeo onde exploraremos o contêiner de paginação e construiremos uma visualização de página. Vejo você então. 14. Criando imagens entre visualizações detalhadas: Oi lá. Então, neste vídeo, vamos construir algumas funcionalidades de paging em nosso protótipo na tela inicial. Então nós temos esta categoria rolando guia no topo. Então, vamos permitir que os usuários sejam capazes de página entre d hoje tela e a tela recente. Ok, então para isso vamos precisar de um pouco mais de conteúdo. Então eu tenho outra página preparada no arquivo da figura. Então nós temos esta página inicial recente, que é praticamente o mesmo design, é apenas um conteúdo tão diferente extra para que possamos construir esse recurso. Então, porque não precisamos do resto dos gráficos, nós realmente precisamos desse fluxo de fotos. O que eu costumo fazer é criar uma nova cena no meu arquivo Py. E eu vou chamar isso de impulso. E este é apenas um lugar onde eu sou gráficos legais, que eu posso então extrair as várias peças que eu preciso. Certo, então vamos para Import Fichman. Basta deixar isso se conectar e nós vamos pegar nosso design recente de casa. Ok, então tudo o que realmente precisamos disso, este arquivo importante são os grupos de fotos do fluxo. Então vamos apenas copiar esse comando C no Mac ou Control C ou Windows. E vamos voltar para a cena do nosso lar. E nós vamos apenas colar isso. E eu vou deixar isso por enquanto, vai deixar isso lá. E vou ligar para esta página dois. E eu vou precisar fazer isso efetivamente o mesmo que nosso fluxo de fotos em muito Elaine Page 1. É um contêiner rolável e tudo isso. Então vamos fazer isso agora. Então nós só checamos como a página 1716, para que haja um 716 alto. E vamos precisar de um pouco de estofamento gráfico também. Então eu vou copiar isso e colar isso dentro, aqui. Mesma coisa. Ok, então precisamos transformar isso em um grupo de rolagem. Então, isso é rolar para baixo até nossa paginação e escolher rolar. E vamos definir os padrões aqui. Portanto, agora devemos ter efetivamente uma página de rolagem duplicada. Então precisamos compensar esses dois para o lado direito para não pagarmos ela sentiu o lado direito. Queremos que esteja apenas no limite da nossa tela. Portanto, sabemos que o nosso iPhone tem 375 largura. Então vamos mudar com a página dois selecionada. Vamos mudar a posição x 2375. Certo, então temos nossas páginas. Então o que precisamos fazer agora é que precisamos, de fato, ele ia reordenar essas páginas no topo. E selecionamos ambos e fazemos outro grupo. Então comando e controle, G, Mac e PC. Temos agora grupos são duas páginas neste outro contêiner. E porque temos grupos as páginas que o contêiner tem exatamente o mesmo tamanho que os dois grupos de contêineres que duas páginas de grupos. Então vamos pegar esse fluxo de fotos e vamos transformar isso em um recipiente de pintura. Então vamos para a mesma página de rolagem e, desta vez, escolhemos a paginação. E contêineres de paginação padrão para horizontal porque página pretende ser semana horizontal você pode usar paginação vertical também. E, de forma semelhante à maneira como os contêineres de rolagem funcionam, é a página é definida pela caixa delimitadora. Então, precisamos reduzir essa caixa delimitadora para que seja apenas o tamanho da largura da página de check-out de uma página. Podemos ver que é para 343. Então nós só queremos fazer nosso contêiner de paginação de fluxo de fotos o mesmo três para três. Ok, então você pode ver agora que herdou o mesmo limite. Ok, hora de anexar a esta pré-visualização de sucesso. E há uma chamada de julgamento. Então você pode ver que é paging, tem resistência anual que você começa com a paginação. Mas você pode ver que ele não está paging exatamente na posição correta, pois ainda podemos ver a borda de nossa FirstPage. E a razão para isso, temos essa sarjeta entre as duas páginas, mas estamos usando a largura do contêiner de paginação para definir quão longe, como próximas páginas da tela. Então, se nós apenas temos uma olhada rápida para baixo nas opções de paginação de rolagem, ele diz página por recipiente. E o nosso contentor é 343. Então é bipagem por três para três, mas precisamos levar a gasolina em conta. Então o que vamos fazer é selecionar nosso contêiner de paginação de fotos. E há esta página de opção pela qual vamos escolher a segunda opção que é personalizada. Então, podemos realmente definir uma largura personalizada. E eu sei que este costume com estes sp3 para levar em conta o GSA. Então eu vou digitar 360 dentro, dentro lá e nós vamos dar para fora no teste. Certo, agora podemos ver quando pagamos tudo na posição correta. Está bem, fixe. Então esse é o primeiro trabalho feito. A segunda coisa que queremos fazer é poder tocar nesses botões de categoria e alternar entre os dois. Então, queremos ser capazes de efetivamente o que eu faço este botão de reset um toque no botão no momento em que você pode ver nenhum desses trabalhos. E nós também queremos fazer essa rolagem é meio rolável. Então vamos fazer isso agora. Então primeiro vamos cortar o grupo de categorias. E temos que transformar isso em uma contenção de rolagem. Mas desta vez queremos que a direção de rolagem seja horizontal. Como antes, precisamos alterar a largura da caixa delimitadora. Então vamos reduzir a largura 2343 site corresponde à mesma largura que o nosso conteúdo. E se testarmos isso rapidamente, podemos ver que agora chamamos guia rolável. Está bem? Então, se abrirmos isso, queremos descobrir a razão dos Butters recentes e isso é, há um contêiner para a corrida. E o que queremos fazer é fazer a segunda bola. Então, vamos adicionar um gatilhos SAP, então certifique-se de que ele está selecionado aqui no último painel e adicione o gatilho de ataque. E mantendo a seleção recente, vamos adicionar uma resposta de cor. Então, as respostas de cores, como você pode imaginar, nos permitem mudar a cor das coisas. As respostas de cores funcionam apenas em objetos de perfil nativos. Então você não pode trazer um PNG ou, ou apenas um SVG e mudar a cor. Você tem que fazer alguns passos extras e alguns daqueles onde a aplicação de uma cor forma dois e um sub recipientes. Então, isso está tudo pronto para ir. E nós vamos apenas fazer isso uma cor particular. Então pegamos a referência que é 00064, e precisamos ter certeza que Phil tem 100, caso contrário trabalha aqui. Está bem? Então vamos testar isso rapidamente. Tos i. Quando tocamos, podemos ver que a forma da pílula mudou de cor, mas não podemos ver o texto. Então, se abrirmos nosso contêiner, podemos ver que temos o texto e são esses objetos de texto gráficos especiais. Então, não podemos fazer atualmente essa cor hexadecimal porque são esses objetos gráficos. Então precisamos converter em texto. Então vamos fazer isso por este toque neste botão aqui. E você pode ver agora que o ícone foi alterado e agora é texto real. Então, mantendo isso selecionado, vamos adicionar outra resposta de cor. E desta vez vamos mudar o texto para branco, certificando-se de que Phil está definido para 100. Vamos testar esse código para que possamos agora ver que temos saídas, hap, estado, conclui, mas quando o que aconteceu é livre, então Coruja hoje ainda está selecionado. Queremos fazer não selecionados fazer isso a seguir. Então o que vamos fazer realmente fácil, não podemos, você pode copiar partes inteiras de interações dentro do painel Trigger. Então ele vai selecionar este gatilho chapéu. E nós vamos apenas copiar isso. E vamos colá-lo. Então, nós duplicamos completamente. O gatilho de toque e todo o seu conteúdo. E de outra forma, deixa-me apagar isto. Não podemos selecionar e fazer o Comando D para duplicar aqui também. Ok, então este gatilho vai ser para o nosso botão de dois dias. Então vamos mudar o alvo para hoje. Então isso é apenas digitar palavras de pesquisa hoje. E podemos ver que temos duas opções que temos hoje, que é o contêiner e hoje devemos atacar. Então vamos escolher o contêiner. E vamos mudar o contêiner de hoje para hoje. E vamos mudar o processo recente. Então, para recente, precisamos de dois. Desculpe por hoje ter mudado hoje. Primeiro de tudo, os objetos de texto. E vamos, como fizemos antes, mudar o gráfico para texto. Os combates são uma espécie de resposta e vamos fazer os 100 brancos. Ok, então nós efetivamente duplicamos ambas as guias. Criamos ambas as nossas guias. Então, se eu tocar, reset vai mudar e se eu tocar hoje vai mudar. Mas como podemos ver, que ambos selecionados, então precisamos mudar o estado do outro. Então, quando selecionado recentemente, Hoje muda, muda de cor. Então, como vamos fazer isso? Nós só vamos mudar selecionar essas duas respostas de cores e temos uma cópia estes. E vamos colar diretamente lá dentro. E vamos mudar os alvos para os outros botões. Então aqui estamos mudando recentemente para azul e branco e agora vamos mudar hoje. Então nós vamos encontrar hoje, escolher o recipiente e vamos mudar isso para branco. E vamos selecionar a próxima resposta de cor. Vamos procurar por hoje. O texto. E temos que mudar isso para aquela flor. Então essa porcaria que o valor hexadecimal. E vamos aplicar isso aqui S certezas ao Comando D para duplicar esses dois em nosso segundo botão. E nós vamos fazer a mesma coisa para realmente nós vamos reverter estes e nós queremos recente, que precisa ser branco. E deixe-me um recente, os objetos de texto. E queremos mudar isso para o nosso azul. Ok, então isso dá esse teste. Então começamos hoje, podemos tocar nos recentes, agora, recentemente selecionados, e hoje não está selecionado porque alteramos as propriedades de cores. E podemos também porque criamos ambas as táticas como podemos tocar hoje. E, novamente, recente não está selecionado. Certo, então isso nos leva ao final deste vídeo. Então nós criamos esses dois gatilhos de toque. Criamos a capacidade de página, e no próximo vídeo, vamos ligar essas duas coisas. Então, quando você página aqui, você está selecionado guia vai mudar. E, da mesma forma, quando você selecionar seu hub aqui, sua página também será movida. Vejo vocês no próximo vídeo. 15. Criando abas com cadeia com cadeia: Então, neste vídeo, vamos estar conectando as guias de rolagem com um gatilho chamado cadeia. Então, quando deslizamos de um lugar para outro, queremos que a guia selecionada se mova. Há um pouco de complexidade aqui. Como podemos ver, esses rótulos têm lâmpadas e cores diferentes. Portanto, precisamos não só de transição, mudando seu Lemma, nós também precisamos lidar com a mudança da cor do rótulo também. Então a primeira coisa que vou fazer também, só para torná-lo um pouco mais dramático, vou reordenar algumas das categorias aqui. Então a primeira coisa que eu vou fazer e isso pode para obter a ordem no painel de camadas. A ordem correta. Eu gosto da minha camada ordenada para refletir hierarquicamente. Então, porque hoje é o primeiro item da lista, eu quero que ele esteja no topo. Então, vamos mover estes por aí. Então nós temos hoje, eu realmente quero colocar recomendado seguida só porque é uma palavra um pouco mais longa e vai torná-lo um pouco mais dramático. Funcionalidade que vamos adicionar aqui. Então, o próximo será recente. E então podemos deixar o resto como eles estão. Tão doce, salgado e frango. E quero procurar no fundo. Quero que fique por baixo. Só por uma razão específica para isso ter que ser assim. Ok, então isso tem que primeiro partes e a próxima parte nós só precisamos mudar visualmente recomendado em torno recente. Então eu só vou reposicionar estes mais ou menos. E eu posso selecionar tudo isso. E aqui eu posso apenas uniformemente espaçados para fora. Ok, isso é bom. Ok, então primeiro, precisamos ainda mover guia. Nós queremos que eles queremos o movimento da pílula para o máximo, para o movimento do recipiente de paginação como nós deslizá-lo também. Então, a primeira coisa que vamos fazer no entanto, é que só viemos dar a capacidade de mudar de abas quando nós, quando selecionamos com toque, certo? Ok, então a primeira coisa que vamos fazer é criar um retângulo de forma. E esta vai ser a nossa pílula. Então precisamos criar uma pílula gráfica. Então nós vamos fazer isso do mesmo tamanho que o nosso, como nossa pílula gráfica que nós já temos aqui, este recipiente. Então, vamos fazer o 7727. Vamos mudar o raio para 14. E vamos mudar a cor 00, 0-6 ou D, k. e vamos nomear esta ajuda. E nós vamos apenas mover isso para debaixo das duas primeiras guias. E queremos ter certeza que ele começa sua posição exatamente na mesma posição que hoje, que é 390390. Ok, isso é legal. Certo, então a próxima coisa que precisamos fazer é remover os campos desses dois contêineres. Então nós só precisamos deixar Hoje nós vamos enviar o preenchimento, não a opacidade da resposta preenchida 0. E vamos mudar, recomendar, recomendar que esteja preenchendo para 0 também. Está bem? Então, a próxima coisa que queremos fazer é duplicar. Torneira em recipientes, digamos mercadoria. E vamos movê-los para debaixo do gráfico da pílula. E vamos ligar para este hoje. E recomendou a gravidez hoje. Mas eu vou tocar para selecionar hit. Significa que é Hex é branco, então ambos os textos precisam ser por isso que é o primeiro é o que você quer? Por isso? Nós só precisamos mudar a cor selecionada recomendada, branca. E podemos ver aqui, na verdade, que recomendado não é um objeto de texto nativo ainda. Portanto, primeiro precisamos converter este texto. Isso então desbloqueia como ETC, para mudar de cor, que podemos mudar para esperar. Está bem. Voltando para os dois recipientes debaixo da pílula. Então estes dois precisam ser o azul. Então, ao nosso lado hoje, vamos fazer esse 00064. E podemos copiar isso. E para recomendado, novamente, precisamos converter isso em texto. E isso já tem a cor da manivela, então isso é bom. Ok, tudo parece um pouco estranho e só precisamos fazer mais uma coisa para fazer isso mudar magicamente. Então vamos selecionar a pílula e vamos escolher essa opção no painel Propriedades na parte inferior há um obstáculo usa massa, então vamos selecionar isso. Ok, então você pode ver agora que os dois objetos, os dois recipientes acima da pílula têm uma pequena flecha baseada em CCS em massa. Então, e os dois por baixo de tudo por baixo não é massa. Então, se eu pegar o gráfico da pílula e eu apenas movê-lo, você pode ver que eu obtê-lo mudando magicamente de azul para branco. Ok, então isso é ordenado a mudança de cor. Em seguida, precisamos conectar as guias ao contêiner de paginação. Para isso, vamos usar uma poderosa cadeia de chamadas de gatilho. Cadeia nos permite Cannes qualquer faixa de valor de propriedade para qualquer outro valor proxy certo? Aqui vamos usar o intervalo de rolagem do recipiente de paginação para mover a pílula. Mas agora só vou mover o pilar. Lembre-se que o segundo rótulo é muito mais longo do que o primeiro. Então vamos usar a mudança e transformar o lema. Certo, então vamos selecionar a sequência de fotos. Vou adicionar um gatilho de corrente. E vamos definir a origem das duas torneiras apenas para o topo do centro coincidir com Hill. Pode ler o valor certo? Porque estamos efetivamente indo para transformar a partir desta pílula de hoje para a pílula recomendada. Ok, então vamos deixar a pílula e vamos adicionar uma resposta à corrente. Então, quando você olhar para a corrente, você verá que ela é composta de seis caixas. E certamente para a resposta de humor. Assim, as outras respostas seriam diferentes para que as duas primeiras caixas fossem a amplitude de movimento. Então, porque estamos mudando para o contêiner de paginação, a quantidade de distância de uma página para a outra é 360. Então vamos de 0 a 360. Então esse é o nosso valor inicial. Então esse é o valor do nosso, do nosso rolou nosso distribuidor de focos. Você pode ver acima aqui, temos este infográfico de mapeamento, que se relaciona diretamente com os dois conjuntos de caixas. Ok, então isso é apenas verificar os valores das pílulas de hoje. Então, quando estamos procurando a posição, a posição central. Então nos dá um machado de 77,5 para a estrela. Então estamos removendo os atos. Podemos ignorar estas caixas brancas. Então vamos adicionar 77,5 aqui. E então agora precisamos verificar a coordenada x caixa recomendada, que é 204. Quando bombearmos esse valor aqui. Ok, então isso é teste isso. Está bem? Então podemos ver agora à medida que envelhecemos nosso conteúdo, mas como você pode ver, ainda precisamos lidar com o comprimento da pílula. Hoje. A palavra é muito mais curta do que o trabalho recomendado. Ok, então vamos voltar ao nosso gatilho de corrente. E nós vamos adicionar uma resposta escalar. E vamos definir, garantir que definimos a camada de travesseiro como alvo. E novamente, vamos precisar de um alcance de 0 a 360. Então estamos usando a mesma amplitude de movimento ou o fluxo de fotos para mudar o tamanho da pílula. Tão bem começando escala. Então vamos checar hoje. Então a largura é 77 aqui. E a pílula recomendada, que é 126. Ok, vamos testar isso. Então, à medida que me movemos página, podemos ver agora que não só faz nossos movimentos de subida, mas ele escala para o tamanho correto. Então eu posso encapsular a guia recomendada e, em seguida, esfriar. Então, agora temos conectado com sucesso nossa página e guias juntos e criar uma animação legal entre a fita. Se voltarmos para tocar em abas, podemos ver que as coisas estão um pouco quebradas. E isso é porque mudamos a transição de tabulação. No próximo vídeo, vamos consertar isso para ver você lá. 16. Como selecionar abas para mover entre páginas: Oi lá. Então, neste vídeo, vamos completar nossa rolagem e paginação conectando nossas guias para mover as páginas. Ninguém será capaz de deslizar a tela, mas eles também terão a capacidade de tocar nas guias. Ok, então a primeira coisa que vamos fazer é selecionar nossa primeira guia e vamos mudar isso para recomendado. Então, em seguida, vamos remover todas as respostas de cor. Nós não precisamos mais disso porque agora criamos nossa nova animação de colina. E vamos selecionar a pílula. E vamos adicionar uma resposta ao movimento. Ok, então isso é definir o x para 204. E agora vamos adicionar uma resposta cicatriz para que possamos escalar a pílula, bem como avançar. E vamos definir a largura aqui, 2146. Ok, isso é legal. Isso está funcionando como esperado. Ok, então vamos passar para a nossa próxima conta. E vamos selecionar o próximo gatilho de salto. E vamos mudar esse alvo hoje. E novamente como antes, vamos remover todas as respostas de cor. Ok? Porque a nossa animação, nós praticamente a mesma que a primeira. Podemos copiar essa escala de mudanças. Assim como comando C ou controle C ou Windows. E se selecionarmos guia, podemos colá-lo em. E isso vai para o movimento e queremos mudar os valores. Queremos mudar a mudança para escala de mudança de 77,5 amperes também. Ok, vamos testar isso. Co. Então, agora duplicamos o design de movimento quando acontece em nossas guias. Então agora precisamos conectar como guias para o comportamento de rolagem. Ok, então nós vamos com a minha primeira guia, e eu vou adicionar uma resposta de rolagem aqui em baixo. E precisamos ter certeza de que escolhemos o fluxo de fotos como alvo. Porque é isso que vamos rolar. E nós vamos rolar para três sextos. Ok, então vamos copiar este pergaminho e colá-lo em nossos segundos HAP. E desta vez vamos alterar o valor de rolagem para 0. Ok, veja se isso funciona. Então, como aconteceu recomendado, minha visão de rolagem agora páginas ele de volta. E se eu movê-lo de fato paging conteúdo ágil, teremos nossa animação anterior também. Incrível. Nós completamos conectado como guias. Eu só quero fazer um pouco de limpeza. Então vamos renomear alguns de nossos gatilhos para que seja um pouco mais fácil identificar o que é uma lei. Então, vamos clicar duas vezes na primeira guia e renomear o toque recomendado. Podemos chamar a segunda conta hoje. E finalmente, vamos renomear esta cadeia para página para o SRI. Acho que terminamos. Então esta seção é muito abordada e espero que você esteja tendo uma noção real de como a sonda funciona bem como estar um pouco mais confortável com o modelo conceito. É realmente um pouco como construir Lego é um M. Talvez seja por isso que é tão divertido. Se você quiser praticar um pouco mais, tente criar uma terceira página e torná-la outra guia ativa. Isso ficará interessado, pois você precisará descobrir como os bots de rolagem também têm para que a guia ativa esteja na tela. Então isso nos leva ao final desta seção. Espero que esteja gostando até agora. Faça uma pausa, tome uma xícara de chá e junte-se a mim na próxima seção onde aprenderemos tudo sobre como criar um trabalho na barra de abas que permite navegar entre cenas. Vejo você lá. 17. Construindo a barra de guias - a configuração: Oi lá. E neste vídeo, vamos estar configurando nossa barra de guias para que nossos achatados felizes que temos aqui na parte inferior da tela. Então nós temos alguns gráficos novos, alguns novos fluxos que vamos importar. Primeiro, antes de fazermos qualquer coisa importante, vamos, vamos configurar a nossa barra de abas aqui na tela inicial. E se barra de abas, você verá que temos essa torneira flutuante, nosso grupo, e temos dois subgrupos. Um chamado selecionado, e vamos chamá-lo de “não selecionado”. E aqui dentro, temos os Estados de todos os nossos itens de guia. Certo, então a primeira coisa que vou fazer é reorganizar isso. Então as casas chamaram um tata efetivamente, estamos revertendo a ordem destes para tornar um pouco mais fácil. E faremos isso para não selecionados também. Isso é algo que eu gosto de fazer. Eu gosto de ter o item mais à esquerda no meu design para ser o item mais alto, minhas camadas no meu painel de linhagem. Está bem, fixe. Então, já estamos na tela inicial, então queremos primeiro tornar nosso item da guia inicial seletivo. Então tudo o que precisamos fazer é ir e selecionar um grupo e mudar, selecionar os outros três. E nós só vamos baixar a opacidade para 0. Então isso vai revelar nosso estado não selecionado, que está bem embaixo. Então o azul escuro é uma patente seletiva. Estes estão desselecionados? Ok, então vamos para C e vamos criar mais três cenas. E vamos nomear esses Favoritos, atualizações e perfil. E isso só moveu o impulso visto humilhante. Está bem, fixe. Então vamos empregar nossos gráficos. Então, se formos para impulso sigma, sigma para a duração deste tutorial, e eu vou escolher o meu, então apenas certifique-se de que você tem o seu arquivo aberto em segundo plano, seja usando o SketchUp. E eu vou escolher a torta favorita é como minha primeira importação. Deixe todos os, este é o padrão. Vamos fazer o mesmo com as outras duas telas. E finalmente, Profile. Ótima. Certo, então vamos voltar para casa. E o que vamos fazer agora é conectá-los todos juntos. Certo, então vamos selecionar nossos corações desselecionados. E vamos adicionar um gatilho de toque. E vamos adicionar uma resposta conjunta. E vamos selecionar nossa cena favorita. Ok, e vamos repetir isso para as outras duas guias então vamos bater equilíbrio para que Ted em uma resposta gráfico de disparo toque salte para atualizações. E, em seguida, selecione nosso usuário desselecionado. Toque em resposta. Desculpe, toque em gatilho, John respondentes e selecione nosso perfil visto. Ok, então vamos pré-visualizar isso e testar isso. Então você pode ver que nada está funcionando, então algo está acontecendo aqui. Então vamos tentar descobrir e o que está ocorrendo. Então, se voltarmos para o nosso grupo, podemos ver aqui que o grupo selecionado está realmente sentado acima do grupo não selecionado e é ocupado a mesma quantidade de espaço que está efetivamente sobrepondo o grupo não selecionado porque isso, este grupo selecionado tem uma opacidade de 100, mesmo que ele tenha um preenchimento de 0, ele é efetivamente tocável, o que significa que ele está bloqueando o acesso para desmarcá-lo abaixo. Felizmente, há uma maneira muito fácil de permitir que os itens do grupo não selecionados sejam tocáveis. Então, com o grupo selecionado, selecionado, vamos rolar para baixo até a parte inferior, o painel proxies e vamos escolher isso, tornar as camadas inferiores tocáveis. Vamos marcar essa caixa. E o que isso vai fazer que irá efetivamente ignorar este grupo e permitir-nos tocar os clareadores por baixo. Então esse é o nosso teste. Então agora você pode ver que eu posso chegar ao meu, meu gatilho e tudo está funcionando como planejado. Então, obviamente, precisamos aplicar nossa torneira para o álcool tem b2 para o outro parece. Está bem. Antes de fazermos isso, vamos apenas nomear o nosso nome, nosso grupo, o nosso nome, os nossos gatilhos. Então, vamos ser chamados de favoritos do “S tap”. Este vai ser atualizações de toque. A gentileza não era para ser grampeado no perfil. E então nós vamos apenas mudar selecionar todos estes três e nós vamos apenas comandar G, controlar G no Windows para agrupar estes juntos. E vamos chamar essa barra de tabulação. Então eu vou fazer agora é nós vamos aplicar fora, ter br para todos os outros, os outros três mesmos. Então, isso é selecionar os pecados de saída têm br no painel Camadas. E vamos fazer uma cópia. E vamos mudar para a nossa cena favorita. E em vez de apenas dar este posicionamento existente tem, em vez de apenas colá-los, vamos usar isso. Peças de interação. E o que isso vai fazer é colar apenas nossos gráficos, mas nossos gatilhos e respostas também. Então eles são lanche no tribunal para que você possa ver os descarregamentos que a barra de guias está aqui. Também sou toda nossa verdadeira porque as respostas também estão aqui. Mas você vai notar que há um item laranja. Então, quando você se deparar com qualquer, Aqui está laranja no pro pi no painel Gatilhos. Significa que falta um pouco de informação que não vai funcionar. Você precisa fazer alguma coisa. E no caso disso, é a resposta conjunta vai definir para saltar para favoritos foram, obviamente, na cena favorita. Então não podemos, não podemos saltar para as esmolas Siemer e é por isso que está quebrado porque não mostra a cena. Estamos em leilões no menu suspenso. Mas tudo bem porque nós realmente queremos mudar isso para casa de qualquer maneira. Então, vamos renomear isso para tocar em Início. E vamos escolher a casa sem seleção. E nós vamos definir uma resposta conjunta Omega e eu definir isso para saltar para o código. Atualizações vêm perfil deve ser bom. Ok, então isso é apenas saltar de volta para casa. E nós vamos fazer este teste para ter certeza que isso não está funcionando corretamente. Então, começamos sobre como selecionamos favoritos. Nós vamos aqui e podemos ver que nós esquecemos de mudar o Cisco e fazer isso agora. Então ele vai abrir a barra de chapéu lugares e nós vamos reduzir a capacidade do item selecionado para casa. E vamos aumentar a capacidade do item selecionado do coração porque estamos agora nessa cena. E assim você pode ver agora que é isso que parece correto. Então esse é o botão Test mais uma vez. Volte para casa. Pré-visualização. Então, correndo para casa, batemos em favoritos. Agora selecionamos favoritos e agora podemos voltar para casa. Ok, então isso é efetivamente trabalhar, certo? Então, só precisamos aplicar isso ao outro. Se você quiser pausar o vídeo e ir e fazer isso você mesmo, por favor, faça isso agora. E eu te alcanço em um minuto. Certo, então se você pausar o vídeo, espero que tudo seja bom para você. Deixe-me falar com você por uma atualização no meu arquivo para corresponder a esses. Então, eu só vou para a minha cena favorita. E eu vou copiar minhas atualizações da barra de abas. Vou remover as partes da interação do paciente da barra de abas. Na verdade, há um atalho Command Shift B que você pode usar. Tipo de uma mudança atualiza para Favoritos e dormiu os favoritos padrão não selecionado selecionado. E vamos saltar para os Favoritos. E então eu preciso mudar meu, meu estado para HA, torna-se 0 e nós só queremos chegar a esse 1000. Parece bom. Certo, então é isso. Faça isso até a cena final. Na verdade, deixe-me copiar esta barra de abas novamente. Você não tem que manter hop em uma barra de abas exatamente como eu faço isso, mas você ainda pode usar o primeiro, desde todas as suas guias coincidam com a estrutura do que deve ser bom. Mas é por isso que eu faço isso. Apenas uma espécie de aliviar sistema de agradecimento apresenta como Paso comercial FV. E eu só vou mudar de perfil para como escolher. Vou selecionar Atualizações. Val agora está balanceado selecionado, selecione atualizações. E, finalmente, só precisamos mudar os estados selecionados pelo poder. Então arco agora vai ser desselecionado e usuário vai ser selecionado. Certo, então é isso. Volte para casa e faça um teste rápido. Então corra para casa. Podemos navegar para favoritos, podemos navegar para atualizações e podemos navegar para nossa seção de perfil. Legal. Por isso, imprimimos a navegação básica de guias para o nosso aplicativo. Com sorte, você pode ver como isso é fácil. Onde ele foi habilitado? Estamos permitindo que seja mais fácil porque estamos usando cenas e estamos usando a capacidade de alternar entre cenas para apenas compartimentar nosso protótipo, além de facilitar a criação de nossa barra de guias. Então espero que eu vou vê-lo no próximo vídeo onde vamos criar uma tela de detalhes da imagem. E vamos configurar a capacidade de navegar para trás e cair daquela tela de detalhes. Voltar ao nosso fluxo de fotos ListView. 18. Navegação personalizada à tela detalhada: Então, no vídeo anterior, aprendemos como criar navegação entre cenas. Neste vídeo, vamos aprender a navegar dentro de uma cena. Então a primeira coisa que precisamos fazer é apenas ir para nossas importações e apenas remover tudo da cabeça é excluir, excluir isso fora. E nós vamos para o nosso arquivo Fema ou Scatchard por usar este catchword dvx, dy. E vamos importar o Al-Din diz-lhe. Está bem, fixe. Vamos selecionar o conter os grupos e o grupo de contêiner geral chamado DES como cartão. E nós vamos apenas verificar a caixa de clipe sublattice para que possamos cortar qualquer uma das extremidades ao redor da fronteira. E vamos copiar este grupo. Mude para a nossa tela inicial. E nós vamos apenas colá-lo. Vamos reduzir o C2 passado deles é 0. E nós também descarta seu chapéu, este pequeno ícone à direita da camada de cartão de uivo DES. E isso é só porque quando trabalhamos nisso, vamos, vamos precisar chegar aos objetos por baixo. E mesmo que os carros diesel opacidade 0 ainda vai estar nos bloqueando quando estamos trabalhando no ambiente de criação. Então só ele um pequeno ícone de I, apenas alturas. Ele pode ser dobrado a partir da montagem, pode clicar através de itens são lineares. Então, isso é fixe. Vamos usar este ícone de Harangue como alvo para mostrar que são molas e descobrir isso. E temos que ter um gatilho de torneira. Grite isso de novo. E vamos adicionar uma opacidade. E vamos aumentar a capacidade para 100. Acho que tem pessoal que funciona em código. Então eu toquei na minha imagem Harangue e eu revelei a saúde do D. Você pode ver aqui nós podemos ver a área embaixo da tela embaixo que está olhando para MSC aplicativos fixos como código de volta para a nossa cena. Retângulo extraoral. E queremos fazer o cuidado exatamente do mesmo tamanho que a tela. Então, uma pequena dica aqui, e ela pode ir para as entradas de tamanho e nós podemos apenas digitar um 100% em ambos. E vai funcionar como, qual é o tamanho real da nossa cena e torná-la um tamanho certo. Ok, vamos mudar essa cor de preenchimento. Vou mudar esses dois para 1999. E eu vou mudar o nome de Bg para o fundo. Essa é a posição por baixo que estes seguraram grupo. E vamos agrupar os dois juntos. E eu vou renomear essa exibição de contêiner e detalhes. Ok, então agora nós mudamos o alvo da capacidade vai precisar ir e editar nosso gatilho e resposta. Então isso é mudanças de DES, como cartões detalhes. E nós só precisamos brincar com as opacidades desses, desses dois grupos. Então, para estes cartões de uivo, queremos que a capacidade seja 104. O novo grupo de contêineres ajuda você. Queremos que seja 0. Então ele está mudando as necessidades porque o grupo recipiente, que é agora estes saúde você quando que 0, tudo dentro dele será 0 também. Igualmente, quando queremos mostrar esse ponto de vista, queríamos testar aumentar o seu pastoso destes 100 de saúde enormes. Então, se o Cobb detalhado ainda estivesse em 0, ainda não apareceria. Então precisamos ter certeza de que isso já está em 100. Certo, vamos testar isso. Vamos nos certificar de que nosso truque está funcionando corretamente. Está bem, isso parece bom. Em seguida, precisamos iniciar a navegação traseira. Ok, então isso é apenas trazer nossa capacidade de visualização de detalhes para 100 para que possamos trabalhar com isso. Temos de nos lembrar de recuar quando formos testar. E nós vamos selecionar este botão voltar aqui. E vamos adicionar um gatilho de tabulação. Ok, vamos copiar esta opacidade do gatilho anterior e colar no nosso novo gatilho aqui. E vamos definir esta opacidade para 0. Certo, então vamos voltar a essa saúde você e voltar a zeros. Terminamos de trabalhar com ele. E nós vamos apenas testar, testar para ver se nossas interações nas costas estão funcionando corretamente. Então, nós tocamos na imagem Moraine para abrir a visualização detalhada, e nós tocamos no botão Voltar para fechá-la. Lá você tem navegação básica dentro de uma cena. A próxima coisa de volta para a animação inversa, nós apenas fizemos. Usamos um pastoso, mas poderíamos ter usado outra coisa. Você se lembra do que é útil para definir objetos de volta ao seu estado original. No entanto, isso mesmo, a resposta de reset. Então vamos mudar a opacidade para a resposta de reset agora. Então isso é apenas adicionar um reset. Para redefinir que estes mais saudáveis que já está selecionado, isso é agradável e útil cair e eu vou apenas remover esta opacidade. Ok, isso é só checar novamente. Isso funcionará para abrirmos e fecharmos. Você pode estar se perguntando qual é o benefício do reset sobre a inversão da opacidade. Ou, neste caso, para ser honesto, a resposta não é muito. Mas se eu começar a adicionar mais animação quando a exibição é aberta, reset sempre definirá todos os objetos de volta ao seu estado padrão. Vamos explorar isso mais na seção de movimento. Ok, então isso encerra tudo para este vídeo. Em seguida, vamos adicionar um pouco de navegação aos nossos scripts de login. Então vemo-nos lá. 19. Adição ao login: Então eu só quero revisitar os entrevistados do salto em um pouco mais de detalhes. Para explorar isso, vamos adicionar alguma navegação entre os dois primeiros lugares. Então vamos para o nosso fluxo de entrada, e nós apenas viemos para copiar a espinha dorsal aqui. Vamos entrar e colá-lo. Agora, vamos para o início C. Então nós temos essa resposta de salto que está apenas definida para desaparecer para dar a isso um pouco mais de uma progressão alimentador que é alterada para transição para deslizar. E vamos deixar a transição para a direita para a esquerda. Certo, vamos voltar para a cena do login. E que dormiu como botão Voltar. E vamos adicionar um gatilho de tabulação. E a isso vamos adicionar outra resposta ao salto. Certo, então queremos que esse botão volte para a cena anterior. E se nós, se abrirmos este seleto vendo menu suspenso, podemos ver todas as nossas cenas, mas também podemos ver este salto opcionais anteriormente mostrado o mesmo. E isso é muito útil se você tem várias cenas como alvos e você não sabe, você não vai saber de qual deles o usuário veio. Você pode usar mostrado anteriormente mesmo. Então vamos usar esse aqui. E nós vamos escolher uma transição de deslize para fora. E vamos escolhê-lo para ir da esquerda para a direita. Então, novamente, temos essa continuidade da animação. Ok? A coisa sobre mostrado anteriormente sênior só funciona quando você testar seu protótipo da cena anterior porque ele precisa lembrar que o histórico de ações. Então vamos navegar de volta para o nosso início C e vamos bater no teste anterior. Então, se eu pressionar o login agora, eu venho para a minha tela de login. E se eu apertar o botão Voltar, navega de volta para a minha cena anterior. Certo, então isso nos traz o fim da seção de navegação. Na próxima seção, vamos aprender tudo sobre as capacidades de movimento dos antecessores. Então vemo-nos lá. 20. Adição de uma animação à barra à guia: Neste vídeo, vamos criar uma pequena animação quando você navegar entre cenas usando a barra de abas. Então eu vou apenas fazer uma demonstração para você aqui agora. Então, quando eu tocar e tocar no coração, e você pode ver que há uma pequena animação de salto entre esses dois. Está bem? Então o Sappho está usando cenas para navegação. Então precisamos de uma maneira de acionar automaticamente uma animação quando a semente é carregada. E para isso, vamos usar o gatilho estelar. Então vamos para a nossa tela inicial. E só precisamos que as mãos dele foram atingidas. Está bem. E vamos adicionar um gatilho de parada. Nós meio que adicionamos uma resposta em escala. E vamos definir este Haag é Lar selecionado. Vamos apenas dar uma olhada no Lar selecionado. Queremos que a nossa animação quando salta para saltar dos pontos centrais. Então precisamos ter certeza de que nossa origem em nosso grupo homeostático é enviada para censura. Caso contrário, ele vai usar essa origem como o ponto da escala, levantando-se ou diminuindo. Surge à esquerda e vai animar a partir da esquerda, o que é mais que queremos. Certo, então vamos voltar à nossa resposta em escala. Então temos que pesar a balança. Podemos escalar para um tamanho específico ou podemos escalar por um fator, que efetivamente é uma porcentagem. Então, vamos selecionar o fator. A próxima coisa que precisamos considerar é se escalamos para um valor específico ou escala em uma determinada quantidade. Vou adicionar um 122 aqui. Então eu vou escalar para uma quantidade específica. Usar Gao Bi é puramente uma preferência. Eu acho que porque eu estou passando por um valor literal muito específico, eu sinto escala para. É um pouco mais compreensível, mas sinta-se livre para ter um jogo ao redor com isso. Ok, vamos testar isso e ver como nossa primeira parte de animação se parece. Então, eu só vou apertar atualizar aqui se você apenas se concentrar no ícone de casa. Então você pode ver que há um pequeno salto lá. Então essa é a primeira metade da animação. Ok, então você pode, muito difícil de ver, mas você pode notar que a escala acelera e depois diminui. E isso ocorre porque ele tem um ajuste de dispositivo de curva de atenuação por padrão. E a curva de atenuação que ele tem por padrão é facilidade de entrada e facilidade de saída. Então, ter flexibilização adiciona um campos mais naturais quando objetos e sonda eu tenho alguns para escolher. Existem muitas curvas de atenuação diferentes ou você pode selecionar. Então você tem no início, você tem linear. Então isso não tem nenhuma mudança de velocidade, é um completamente Has, ele diz uma animação muito linear. Então é muito plana a partir de uma animação, mas é ótimo para a animação em loop hoje realmente gostaria de diminuir a velocidade ou acelerar e curva de animação e você está fazendo loop porque você vai notar quando esses saltos acontecem. Ok, então IES, o próximo é que pisa eficazmente. Acelera e desacelera. Mas você não tem nenhuma habilidade para mudar o que é chamado de interpolador, que eu vou chegar em um minuto. 0s na curva de animação, que diminui no final. Então, quase você imagina uma espécie de começa na velocidade e sua extensão abrandando. Mas se selecionarmos isso, você pode ver que isso nos dá a capacidade de mudar o que é chamado de interpolante. Então, que é efetivamente a curva específica que a animação é lápis seguir pode, virá para aqueles em um minuto. Do outro lado da facilidade dentro e aliviar a nossa curva. Então este começo é lento e termina rápido. E novamente, se escolhermos isso, você vê que temos acesso às interpolações. O próximo é fácil entrar e sair. Então isso é uma mistura da facilidade dentro e facilidade fora que nós temos, nós acabamos de olhar. E esta é, de longe, a curva de animação mais comum que as pessoas tendem a usar é, na verdade, uma das Disney é 12 princípios de animação de pensar sobre a física de um objeto e como ele funcionaria no mundo real se você olhar no movimento de alguém andando ou correndo, não corremos de repente a três quilômetros por hora. Aumentamos a velocidade. Se você olhar para o carro, ele aumenta a velocidade e depois desacelera. Não começa imediatamente, pára imediatamente. Então esta é de longe a curva de animação mais natural que você pode usar. Cubic Bessie BCA é um, é uma curva de animação semelhante, mas agora você tem controle sobre os quatro pontos. Você pode criar curvas de atenuação personalizadas usando bases cúbicas. E na verdade você pode ver aqui, se eu tocar nisso, você realmente tem um pouco de Bessie cúbico, um gráfico onde você pode efetivamente criar suas próprias curvas de interpolação de animação. Está bem? E finalmente, temos a primavera. E assim primavera é uma curva de animação muito diferente iria impressionar pi dá-lhe em vez destes dois controles deslizantes, uma vez que uma tensão de controle e um para controlar o atrito. Então, e nós vamos estar usando esta flexibilização tem em um minuto para uma animação e explicar para vocês como esses dois controles deslizantes funcionam um com o outro. Então, a segunda metade do quebra-cabeça de animação é intercaladores. Então, se voltarmos para facilitar e realmente você pode clicar em, vamos clicar sobre isso, ver as diferenças aqui. E eu só vou trazer uma moldura. Então esta é a documentação para comer curvas. No site. Você pode ver aqui como as curvas são diferentes e as diferentes curvas vão mudar. Você pode ver aqui, se você apenas passar o mouse sobre, você pode ver que diferentes animações você vai obter usando essas curvas diferentes. E essas curvas são todas predefinições que vêm com e se orgulham de maior. Então você pode definitivamente ter uma baía em torno de breve aqui em flexibilização em curvas e aqui, aqui em baixo nas curvas de flexibilização. E depois temos. E aliviar as curvas. Então não confira esta página web e dar uma olhada e ter um jogo com as animações. As curvas de animação dentro, prepará-lo. Eu vou ficar por um momento com facilidade dentro e facilidade para fora. E então, em seguida, precisamos olhar para sua duração. Para, para a maioria U IS em algum lugar entre 0.20.4 é uma boa regra de ouro para a duração de uma animação. Embora isso dependa muito de algumas coisas, como o tamanho de um objeto, a distância que ele tem para percorrer sua tela, e a ênfase que ele precisa para o usuário. Outra coisa que eu tendem a fazer também é ter um pouco mais animado em duração do que a saída animada. Por exemplo, uma caixa de diálogo aparecerá no seria um pouco mais longa do que quando ela desaparecer. Quando você adiciona respostas a um gatilho, você pode se surpreender ao saber que, de uma perspectiva de emoção, a ordem que você as adiciona é meio irrelevante. A sequência na qual as respostas animadas são executadas baseia-se na duração e no atraso. Isso nos leva perfeitamente a um atraso. Atraso é apenas um ponto no qual a animação começa. Se você estiver familiarizado com a animação tradicional, você vai atrasar será o seu quadro-chave inicial. O quadro-chave final é definido pela própria curadoria. Há uma maneira de ver uma visão mais tradicional de suas animações aqui no pro pi. E está aqui no lado direito do painel Gatilhos. Então, eu só vou puxar isso para fora. Então, atualmente o funcional, modo que a linha do tempo é bastante limitada. Ele apenas age como outra maneira de mudar a duração e o atraso. Aqui você pode ver minha animação em escala. Eu posso clicar nele e mover para lá e você pode ver que movê-lo vai mudar minha duração e meu atraso de parada. Irão os direitos e do lado direito aqui. Ok, vamos apenas definir isso de volta para os padrões. Então vamos deixá-lo para a camada 0. Ok, então vamos continuar com nossa animação de salto para que possamos ver como todos esses recursos e trolls se encaixam. Então eu só vou destacar esta linha do tempo porque esta animação em particular, ok, para o nosso salto, nós saltamos para cima, mas agora precisamos saltar para baixo. Então precisamos reverter a animação e sabemos o que é uma boa resposta para padrões de lote de jogos, certo? Isso mesmo, reinicializar. Vamos adicionar um destino de resposta de redefinição no mesmo contêiner inicial selecionado. O que é bom sobre reset é que sim, ele redefine de volta ao estado original. Mas como inimigos chegar lá pode ser completamente diferente. Então eu quero adicionar um pouco de diversão e personalidade leve para na minha animação. Então eu vou mudar a flexibilização para primavera. Ok, então eu vou acrescentar, eu vou mudar a tensão para 500. E eu vou adicionar dez ao atrito. Certo, vamos testar isso. Ok, então você pode ver que nada mudou aqui e isso é porque nós precisamos realmente esperar um atraso. Então, se voltarmos e olharmos para a animação escalada, podemos ver que ela teve uma duração de 4,2. Então precisamos adicionar 0.20.2 aqui e perguntar se isso está chocado. Lágrimas, nós executamos isso. Ok, então agora você pode ver. Que a primeira parte da animação é adequada e para cima e a segunda parte é dar-lhe aquele salto agradável. E estamos usando o atraso para compensar essas duas animações. E, na verdade, se voltarmos para nossa linha do tempo novamente aqui você pode ver que minha primeira duração de animação é aqui, e então minha segunda duração de animação está aqui. E você pode, obviamente, brincar com esses tamanhos diferentes. O que você vai notar com o reset é que ele não tem essas pequenas alças. Então, essas pequenas alças em sua visão para tipo de alterar o, o tamanho efetivamente como mudou a duração da sua animação. Mas porque isso tem uma curva de animação de primavera aplicada a ele e é muito bloqueado por atenção e o atrito que você pode ver a duração aqui é realmente acinzentado. Não podemos mudar a iteração. Alteramos a duração alterando a tensão e o atrito. Então, um pouco, um pouco diferente situação com que um vai receber isso, redefinir isso de volta. Ok, eu acho que isso está bom. Então agora temos nossos inimigos deve ser a primeira parte de nossa animação. Precisamos aplicar isso agora a outra cena. Então, vamos copiar o nosso bloqueio de gatilho. Que grande bloqueio de gatilho. Então vamos lá C. E vamos para a nossa cena favorita. E nós vamos colá-lo. E porque eu copiei um bloco de gatilho, eu não preciso selecionar nada vai saber exatamente onde colocar um. Você pode ver que eu adicionei isso na parte inferior do meu painel Gatilhos aqui. Ok, então podemos ver que temos algumas respostas laranja. Isso é porque as coisas que os alvos que eles estavam conectados não existem sobre isso, sobre este mesmo então que precisa adicionar nossos novos alvos. E, de fato, vamos ter como alvo um item de guia completamente diferente. Então, vamos ter como alvo os corações têm item. Então vamos para a nossa resposta scour e isso é encontrar nossos corações selecionados. Está bem? E vamos deixar tudo exatamente igual. E também vamos mudar as nossas redefinições, a nossa casa seleccionada. E também precisamos ter certeza de que o ponto de origem está definido para o centro. Centros que você verá por padrão estão sempre definidos no canto superior esquerdo. Certo, então vamos voltar para casa e testar. Então eu vou selecionar meus favoritos. E você pode ver na animação seu logotipo para tirar minha casa. E você pode ver que não há animação. Ok, então isso é porque as respostas em um gatilho estrela só disparam uma vez por sessão por padrão. Então precisamos mudar isso. Então, em seguida, vá para o nosso gatilho estrela. E você pode ver aqui há uma opção para reiniciar todas as vezes, e é isso que queremos selecionar. Então, queremos selecionar que também em nossa cena favorita colapsou eu gatilho. Certo, então isso é metade da equipe. Ok, então quando eu selecionar minha casa, selecionado, desculpe, quando eu dividir meus favoritos, você pode ver animação é lacunas lá. Eu escolho a casa. E você pode ver que a animação está lá também. Mas você pode ver que ainda podemos ver o branco não selecionado por baixo. Então nós precisamos apenas ter certeza que isso é opacidade 0 quase parece. Então, vamos voltar para a nossa cena em casa. E isso é encontrar OWL estado não selecionado para casa na barra de guias aqui. Método de hormônios não selecionados, vamos reduzir o pastizzi 0 deles. E vamos ver nossos favoritos e vamos fazer exatamente a mesma coisa. Mas para harpa em selecionado, vamos reduzir isso para 0. Vamos voltar para casa e testar de novo. Então agora podemos ver que temos uma boa animação limpa entre os dois. Certo, bem, isso encerra tudo para este vídeo. Isso é uma prática. E antes de passar para o próximo vídeo, eu gostaria que você aplicasse a animação de rejeição às outras guias. Também sinta-se livre para brincar com as opções de flexibilização e circula como enlouquecer, criar algo único. No próximo vídeo, vamos olhar para uma transição que requer um pouco mais de coreografia. Vejo vocês no próximo vídeo. 21. Animando o login: Oi lá. Neste vídeo, vamos abordar uma transição de tela entre duas cenas. Anteriormente, tínhamos uma transição muito básica entre as telas de início e login. E agora vamos apimentar as coisas com alguma animação personalizada. Então vamos ter certeza de que você entende tela se você está acompanhando e vamos olhar para ele, vamos definir uma transição de salto que está atualmente no ar. E, em vez disso, vai tirar a nossa transição básica. E nós vamos realmente desativar todo o salto apenas por um minuto e configurar nossa animação personalizada nesta tela. Então vamos ter uma seção da animação nesta tela. Então vamos animar o logotipo, a linha da correia e os botões. E então vamos saltar para fora e dizer tela de login. E vamos definir a animação, a animação de introdução para a tela de login aqui. Então isso é feito na tela inicial. Certo, então vamos animar o logotipo. Então, vamos selecionar o gráfico do logotipo. E vamos definir a origem para o topo do centro. Esse é o ponto de onde queremos que os pivôs de animação sejam atingidos e com o logotipo selecionado, vamos apenas adicionar a essa tática ou vamos adicionar uma resposta de movimento. Certo, e vamos dizer que é Y 2119. Também queríamos brincar com o timing da animação. Então vamos definir a duração 2.4. E nós vamos definir o relé também duas entradas para ok. Então a primeira parte vai ser ainda o trabalho movendo-se para o topo da gritaria também quer que ele escala. Então vamos adicionar uma resposta de escala. E vamos definir a escala, então vamos deixá-la por padrão. Então vamos definir um tamanho de escala 257 12. E novamente, vamos definir a mesma duração, 0.410.4. Ok, então eu vou, eu vou selecionar mudanças de humor, selecionar as duas respostas. E eu quero mudar a curva de flexibilização para uma facilidade de saída. E novamente, isso é apenas a ver com o momento da animação. Temos 1,5 acontecendo nesta primeira cena, e a outra metade estava na segunda cena. Ok, então vamos fazer aquele teste rápido. Então, se eu tocar em login, eu posso ver que meu logotipo está animando em posição. Então isso parece bom. Vamos agora voltar a nossa atenção para a linha da correia. Então isso é certificar-se de que está selecionado. Vamos adicionar uma capacidade e resolver a Sarah dele, como vamos dar-lhe uma duração de 0,3 K? Este é o teste de novo. Então isso efetivamente desvanecendo a linha da correia realmente é apenas tirar isso da tela. Está bem, tão fixe. Finalmente, para esta tela, precisamos fazer algo com as frações grosseiras. Então vamos selecionar o CTA Primário, CTA. E nós vamos adicionar um movimento. E vamos definir o x 2x menos três para três corridas, bate, sair da tela, para o lado esquerdo da tela. E novamente, eu vou brincar com a animação. Curvas estão indo para intercaladores areia que volta. E eu vou mudar a duração deste conjunto. A duração ainda colocar sexo e as pistas. E 1.6, Eu só quero compensar ligeiramente o movimento destes call-to-action está longe da animação do logotipo. Ok, então isso é apenas uma resposta de movimento. E eu vou mudar o alvo para os ônibus terciários como o inferno fora de nós. E neste eu vou apenas mudar o atraso ligeiramente para 0,8. Então é quando deslocar este botão do outro botão. Ok, vamos voltar a ligar a nossa resposta ao salto. E para ter certeza de que podemos ver essa animação realmente em execução, precisamos atrasar nossa resposta ao salto também. Caso contrário, vai saltar instantaneamente e não veremos nada dessa animação acontecer. Então vamos definir o atraso deste para 1.4. Ok, isso é o melhor. Teste isso e veja como isso se parece. Então, quando apertamos login, nossa m, nossa ação pode retardar isso. Então você pode ver isso acontecendo na escravidão. Listado para não levar para um quarto de segundo. Então eu apertei o login. Os logotipos de maio desaparecem e meus dois botões estão deslizando. Legal. Então completamos metade da nossa transição. Agora vamos terminar na tela. Então isso é mudar de cena. Certo, então vamos adicionar um gatilho de partida. Eu só vou movê-lo para o topo. E precisamos mudar algumas das propriedades padrão nos gatilhos estelares. Então nós vamos selecioná-lo para parar com salto em vez de pessoal o salto. E tudo isso significa que a animação vai começar um pouco mais rápido e vamos verificar nosso reinício cada vez. E isso é principalmente porque queremos que isso seja executado toda vez que as sementes carregam. Certo, então essa é a nossa linha de volta de boas-vindas. E nós vamos, para este truque das estrelas, vamos adicionar uma capacidade. E vamos definir sua capacidade para 0, MSN sua duração para 0. Então o que este gatilho estrela está fazendo é configurar um estado padrão antes que essa cena seja carregada. Então, se você se lembrar, já temos o logotipo em um determinado, animado, em uma posição particular na cena de inicialização. E também já desbotamos a linha da correia. Então precisamos continuar que a animação nesta cena e definir esses status padrão porque eles têm essas coisas e efetivamente aconteceu. Ok, então a seguir vamos atacar o grupo de formulários. E nós vamos adicionar um movimento. E nós vamos dizer como x 2375. E novamente é a duração de 0 k. Vamos agora atingir o CTA. E temos que acrescentar outro movimento. E também vamos definir como X2 375 e duração como 0. Ok, então agora configuramos nossos padrões de tempo de execução. Em seguida, vamos fazer a parte final da transição. Então vamos adicionar outra estrela. E mais uma vez, vamos conversar completamente. E nós vamos adicionar uma resposta de redefinição. Vamos mudar o interpolador do Reset para trás. E vamos definir a duração para 0,6. Ok, isso agora é o alvo deste CTA primário em outro reset. Também vou mudar o interpolador para trás. Vamos definir a duração para definir 2p 06. E vamos dar um pequeno atraso, será 0,2. Ok, então deixe-me explicar o que fizemos aqui. Nós definimos um estado padrão de alguns objetos com base na animação que está acontecendo na primeira cena na estrela c. E estamos efetivamente usando esse outro gatilho estrela para reverter nossos padrões usando as respostas de redefinição. Ok, nós fizemos muito aqui, então nós temos edições tem que ver o que nós temos. Então vamos voltar e selecionar o estilo de cena porque é aí que nossa animação começa. E isso é executar esta animação. Então, começamos a resolver a estrela c, acertamos o login. Entendemos que a animação é ASI, certo? E um quarto de velocidade para que você possa vê-lo. E então temos nosso segundo CMB chegando. Então vamos rodar o código de velocidade total do Pat. Parece bom para mim. Então vamos rever o que fizemos neste vídeo. Temos cafetões como a transição entre duas cenas. Aprendemos como definir padrões de tempo de execução. Aprendemos um pouco mais sobre curvas de animação e interpolador. Acho que agora é hora de uma xícara de chá antes de passarmos para o próximo vídeo. E no próximo vídeo, vamos ser fervor explorando animações de clientes adicionando uma animação personalizada para quando um usuário tocar em uma foto em seu fluxo de fotos. Te vejo em alguns minutos. 22. Criando uma animação personalizada: Oi lá. Neste vídeo, vamos criar interação que permite que os usuários salvem uma imagem de seu fluxo de fotos na seção de favoritos. Então vamos dar uma olhada rápida na demonstração, mas nós vamos estar construindo. Então eu vou rolar para baixo até esta imagem aqui. Só vou tocar duas vezes. Vamos pegar o ícone favorito dele. E uma pequena miniatura simplesmente cai na seção favorita. E você viu algumas dessas outras imagens desaparecendo. melhor corrida que a uma velocidade muito mais lenta. Então nós podemos apenas tipo de passar por esse passo a passo k. então eu vou rolar para baixo. Então, primeiro vamos criar a interação favorita no duplo toque que vai trazer em nossos sacos favoritos para os EUA pode ver o que eles tocaram, então vai desaparecer as outras imagens para enfatizar a imagem que nós favoritas. Em seguida, vamos inimigo a miniatura da imagem, que servirá para nos ajudar a entender o que a imagem foi salva, estará usando alguns princípios de animação aqui como antecipação e encenação, seguir e sobrepor em ação, bem como tempo e exagero. Isto será mostrado quando uma miniatura atingir o coração, fazendo com que o coração reaja. Finalmente, vamos desvanecer todas as outras imagens de volta para completar a peça do set dos animadores. Há muita coisa acontecendo nessas pequenas micro interações para garantir que o usuário saiba o que está acontecendo. E isso é por todos os relatos, nossa animação mais complexa até agora. Ok, vamos começar a rachar. Então eu vou abrir meu arquivo anterior aqui. Então, primeiro, precisamos ir e obter nosso gráfico do nosso arquivo sigma ou, ou esboço ou dvx, dy dependente do que você está usando. Então, vou trocar de sigma. E eu vou apenas copiar meu gráfico, tem um retorno SVG para prettificá-lo. Vou só colar dez. Ok, então como visto anteriormente, o SVD vai entrar em um x, então precisamos apenas multiplicar isso por três. E vamos nomeá-lo renomeando lugares favoritos. Ok, vamos para a página um sobre o fluxo de fotos. E vamos agrupar todos esses contextos. E vamos chamar isto de fotos. E se abrirmos isso, vamos encontrar essa imagem pi, que é imagem nove, e vamos apenas arrastá-la para fora do pecado acima. Agora vou mover meus pontos favoritos dele logo acima da imagem nove. E vamos posicionar isto centralmente sobre a imagem. Ok, finalmente, vamos ser apenas um. Queremos que isso apareça, então precisamos fazer o passado deles. Então essa é a configuração feita. Então, em seguida, vamos escolher como imagem nove. E nós vamos para o nosso painel Gatilhos e vamos adicionar um toque duplo. Vamos aos nossos favoritos, Boston. E nós só queremos ter certeza de que a origem está dentro. Queremos esperar, queria animar a partir do centro. E mantendo esse botão de favores selecionado, vamos adicionar uma capacidade que outs têm gatilho? Vou fazer 100. E vamos definir a duração para um pouco mais rápido e 0,01. OK. Nós também vamos adicionar uma escala. E vamos escalar para um fator de 120. E vamos definir a duração aqui para 0,01. Ok, vamos fazer esse teste. Então, se deslocarmos até nossa imagem e contarmos o que aconteceu, para que possamos ver que a imagem é aparecida imediatamente. Então queria atrasada ligeiramente para que possamos ver a escala realmente acontecendo. Então isso não teve atraso mais 0,1. E vamos testar isso de novo. Certo, isso é um pouco melhor. Em seguida, quero enfatizar quais pessoas que foram selecionadas um pouco mais. Para que selecione o grupo de fotos. Vou adicionar uma capacidade. E eu vou fazer isso 10% porque saturação para 0. E vamos adicioná-lo ao ponto zero do laboratório também. Ok, essa é a duplicata que eu passei. E vamos aumentar para 100. Isto eu vou definir uma direção para três e o atraso para 0.4. ok, isso é bom. Aquele teste. Então nós dobrar guia e podemos ver que efetivamente desapareceu. Toda a imagem posterior é como uma espécie de uau gordura e então eles lentamente desaparecem de volta. Vamos jogar de novo. Ok, então a seguir vamos adicionar a animação em miniatura. Então o que vamos fazer é duplicar nossa imagem nove. E nós temos um verdadeiro renomear esta imagem nove polegar, polegar sublinhado hematite. E vamos definir a origem no centro, no centro. E o que pode dimensionar isso, certificando-se de que sua proporção não vai dimensionar isso para uma largura 20. E isso nos dará uma calculadora. Oi, eu sou um pouco, um pouco mais alto, 2126. E vamos mover isto para fora do nosso contentor de paginação. Não queremos que isso role. Então vamos colocar isso em uma posição fixa lá e vamos movê-lo para uma posição diferente. Efetivamente, queremos mover-se lá logo acima onde os favoritos é bastante AS aproximadamente localiza cabeças. E vai vender isto a 600 graus. É como uma boa posição. Ok, então nós vamos agora definir sua opacidade para 0, também duas vezes maneira de mostrar ainda. E mantendo-o seletivo, vamos adicionar outra opacidade ao nosso gatilho, onde vamos aumentar a invisibilidade da miniatura para 100. E vamos definir a duração em 0,2 e vamos adicionar um atraso de 0,2. Então, ainda com o sistema imunológico, vamos adicionar outra resposta nesta escala de tempo. E precisamos bombear os valores de tamanho atuais porque precisamos dimensionar e queremos que os mais pro pi trabalhem como o dimensionamento das florestas corretamente. Então nós sabemos apenas o que quer que seja 20 por 21.6. Então isso é apenas puxar isso para esses valores inicialmente, 1.6. E com a proporção reduzida, agora podemos mudar este lado dois defeituoso e ele vai trabalhar para fora a altura correta para nós, K. E nós vamos definir a duração para 0,4. E nós vamos definir o mais tarde 0.2. Ok, vamos fazer o teste. Então clique duas vezes. E agora o Tom parece estar bem. Ok, então o que eu quero fazer agora é imitá-lo caindo nos favoritos também vai usar um dos 12 princípios básicos de animação que os princípios de animação da Disney aqui, que é exagero. Então, quando o polegar cai no mais difícil vai inchar, apenas sorte absorveu a imagem. Então, novamente, ele só vai enfatizar a animação que um pouco. O que vamos fazer é voltar aqui. Vamos duplicar esta escala. E vamos mudar a largura para dez. E isso irá automaticamente tamanho são maiores. E vamos mudar a duração para 0,2. E vamos dar no laboratório. Mas também vai mover veteranos vão adicionar uma resposta ao movimento. E nós queremos, queremos que ele se mova. Este é o lugar onde ele vai cair no, nos ícones favoritos. Então podemos nos posicionar em dois onde achamos que deveria estar. Algo assim. Isso é apenas arredondar isso para seis. 669 e voltou para a nossa jogada. Ok. Então sim, isso é realmente para a Sra. desfazer o mesmo rapidamente sobre o espaço, posição correta. Agora sabemos qual é esse valor. Podemos bombear um para dentro ou mover para o porquê S6 69. E isso às vezes você tem que fazer coisas porque não temos nenhuma habilidade de limpar linhas do tempo e coisas assim. Se você mover o objeto para o local final, você pode obter o valor. Então certifique-se de que quer fazer e movê-lo de volta. E então você pode colocar esse valor em sua resposta. Ok, então sim, a duração, duração 0.2, eu vou atrasar isso por 1 segundo. Certo, há testes que veem como isso se parece. Então, clique duas vezes e a miniatura desaparece no coração. Agora ele está realmente indo nos bastidores chapéu vai ser tão rápido que as pessoas não vão realmente notar isso. Além disso, quando adicionamos a próxima animação com o coração vai inchar, o cérebro humano tende a descobrir os quadros no meio, então não temos que ser super precisos o tempo todo, tem que ser como as coisas reagem. Às vezes podemos escapar com animações muito, muito rápidas apenas permitindo que o cérebro descubra a animação de um quadro para o outro. Certo, então vamos encontrar nosso grupo de coração não selecionado dentro de nossos carros alegóricos. Está acontecendo aqui. E vamos nos certificar de que a origem está ajustada para sensor, sensor porque somos o coração para animar a partir do centro. É maneira muito natural e natural para o seu domínio y. E vamos voltar à nossa resposta de dois toques. E vamos adicionar outra escala. Vamos bater-nos com o Factor. E esse fator vai ser 120. Vamos definir a duração onde a duração da alavanca responder 0.2 na verdade, e estamos definidos o atraso para um. Ok, então essa é a primeira metade da animação do coração para que a ameaça inchar, agora precisamos completar isso. Então eu vou fazer é eu vou adicionar uma resposta de redefinições. Certificando-se de que você tem o conjunto, o conjunto X para o grupo coração não selecionado. E desta vez vamos escolher a primavera tem a nossa curva de flexibilização. E nós vamos fazer a tensão 500. E vamos definir o atrito para dez. E finalmente, vamos atrasar isso em 1,2 segundos passa dado um tempo para que a primeira parte das animações seja executada. Para que possamos coreografar isso juntos. E, na verdade, se dermos uma olhada rápida, porque eu tenho bombeado para um monte de valores aqui. Mas você pode ver como as coisas estão realmente animando cabelo linha do tempo vita. E você pode usar isso para agitar se quiser entender, se quiser ajustar aqui, você pode tuitar seu cabelo movendo as coisas para trás e para a frente por atraso. E então você também pode alterar a duração por nós arrastando. Qualquer um. Decida se você arrasta as sobras, veja sua alteração no atraso, bem como o sistema de duração. Faça isso. Porque eu estou e nós colocamos os valores. E então isso é apenas dar uma olhada rápida e ver como isso se parece. Role o servidor para baixo, clique duas vezes no meu pipe. Tem que ser favorito. E a miniatura cai no coração e o coração reage para absorver naquela miniatura e faz aquela pequena animação de salto. Legal, bem que completa a animação favorita. E isso nos leva ao final deste vídeo. Espero que isso lhe dê mais algumas idéias sobre o tipo de coisas que você pode fazer. Jogamos com novos gatilhos e passamos muito tempo em coreografia de animação. No próximo vídeo, vamos ter nossa visão final do movimento adicionando uma fantasia de transição de uma foto para sua tela de detalhes. 23. Criando uma transição de tela personalizada: Oi lá. Neste vídeo vamos criar uma transição personalizada para a nossa tela de detalhes de fotos. Então, antes de construirmos isso, eu só queria mostrar a vocês como isso vai parecer, o que vamos construir. Então eu vou tocar nesta imagem em miniatura aqui. Temos uma transição para essa exibição detalhada com essa transição de cliente. E então eu vou ser capaz de apertar este botão de volta e fazer a transição de volta para fora novamente. Ok, então vamos para F. Então, se você tem seguido junto, você pode continuar com o seu arquivo existente. Caso contrário, você pode abrir o arquivo inicial está anexado a este capítulo. Ok, então vamos navegar para a tela inicial. E nós vamos abrir esses cartões de saúde você e esses uivos. E nós só viemos para trazer à tona a opacidade da coisa toda. E então vamos querer primeiro, este grupo ou este conteúdo mais baixo juntos. Então isso vai mudar selecionar que somos um grupo que juntos e vamos chamar este cartão de detalhes. E estamos fazendo isso porque vamos ser, mais tarde seremos animadas. E este era um grande grupo. Ok, então isso é esconderijo. Ele está saudável por um segundo e vamos ao nosso grupo de fotos. E vamos encontrar a árvore de imagens, que é a imagem para a qual vamos ser tão felizes ou personalizados transição. E vamos agrupar isso para colocá-lo em um contêiner. E vamos nomear esta árvore de imagens de contêiner. E nós vamos voltar a como essa saúde você vai copiar nossa página principal. E nós vamos colá-lo em nossas imagens recém-criadas conter hit. Ok. Vamos reduzir a largura para 163, mas basicamente dimensioná-la para baixo. Portanto, tem o mesmo tamanho da miniatura. Estamos recriando uma miniatura de forma eficaz aqui. E vamos ajustar esta imagem. Sua posição, por isso está na mesma posição, tem o, tem o polegar atual agora. E é bom. E nós vamos cortar a subcamada. Então, selecione como grupo, e role todo o caminho para baixo até a parte inferior e escolhe opção subcamadas de clipe. Então isso vai esconder todos os outros conteúdos lentos adicionados. Vamos definir o raio desta Conservação 16. Ok, então agora parece a nossa imagem original em miniatura. Certo, então vamos renomear nossa nova imagem para imagem de estupro dentro deste contêiner. E agora podemos dizer através de mover nossa imagem antiga. Está bem. Então essa é a primeira parte feita. Para o problema que temos é que temos esta imagem que está dentro de um recipiente de rolagem. Mas nós, quando abrimos o, quando fazemos a transição para este costume, alimentações personalizadas saudáveis, não queremos isso. Estes têm que ser roláveis e eles serão rolados para fora. Ainda está dentro da exibição de rolagem. Então precisamos descobrir uma maneira de ainda conectar a exposição à visão de rolagem. Mas também quando tocamos lá para que ele esteja fora do ScrollView. Obviamente, ainda precisamos ter a rolagem em miniatura também. Então, a maneira como vamos fazer isso vai usar um gatilho chamado cadeia. Vou fazer é duplicar o nosso contentor de imagens. E vamos renomear essa cadeia de imagens. E vamos movê-lo para fora da rolagem todo o caminho até o quadril abaixo destes saudáveis. E com a página um contém uma roupa selecionada. Ok, então com a página uma Exibição de rolagem selecionada, vamos adicionar uma alteração onde vamos encadear para a posição de rolagem. Então isso é por padrão, então isso é bom. E vamos selecionar como grupo de cadeia de imagens. E nós vamos adicionar a esse gatilho, nós vamos adicionar um movimento. Está bem. Então, quando adicionamos um, um gatilho a um, desculpe, uma resposta ao gatilho de corrente, obtemos esse tipo diferente de caixa e a forma como a cadeia, ele conecta intervalos. Assim, não veríamos encadear a amplitude de movimento da visão de rolagem para um intervalo de movimento na resposta de movimento para o nosso grupo de cadeia de imagens. Então, primeiro, vamos caber nesta metade, que é o intervalo da visão de rolagem. Portanto, as visualizações de rolagem fora começam em 0. Então esse é um bom ponto de partida fácil. E nós vamos apenas configurá-lo para rolar mil pixels. Então precisamos agora mapear a posição y da nossa cadeia de imagens para este intervalo de zeros abaixo de 1000. Então, a primeira coisa que precisamos fazer é bem e posição. E podemos ver aqui é isso para oito. Então, é bom saber que a nossa posição inicial. E porque queremos ter um mapeamento um-para-um entre o intervalo da rolagem e a taxa da movimentação. Precisamos ter certeza que eles movem a mesma quantidade de pixels. Assim, as exibições de rolagem funcionam na direção oposta e se movem na direção oposta aos objetos que se movem abaixo da tela. Então, atualmente, a posição de qualquer objeto começa no canto superior esquerdo. E qualquer coisa lá fora estará no negativo e qualquer coisa para baixo estará no positivo. Para rolar embora ele funciona na outra direção. Então, para cima é positivo e isso é negativo. Por isso, temos de inverter isto. E a cadeia da indústria está começando a AAA e precisávamos mover mil pixels. Então, só precisamos fazer um pouco de mapas. E nós só temos que minerar esses 28 mil e isso nos dá menos 712. Então isso agora está se movendo de para um para menos 712, que é um 1000 pixels. E isso mapeia diretamente para nossa visão de rolagem, que está se movendo da posição 0 para 1000 pixels. Certo, então vamos fazer um teste. Você pode ver que podemos ver que isso está se movendo e sua posição exata. Se isso for se eu puxar o pergaminho superior, você pode ver a outra imagem por baixo. Certo, então vamos consertar isso. Então, vamos voltar ao nosso arquivo. E vamos reduzir a opacidade das cadeias de imagens para 0. E isso vai consertar duas coisas. Primeiro, ele vai esconder a imagem para que não vejamos isso sobre o pergaminho. E o número dois é se um usuário decidiu rolar tocando nessa imagem, essa imagem, porque é 100% e está fora do escopo, vai bloquear a exibição de rolagem. Então precisamos ser a teoria da opacidade para que não atrapalhe. Está bem, fixe. Então, a próxima coisa que vamos chamar a atenção é a animação de transição real. A primeira coisa que precisamos fazer é consertar esse gatilho. Então, precisamos tocar no gatilho para apontar para o nosso grupo de imagens, que é o grupo dentro do nosso contêiner Scroll. Ok, isso é legal. E podemos remover essa capacidade. E nós vamos, nós vamos adicionar uma nova opacidade. E vamos atingir o grupo da cadeia de imagem três. E vamos definir sua opacidade para 100. Também vamos definir a duração como 0 porque queremos que apareça imediatamente. Em seguida, vamos adicionar uma escala. E podemos escalar a cadeia da indústria, 2359764, movimento átomo. E vamos mover a cadeia de imagens 240 para baixo. Ok, então basicamente essas duas respostas estão aumentando nosso polegar agora e entrar na posição correta para combinar com nossa visão de detalhes original. Está bem. Vamos agora precisamos dimensionar a imagem dentro de modo a posições específicas. Então vamos deixar a nossa imagem três e vamos adicionar uma escala. E vamos definir isto para 359 por 8. Ok, então vamos testar isso, ver se isso está funcionando código. Então podemos ver aqui, temos nossas imagens dimensionadas. Podemos ver que temos nossa metade superior do contêiner, mas podemos ver que há um espaço vazio e você ainda pode ver a imagem embaixo. Certo, então o que vamos fazer é voltar. Na verdade, vamos definir o fundo da cadeia de imagens para 100. E nós vamos voltar para estes são saudáveis? Vamos pegar nosso passado, que é como Claire Tins acertou a caixa e cujo TNC agora é o fundo do ListView, vai trazer isso para baixo como a cadeia de imagens. E vamos baixar essa opacidade para 0. Mantendo-o selecionado, vamos adicionar outra resposta de opacidade ao nosso gatilho. E nós vamos fazer o, o calço de fundo 70%. Ok, vamos voltar para a nossa cadeia de imagens e vamos adicionar um raio. Portanto, queremos alterar a curvatura do, desta miniatura original, que é de 16 pixels. Nós queremos, nós queremos aumentar esse raio para que ele corresponda às formas do telefone e nós vamos mudar o raio 2 de 16 para 32. E vamos testar isso. Então, parece que sim. Agora podemos ver que temos os nossos cantos de raio maiores. Nunca teríamos fundo branco. Temos um raio bonito que é, que está combinando com nossos telefones. Começa a parecer a transição de clientes que mostrei no início. Ok, então vamos voltar para o nosso arquivo. Ok, então a seguir precisamos trazer de volta nosso conteúdo e controles abaixo da imagem. Se você se lembra no início deste vídeo, nós os agrupámos em um contêiner e chamamos de esculpir essas casas. Então vamos encontrar aquele chamado DES. Como está o grupo? Nós temos um aqui e nós vamos, nós vamos copiar isso. E vamos colar esse grupo de cadeia de imagens da Intel. E vamos definir sua posição y 2561. Ok, então são testes que, ver se isso é verdade. Isso foi como, OK, então toque nele e podemos ver que temos nosso conceito de fundo agora entrando em posição. Ok, então isso é jogado fora de novo. Ok, então isso é, nós vamos emparelhar com ele e pagar por aí. Isso é para ter certeza de que a animação está olhando. Então, vamos voltar a isso. Isso é manter nossas pistas quádruplos. Estas casas são selectivas. Nós vamos, nós vamos mudar as senhas deles é 0. E vamos adicionar uma resposta de opacidade ao nosso gatilho de toque. E vamos definir a opacidade para 100. E vamos dar-lhe uma duração de 0 ponto três e um ligeiro atraso ou 0.1. então vamos olhar para isso. Ei, eu, então isso agora está apenas desaparecendo e nós não tivemos um tipo de movimento para cima de baixo como era antes com um pouco estranho. Certo, então está tudo bem. A última coisa que precisamos fazer é trazer de volta o botão Voltar para que possamos fazer nossa transição reversa. Então vamos pegar de volta. Então, se entrarmos em como estes como ver novamente, vamos pegar nossas mochilas e vamos copiar isso. E nós vamos colar isso dentro do botão do equipamento dois. E vamos definir a sua posição. Então x vai ser sete, vai ser oito. E nós também precisamos mudar nossos alvos para fora tem gatilhos, então precisamos encontrar nosso botão original de toque para trás e precisamos encontrar dois interruptores, mudar isso. Certo, então a última coisa que precisamos fazer é adicionar a animação reversa. Então vamos mudar essa redefinição para a cadeia de imagens alvo. E nós vamos adicionar outro reset. E desta vez vamos apontar o fundo. Shim scrim, pegue a palavra certa. E, finalmente, vamos adicionar um terceiro resets. E vamos segmentar a imagem da árvore de imagens. E há algumas imagens bisbilhotando ao redor da mesma, mas apenas certifique-se de que você tem o caminho certo. Você não podia. Você pode ver quando você tem um selecionado aqui, ele será selecionado no seu painel Camadas aqui. Então você pode ver que este é o que realmente queremos redefinir. E queríamos mudar a duração e um pouco para 0,3. Ok, isso é bom. Aquele teste. Então, vamos clicar em nossa imagem é tipo tamanho acima. Vamos acertar a nossa espinha dorsal e vai diminuir o tamanho. Isso parece um pouco rápido. Então vamos voltar aos nossos resets e acho que provavelmente mudamos todos para os primeiros trilhos. Experimente isso. O teste tem um pouco melhor. Está bem? Então podemos ver que não é ruim, mas não é perfeito. E se nós rolar um pouco e, em seguida, abri-lo e fechá-lo, podemos ver que ele realmente não voltar necessariamente para o posicionador, posição perfeita onde ele estava. Ele voltou para onde era originalmente. Mas não é tão ruim por enquanto. Vamos voltar a esta mão. Vamos resolver esses problemas. Mas faça isso, precisamos aprender sobre fórmulas. Ok, então este tem sido um longo vídeo. Espero ter um grande cérebro A2 muito. Conseguimos ficar muito rápido ainda com praticamente as mesmas coisas que aprendemos anteriormente. E nós tivemos um pouco mais de prática criando movimento. No próximo vídeo, vamos revisitar a transição de início de sessão, pois há algumas coisas lá que precisamos corrigir antes de entrar, em fórmulas na próxima seção. 24. Criando transições personalizadas usando Reser e o Timeline: Oi lá. Então, neste vídeo final, olhando para o movimento, vamos voltar para o início do nosso aplicativo. Vamos ver as coisas nas telas de login. E vamos adicionar uma transição personalizada entre esses dois gritos. Se tivermos apenas uma revisão do que temos até agora, temos o login, temos o login, que não concentrou a edição em m. Mas se você se lembra, adicionamos um botão Voltar em um vídeo anterior. E se eu apertar este botão de volta, você pode ver que é apenas uma transição básica. E também o nosso primeiro verde não se acumula. Os componentes estão faltando, então vamos consertar isso. Ok, então isso é apenas atualizar isso e ir para o nosso arquivo. E vamos começar com o início s2 espacialmente na equipe da equipe, se você estiver acompanhando, continue com seu arquivo. Caso contrário, você pode baixar um arquivo inicial para isso, para este vídeo. Então agora estamos começando a ver, e o que vamos fazer é adicionar um gatilho de partida. E nós vamos adicionar um gatilho Stark porque queremos e animações que executá-lo automaticamente quando a cena carrega. Então, hoje iniciar o gatilho, vamos marcar esta caixa de reinicialização, reiniciar sempre. Esta reinicialização sempre está relacionada a saltar para a resposta de lixo eletrônico e estamos usando respostas de lixo para navegar de cena em cena. Então é por isso que a caixa de seleção também não é. E vamos adicionar uma redefinição para cada objeto que temos em nossa animação. Então nós temos um logotipo com linha de cinta. Temos o CTA primário, temos o CCA terciário. Então precisamos adicionar uma resposta de redefinição para cada uma delas. Então eu estou indo para o primeiro passo CCA terciário, e eu vou adicionar um reset. Então vou selecionar o CTA Primário. Em um reset. Em seguida, será o logotipo. E eu vou adicionar um reset lá. E, finalmente, vou adicionar um reset para a linha da correia. Ok? Então, o que estamos efetivamente fazendo aqui é quando o tratado inicial for carregado, vamos redefinir a posição inicial desses objetos. Então, quando nós tocamos no gatilho de toque acima, isso vai animar nossos objetos em um determinado estado de posição e vai deixá-los. Ali. Vai se lembrar dessa estadia. Quando voltarmos a esta tela, queremos executar uma animação que redefine e volta ao seu estado original. Então vamos fazer um teste rápido para ver o que temos até agora. Então, nós tocamos no login. Vamos para a segunda tela de login. Quando revidarmos, vai acioná-los. E você pode ver que todos eles entram de uma vez. Eles têm todas as mesmas propriedades de movimento. E queremos mudar isso para melhor imitar a reversão da animação personalizada que temos em primeiro lugar. Então, antes de fazer isso, vamos apenas Reese renomear essas respostas para que possamos entender o que cada um é no momento em que todos dizem que o receptor é um pouco confuso. Vamos dar um nome a este CTA terciário. A seguir, CTA Primária, logo. E finalmente a linha da cinta. Ok. Para esta situação. E só para que possamos brincar com a linha do tempo, vou usar a linha do tempo para alterar esses valores de propriedade de movimento. Eu só quero mostrar a vocês como você pode usar este Highline e como ele pode ser bastante útil visualmente quando você está fazendo animações coreografadas como esta. Vamos primeiro, este trabalho de cima para baixo. Então, o CTA terciário, eu quero que dominante para durar 4,6 por segundo. Então eu só vou arrastar isso para 0,6. Você pode ver que ainda temos os valores de propriedade aqui. que possamos ver se estamos à direita, na quantidade certa. E eu vou deixar o atraso em 0 porque eu quero que isso corra primeiro. Em seguida, CTA Primário, eu sou Gaines que também satisfazem a mesma duração de 0,6. E você percebe que isso meio que se encaixa imposição. Então isso é bastante útil. E para este eu sou uma vez que você atrasá-lo em 0,2 de segundo, logotipo do cabo, nós vamos, nós vamos deixá-lo na duração de 0,2 de segundo. Mas queremos que isso não aconteça até que estejamos um segundo em nossa animação. Então vamos movê-los para um segundo. E, finalmente, a linha da cinta. Nós também vamos deixar a duração em 0.2. Mas queremos que isso aconteça por último, e queremos que isso aconteça em 1,3 de segundo. Ok? A outra coisa que queremos fazer é dar uma olhada em nossas respostas iniciais de movimento para os dois botões que podemos ver que usamos interpolados com as costas. Então nós queremos replicar isso em nossa animação reversa também. Então, selecione Shift, selecione Tertuliano Primário CTA e rastreie o cúbico, interpola de volta. Certo, vamos fazer esse teste. Então, fazemos login, obtemos nossa animação personalizada inicial. E então você volta e nós temos como fazer animação? Ok, isso parece muito bom. Então essa é a primeira metade do custo da animação que estamos criando este vídeo. Em seguida, vamos criar a animação de volta, que é a saída da tela de login. Então essa é a nossa cena de login. E vamos primeiro selecionar o botão Voltar. E você notará que eu provavelmente mencionei isso algumas vezes em vídeos anteriores, mas quando você seleciona algo na paleta Camadas no último painel, ele seleciona automaticamente quaisquer instâncias de uso dele em seus gatilhos, que é realmente usado Suécia CS é cinza claro, destaque aqui. Então, especialmente onde eu tenho vários gatilhos TAP e eu não tenho sido muito bom em nomeá-los que são deve estar fazendo realmente. Mas isso é, nós temos esses dois gatilhos de torneira, então há nos ajuda a encontrar o correto. Ok. Então vamos olhar para a resposta ao salto. E você pode ver aqui nós temos, nós já peão, hey, transições básicas. Nós vamos transformar essa transição que nós vamos definir isso para nada. Ok? E nós vamos para o nosso primeiro gatilho de parada. E este é o gatilho inicial é o gatilho que basicamente define todos os nossos objetos em suas posições iniciais. E se você se lembra de volta, a forma como fizemos essa animação foi usar o Star Trek dois conjuntos de posições iniciais. É por isso que a duração e o atraso são 0. E então, neste segundo gatilho, usamos para redefinir os entrevistados, para reiniciá-lo ao seu estado original. E esta é a maneira que criamos isso e soma, porque usamos reset para criar a primeira animação de entrada, não podemos usar reset nesta instância para criar a próxima animação. Temos que usar algumas técnicas de movimento padrão para criar isso. Então é isso que vamos fazer agora. Então vamos voltar para o primeiro gatilho inicial, e vamos mudar as respostas selecionadas. Nós vamos copiá-los, e nós vamos colá-los em nossos botões de backup têm gatilho. E, mas apenas certifique-se que eu quero dizer, isso não é necessariamente super importante porque como eu disse anteriormente, duração e atraso decide quando as coisas executam, mas apenas para e sua sanidade, eu acho. E para ter certeza de que quando você está olhando você pode ver a ordem das coisas como, eu só tendem a manter a ordem ou tentar manter a ordem dessas coisas na ordem que eles executam. Então esses objetos vão acontecer primeiro e os saltos podem acontecer por último. Então temos saltado no fundo. Ok? Vamos voltar a nossa atenção para a resposta de opacidade primeiro e vamos definir a sua duração para 0,2. Em seguida, vamos lidar com como mover respostas que controlam os campos de entrada e o CTA primário. Então são os turnos que acontecem. E nós vamos definir a duração para 0,6. Queremos que ambos se movam ao mesmo tempo. Mas também queremos fazer, é queremos, novamente, se olharmos para estes, destes reset, Temos de volta interpolador. Então, queremos também adicionar um interpolador de volta à nossa animação reversa para esses dois objetos também. E só para dar uma olhada lá. Então nós temos, de fato, nós podemos vê-lo aqui no final. Esta é outra razão pela qual as linhas do tempo bastante usar onde você pode ver a capacidade de energia é tipo de R1 e R2 movimentos vão correr tudo ao mesmo tempo, o inimigo sem-fim ao mesmo tempo. E você pode ver a resposta ao trabalho, que é este pequeno ponto que vai ser executado imediatamente também. Obviamente, se o nosso salto, saltar imediatamente, não vamos conseguir ver nenhuma dessas animações. Então nós realmente temos que ter certeza que eu vou saltar acontece após as animações de executado. Então o que vamos fazer é quando eu me sentar, as respostas vão adicionar um atraso. Todos 0.06, que é a duração mais longa para objetos AR é 0.6. E vamos em segurança sabendo que toda a animação foi concluída. E também vamos nos certificar de que qualquer resposta inicial que temos aqui, basta verificar duas vezes que queremos que todos se restyle sempre. E queremos fazer isso porque estamos usando saltos para a transição. Então queremos que essas coisas aconteçam, que essas animações aconteçam toda vez que saltamos para frente e para trás. Ok? Então eu acho que isso é tudo, vai voltar para o começo vendo. E vamos pré-visualizar nossas novas atualizações e animações personalizadas. Então eu vou tocar em olhar na minha entrada, animação personalizada para a tela de login. E então, se eu bater de volta, eu vou levar minha animação de volta acostumada para a tela inicial. Ok, legal. Então, isso conclui a correção para essa transição personalizada para este vídeo. Também rodadas da seção de movimento. Na próxima seção, vamos explorar o mundo das condições e variáveis. Estes são dois recursos realmente poderosos que nos permitirão construir lógica real em nossos protótipos. E que isso só vai fazer as coisas parecerem ainda mais realistas, vai ser muito legal. E então vamos ser usados nessa capacidade para fazer um login real. Além disso, o que vamos fazer na próxima seção é dar a capacidade para os usuários verem fotos favoritas. Então, vamos adicionar alguma personalização usando nossas novas habilidades encontradas. Temos variáveis de condições. Vejo vocês na próxima seção. 25. Criação de login usando condições: Oi lá. Neste vídeo, vamos usar condições para criar a lógica por trás do nosso formulário de login. Vamos criar estados de sucesso e erro com algumas mensagens associadas também. Então, se você tem seguido ao longo dos sapatos para falhar que você que você tem. Se você não está acompanhando, então você pode baixar o arquivo inicial que acompanha este vídeo. Ok, então vamos começar obviamente com nossa tela de login para isso, certifique-se de ir para a cena de login. E vamos primeiro, vamos renomear algumas dessas camadas porque elas são um pouco confusas. Então vamos renomear esta primeira camada e ir para casa. E nós vamos renomear esta camada, retornado. O foco, vamos chamar “Foco feminino”. Isso voltará porque está conectado ao nosso botão Voltar. Esta primeira Jornada nas Estrelas e vamos chamar a cinética inicial por iniciação. E isso é porque estamos iniciando alguns de nossos, alguns de nossos estados aqui. É por isso que normalmente ligar para o meu grupo de topo se eu tiver algum, qualquer, qualquer equipe para tipo de configurar este, nós vamos para uma introdução legal. É assim que a animação de introdução. E nos permite ler, organizá-los, eles estão em uma boa ordem. Vou trazê-lo aqui embaixo. Isso é bom. Isso é tudo. Bom. Está bem. Bem, vamos deixar no caso do Holder que temos nele. e-mail de foco de introdução vai para Início, retornou para ela e toque em voltar. Uma última coisa que vou fazer é agrupar esses dois grupos de casa novamente. Então eu posso, eu posso agrupar, eu posso agrupar grupos de grupos. Então eu vou agrupar um grupo de um grupo, Vega. Então esta é uma boa maneira de organizar sua última pilha, sua pilha de interação, devo dizer, porque ela pode ficar bastante longa. À medida que você adicionar mais e mais funcionalidade, irá divulgar cozinheiro em casa. Ok, então a primeira coisa que vamos fazer é criar a lógica para o campo de e-mail. Então vamos para o nosso gatilho de casa. E vamos adicionar uma condição. E nós vamos escolher a entrada de e-mail. E vocês podem ver aqui que temos um monte de propriedades que podemos atingir. Todos os impulsos femininos conscientes, aprendam e procurem a propriedade de texto. E você pode ver aqui. Temos algumas opções diferentes quanto à forma como queremos configurar esta condição. Então estamos à procura de igualdade. Então, queremos corresponder o valor do campo de texto para determinado valor. Então vamos manter isso igual. E vamos definir o valor. Você pode, você pode colocar o que quiser. Vou colocar meu endereço de e-mail. Está bem? E agora vamos tomar a nossa condição de salto. Vou transferi-lo para a cabana. Responsive diz: “Ei, eu vou passar para a condição de salto. Está bem. Então vamos fazer um teste. E o que eu só quero mostrar a vocês é que redigite agora nós chamamos aqui uma condição que está procurando por esse valor particular aqui. Então, se nós apenas digitar qualquer coisa lá e clicar em continuar, nós não vamos progredir para a tela inicial. E isso é porque nós colocamos o salto. A resposta está dentro desta condição agora, então este salto é falso, não vai correr a menos que esta condição, esta condição seja igual a verdadeira. Nesse caso, o campo I digitar este endereço de email no email. Ok, então só para mostrar que realmente funciona, isso é politicamente correto. E se eu continuar, você pode ver que eu vou para a tela inicial. Está bem. Então essa é a primeira condição configurada. Obviamente, para um login, você precisa tanto dela, um e-mail e uma senha ou um nome de usuário e uma senha e agora casos e e-mail e senha. Então isso é adicionar outra condição. E desta vez vamos adicionar uma condição em um lugar diferente. Nós não vamos adicionar uma condição totalmente nova como nós, como nós normalmente fazemos a partir da parte inferior do menu, podemos realmente precisar adicionar outra, outra comparação à nossa condição única. E assim você pode adicionar várias sub-condições a uma condição. E você pode pensar sobre isso como quando você precisa comparar algo com vários valores. Então, todos esses valores múltiplos precisam ser verdadeiros para que esta condição seja um sucesso. E isso é exatamente o que precisamos fazer. Seu login, ambos precisamos que o e-mail e a senha estejam corretos antes de permitir que alguém entre na tela inicial. Então, há um botão de aplicativo que você pode ou não ter notado logo abaixo aqui. Então vamos pressionar isso para adicionar uma segunda condição. E desta vez vamos selecionar o campo de entrada de senha. Nós vamos e a propriedade Text novamente, vai ser a comparação igual. E desta vez vamos colocar uma senha. Então você pode apenas inventar uma senha. Só vou inventar um valor de senha. Está bem? E vamos testar isso. Então agora se eu colocar no meu endereço de e-mail, mas eu vou colocá-lo na senha errada. Não é uma alanina. Se eu colocar a senha correta. Permite-me entrar. Então ele está olhando e comparando ambas as condições, certificando-se de que ambos verdadeiro antes que ele permitirá que a condição de salto para executar. Ok, legal, então é isso para este vídeo. No próximo vídeo, vamos continuar com a lógica incorporada para o formulário de volume. E nós vamos colocar em algum erro de manipulação de OC no momento. Se você colocar as credenciais erradas, o cabo simplesmente desapareceu e apenas fica arena tela em branco estava acontecendo. Então queríamos fazer algo para tornar a experiência do usuário um pouco melhor aqui. E para que nós vamos adicionar um estado de erro personalizado. Vejo vocês no próximo vídeo. 26. Abordando erros no login: Ei aí. Então, neste vídeo, vamos continuar nossa movimentação, nossa lógica de login, e vamos lidar com a forma como a interface reage quando colocamos as credenciais de login erradas. Como este é um login por razões de segurança, não queremos aludir a qual valor está errado. Então, vamos apenas mostrar uma mensagem genérica que o usuário tem, tem algumas informações em Roma. Então, para fazer isso, nós vamos pegar um recurso. Então, isso é pular para figo, scatch ou Adobe XD dependente do que, qual programa estamos usando. Eu estou usando sigma e eu estou apenas, Eu tenho esta mensagem de erro. Ei, você pode, obviamente, criar um MSD. Bem, se você quiser ou você pode copiar o recurso que eu criei para você. E nós vamos apenas copiar isso como SVG. E vamos voltar para o PowerPoint e vamos colar o nosso gráfico. Porque é SVG. Como de costume, precisamos multiplicá-lo por três para chegar ao tamanho correto. E nós vamos apenas colocá-lo em algum lugar abaixo neste espaço aqui em baixo não tem que ser super exato. E vamos renomear sua mensagem de erro. E nós vamos virar para ultrapassar t para 0. Ok, então vamos voltar à nossa condição e nós realmente vamos renomear esta condição para o sucesso do login. Então eles começaram a criar mais algumas condições. Então queremos ter certeza de que sabemos qual, o que estamos fazendo. E vamos ver agora duplicar esta condição. Então, as janelas de negócios de controle do Comando D, e vamos nomear este e-mail de falha. Vamos remover o salto porque isto vai ser um cenário com a nossa cena inicial inicial. E nós vamos entrar na condição e nós realmente vamos mudar o operador de comparação aqui. Então, em vez de igual, queremos que não seja igual. E não é igual é este pequeno sinal de igual na diagonal de amor strikethrough direto ao seis. Quer mudar para não igual para ambos. Em nosso, em nossas respostas, vamos selecionar a mensagem de erro e vamos adicionar uma capacidade. E vamos mudar isso para 100. Então, basicamente vamos desaparecer na mensagem de erro. Nós também vamos desvanecer-se botão continuar coruja. Então, nosso CCA principal, se começamos com, selecionamos isso. E também vamos adicionar uma opacidade. E eles vão derrubá-lo para 0. Está bem? Agora vamos duplicar esta condição novamente. Então, o que acabamos de criar. E nós vamos mudar o nome, eu vou chamar essa senha sentida. Então, enquanto tínhamos uma condição bem-sucedida em que nós, nós precisávamos tanto desses e-mails e senha para serem verdadeiros para permitir que o usuário entrar. Estas duas condições, nós não queremos ter esta condição composta aqui porque basicamente se um usuário faz amarrar o e-mail errado, mas na verdade recebe a senha correta, isso ainda não vai, isso não vai, que não vai ter uma comparação de comparações bem-sucedidas em s, então vai falhar, o que seria incorreto. Então, na verdade, estamos dividindo nossas condições L2 em dois blocos separados. Então, para o arquivo de e-mail, nós só queremos que a condição de e-mail seja executada, então nós vamos apenas bater através para remover a condição de senha. E, da mesma forma, no arquivo de senha, precisamos remover a condição de e-mail. Então, basicamente, você tem uma condição em cada um. E esses vão ser executados individualmente. O que isso permitirá que aconteça é que o usuário pode obter ambas as credenciais erradas, bola, obter qualquer uma correta e a outra função. E eles ainda vão receber o erro, a mensagem de tratamento de erros. Então esse é apenas esse teste que então os Predadores colocaram credenciais erradas. Recebo a mensagem. Se eu realmente digitar uma senha correta. Mas coloquei a senha errada. Também recebo a mensagem de erro. Então ele lida com todos os diferentes cenários. Então, isso parece bom. Ok, então a seguir temos que lidar com o estado. Depois de um erro, o usuário deseja tentar novamente. Se voltarmos e visualizarmos isso, se eu tiver, se eu colocar as credenciais erradas e apertar Continuar, vai me dar o erro, mas também não há maneira de eu voltar para o botão Continuar. Então eu preciso de uma maneira de redefinir o formulário para que o usuário possa tentar novamente. Certo, então é isso que precisamos fazer. Então, mas para fazer isso, o que vamos fazer é copiar nossas duas opacidade. E nós vamos para o gatilho de e-mail de foco e vamos colá-los aqui. Isso está puxando por baixo. E o que vamos fazer é reverter estes. Então o RMSE queríamos desaparecer e o call-to-action, o login, mas queríamos reup aqui. Além disso, precisamos copiar o garoto, a lógica condicional. Então esses três blocos condicionais, e precisamos adicioná-lo também em nosso gatilho de chave de retorno. Se você se lembra, há duas maneiras de enviar o formulário. Podemos pressionar continuar por lei, podemos bater lá foram Sankey, para que possamos remover este salto. E podemos colar todo o lote aqui. Certo, então temos nossa lógica condicional em ambas as interações. Isso se o usuário pressiona o botão Continuar ou se o usuário clicar em Return na tecla Home. Também adicionamos isso. Estes são os pastores que o foco e-mail para que, se o usuário recebe uma dessas credenciais tocada , eles podem tocar no campo de e-mail e obter o botão Continuar de volta. Uma última coisa que precisamos fazer é apenas duplicar esse e-mail de foco porque não fizemos isso. Precisamos adicioná-lo ao campo de senha também para o caso de eles errarem a senha. Então eu vou renomear isso para focar a senha. E nós vamos apenas mudar o alvo para o campo de senha. Ok? Então, se preferirmos que se eu colocar as convenções erradas e eu apertar continuar, e nós recebemos a mensagem de erro. Se eu tocar no campo de e-mail, então eu vou ter o botão Continuar de volta. E, em seguida, se eu também tocar no campo de senha, eu também vou obter o botão Continuar de volta. Ok, incrível. Portanto, agora temos uma forma de lógica real. Em seguida, vamos usar algumas variáveis para tornar o login ainda mais flexível e dinâmico. Vejo vocês no próximo vídeo. 27. Como usar variáveis para login: Oi lá. Então, neste vídeo, vamos substituir os valores rígidos para o nosso e-mail, nossa senha por algumas variáveis. Assim, ter os dados em variáveis mantém-lo separado de toda a outra lógica. E isso nos dá acesso mais fácil para fazer coisas como mudança no valor ou até mesmo o tipo de dados. Se no futuro quiséssemos criar um protótipo onde o usuário define seu login. Podemos então acessá-lo facilmente e usá-lo em nosso fluxo de login. Outra razão pela qual podemos querer usar variáveis é para que possamos executar outros cálculos ou formatação terminará. Acontece que temos um problema com o nosso login agora. Se testarmos, o login provavelmente falhará, pois um login diferencia maiúsculas e minúsculas e os dispositivos tendem a capitalizar o primeiro caractere. Em uma seção posterior, vamos dar uma olhada nas fórmulas para superar esse problema em particular. Certo, então vamos dar uma olhada nas variáveis. Ok? Portanto, as variáveis existem neste painel no canto inferior esquerdo. Então este é o seu painel de variáveis. E se nós tocarmos neste pequeno botão adicionar, você pode ver que existem dois tipos de variáveis que podemos adicionar. Há uma variável para todas as cenas, e então há uma variável apenas para este C. Então, se você quiser acessar um valor de variável em todo o seu protótipo, IOUs nas cenas em seu protótipo, você precisará escolha esta primeira opção. Se, no entanto, você só precisa da variável acessível dentro do sênior atual, ou se você não estiver usando cenas, você pode usar essa segunda opção. Ok? Então eu vou manter minhas opções abertas e eu vou escolher para todos os parece apenas no caso de eu precisar usar no futuro em uma cena diferente. Vale ressaltar também que uma vez que você escolhe um tipo de variável, você pode alterá-lo. Então eu não posso agora converter global. Há uma espécie de para todas as cenas variável em Hunt mudar para uma variável de cena. Eu teria que criar uma nova variável, excluir essa variável, e mudar ao redor. E isso pode ser bastante problemático, especialmente se estamos usando as variáveis dentro de muitas condições e coisas assim. Então pense bem sobre qual tipo de variável você, você, você vai usar. Você pode simplesmente adicionar variáveis globais para tudo que você sempre tem acesso. A única desvantagem disso são todas essas variáveis para todas as cenas, eu as chamo de variáveis globais. Eles estarão acessíveis no painel Variáveis para cada cena, quer você as esteja usando ou não. E que se você estiver usando muita evolução pode ficar bastante longo. Então, sim, alguém só precisa ver o que funciona para você, ver o que funciona dentro do protótipo que você está construindo. Ok, então eu vou ficar com a variável de cenas completas caso eu precise usá-lo e outra cena mais tarde. E vamos nos certificar de que estamos na cena do login aqui. E se você, novamente, se você está acompanhando o encontro com seu arquivo, se não, você pode baixar um arquivo inicial para este vídeo. Então vamos renomear essa variável. Então, basta clicar duas vezes para renomeá-lo e nós vamos incluir e-mail. E quando você seleciona a variável e você olha para o lado direito, você pode ver que há na verdade três tipos diferentes de variáveis que podemos definir esta variável para. Então estes são tipos de variáveis. Então você tem número, texto e, na verdade, cores hexadecimais. Então, dependendo do que o valor vai ser mantido nesta variável, você deseja escolher o tipo de variável correto. A cor é silenciosa, nicho. Você provavelmente não vai usar todos os nossos textos neles. Você definitivamente estará usando muito. Para nós. Estamos salvando o valor de texto do nosso e-mail e das nossas senhas. Então vamos querer escolher textos como o, como o tipo de variável. Você também tem a capacidade de adicionar um valor inicial nisso. É textual abaixo. Nós vamos fazer isso. Então este é o nosso e-mail. Então, vamos bombear ele Ni e-mail que queremos usar em nossas condições como fizemos antes. Ok, isso é bom. Ok. Precisamos fazer precisamos desistir da senha, bem como para que você possa duplicar variáveis da mesma forma que você pagou em outro lugar. Deixe-nos fazer este e-mail e vamos chamar esta senha. E vamos mudar o valor para a nossa senha. Legal. Então agora temos variáveis configuradas. Vamos aplicá-los ao nosso login. Portanto, você deseja navegar para a condição de sucesso de login. Então este aqui. E se olharmos para a nossa primeira condição, temos este valor duro aqui. Então, se você olhar para a caixa logo acima onde ele diz um valor, nós podemos realmente clicar sobre isso e nós podemos escolher um monte de coisas diferentes que eu terminaria neste caso, nós queremos escolher nossas variáveis para que você possa ver como duas variáveis são listados aqui. Para este, precisamos de variáveis de e-mail que vamos escolher. Agora. Vamos passar para a nossa segunda condição, que é a senha. Precisamos fazer as mesmas coisas que precisamos para escolher a variável de senha. Certo, vamos testar isso. Tão eficazmente, para os critérios de sucesso, nada deve, deve mudar. Devemos ser capazes de fazer login da mesma maneira que fizemos antes. E minha senha para que você possa ver nós bloqueado em assim, mas agora ele está usando os valores dentro de nossas variáveis em vez de valores b. Porque só precisamos aplicar isso às nossas outras condições. Então nós fizemos o sucesso de login, vamos fazer as condições de falta de e-mail, mudar isso para e-mail e senha condição falta vamos mudar para senha. Nós também precisamos definir isso em nosso retorno para casa gatilho também. Então, o que você poderia fazer é simplesmente apagar tudo aqui fora. E nós podemos apenas copiar, copiar nosso bloco condicional e colar em. Então agora temos esse conjunto usando nossas variáveis também. Legal. Então, como você pode ver, já fez as coisas um pouco mais acessíveis. E também só temos que alterar o valor em um único local. Agora, como você pode ver anteriormente, nós temos essas, essas exatamente seis condições ou com valores rígidos teriam que mudar essas seis vezes. Agora podemos apenas atualizar o valor em uma variável. Ok, então que sobre encerra tudo para login e este vídeo. No próximo vídeo, vamos usar variáveis e condições para mostrar um telefone favorito tem em nossa seção favorita. Então te vejo lá. 28. Como gerenciar estados com variáveis e condições: Neste vídeo, vamos usar variáveis e condições para alterar esta visualização Favoritos do estado vazio que você pode ver aqui para mostrar nossas tortas de ID favoritas. Então, se você se lembrar no vídeo anterior, nós adicionamos uma animação a uma das imagens em nosso fluxo de fotos, que então eles pediriam para favorecer essa imagem. E nós basicamente fizemos essa animação onde ele caiu no, no alto. Então agora vamos adicionar a lógica a esta tela. Podemos realmente ver essa imagem aparecer como um pi favorito. Então este, este é um bom exemplo de como você pode usar variáveis e condições para a gestão do estado. E os estados são partes realmente importantes dos aplicativos. Portanto, ser capaz de protótipos de estados é uma habilidade muito importante para aprender. Então você vai aprender algumas coisas realmente legais nos próximos vídeos. A primeira coisa que eu quero fazer é que eu quero impulsar, faz alguns gráficos para uma versão ligeiramente atualizada desta tela particular. Então eu vou pular dois sigma. Então este é o meu novo design favorito. Então você pode ver aqui, eu adicionei uma navegação de guias aqui para tortas favoritas e também uma seção de lugar Maya. Você pode ver que há uma miniatura aqui, no chão. Propor. Isto é efetivamente o que nossa tela é, Gainesville alguém pode parecer. Então esse é o salto de volta para a sonda. E vamos ver como as pessoas vêem. E vamos apagar os gráficos antigos disso. E nós vamos importar nosso novo design de Sigma para esta cena para deixar tudo como padrão. E então eu vou ver se estamos usando um esboço ou Adobe XD, em seguida, faz NFO como você fez anteriormente. Está bem, fixe. Então nossos gráficos chegaram. Por agora. Nós só vamos pegar o gráfico de cabeçalho padrão. Vai copiar isso. E vamos pular de volta para a nossa cena favorita e vamos colar o nosso cabeçalho. E nós vamos apenas tirar a palavra cópia fora do final disso, vamos excluir o grupo gráfico de cabeçalho padrão existente que tínhamos lá. E vamos substituir isso positivamente pelo nosso novo. Em seguida, queremos agrupar os gráficos que compõem os estados vazios juntos. Então isso é ilustração, os textos e o botão. Então ele vai agrupá-los juntos. E vamos chamar isso de estado vazio. Está bem? E para onde vamos, vamos configurar nosso tipo de estrutura de gestão estadual. Então a primeira coisa que vamos fazer é criar uma variável para todas as cenas. E vamos tornar esse sexo variável. E nós vamos chamar esse estado F, F estado sublinhado. Novamente, a nomeação. Estrutura é mais importante é a forma como eu fiz as coisas. Ok, e nós vamos definir, nós vamos dar a esta variável um valor padrão de vazio. E o que estamos fazendo aqui é que estamos usando a variável para controlar o estado que estamos realmente mostrando. Então, nosso estado padrão são os estados vazios, então ascenderia no primeiro dia como a estadia vazia como nosso padrão, estado padrão para o nosso gerente de estado. Ok, em seguida, vamos adicionar um gatilho estrela. E nós somos desinstalados tratados porque iniciar gatilho é o gatilho que é executado automaticamente quando a cena é carregada. Então queremos que nossos gerentes estaduais iniciem quando a cena. É por isso que estamos usando um gatilho estelar. E vamos mudar o nome deste gatilho inicial para estados. E vamos avaliá-lo para começar com salto em vez de uma estrela após salto, porque queremos que o estado seja definido antes que a tela seja renderizada. Usando começar com salto, apenas acontece um pouco mais rápido do que estrela após salto. Se usarmos salto pessoal, então provavelmente teremos uma cintilação do que estava lá antes, antes de vendermos bifes e também não queremos isso. E nós queremos verificar reiniciar cada vez porque queremos que o gerente de estado para verificar como ficar cada vez SQL que chegamos a isso, veja, vamos voltar para nossos gráficos de estado vazio. E como eu disse, nós queremos realmente usar nosso gerente de estado para iniciar o estado vazio primeiro por padrão. Então nós realmente queremos baixar a opacidade deste para baixo, então nós não queremos que ele esteja lá por padrão. Queremos que isso seja iniciado pelo nosso gerente. E nós vamos realmente adicionar uma condição ao nosso estado. E vamos chamar isso de vazio. E vamos definir a condição para escolher nossa variável de estado F. E nós vamos olhar, porque este é o estado vazio que estamos realmente avaliando aqui. Queremos procurar a palavra vazia. Então, em maiúsculas, então ele corresponde ao valor que adicionamos à nossa variável. E se a condição for igual a MC, queremos efetivamente carregar o anti-estado. Então vamos adicionar uma opacidade. E temos que aumentar para 100. E vamos definir a duração 0 porque queremos que isso aconteça imediatamente. Não é. Então, haverá animação em Isto é como queremos apenas estar lá se esse estado em particular é o estado que precisa ser mostrado. Está bem? Então é só dar esse teste. Então, obviamente, isso está definindo o estado vazio por padrão. Então você deve apenas ver o seu estado vazio como você viu antes. Mas obviamente você pode ver isso em nosso arquivo real. Então, passado aqui 0. Então sabemos que nosso gerente estadual está trabalhando porque podemos ver o núcleo do estado aqui. Então temos efetivamente sul como gerente estadual. E sentamos no nosso primeiro dia, que é o nosso estado vazio. Então temos tudo no lugar para adicionar mais estados à medida que progredimos. No próximo vídeo, vamos estar configurando nossa funcionalidade favorita. Então nós podemos realmente adicionar nossa diversão agora a partir do fluxo de fotos para este fluxo. Então vemo-nos lá. 29. Criando um recurso de favorecimento de fotos: Neste vídeo, vamos adicionar algumas personalizações são n variáveis e as condições são realmente boas para adicionar recursos de personalização. Na seção seis, começamos a construir os favoritos, vendo um recurso fotográfico. Neste vídeo, vamos continuar com esse recurso criando a capacidade de mostrar a foto na seção favorita. Predador não tem a capacidade de realmente mover objetos de um lugar para outro entre cenas, por exemplo. Também não tem qualquer capacidade de importar dados reais. Então vamos ter que adicionar algumas falsificações para fazer isso funcionar. Mas está tudo bem. Esta ideia protótipo da regra. Ok, então se você está acompanhando, continue com seu arquivo. Caso contrário, você pode baixar um arquivo inicial para este vídeo. E nós vamos começar indo para a seção Início, a tela inicial. E nós vamos copiar imagem nove dentro de nossos grupos de fotos ou efeitos de grupo de fluxo de fotos não abrir, em seguida, OpenFlow stream uva e na página um. E nós vamos pegar esta imagem nove aqui. E nós vamos apenas copiar isso. E nós vamos voltar para a nossa seção favorita. E nós vamos colar. E vamos renomeá-lo. E vamos nos posicionar no quartel-general coordenada 16 para X e 96 para y. então está no canto superior esquerdo. E vamos agrupar a imagem para que possamos, que possamos colocá-la em um contêiner e vamos chamar esse contêiner de tortas favoritas. Certo, então vamos reduzir a opacidade dos contêineres cuja era. E nós também vamos reduzir a imagem pi um para. Em seguida, vamos criar uma variável numérica para todas as cenas. Então, por padrão, você terá uma variável numérica que eu vou chamar este pi um. E vamos deixar o valor padrão é 0. Certo, então vamos criar um novo gatilho de estrela. E vamos sair do gerenciador de conteúdo, diz outro gerente criando e configurá-lo para reiniciar sempre. E hoje, vamos adicionar uma condição. E nós vamos chamar este pi um. Então, na condição que vamos escolher nossa pi uma variável. E nós vamos, nós vamos procurar um valor de um. Ok, então vamos voltar para o nosso Player uma imagem e vamos selecionar isso e vamos adicionar uma resposta de opacidade dentro dessa condição. Vamos ajustá-lo para 100. E vamos reduzir a duração para 0. Voltarei ao gerente do estado, que configuramos no último vídeo. E vamos adicionar um novo estado, então uma nova condição. E vamos chamá-lo de favoritos. E vamos definir o estado F. E vamos procurar os favoritos de valor. Capas dobráveis, como você viu anteriormente no vídeo anterior, estou usando todas as maiúsculas para meus nomes de estados. E se isso for verdade, se vamos, se obtivermos um igual aos favoritos, queremos analisar a capacidade. E queremos selecionar nosso estado vazio. E queremos definir a opacidade como 0. E queremos definir a duração como 0. Queremos, em seguida, selecionar o nosso grupo de piras favorito. Queremos adicionar outra opacidade. Ei, nós queremos definir para 100. E, novamente, queremos uma duração também. Ok, então nós fizemos duas coisas aqui. Temos selado conceito gerenciar, que é basicamente para gerenciar a exibição e ocultação de nossas imagens pi favoritas pi L. Aqui, adicionamos outro estado ao nosso gerente de palco, que efetivamente vai mostrar nossa torta favorita se nossa estadia f for igual a favoritos. E também vamos esconder o estado vazio. Tem alfa c será mudanças tomar de vazio para brilhar algo. Ok, então a seguir precisamos parar as imagens que a imagem vai ser favorita. Então vamos voltar para a tela inicial. Vamos descobrir o gatilho duplo. E isso abriu isso. E vamos adicionar uma nova resposta. E isso vai ser uma resposta de atribuição. E os respondentes atribuídos nos permitem atribuir valores a variáveis. E nós vamos selecionar a nossa variável de estado f. Então você pode ver, porque esta é uma variável que pode ser vista por todas as cenas. Você tem acesso a ele em todas as coisas. E a razão pela qual eu chamei F sublinhado ficar é F obviamente para favoritos. Então, como você vai ver em todas as suas cenas, você só precisa ter certeza de que ele tem um nome único. Então eu vou escolher isso como nossa variável. E vamos mudar o valor para Favoritos, certificando-se de que está tudo em maiúsculas, certo, então o que está errado aqui? Podemos ver que os espelhos cheios ainda são laranja. Uma laranja, como sabemos, significa que há algo errado. Ok, então porque estamos analisando o valor hexadecimal da AIDS. Quando adicionamos um valor de texto dentro de uma fórmula, precisamos envolvê-lo em aspas duplas. Caso contrário, não vai funcionar. Então apenas envolva a palavra entre aspas duplas. E agora você pode ver que os nossos interesses desapareceram. Certo, vamos adicionar outra resposta de atribuição. E desta vez vamos escolher a nossa variável pi one. E nós vamos definir na fórmula para um. Ok, vamos testar isso. Então, vamos rodar nossa tela inicial. Que tipo de chama para o nosso pi one. E nós vamos ter, bem, eles vão peice do favorito, que eu acredito que é este aqui. Vamos clicar duas vezes. Recebemos a animação que fizemos antes. E se agora vamos para a nossa seção favorita, podemos ver o r pi apareceu. Ok, isso é legal. Agora adicionamos uma personalização legal ao nosso aplicativo. Ou seja, pode parecer excessivamente complexo, mas todos nós net à prova de futuro para onde podemos querer adicionar vários favoritos. O desgaste nos dá controle sobre imagens individuais e os favoritos que você como um todo, o que tornará as coisas muito mais fáceis a longo prazo. Uma das coisas que jogamos uma torta, especialmente quando você começa a criar muita funcionalidade, é que as coisas podem ficar um pouco difíceis muito rapidamente. É por isso que uma boa estrutura e bom nome e sua vitalmente importante. Certo, então isso encerra a Seção 7. Espero que isso tenha lhe dado uma boa base de compreensão ou variáveis e condições e como elas podem ser usadas. Desafiei que você era alguns conceitos bem avançados aqui. Então, para todos faz sentido e você está bem no seu caminho para criar algumas coisas incríveis. Se tem sido um pouco difícil, Chave, Passe, jogue com os recursos e experimente outras maneiras de fazer as coisas. Certamente existem maneiras diferentes de criar a mesma funcionalidade. Na próxima seção, vamos explorar alguns dos recursos de hardware pro pies. Você não vai querer perder essa. Então vemo-nos lá. 30. Criando uma câmera real no aplicativo: Oi lá. Neste vídeo, vamos ser curador de uma câmera real no aplicativo. Então, na seção sete, adicionamos um novo recurso ao nosso aplicativo Pintrest chamado Minhas tortas. Com esse recurso, vamos dar aos nossos usuários capacidade de adicionar as esperanças de seus próprios Python. Podemos protótipo isto com tartes de predadores a capacidade de aceder à câmara no dispositivo. Então podemos nos concentrar no recurso da câmera. Eu já construí como a exibição de paginação e guias tudo idéia é idêntico ao que abordamos na Seção quatro. Então sinta-se à vontade para tentar construir esta metade característica você mesmo. Alternativamente, você pode simplesmente baixar o arquivo inicial onde eles já estão integrados. Ok, então temos nosso pager e nossas duas sub-telas. Você pode ver que eu tenho um espaço reservado chamado minhas aparências. Então, primeiro, vamos importar nosso design da pasta de ativos e criar essa exibição. Então eu vou pular para a FISMA. Obviamente, use a ferramenta de escolha que você está seguindo junto com. E eu vou impulsar, eu só queria mostrar a vocês dois pontos de vista. Então eu tenho esses dois pontos de vista sobre a mente joga vista e eu tenho a visão da câmera. Ok, então eu vou importar isso pode se aplicar como você. Vamos para a cena do impulso dentro do nosso arquivo e apagar tudo lá fora. E nós vamos importar. E eu só vou importar esse design para que meu upaya seja projetado para melhorar o N. Agora eu só estou interessado no botão da câmera aqui, então eu vou apenas copiar isso. E eu vou voltar para os meus favoritos aqui. E eu vou colá-lo no lugar. Ok, então eu quero, eu quero que ele esteja dentro do meu grupo de peças, que é este conteúdo da página apenas fora para o lado direito tem, e ele vai movê-lo para este recipiente de grupo. E eu vou definir os atos para 1-0 e garantir que o Y é 0 também. Então está no canto superior esquerdo disto. Meu detetive é um contêiner. Está bem, fixe. Tão grande. Então, temos a nossa vista vazia pronta para ir. Próximo tipo, queremos criar a câmera modal. Infelizmente, não há como salvar fotos ou movê-las entre cenas em oração para pi. Assim, qualquer foto tirada com a câmera só pode existir na cena em que foram filmadas. Isto é um pouco de uma restrição, mas podemos trabalhar com isso. Então, efetivamente, o que precisamos fazer, precisamos criar nossa visão modal da câmera dentro da mesma cena que queremos usar a foto que começou a tirar. E neste caso, tudo tem que existir dentro da nossa cena favorita. Então vamos voltar ao impulso visto novamente. E outra vez. Vamos apagar todos os nossos gráficos aqui. E desta vez vamos impulsionar nosso design de câmera no modo de câmera ou design. Então vamos escolher a Camera e vamos puxar isso. A primeira coisa que vamos fazer é excluir este guia de Bessel que este foi apenas para o nosso, para o meu uso quando eu estava colocando os estudiosos de design acreditam que o grupo quão completamente. E vamos adicionar um retângulo. E vamos torná-lo do mesmo tamanho do nosso dispositivo telefônico. Então, uma maneira muito rápida e fácil de fazer isso é apenas definir a largura e altura para um 100%. E então sonda eu vou descobrir a largura e altura exatas para nós. Vamos mover isto para a parte inferior da nossa última aplicação. E agora vamos agrupar tudo. Certo, então a única razão pela qual corrigimos este retângulo foi para forçar o grupo a ter o tamanho exato da tela. Então agora o trabalho de status de retângulo, podemos simplesmente remover o retângulo completamente. Vamos mudar o nome desta câmara de contentores. E vamos definir a cor do fundo dos recipientes para um E1, E, quando E. E, e certificando-se que tem um preenchimento 100%. E agora vamos copiar todo o grupo. E novamente, para voltar à nossa cena favorita e nós vamos apenas colá-la. Vamos nos livrar dessa xícara de café. Então agora o que precisamos fazer é adicionar a camada de câmera para acessar a câmera do corredor, nós realmente temos que adicionar uma camada especial. E essa camada existe dentro deste menu de mídia aqui. Então aqui estão as câmeras. Então nós meio que escolhemos a câmera para adicionar uma camada de câmera especial. E você verá que tem um pequeno ícone de uma câmera no meio disso. E o que queremos fazer é torná-lo do mesmo tamanho que a nossa camada de espaço reservado para fotos dentro do nosso design. Então são três 5-9 onde 359. Então vamos fazer com que seja o mesmo. 259 por 359. E vamos colocá-lo em nosso grupo de contêineres de câmera logo acima da foto. E nós vamos apenas nos mover para locais de posição na mesma posição que o, como a camada guia de inimigos da OMS. E então podemos remover o trabalho deste hotel Aristóteles. E podemos mudar o nome desta câmara. Ok, então isso é se você se certificar de que seu, você tem sua câmera selecionada pela última vez. Vamos até o painel Propriedades e vamos marcar esta caixa ao lado do início automático. E isso vai iniciar automaticamente nossa câmera assim que este layout, que são efetivamente assim que o protótipo é carregado. E vocês podem ver aqui nós realmente temos controle sobre a frente virada e a câmera traseira. Para este recurso específico que queremos usar. Nas câmeras, queremos tirar uma foto da nossa torta. Então vamos deixá-lo no padrão. E se olharmos para visualizar, podemos ver que temos essa linha em ziguezague acontecendo. Então este é basicamente o nosso laboratório de câmera e porque a visualização está em nosso, em nosso computador e agora o computador não tem uma câmera ou ele não tem acesso ao para a câmera. Se você tem uma câmera embutida no seu computador, ele só vai nos mostrar exatamente essas luzes. Então o que vamos fazer agora é enviar o nosso protótipo para o nosso dispositivo. E então, uma vez que está no dispositivo, que realmente pegar a câmera real, você verá a câmera real trabalhar dentro. Então vamos fazer isso agora. Então feche, reveja. E o que queremos fazer é abrir a imprensa, aplicar um jogador no nosso dispositivo. Então vou mudar para a vista da câmera para que você possa ver o que estou fazendo. Você pode ver aqui que eu tenho a sonda que eu toco aberto. Então, e você pode ver aqui em baixo que já nos conectamos via Wi-Fi ao nosso processo alto. Então você pode fazer isso digitalizando um código QR. Se eu te mostrar isso. Então, se você clicar no menu do dispositivo, você pode ver que você tem este código QR. E você pode ver que eu já conectei meu telefone aqui, então você só precisa digitalizar este código. Ok, então uma vez perguntar a todos conectar disse que vamos apertar o botão Executar. E você vai ouvir isso e vai tocar. Isso significa que é apenas o protótipo do meu telefone. E você pode ver que ele está apenas carregado aqui. E você pode ver agora que meu protótipo foi carregado. E você pode ver que a câmera, as câmeras reais realmente funcionam. E você pode ver que eu tenho minha vida morta fora da minha foto Pi montada e eu estou olhando para ela com minha câmera. Então isso é muito legal. Isso é tudo trabalho em bem. Ok, então a seguir queremos fazer a visão da câmera modal. Então o que vamos fazer é selecionar todo o nosso grupo de câmeras. E nós vamos apenas movê-lo para fora da parte inferior da tela. Queremos perder para animar modalmente a partir da parte inferior da tela. E vamos selecionar nosso botão da câmera, que é essa grande miniatura dentro do nosso grupo maya play, a que adicionamos anteriormente, uma que foi selecionada. E vamos adicionar um tetramer. E nós vamos chamar isso de gatilho de toque Open Camera. E vamos selecionar nossa visão de câmera novamente. E vamos adicionar uma resposta de movimento ao nosso gatilho recém-criado. E queremos mover a câmera lambda_2 0 yposição. Tão eficazmente um que é Animate de baixo. E nós estamos indo apenas para aumentar a duração para 0,4 está viajando bastante, uma grande distância toda a tela de fato, então nós não queremos que a duração seja muito rápida, caso contrário ele vai ser muito rápido. Ritmo. E a seguir, queremos ligar o botão de fechar. Então, se olharmos dentro do nosso grupo de camadas de câmera, temos um dentro do cabeçalho padrão aqui, temos um botão Fechar, então ele quer selecionar isso. E você vai notar isso. Na verdade, se eu rolar para baixo, você pode ver que meu botão de fechar aqui é um alvo bem pequeno. Então você tem essa habilidade e sonda pilotos que realmente aumentaram o cuidado tátil sem suplemento como um retângulo ou algo assim. Então vamos fazer isso agora. Então, se nós temos que selecionado e nós rolar para a parte inferior do nosso painel de propriedades, Nós temos esta área de toque opção. Então, vamos marcar essa caixa. E isso vai se abrir e nos dar a capacidade de adicionar preenchimento em um lado ou em todos os lados do nosso botão. Queremos que seja acolchoado por todo o caminho. Então nós vamos apenas manter esta caixa marcada igual m para todos os lados e nós vamos apenas adicionar 16 em qualquer uma das caixas. E quando apertarmos Return, ele vai adicioná-lo a todo o caminho ao redor. E você pode ver agora que eu tenho muito maior buraco aproveitado fica. Isso vai ser muito mais fácil para a cabeça. Está bem? O que vamos fazer agora é adicionar outro gatilho de abas para o nosso botão de fechar. E para isso vamos adicionar um resets e efeitos. Nós, o que queremos fazer é redefinir a animação da abertura da visão modal. Então, queremos ter certeza de que temos nossa visão modal da câmera. Então esse é o C maiúsculo. E vamos definir a duração para 0,3. Então, como eu disse na, na seção de animação, eu tendem a colocar um, uma duração mais rápida em algo que está fechando ou, ou casal saindo fazendo isso nossa animação do que eu também, é em animação. Então é por isso que eu defini um décimo de segundo mais rápido. Legal, então agora completamos uma configuração em nossas câmeras. Então, novamente, vamos executar isso e testar isso em nosso dispositivo. O que vamos fazer agora é deslizar a cruz que temos quatro. Vamos abrir nossa câmera modal. Isso vai trazer a nossa visão modal lá. E podemos ver que agora temos é como visão de câmera ao vivo ainda. E então podemos apertar este botão fechar para fechar a vista modal. Então lá vamos nós. Estamos todos preparados e prontos para fazer a próxima peça de funcionalidade, que é realmente tirar a foto. E é isso que vamos fazer no próximo vídeo. Vamos tirar uma foto. Então, vamos fazer essa miniatura da foto aparecer na seção do mercado. 31. Adição de uma foto tirada pela câmera no aplicativo: Oi lá. Então, neste vídeo, vamos continuar com a construção do nosso, nosso recurso para permitir que os usuários tirem fotos de suas próprias piras e tragam para o aplicativo. E, especificamente, nós vamos estar olhando para pegar um telefone de verdade. Então, depois de tirar uma foto, vamos adicionar algumas interações de câmera mais realistas ao nosso protótipo. Então, vamos indo. Então a primeira coisa que queremos fazer é queremos, se você estiver acompanhando, você pode baixar o arquivo inicial. Você quer se certificar de que você navega para o cabelo favorito cena. É onde estou atualmente. E a primeira coisa que vamos fazer é encontrar o grupo de botões dentro da câmera Grupo, que é um grupo R aqui. E queremos este grupo de botões aqui. E eu só vou rolar para baixo para que possamos ver como a câmera dura. Então é este, este botão no centro. Então, queremos ter certeza de que é selecionado. E vamos adicionar um gatilho de ataque. E vamos chamá-lo de “Take Photo”. E a isso vamos adicionar uma resposta da câmera. Assim, a resposta da câmera funciona em conjunto com camadas de câmera. Nós só temos uma camada de câmera em nosso site de projeto. Esse é o que criamos anteriormente. Então vamos selecionar nossa camada de câmera aqui. E temos duas opções aqui. Podemos ligar a câmera e parar a câmera. Então, já configuramos o telefone TO A funcionalidade de foto no aplicativo para começar automaticamente com câmeras para as câmeras já estava rodando. Se você assistiu ao vídeo anterior, você viu um chapéu que se alimenta ao vivo. Então, para imitar tirar uma foto, vamos efetivamente usar esses erros de risco para parar a câmera. Então, vamos selecionar “parar”. E a forma como o layout da câmera funciona BET. Provavelmente um pouco incomum em termos de como você pensa isso, esta função sabe como ele funciona dentro de proteína pi. Assim, o layout da câmera pode iniciar ou parar, como eu disse antes, quando ele pára, ele se lembra da última imagem. Era, a vida que ele olhava em que e quão eficaz pausa o vídeo. Então você tem uma imagem estática. Então vamos usar essa funcionalidade para imitar que tiramos uma foto. E é isso que esta resposta está fazendo. Ele está ofensivamente parando a câmera e no, no, no, no feed. O que podemos realmente fazer é se executarmos isso e carregarmos o protótipo aqui no nosso dispositivo. E nós vamos entrar e eu vou mostrar a vocês, eu vou lançar nossa câmera como, funcionalidade de câmera. Então nós temos nossa transmissão ao vivo aqui como eu era, como eu estava dizendo antes. E agora eu estou indo apenas para pressionar o botão e você pode ver agora que nós temos uma imagem estática, câmera agora ofensivamente parou. Então esta é a primeira parte da imitação. Tirei uma foto. Legal. Então vamos voltar para o estúdio Prettify. Então fizemos a primeira parte em que fizemos. Efetivamente congelou o MSC grouse até a imagem, mas não parece que nós realmente tiramos a foto. Então, eu só quero adicionar mais algumas interações, mais interações visuais para fazer com que pareça um pouco mais leve. Na verdade, tiramos uma foto. E o que realmente vamos fazer é adicionar um pouco, pouco efeito para fazer as câmeras parecerem piscar. E isso é para imitar a maneira como um obturador de câmera funciona. E isso dá a você a sensação de que você realmente tirou uma foto. Ok? O que vamos fazer é adicionar um retângulo. E vamos torná-lo preto. E vamos torná-lo do mesmo tamanho que a nossa câmera lá. Então ele realmente bebeu em nosso grupo de câmeras logo acima da camada. E nós vamos apenas obter o tamanho da coordenada no NIH e um 101. E o mesmo. E queremos que as dimensões, a largura e a altura sejam as mesmas, 359 quadrados. E vamos chamar isso de etiquetagem. Ok, então queremos transformá-lo tão inicialmente quando sua opacidade for 0. Então vamos baixar isso para 0. E nós vamos voltar para agora tirar fotos. Whoa, gatilho. E vamos nos certificar de que temos a camada de piscar selecionada. E vamos adicionar uma opacidade. E vamos fazer um 100. E vamos dar-lhe uma duração de 0. Ok? Vamos duplicar a opacidade. E nós vamos baixá-lo para 0. E nós vamos apenas adicionar um atraso de 0,12 passes. Ei, legal. Então isso é tratado com a animação. Também queremos que não queremos que este CPA apareça até que tenhamos tirado a foto. Então vamos definir seu trabalho inicial após os dentes são 0. E certificando-se de que foi selecionado, eu vou adicionar outra opacidade para superar as pessoas que acionam para isso, para este CTA. E vamos mudar sua opacidade para 100. Vamos manter a duração em 0,2 e vamos apenas adicionar e 0,3. atraso. Certo, vamos ao nosso dispositivo e testar isso. Então nós estamos apenas meio que executá-lo. Podemos ver aqui que acabou de ser recarregado no meu dispositivo. E eu vou iniciar minha câmera e preparar meus pais WHO. E você pode ver aqui agora que o CTA está faltando na parte inferior da tela. Então, vou tirar minha foto. E você pode ver que eu tenho meu pequeno piscar de olhos e eu tenho minha imagem estática. Ok, isso parece bom. Volte para o estúdio. Ok, diga de volta Harry Studio. E quero acrescentar uma última coisa. E isto é, eu quero adicionar um pouco de animação ao próprio botão real para fazer parecer que foi pressionado. Isso é tudo para ajudar a dar-lhes efeito realista ou tirar uma foto. Então o que eu vou fazer é selecionar o contêiner de botões. E eu vou adicionar um gatilho de touchdown. E então eu vou apenas selecionar o círculo interno do meu, do meu botão. E eu quero ter certeza de que a origem está definida para o centro, centro, porque eu vou fazer animação política sobre isso. E mantendo o enter, o botão Enter selecionado. Vou adicionar uma resposta de escala a este gatilho. E eu vou ajustá-lo para escala por um fator de 90. Então vamos reduzir a escala dele em 10%. E eu vou dizer que a duração disso para 0,01. Agora vou adicionar um gatilho de retoque. E quero que isto esteja no contentor dos botões. Obtém uma cópia desta escala, a resposta de escala do outro gatilho. E eu vou colá-lo no meu toque aqui em cima. E eu vou mudar a escala de volta para 100. Então, efetivamente, vamos escalá-lo de volta à sua posição original e original. Certo, vamos testá-los. Ok, então isso é executar isso no dispositivo inchado. E iniciaremos nossa foto de novo. Certifique-se de que você pode ver c o e eu vou apertar o botão. E espero que você tenha visto aquela animação baixa lá. Agora temos a nossa imagem estática e também temos as nossas fotos seguras que o CCA mostra também. Legal. Então agora temos uma câmera real realista no aplicativo que tira fotos. Bem, pelo menos uma foto, que sobre termina para este vídeo. No próximo vídeo, vamos tirar a foto capturada e construir uma diversão agora e adicionar à seção de miopia para vê-lo lá. 32. Como salvar uma foto como uma miniatura: Olá, bem-vindo de volta. E neste vídeo, continuaremos a partir do último vídeo onde criamos uma foto com a camada da câmera. E neste vídeo, vamos salvar que as pessoas têm bens. E agora temos um pequeno problema no entanto, porque a maneira de prettify funciona com o layout da câmera é que não podemos redefinir a imagem a partir da imagem parada da camada de câmera que tiramos no último vídeo. Portanto, temos a ver com nossa fumaça e espelhos para imitar a funcionalidade, funcionalidade de salvar essa foto de forma a uma miniatura. Então o que efetivamente temos que fazer é usar outra camada de câmera. E só para explicar um pouco sobre, um pouco mais sobre a camada da câmera. Porque você não está realmente tirando fotos com uma câmera ou realmente apenas olhando para a câmera através de uma camada. Você pode realmente adicionar lotes e lotes de camadas de câmera. E todos eles vão fazer a mesma coisa. Eles vão todos olhar através da câmera. Então, o que realmente vamos fazer para, para imitar o salvamento das fotos, na verdade, teria que camadas de câmera rodando ao mesmo tempo. Um a sua opinião, que é o que nós já construímos, mas um que você não vai ver qual vai ser a miniatura. E é aí que entra a parte da fumaça e dos espelhos. Então, os próximos artistas convidados, então vai fazer mais sentido à medida que avançarmos. Então, a primeira coisa que vamos fazer. Então, se você não fez, apenas para dizer se você não tem seguido junto, então por favor baixe o arquivo inicial que vem com este vídeo. Caso contrário, continuará de onde paramos. Então estamos ouvindo agora Pintrest em e onde na cena favorita. Por isso, certifique-se de navegar pelos favoritos. Podemos estar na mesma página que estamos. E a primeira coisa que vamos fazer é duplicar nossa camada de câmera. E vamos renomeá-lo para o polegar da câmera. E eu vou me posicionar na Maya Brincadeiras. Então vamos trazê-lo para cá. E o que queremos fazer é fazer você do mesmo tamanho e colocá-lo no mesmo local que o botão da câmera aqui. Assim, o Karabakh peca 163 por um, 76. Então vamos fazer nossa camada e a mesma ciência por 17. E então só precisamos pegar a posição que é 00. Isso é bom e fácil vender os celíacos e mais brancos 00. Ok. O que você também pode ver é que se eu apenas esconder esta câmera e isso tem cantos arredondados desta vez, e eu quero minhas miniaturas ou tem cantos arredondados também. Infelizmente, você vem você não tem acesso aos cantos do raio da câmera. Lera eus vamos precisar fazer isso? Precisamos agrupar a camada, assim como comando G, controle g do Windows. E somos apenas gentis com o raio de Saturno agora do grupo 16. E nós vamos descer até o fundo, indo para cortar subcamadas. Então agora você pode ver que temos nossos cantos arredondados. Nós envolvemos ir em torno de uma camada de câmera de canto. E vamos dar um nome a esta imagem. E ele vai nos dizer inicialmente, nós temos que dizer sua opacidade abaixo para 0. Certo, de volta ao nosso gatilho “Take a Photo”. Então este aqui. Então, com a seleção de fundos da câmera, vamos adicionar outra resposta da câmera. E vamos parar os polegares da câmera. O que fizemos antes. Vamos adicionar uma opacidade. Vamos mirar como, como imagem um grupo. E vamos adicionar capacidade a 100. Finalmente estamos chegando a coruja, salvar um botão Foto, rolar para baixo. CTA primária. Selecione isso. E vamos adicionar um gatilho de toque. E nós temos que copiar o reset que adicionamos ao nosso botão de fechar aqui. Copie isso. Vou entrar neste gatilho de torneira. Ok, isso é, isso parece bom. Então, efetivamente, o que queremos acontecer é quando pressionamos o botão Salvar, queremos que todo o aplicativo da câmera desapareça. Então o que vamos fazer agora é testar isso no dispositivo. Ok, então isso é executar o carregamento aqui em cima no meu dispositivo. Então eu vou perguntar antes de eu ir e eu vou selecionar meu, meu botão para entrar no modo Câmera. E eu vou tirar uma bela foto do meu, meu lindo 2k pi aqui em onde minha linda configuração. Scott e eu cantamos “Voltamos”. Ei, tire essa foto, isso parece bom. Ok, então nós temos a minha imagem de folheto. Então eu só vou apertar o botão dizer Foto. E voilá, salvamos o nosso ponto de piscina na nossa lista de favoritos. Então o que nós realmente fizemos aqui, como você, como você pode coluna, nós realmente temos os dois, os dois em camadas correndo ao mesmo tempo. Então, quando paramos a câmera, ela parou em ambas as camadas de câmera e nós apenas trazemos a opacidade. Então muitas vezes repro pi, você tem que pensar um pouco fora da caixa para alcançar os resultados E1, ok, há uma última coisa que eu gostaria de fazer no momento. Você pode ver que eu só posso tirar uma foto como o botão da câmera foi escondido pelas primeiras pessoas que selecionam, retificar isso de volta para o estúdio. Ok, então o que nós queremos fazer é efetivamente, nós queremos mover o botão da câmera um pouco mais de um. Então, quando a foto aparecer à esquerda, queremos passar para a direita. Então o que vamos fazer é voltar para nossas fotos tiradas, mas alguns McKenna vamos selecionar agora agora botão Camera. Então esse é aquele aqui. E vamos adicionar uma resposta ao movimento. E se olharmos para a largura de como de nosso botão de câmera, podemos ver é um 163. Então, queremos ir para lá junto com, com padrões melhores. Então nós estamos realmente indo para passar e nós vamos para lá por um 180 no x. e nós vamos definir a duração para 0 porque nós não temos, nós não queremos que você veja isso. Só queríamos resolver o cabelo. Então vamos apenas definir a duração para 0, então especialmente na posição correta. Certo, vamos testar isso de novo. De volta ao nosso dispositivo, um caso que executou o nosso protótipo. Certo, então aqui estamos de novo. Então vamos tirar uma foto. E vamos salvar a foto. E vocês podem ver aqui, nós temos nossos pais aqui e nós podemos ver que temos nosso botão da câmera que foi movido para o lado direito. Perfeito. Lá vai você. Acabamos de criar um antecessor em que tira fotos reais e salva-os para a seção MyPlate vai parar aqui. Mas você pode continuar adicionando a capacidade de tirar mais fotos, se desejar. Você só precisará usar mais camadas de câmera. Ok, então isso nos leva ao final deste vídeo. No próximo vídeo, vamos colocar um pouco de cereja no bolo, adicionando alguns aplicativos de azulejo haptics. Então vemo-nos lá. 33. Adição de feedback haptic com sensores com dispositivos: Outra capacidade de dispositivo que temos controle sobre é a sonda haptics, Suponho que organizar de haptics tanto para iOS e Android como ele usa sexo hap real. Os leilões de feedback para as duas plataformas são diferentes. Neste vídeo, vamos usar o iOS, mas se você tiver um telefone Android poderá escolher seu próprio haptics também. Então eu estou pensando que há dois lugares onde poderíamos adicionar alguns Hapsburgs para o aplicativo Pinterest quando salvamos um favorito e quando tocamos no botão da câmera, vamos fazer os favores 1 primeiro. Então vamos para casa. Estou nas casas, na tela inicial aqui. E vamos abrir o gatilho duplo. Certo, então vamos adicionar uma resposta vibratória. Assim, o haptics é chamado vibrar dentro do Pro pi. E quando você seleciona vibrar, você pode ver que há uma série de opções. Então nós temos iOS aqui e nós temos Android, e é hap seis aqui. Então vamos nos concentrar no meu SO. E podemos ver que há uma série de aparelhos, notificações, segues, impactos, hápticos, e teve uma seleção ajuda também. Então eu vou usar pesado para o bem do chapéu que eu quero usar. E você literalmente pode executar isso em seu dispositivo e então sentir, obviamente não há, eu realmente não posso mostrá-lo para você neste vídeo porque nós não podemos nos comunicar e vibrar através, através, através, através de seu meio, mas, ele executá-lo em seu telefone como nós já rodamos antes. Então você quer ir para o dispositivo e você quer digitalizar o código QR e você quer executá-lo em seu telefone. Então esse é o primeiro lugar que eu acho que seria onde eu quero colocar alguns haptics. Certo, então vamos para a câmera. Então vamos para a cena favorita. E nós vamos para a câmera no aplicativo. Então, este grupo que temos aqui e vamos para o gatilho touchdown. Então é aqui que estamos pressionando nossos ônibus. Então é muito bom deixar de ter saudades de casa quando você está pressionando botões. Então, vamos adicionar em nosso botão Foto aqui. Então vamos de novo, vamos adicionar uma resposta vibratória. E desta vez onde Gaines que usam o sucesso háptico como eu acho que funciona bem aqui. Novamente, execute-o conectando seu dispositivo ao seu protótipo e veja como você se sente. E isso é, isso é literalmente tão fácil quanto é adicionar tápticos ao seu, aos seus protótipos. Ok, então sinta-se livre para ter um jogo por aí com diferentes hap, sexo e sentir como eles são diferentes e sentir o que é certo. Há uma pequena experimentação que vai ao longo do caminho então nós realmente pedimos que você experimente com estes para este sensor muito físico em particular que você tem disponível aqui dentro de petabyte. Ok, então isso é um embrulho no nosso olhar para o hardware do dispositivo. Sinta-se livre para explorar algumas das outras respostas de hardware, como , temos bússola aqui, e também temos inclinação. Então e também temos 3D Touch, que é algo que foi obsoleto para iOS agora. Mas se você tem um mais velho e você tem que ter um fundador que suporta toque 3D. Mas se você tiver um iPhone dez, por exemplo , então, você também pode experimentar. Ok? Na próxima seção, vou apresentar-lhe fórmulas que acrescentam alguns superpoderes incríveis para você realmente criar algumas funcionalidades avançadas. Vejo vocês na próxima seção. 34. Usando fórmulas para rastrear a posição: Oi lá. Então neste vídeo vamos usar fórmulas para rastrear a posição em alguns dos componentes que já construímos em nosso protótipo. Então vamos voltar para a tela inicial e vamos para a guia de rolagem. E em vez de usar esses valores manuais que tínhamos para os gatilhos de torneira, vamos colocar uma fórmula dentro deles e vamos para esses, esses valores dinamicamente. Então isso chega a isso. Em primeiro lugar, queremos fazer é navegar para a cena do Lar. Está bem? E nós vamos encontrar o gatilho de hoje aqui. Só para lembrá-los, o gatilho de hoje está ligado ao Hab de hoje. E dentro dela onde efetivamente estamos movendo este gráfico de pílula. Então eles centram-se na posição de caranguejo na guia quando você seleciona isso. E se, e se você selecionar a resposta de movimento aqui, você pode ver que nós temos um valor fixo aqui, então nós temos 77,5. Se você tocar nesse campo, verá que há esse ícone de fx limpou um escritor lá. E quando ele onde quer que você veja e ícone fx dentro de um campo de entrada, dentro de uma interface profissional pies. Isso significa que você pode adicionar uma fórmula em vez disso. Então o que vamos fazer é tocar no ícone fx. E vai aparecer este pequeno campo aqui. E é aqui que podemos começar a criar nossas fórmulas. E o que vamos fazer, vamos apenas remover o valor duro aqui. E o que vamos fazer é tocar no botão mais. E vamos procurar o grupo chamado hoje. Portanto, certifique-se de grupos, que é um ícone quadrado pontilhado ao lado dele. Então vamos selecionar isso. E você pode ver aqui nós temos essas pequenas marcas de carrapato. Então este é o agradecimento de Lee. Como dentro de uma fórmula, você faz referência a um layout ou a um grupo de camadas dentro do seu, dentro do seu hype do processo. Certo, então temos o nosso grupo. Agora, queremos adicionar uma propriedade específica desse grupo. Então, para acessar uma propriedade em um grupo, a primeira coisa que fazemos é aproveitar um ponto, então adota. E assim que você tocar nisso, você verá um menu aparece. E você pode ver que você tem acesso às propriedades usuais que você viu em várias etapas através deste curso. E nós podemos realmente acessar essas propriedades deste grupo diretamente através desta fórmula. Então o que vamos fazer é selecionar a propriedade x. Então você pode ver quando eu digitar bancos também completa e, em seguida, basicamente, filtra esta caixa suspensa em tudo o que tem x em S. Então nós simplesmente queríamos os valores x. Então vamos selecionar isso. E vamos clicar em OK. E vamos testar isso. E o que realmente estamos procurando é nenhuma mudança. Então, vamos tocar para recomendado que eu vou ver obras como anteriormente se nós tocou hoje, podemos ver que também funciona. Mas agora hoje é realmente usado. Fórmula, ele está usando o x é o valor x do, do grupo de hoje. E morcegos agora dirigindo esse comportamento. Então, se nós, se efetivamente movermos este grupo para um local diferente, a pélvis ainda funciona. Ele ainda foi encontrar o centro desse grupo porque ele está diretamente conectado a um valor dinâmico no próprio grupo. Ok, então esse é o primeiro uso da fórmula que estamos usando em nosso protótipo. A seguir, vamos consertar uma animação que fizemos há algum tempo. E era a animação em que estávamos nesta tela inicial. E o que vamos fazer na verdade, eu só vou, ele vai bloquear este fundo só para que possamos acessar outros, outros componentes. Então nós temos essa, essa imagem dessa torta de merengue de limão moraine. E se você se lembrar, na seção anterior há algum tempo atrás, basicamente criamos uma visão detalhada. Quando você selecionar isso, vamos apenas executar isso para que você possa ver como isso se parece. Soft pegou Maya, minha janela de pré-visualização aqui. Então eu vou clicar sobre eles ou império. E nós temos isso. E está tudo bem. Estava crescendo fora do polegar. Agora, nós também tivemos uma animação de volta onde eu apenas apertei este botão de volta e isso efetivamente encolhe de volta. E isso é bom. Ele funciona bem quando a posição de rolagem está nesta, nesta posição padrão. Mas se eu mover agora este pergaminho, este lema, pira marinha gráfico até o topo da tela. E se eu pressioná-lo agora, você verá que ele começa na posição correta. Então, ainda está crescendo a partir da miniatura. Mas se eu apertar o botão Voltar, você verá que ele voltou para algum lugar aqui embaixo. E deixe-me abrandar isso. Então você pode ver isso. Então vamos, vamos subir a posição Roll da casa e vamos tocar no pi. E você pode ver que isso está crescendo corretamente. Mas quando tocamos para trás, podemos ver que ele está realmente indo para baixo para o seu espaço de posição inicial não, não seguindo a posição de rolagem. Quando é quando saímos disso, que estes são saudáveis. Então é isso que vamos corrigir agora usando fórmulas. Ok, então o que nós vamos fazer é ir para o gatilho de torneira se conecta ao botão Voltar também. Então precisamos descobrir o botão Voltar para qual está aqui. Então temos esse grupo aqui em Boston. E aqui está o gatilho do chapéu. E, na verdade, isso é renomear isso para torná-lo um pouco mais fácil de encontrar. E nós vamos abrir isso e vamos remover esses três recesso. Nós só vamos deletá-los completamente para que nós vamos recriar esta, esta animação de volta. Mas desta vez ele vai estar seguindo a posição correta da posição de rolagem do nosso, da nossa visão. Ok, então nós vamos para este gatilho logo acima. Então, é assim que, na verdade, é apenas renomear esta guia de exibição de detalhes do toque para. Então esta é a nossa animação de entrada e nós efeitos, queremos reverter isso para animação X. Ok, então novamente, para copiar a opacidade do cartão, esta casa ou esta primeira. E vamos colar isso na nossa torneira de volta. E vamos definir a opacidade para 0. E vamos definir a duração para 0 ponto um. E vamos remover o atraso. Então o próximo que vamos copiar é o fundo ou Pasífae. E nós vamos colar isso. E nós vamos definir isso para 0. Então esta é a tenda de fundo que efetivamente esta marca por baixo quando o, quando a vista aparece. A seguir, vamos copiar o raio. Cole isso. E vamos definir o raio apoiado 16 porque essa é a curvatura original do nosso polegar. Agora, em seguida, vamos copiar a imagem três escala. Vou colar isso. E vamos definir a escala para um. E dou-te dois por 4,5. E vamos deixar a duração em dois, e vamos deixar esse atraso em 0. Isso é tudo bom. E k Em seguida, vamos copiar e colar isso em. E vamos definir o x para 16. E é aqui que o nosso totalmente lá agora vai entrar em jogo porque o movimento é o, é a resposta chave para obter a animação na posição correta naquele pergaminho, na posição de rolagem. Então eu vou apenas acontecer com Y no campo y e nós vamos apertar o ícone fx. E vamos remover o valor do coração. E vamos amarrá-lo e toda a nossa matemática. Então a primeira coisa que vou digitar é 19 a mais 96. E vamos embrulhar isso em alguns parênteses. E a razão pela qual fizemos isso é que queremos adicionar esses dois valores juntos antes de trabalharmos os próximos cálculos temos que recomendamos entre parênteses que forçarão a fórmula a adicionar esses dois valores juntos primeiro, obter o resultado e, em seguida, usar esse resultado. E às vezes você precisa fazer isso. Caso contrário, você pode obter resultado diferente se eles funcionam como valor primeiro? Então, vamos adicionar um menos. Então, novamente, c menos isso de alguma coisa. E depois vamos derramar espaço. Você não tem que ir para o espaço M, mas só o torna um pouco mais legível. E agora vamos tocar no botão de mais. E queremos procurar a página um, que é a nossa primeira visão de rolagem aqui. Então, queremos escolher a Página 1. Vamos dactilografar o Doppler que fizemos antes. E desta vez queremos um valor diferente. Queremos algo chamado deslocamento de rolagem. Então isso vai nos dar o valor da rolagem e um momento específico quando o usuário tem rolar para baixo. Certo, então vamos clicar em OK. É assim que a fórmula completa. Ok, então agora vamos copiar a imagem três escala. Essa é a escala misteriosa da cadeia. Vou copiar este. E vamos colar isso no sentido inverso. E vamos definir isso para 163176. E então, finalmente, vamos copiar a imagem três opacidade cadeia. Vou colar isso. E vamos deixar uma duração 0, mas vamos atrasar isto em 0.2 porque queremos que isto aconteça por último. Então, efetivamente, o que estamos fazendo aqui é que vamos desvanecer a imagem da corrente de volta para fora. Na verdade, ele está tendendo a 0 direito no último, no último minuto. Então a maioria disso é, então isso é, isso é uma espécie de animação reversa complacente MOSFET é praticamente o mesmo. Estamos apenas invertendo os valores. E como eu disse, o movimento é o, é onde estávamos adicionando o valor dinâmico. Ok, então isso é fazer o teste para ver se isso funciona. Então, eu ainda tenho isso em um termo legal, velocidades para que possamos colocar nosso pergaminho em uma posição para que possamos ver que isso está funcionando ou não. Então eu vou explorar isso e nós temos nossa animação aberta, que nós não mudamos isso, que já funciona, mas este é o que nós mudamos. Então, quando nós apertamos Fechar, agora podemos ver que a animação para reverter N é realmente animá-lo volta para a posição de rolagem correta do nosso casaco Scroll. Então isso nos leva ao fim de nossa primeira olhada em fórmulas e como podemos usar fórmulas para rastrear posições. No próximo vídeo, vamos buscar mais alguns exemplos de fórmulas. Então, vemo-nos lá. 35. Criando um balcão de notificação: Oi lá. Neste vídeo, vamos usar fórmulas para criar um contador de notificação. Então isso é primeiro dar uma olhada no que vamos construir. Então, a primeira coisa que vamos fazer é importar este novo design para a nossa tela Atualizações. E esta tela de atualização vai nos mostrar três lugares. Então, três potenciais entusiastas de pi que talvez queiramos seguir. E nós vamos adicionar este emblema de notificação no ícone de atualizações na barra superior, que vai nos dizer que temos três itens que precisamos verificar. Nós vamos usar variáveis para tipo de controle que, esse número. E então, se pularmos para a tela inicial, vamos ver essa pequena animação estourando, nos mostrando o crachá enquanto fazemos login. Então é isso que vamos ser construídos neste vídeo. Então vamos a isso. Então aqui estou eu de volta ele meu aplicativo de descanso de pratos. Se você tem seguido junto, você pode apenas ser usado você pode apenas usar o mesmo, o mesmo arquivo que você foi, você está criando ou acompanhando comigo. Caso contrário, você pode baixar um arquivo inicial. Então você pode seguir a partir deste, a partir desta seção. Então a primeira coisa que vou fazer é ir para a cena da atualização. E eu vou agrupar todas as camadas, além do fluxo que as coisas acontecem. Então essas camadas representam o estado vazio. Então só queremos destacar essa onda agora. Então vamos chamá-lo de mancha vazia. E isso é apenas contratar isso. Em seguida, vamos importar como nova tela do nosso dos ativos Seção nove, que também está anexado ao, a esta seção, a esta seção de vídeo. E eu vou usar a figura como eu estive, eu tenho feito todo o tempo. E só para dar uma olhada, este é o design que vamos trazer de nosso arquivo particular. Mas é claro, se você estiver acompanhando o esboço ou você pode simplesmente usar os gráficos desses aplicativos. E o que eu vou fazer é eu vou para a nossa cena e eu vou apenas apagar se há alguma coisa em que apenas leva para fora. Então está completamente claro. E nós vamos importar nossos gráficos. Exceto que os dois projetos de nuvem costeira de pilha completa impulsiona isso. Então a próxima coisa que vamos fazer é agrupar nossas três notificações são três preços juntos. Na verdade, vou chamar aquele grupo de Paestum. Como jogar aficionados. E nós estamos indo apenas para equilibrar alguns do espaçamento e o tamanho dentro Então nós vamos, para cada subgrupo pice. Então, se você apenas Herzl descer para voltar para esses três grupos individuais livres e nós vamos apenas fazer deles 200. Oi, isso é um pouco de configuração para alguém ou eles mais tarde. E eu também quero fazer a diferença que a distância entre cada um. Então você pode apenas, se você quiser obter este pequeno gráfico onde ele tipo de mostra o espaço nas distâncias. Se você selecionar apenas um objeto, mouse sobre o objeto que você deseja medir entre. E então mantenha pressionado o botão. Seu pai que você vai ter um pouco vai ajudar. Então podemos ver que só precisamos ajustar isso por um pixel. E este um por dois. Porque agora eu deveria estar no meio. Isso parece bom. Ok, então vamos agora copiar o grupo de lugares e seu título. Ele vai comandar C ou controlar C no Windows. E nós vamos voltar para nossas atualizações. E nós vamos apenas colar esses gráficos. Ok, então isso é deixar o nosso Grupo de aparelhos e queremos transformar um em uma visão de rolagem. Então deixamos Will os pensamentos, seus preços um pergaminho vertical. E nós vamos apenas mudar a área de rolagem para aproximadamente para que eles se sentem dentro de nossa, dentro de nossa cena que, como aprendemos anteriormente, para fazer uma rolagem em grupo, você precisa definir a área de rolagem visível, que é o que acabamos de fazer. E não precisa ser super preciso. É que aproximadamente é sempre sobre a barra de abas, então vai ficar tudo bem. E então, finalmente, vamos apenas mover a barra de chapéu do nosso fóton para o topo. Nós queremos isso. Queremos que nossa visão de rolagem role efetivamente abaixo da barra quente lá. Esse é o pensador. Então é assim que a vista se configura. Nós só queremos pensar que eu vou agrupar todos esses gatilhos juntos também para que possamos nos concentrar em nosso novo ou novo truque é que vamos adicionar alguns como vamos agrupar estes juntos. E eu vou chamar isso de navegação. Então isso é apenas algumas coisas que fizemos em um vídeo anterior. Esconda isso do casaco, e essa é a nossa tela de atualização configurada. A seguir, vamos estar a causar a nossa atenção de volta à criação do cancro. Ok, então nós vamos criar as contas agora e funcionalmente, nós queremos agora contagens para Robert representando o número de pedidos de amizade que são pendentes. Então, basicamente, os amigos, as recomendações dos amigos que temos aqui em nossa opinião. Então a primeira coisa que vamos fazer é voltar à visão de impulso. E queremos obter o gráfico do crachá. Isso ainda é um pequeno gráfico que se centra no ícone do sino aqui. Então vamos copiar isso. E vamos voltar para a tela inicial. Vou colá-lo. Certo, então vamos mover o distintivo, o distintivo para a Coruja, para a barra de chapéu dele. Deixe-me apenas fechar alguns desses grupos acima sobre como tocar nosso grupo, nós vamos mover os distintivos ou eles estão apenas no topo não é bom. E vamos reposicioná-lo. Então vamos ao nosso painel de propriedades e mudar esses valores para 225. E podemos ver lá que temos apenas uma sessão no canto superior direito do nosso Bel Air. Ok. Então, voltando ao nosso emblema com o último painel, nós só queremos abrir esse grupo de crachás e você quer encontrar a camada de texto, que é este, o pequeno ícone, as cargas aqui e S. Então isso tem como número um, queremos selecione isso. Queremos ser capazes de editar esse texto. Queremos passar um valor real para isso. Então precisamos transformar isso em objetos de texto de altura de sonda nativa real. Então, se você selecioná-lo no painel de camadas e, em seguida, ir todo o caminho até o painel Propriedades e basta tocar este texto converter Vaselina, CO. E agora você pode ver que é, os ícones mudam é que mudou este TI concise agora um campo de texto editável. Vamos mudar o nome deste contador. E então a próxima coisa que queremos fazer é criar uma variável para manter o valor do nosso conselho. Então nós vamos descer para o painel Variáveis aqui. E vamos criar uma variável para todas as cenas. E vamos mudar o nome deste contador. E vamos definir o valor inicial 23 diz que temos três notificações em nosso design. Ok, então em seguida vamos parar de trabalhar em alguns gatilhos como concentrados em torno de alguns de nossos gatilhos mais antigos para que possamos lembrar algum espaço para trabalhar. E vamos adicionar um gatilho. E nós vamos apenas deixá-lo em seus padrões por enquanto. E então, dentro deste gatilho de ações, nós vamos, nós vamos adicionar algumas, algumas respostas, mas antes de fazer isso, nós vamos apenas renomeá-lo para contador de pedra. E a seguir vamos adicionar nossa primeira resposta, que será uma resposta de texto. E vamos selecionar como o laboratório fiscal do conselho. E vamos mudar o conteúdo de textos, a fórmula. Então queremos usar uma fórmula aqui e não veremos passar o valor da nossa variável. Então, vamos apertar o botão fx e depois o botão de mais. E você tem que querer escolher o seu contador, a variável contador, que apenas diz na parte inferior da lista aqui. Vamos clicar em OK. Ok, então isso é um teste para ver e ter certeza de que nossa variável está sendo passada para o nosso conselho com sucesso. Está bem, fixe. Então você pode ver que ele tem um número três em nosso, em nosso lote aqui você pode ver em nosso arquivo que tem um número um. Então, no tempo de execução, podemos ver que nossa variável está realmente sendo passada para o nosso contador. Ok, então em seguida, queremos criar a animação pop-up de notificação. Portanto, queremos que esta animação apenas chame a atenção do usuário enquanto eles fazem login e eles podem dizer-lhe que há notificações e precisam de sua atenção. Então vamos fazer isso agora. Feche o quão louco saberia. E vamos selecionar o grupo de lotes. E nós vamos mudar sua opacidade para 0. Ok, vamos voltar para o gatilho contador e vamos adicionar uma capacidade aqui. E vamos selecionar o nosso banco como alvo. E vamos definir a opacidade para 100. Vou mudar a duração para um Speedo um pouco mais curto. E vamos para a terra por 0,22. Ok, então a seguir vamos adicionar uma resposta de movimento. E, novamente, você quer se certificar de que o emblema está selecionado como o alvo. E nós vamos creditar que vamos fazer sistema de animação a primeira metade realmente ir animação. Então vamos mudar nossos médicos que se movem porque só queremos movê-lo por alguns pixels. Às vezes, é fácil usar MOOC por um movimento para dependendo do que você está fazendo. Porque eu estou movendo o distintivo um pouco para cima e para baixo um pouco. É mais fácil para ele me usar ao invés de descobrir o valor absoluto. E eu vou definir o valor no campo Y T menos dez. Vou deixar a duração como está, e vamos atrasar isso também por 0.2. Ok, então agora vamos duplicar a mudança para Apple Command ou Control D no Windows. E nós vamos apenas editar isso. Podemos remover o menos, então vamos movê-lo em dez para efetivamente movê-lo de volta para a posição em que começou. Desta vez, nós só brincamos em torno de comer um pouco. Nós vamos escolher uma facilidade para fora. E vamos mudar o interpolar de cúbico para elástico. Ok? E, finalmente, vamos subir a duração para 0,5. E vamos fazer os atrasos ou 0,3. Ok, então isso é bom. Essa é a nossa pequena animação. Ok, então deixe-me ver isso algumas vezes para que você possa ver um pequeno sacudido do nosso pedido de empréstimo ruim. Está chegando enquanto carregamos os códigos de educação em casa. Então isso nos leva ao final deste vídeo. No próximo vídeo, vamos explorar como podemos alterar dinamicamente o contador à medida que aceitamos solicitações de amizade. 36. Criando um recurso para aceitar solicitações de amigos: Então, neste vídeo, vamos continuar trabalhando em nosso contador de notificações. E agora vamos adicionar funcionalidade para que o contador mude dinamicamente quando aceitamos seguir as recomendações e as recomendações que a tela de atualização nos é fornecida. Então isso é começar rachando em. Então a primeira coisa que vamos fazer é começar a nossa casa vista aqui. Claro, se você quiser acompanhar, continue usando o arquivo que você está usando. Caso contrário, você pode baixar um arquivo. E para seguir junto com este caso de vídeo , nós vamos, nós vamos começar na tela inicial. E a primeira coisa que vamos fazer é ir para os nossos posicionamentos têm bar, e vamos copiar o grupo de distintivos. E nós vamos com nossas atualizações. E vamos colar isso aqui. E vamos colocá-lo dentro dos lugares. Traga o Bill aqui. Ok. Em seguida, vamos copiar, voltar para a tela inicial e vamos copiar o gatilho contra estrela. E nós também vamos colar isso na nossa atualização c, k. Então nós vamos trabalhar um pouco nesta estrela contadora. Então vamos mudar a opção para começar com o salto. E nós vamos apenas remover as três últimas respostas. Só queremos manter a resposta fiscal. E nós vamos apenas reconectar a resposta fiscal ao gatilho fiscal. Então nós vamos apenas procurar por nossas mensagens contrárias. E nós vamos selecionar isso. Ok, então da próxima vez queremos que o contador só mostre se ele tem um valor diferente de 0. Portanto, queremos ocultar dinamicamente o contador nesta situação. Então a maneira de fazer isso é que vamos adicionar uma condição ao nosso gatilho de estilo de contador. E vamos definir a condição para olhar para a nossa variável de contador. E vamos olhar para ver se essa variável, o valor dessa variável é maior que 0. Então vamos usar o símbolo maior que, que é este aqui. E nós vamos procurar o valor sendo maior que 0. Ok, então vamos adicionar uma capacidade a esta condição novamente para definir o alvo como o grupo de lotes. E a busca por lote aqui. E vamos definir a opacidade para 100. E vamos reduzir a duração para 0. Então, o que estamos basicamente fazendo aqui, esta condição vai ver se a va