Arte e código: crie e programe uma ilustração paralaxe interativa

1. Introdução: Oi. Meu nome é Jarrett, vocal no Illustrator, e eu faço alguns projetos de código para diversão Ocasionalmente muitas pessoas me perguntaram sobre essas ilustrações de paralaxe que eu tenho feito onde usar diferentes camadas para tipo de criar um três Efeito D com o seu trabalho artístico. E então eu finalmente estou fazendo um tutorial sobre isso. Então isso vai ser baseado em HTML, CSS e JavaScript junto com eu estou fazendo minhas camadas inapropriadas. E esta é uma classe avançada. Então, se você não fez minha aula inicial apropriada, eu incluo um link para isso nas notas para o curso. Eu provavelmente recomendaria passar por isso primeiro. Se tiver dúvidas sobre desenhar, mas vou ter algumas coisas novas aqui, e vou repassar um pouco. Mas também apenas alguns códigos de isenção de responsabilidade é inerentemente complicado. Se você não sabe nada sobre código, isso provavelmente vai ser meio que jogar você no fundo só um pouquinho. Eu tento ir o mais simples possível e manter isso não muito complicado, mas haverá coisas que simplesmente vão dar errado, e eu não serei capaz Teoh, explicar todas elas ou ajudá-lo com todas essas coisas. E sinto muito antecipadamente, mas eu recomendaria que você faça um curso rápido em HTML, CSS e JavaScript . Eu sei que W três escolas tem algumas coisas de introdução rápida ou acho que a Academia de código tem algumas boas , e eu acho que qualquer uma dessas seria uma ótima, maneira rápida de usar o seu tempo antes de fazer isso. Mas se você é um desenvolvedor experiente e está passando por essa aula, talvez ajude as pessoas que estão passando por um momento difícil e também tenha em mente que eu sou um artista, não um desenvolvedor, principalmente. Então vá com calma no meu código. Não seja muito mau, mas eu vou fazer isso em um iPad pro com lápis de maçã em “Vai estar trabalhando e procriar”. Você pode usar o Photoshopped Clip Studio. Não sei o que as pessoas usam. Qualquer um está fazendo programa que pode que você pode trabalhar com camadas e, em seguida, eu vou ser codificação em Kota em um iPad pro. Eu tenho um teclado se você tiver um teclado, Bluetooth, USB, USB, o que for. Usando este meu teclado. Eu recomendo que, porque durante o teclado de software de som seria uma dor. Mas você é bem-vindo para fazer o que quiser, e então eu vou estar fazendo isso em partes. Então, uh, sim, vamos começar. 2. Como desenhar um conceito e miniaturas: Muito bem, vamos começar a fazer alguns esboços para isto. E, uh, eu só vou entrar na minha pilha de esboços aqui e apropriado. Vou clicar no sinal de adição no canto superior direito para criar uma nova tela. E porque isso é apenas esboços sublinhando o tamanho da tela, isso realmente não importa, pois os esboços provavelmente criarão um novo documento assim que a maneira de começar no trabalho artístico real qualquer semana. Então, hum, se você não fez minha aula apropriada anterior, eu recomendaria ir lá para uma visão mais completa de como eu trabalho em procriar e tipos de coisas. Você pode dio Um mas eu vou tentar tocar em algumas coisas aqui. Alguns do poço, na verdade, primeiro lugar, o que vamos falar sobre o que estamos realmente tentando realizar aqui antes de ir para configurações apropriadas e coisas assim. Então, hum, indo para um safári. Então este é o meu site, Hum e então o efeito que estamos tentando recriar é esse tipo de paralaxe de três d onde você pode meio que movê-lo. Você pode ver que as camadas se movem em relação umas às outras, então parece que eu tenho uma caixa de sombra. É meio legal. E também você pode mover seu dispositivo, e enquanto você incliná-lo, você pode ver que a resposta ilustrativa ao giroscópio Então isso é muito legal. Então, algumas coisas que vamos querer pensar enquanto trabalhamos em esboços para isso são, um, um, tipo de elementos que você quer em segundo plano. O que você quer em primeiro plano, algo que você precisa estar ciente de como as coisas se sobrepõem aqui. Quando estou trabalhando em uma ilustração completa, isso não é para movimento muitas vezes. Como, digamos, se algo estava por trás desse Bush, eu não vou voltar para lá. É como, que tipo de cortar as coisas aqui ou algo assim, digamos, digamos, esse pequeno clipe, que você diz que eu não me importo. Ninguém vai ver isso porque está escondido atrás de um arbusto. Então você precisa estar ciente de que à medida que você mover as coisas, algumas delas serão expostas, e você pode ver que eu realmente fiz isso nesta peça. Se você tipo de dizer isso para outros longe através da seção sutil onde eu meio que parei de me preocupar com as sombras porque eu acho que eu meio que decidi que eu iria fazer algo legal com ele com as camadas. E obviamente eu não fiz um trabalho perfeito para que algo para pensar enquanto você está fazendo seus esboços e como você vai para a criação de arte final, outra coisa a pensar é que você pode ver que enquanto eu inclino isso, você pode ver que você classifica de ver mais do que você vê originalmente nas bordas, assim por diante, eu vou apenas mostrar-lhe o que eu fiz é criar um tipo de quadro de máscara ao redor do lado de fora, então você não pode vê-lo aqui porque o quadro é branco e o fundo é branco. Mas se eu for aqui, esta é uma versão sem isso no lugar. Então, porque eu tenho esses elementos que vão direto até a borda, eu não quero esse efeito onde você pode tipo de ver as coisas saindo da borda e as camadas parecem um pouco estranhas dessa maneira. Eu sinto que esse tipo de quebra o efeito três d um pouco para mim. Pode ser que você esteja totalmente bem com isso. Depende do que você está procurando. Mas se para mim pessoalmente, se eu estou indo para um defeito no fundo é uma espécie de sangramento completo e alguns elementos diferentes estão sangrando total. Eu não quero ver o tipo de coisas sair do limite e outros I É apenas curto quebra a ilusão. Acho que vou criar uma espécie de mascote. Eu vou estar pensando sobre isso enquanto eu faço o esboço também. A outra coisa éque acho que há outra. A outra coisa é Hum, você pode ver como você movê-lo. Você meio que tem esse efeito de inclinação legal. E este eu realmente gosto porque a espada em primeiro plano e o fundo, o acesso é meio que entre eles. Então o fundo meio que se move para a esquerda tipo de movimento para a direita, e eu acho que é meio legal porque faz com que pareça que a espada está saindo da página. O fundo está meio que indo para a página um pouco, então eu quero recriar esse efeito nesta peça que eu vou fazer então eu quero pensar sobre o que poderia ser o meu plano de fundo, o que poderia ser o meu primeiro plano, que tipo de flutuação acima. Então eu posso ter esse efeito legal onde, uh, parece que está girando ao redor do centro, e parece que há mais profundidade nele. Ok, então essas são algumas coisas para se pensar. Vou falar sobre eles um pouco mais enquanto faço esboços. Uh, mas sim, vamos voltar aos nossos esboços a partir dele. Então, a primeira coisa que eu quero falar é apenas uma espécie de configuração apropriada muito rapidamente. Então eu tenho algumas configurações personalizadas que você pode estar um pouco perdido se você não as tiver configurado. Então, vou passar pelo que preparei aqui. Então, se você abriu um documento que fizemos mais cedo, você bateu neste rancho no canto superior esquerdo? Uh, você pode ver que há todas essas pequenas opções. O único que estamos olhando agora é a imprensa. Você pode ligar uma interface de luz se você preferir que eu tendem a preferir escuro geralmente e, em seguida se você é canhoto, Você pode achar que isso é bom. Você pode mover os controles deslizantes de opacidade e tamanho para o outro lado. Então, se você estava fazendo assim, o que eu não faço às vezes eu gosto de ajustar aqueles com a mão que eu não estou secando assim por diante . Então vou deixar a maldição do pincel por aí. Isso é tipo de coisa de preferência pessoal, especialmente porque estou tentando e gravando um vídeo. Isso é meio legal. Você pode ver onde meus pincéis se você estiver olhando para a tela do iPad em vez do vídeo das minhas mãos. Esse é o mais importante aqui para o que estou fazendo são controles de gestos, e isso é umtipo de coisa mais avançada. Esse é o mais importante aqui para o que estou fazendo são controles de gestos, e isso é um controles de gestos, Mas eu só quero mostrar a você o caminho que eu não preparei. Uh, então não vai se preocupar muito com nenhum desses conta-gotas que eu preparei para o pequeno quadrado está se referindo. Teoh este quadrado aqui é o botão modificador deles. Então, se eu segurar isso, hum, então afeta o que o lápis faz. Então, se voltarmos para controles de gestos eso eu não preparei. Então minha ferramenta de seleção de cores do conta-gotas acontece quando eu mantenho o quadrado e usei o lápis de maçã. Ou eu posso tocar e segurar na tela para colocar meu conta-gotas, hum, forma rápida. Eu não mudei, e ele sentiu configurações lá. E, em seguida, menu rápido, este você tem que ativar para que não seja ativado por padrão no apropriado. Se você não o usou antes. O que tenho é que não me preparei para tocar. Assim que eu tocar na tela, o menu rápido aparecerá com meu dedo e não com o lápis de maçã. E também tenho um ecrã inteiro definido para ligar automaticamente enquanto estou a tentar. Você pode ou não gostar disso. Eu acho que eu meio que gosto, mas provavelmente ir e voltar um pouco sobre você também pode coberto com quatro dedos para entrar em tela cheia. Hum, mas deixe-me mostrar-lhe esses aqui muito rapidamente através disso. Interessante. Se eu personalizei qualquer outra coisa como não Oh, eu tenho camadas como essa. Vamos falar disso mais tarde, então não leia sobre isso tão rápido. Menu, uh, você apenas tipo de toque na tela e você pode ver este menu aparece. Não consigo me lembrar exatamente quais são as opções padrão aqui, mas para personalizá-las, toque e segure, e então você pode escolher entre um monte de ações diferentes que você deseja fazer aqui. Eso do jeito que eu tenho é que eu tenho tinta aqui. Apague no Alfa Lock, qual falarei mais tarde sobre o tamanho real. que, uh, não diga que eu estou ampliado na minha tela. Se eu tivesse tamanho real, isso faz minha tela do tamanho que realmente seria se eu fosse imprimir ou algo assim. Você pode alternar para frente e para trás entre onde ele retomou e o tamanho real. Hum, e então eu tenho Phil camada e adicionar texto. Eu não estou realmente vendido em ter tido texto neste menu rápido agora, porque a maioria dos projetos em que estou trabalhando não envolvem um monte de texto s. Eu vou realmente mudar isso agora para virar horizontalmente para que você possa ver que coloca A tela a cada, uh Ok, então esse é o menu rápido para você e nossos gestos. Então, a outra coisa que eu sei que muitos de vocês vão perguntar é sobre qual escova eu vou usar. Então, para isso, para o meu rosto de desenho, eu vou usar o lápis técnico, e isso é um pincel padrão e procriar. Eu acredito que está sob esboço, então você pode ver que você tem esta nova biblioteca quando você toca em pincéis. E então neste lado esquerdo você tem um monte de diferentes conjuntos de pincéis e a maioria desses que eu não ouvi nossos padrões. Eso esboço lápis técnico e eu criei meu próprio conjunto de pincel com um monte de pincéis que eu gosto de usar o tempo todo. O jeito que você faria isso é do lado esquerdo. Role para baixo e você pode clicar neste mais e você pode fazer um novo conjunto. Na verdade, não quero isso. E então Mas vamos apenas dizer que eu queria que você pode vir aqui tocar no pincel que você quer mover para o seu conjunto para duplicar, e então você tocar e segurar Andi com outro toque de dedo no novo conjunto e você poderia simplesmente soltá-lo Bem ali. Então, uh, isso é muito útil. Eu acho que eu vou apenas apagar isso dito, voltar para os meus favoritos em então Apenas uma outra coisa é então vamos dizer que eu desenhar algo e então eu vou para a corrida. Eu acho que por padrão ele corre. Eu não me lembro de algo grande, então venha apagar e é grande e eu não quero que seja grande porque eu quero tipo de controle sobre o que eu estou correndo. Então, se eu ir para o meu pincel e eu estou no lápis técnico lá e, em seguida, eu tocar e segurar no meu resort que vai usar automaticamente qualquer pincel que eu estou usando para pintar para sua navalha e redes de ambos os lados. Então, se eu tivesse algo em reserva Capitão, mantenha o nosso acontecimento. O Capitão disse ao Capitão sobre o tempo passado que funciona, uh, no pincel que mudaria para o que eu tenho usado para a navalha e Samos muito se você usar isso. Então vamos começar a desenhar por um minuto. Então, à medida que começamos na tentativa real, uh, primeiro não mostraria este recurso de forma rápida se você ainda não tentou isso. Isto é novo como um crer procreate esqueceu. Então você pode ver um tipo de verdadeiro um retângulo. E então, se eu parar e segurar no final, ele apenas endireita as linhas para mim, e eu posso tipo de reorganizar onde ele está na tela, e isso é super útil por muitas razões. Mas para o que eu vou fazer aqui é apenas uma espécie de criação de pequenos quadros para as minhas miniaturas . Uh, então eu fiz esta forma e então porque não é um retângulo perfeito, eu quero que ele em sua forma, e eu só vou falar retângulo. Você pode ver que aquele redirecionamento antes, hum, se você quiser fazer um quadrado perfeito ou um círculo perfeito ou algo assim, eu só vou apontar isso agora. Você pode fazer o seu melhor para soltar quadrado perfeito, e não é perfeito, realmente fez OK em que um, mas então você ainda está segurando o lápis para baixo na tela. Você pode ver que eu ainda estou movendo minha forma ao redor se eu adicionar mais um dedo para a tela que encaixa no quadrado perfeito e ele encaixa um rotações de 15 graus também. 15. Eu realmente não quero acertar por isso. Eu estou indo mais para como uma orientação retrato nosso trabalho. Mas você pode fazer o que quiser. Ainda quadrado. Mas, você sabe, você tem retângulo no interruptor para ligar as coisas para mim. Então isso é sobre a proporção que eu estou procurando. Eu queria estar com Tommy vai torná-lo um pouco mais magro. Vamos ficar com algo assim. Hum e, em seguida, também tem trabalhado com círculos e triângulos. Se acontecer de você querer criar seu trabalho em um triângulo ou algo assim, você pode fazer um triângulo, você pode fazer um círculo, e a mesma coisa se aplica. Se você mantiver outro dedo na tela, ele irá alternar entre restringir para um triângulo círculo perfeito e, uh, tipo da esquerda. Você pode ver isso muito bem aqui, mas você pode fazer interesse, e os lábios são ovais. E não foi para isso também. Um dedo, bem, meio que mudá-lo para uma versão mais perfeita dele. Ok, então eu quero começar com meu retângulo, e eu provavelmente vou fazer alguns esboços aqui, então eu vou apenas usar minha ferramenta de seleção círculo em torno da coisa toda. Eu provavelmente não precisava fazer isso porque essa é a única coisa na camada agora. Mas força do hábito, eu acho. E assim, e você pode deslizar para baixo com três dedos na tela e que lhe dará o seu menu de cópia de corte colar. Ou você pode abrir camadas apenas deslizar da direita para a esquerda nessa camada e duplicar. E então eu vou fazer isso e, em seguida, duplicar este retângulo que eu desenhei aqui e , em seguida, duplicar isso novamente. Então eu tenho três retângulos diferentes que eu posso dirigir e, em seguida, mesclá-los em uma camada porque eu realmente não quero um monte de jogadores de um esboço em miniatura diferente. Eu só vou juntá-los no meu menu de camadas, e você pode vê-los juntos apenas um ano. Hum, eu tenho todos esses esboços que eu posso para esses pequenos modelos retangulares trabalharem com os esboços. Hum, eu quero falar sobre algumas coisas que eu estou procurando nesses esboços, e então eu vou mudar para provavelmente lapso de tempo, e eu vou cair por um tempo. Você pode ver o processo aqui, mas assim, mas assim, como eu mencionei quando eu estava mostrando as obras de arte. Eu meio que quero trabalhar dentro de um quadro aqui. Eu meio que penso sobre essa obra de arte com a moldura desde o início. Então isso vai ser tipo do meu cérebro máscara branca que eu vou ter algumas coisas por trás dele, mas ele só será revelado tipo de quando você inclinar o dispositivo ou mover o mouse ou dedo na tela. E a outra coisa que eu quero pensar é, uh, tipo do que está no fundo. E a outra coisa que eu quero pensar é, uh, Talvez eu tenha nuvens ou algo assim. Estamos olhando nuvens, mas, hum, e talvez algumas estrelas no fundo e essas poderiam se mover um pouco em relação ao céu tipo de, mas então talvez eu tenha, tipo, uma figura em primeiro plano, apenas uma espécie de flutuação aqui. Diz o melhor que já dirigi porque não passo um tempo a desenhar estes minutos, mas só quero falar sobre algumas das coisas que procuro nestes esboços. Hum, então eu quero esta figura em primeiro plano. Se essa foi a idéia que eu estou indo para, eu meio que quero flutuar, então parece que está na frente desta máscara e então talvez eu tenha uma camada de sombra que vai para o fundo. E depois quero que estas nuvens pareçam que estão atrás. A máscara e o fundo do céu parecem estar atrás da máscara também. E então talvez se eu quiser apenas um pouco mais de profundidade, eu poderia adicionar alguns elementos flutuantes de estrelas na frente da máscara aqui para que eles poderiam estar talvez atrás da figura ou na frente da figura em termos de três D. Mas eles vão. Eles vão meio que quebrar o quadro apenas um pouco, e eu acho que isso poderia parecer muito legal neste contexto. Então você pode ver que estou usando meu menu rápido. Você não tem o Teoh tocar e depois tocar. Você pode simplesmente acontecer. Slide não gostou do que você quer. E isso significa que às vezes eu estou selecionando algo por acidente, como você provavelmente vai notar enquanto eu trabalho. Uh, eu estou bem com isso, porque no geral isso me acelera. Algo que você quer estar ciente quando você está definindo depois de um menu rápido é um não incluir nada aqui que você vai fazer por acidente que você não vai notar que você fez, se isso faz sentido. Então, por exemplo, eu costumava ter mesclado camadas aqui como eu criaria uma nova camada, desenhar algo que eu iria mesclar, e eu não consigo nem lembrar exatamente por que eu estava fazendo isso. Mas camadas mescladas é algo que, a menos que você não tem que estar olhando para o topo da tela com pouca coisa que diz mesclado, você pode não notar que isso aconteceu até um pouco mais tarde. Então você não quer ações destrutivas que você não vai notar. Então alguns deles são destrutivos, tecnicamente, como camada de enchimento. Mas vou notar que fiz isso. Eso Isso é apenas alguma coisa. Pense se você está pensando sobre a configuração do seu menu rápido. Hum, ok, então eu só vou soltar um pouco, uh, vir acima com um par de outras idéias, provavelmente encontrar agora em um pouco, e então espero que no final desta seção, vamos ter pelo menos um esboço que você pode seguir em frente para criar uma obra de arte completa que funcionará bem com um efeito de paralaxe. Então vamos começar. - Acho que estamos prontos para fazer esses esboços. Uh, então eu tenho três esboços. Estou muito feliz com todos eles. Então você decide qual deles eu realmente quero usar para este projeto de paralaxe. Eu poderia voltar a esses outros esboços para outra coisa ou outro projeto como este mais tarde. Mas, por enquanto, só precisamos escolher um. E acho que passei de um pouco mais simples do que gostaria para um pouco mais complicado do que gostaria. acho que passei de um pouco mais simples do que gostaria para um pouco mais Então eu estou me inclinando para este meio para este projeto em particular. , Então,para o próximo passo é, vamos movê-lo para um campus separado e depois, uh, terminá-lo em cores e tudo o mais, e essa será a próxima lição. Mas antes de passarmos para eles, eu gostaria de começar a próxima lição já com o nosso esboço em miniatura no campus. Então eu vou copiar o esboço aqui, então eu estou usando minha ferramenta de seleção, uh, uh, e apenas delineando, hum, este esboço, ter certeza que eu estou na camada certa para copiar isso, e há apenas uma camada, então isso deve ser ótimo. E então eu vou deslizar para baixo com três dedos na tela e apenas pressione Copiar lá e que copia minha arte aqui. E depois vou voltar para a galeria. Vou clicar em Plus e acho que foi muito perto de uma proporção de 43. Eso Porque eu quero usar este trabalho artístico como eu vou querer o trabalho artístico de resolução mais alta , bem como uma resolução mais baixa para o material de código. Vou começar com uma resolução mais alta. Eu provavelmente vou fazer 4000 por 3000. Tenho isso aqui, mas vou mostrar como você criaria isso, porque essa não é uma das opções padrão. Então, no fundo deste menu mais, tenho muitos extras aqui. Mas se você criar um tamanho personalizado aqui, você pode tocar em 4000. Na verdade, eu queria 3000 por 4000. Isso já é 4000. Você pode escolher o DP I. Isso não importa a menos que você esteja usando polegadas ou milímetros ou algo assim . Pelo menos não para os nossos propósitos aqui. Se você estiver em um iPad com p três. Eu gosto de usar a cor Petri porque você pode obter alguns vermelhos muito agradáveis e verdes. Hum, e então eu só vou chamar esse projeto de relaxar e pronto, e isso vai criar uma nova tela para mim. E eu vou bater com três dedos de novo e bater na pasta, e isso coloca minha arte aqui. Você pode ver que é muito menor do que este aqui. Truque legal aqui que provavelmente irá mostrar-lhe novamente mais tarde, como estamos trabalhando na arte real, é se eu tocar e segurar neste ícone de transformação aqui em cima, que você não pode ver porque eu estou tocando e segurando sobre ele. Uh, este pequeno ícone do cursor do mouse é para uma transformação, então se eu apenas tentar mover ou ampliar a tela que move isso sobre selecionado. Mas se eu tocar e segurar esta seta, então eu posso mover a tela sem se livrar da minha seleção em ir para apertar este ajuste para tela botão para baixo na parte inferior, e isso automaticamente apenas preenche a tela com minha arte em de, dependendo se você tem esta opção Magnetics ativada, que se comporta de forma diferente. por isso, se você desligado, em seguida, ele vai fazer Ah, visita chamado ajuste aspecto onde mantém sua relação de aspecto. Mas certifique-se de que todo o trabalho artístico se encaixa na tela em que, se você tiver Magnetics ativado e ele se encaixar na tela, ele faz o preenchimento de aspecto, que mantém sua proporção, mas preenche toda a tela. Eu provavelmente quero algo um pouco entre aqueles só para ter certeza que eu tenho , você sabe, eu vou com ajuste porque eu quero ter certeza que minha fronteira em torno disso é grande o suficiente. Eu estou desligando Magnetics ficando apto para tela e então eu vou apenas tocar na seta e então nós estamos prontos para ir na próxima lição. Então te vejo lá. 3. Desenhando 2 Refine seu esboço: Ok, então realmente, a única coisa que estamos tentando realizar nesta parte do tutorial é refinar este esboço. Então eu vou passar alguns minutos fazendo isso, e eu provavelmente vou colocar na hora certa. Lapso como eu trabalho, não há realmente muito segredo para ele, além de colocar em muito tempo e passar e certificar-se de que tudo está limpo e pronto para ir. Mas o objetivo de toda essa lição é que, no final, você terá terminado a arte colorida com camadas que estavam prontas para exportar para um projeto de paralaxe. E vou entrar em um pouco mais de detalhes quando chegarmos a esse ponto. Eu não quero ir muito em profundidade sobre como eu estou desenhando em procriação porque eu tenho outra aula sobre isso, e isso não é realmente o ponto total desta classe. Mas, por enquanto, vou trabalhar neste esboço, e vou apontar algumas coisas que eles conseguem colorir. Ok, acho que estamos prontos para fazer este sketch. Você deve ter notado que eu mudei os caras aqui umas cinco vezes aqui, e eu não estou 100% feliz com isso ainda, então é possível. À medida que passar pelas cores, vou mudar mais algumas coisas. Mas no geral, eu acho que tenho uma boa idéia o suficiente de que eu posso começar a bloquear em algumas cores, então vamos passar para isso. 4. Como desenhar três bloqueando em cores: Ok, eu vou começar a adicionar cor a isso. A maior parte disto vai ser lapso de tempo, mas quero mostrar-vos a técnica que estou a usar e tipo de como a separo. Eso em primeiro lugar, eu vou começar apenas bloqueando as cores e tipo de configuração de algumas das camadas principais que estavam indo trabalhar com aqui. E então eu provavelmente vou fazer um lapso de tempo depois de mostrar algumas dessas coisas e depois voltar quando eu começar a adicionar texturas e algumas formigas Grady e refinar cores, e vamos falar sobre isso um pouco mais. Mas vamos começar com apenas bloqueio e cores e tipo de como eu configurei isso. Tenho aqui o meu desenho em miniatura. Ainda assim, eu provavelmente posso acreditar que normalmente eu apago que eu vou mantê-lo por enquanto, apenas para o caso. Mas eu vou tocar nisso no meu menu de camadas e apenas trazer a opacidade da minha camada de esboço para baixo e realmente vai renomear isso tocando nele uma vez e, em seguida, tocando renomear apenas para esboçar. Então é fácil de encontrar quando eu tenho um milhão de camadas aqui, e então eu vou adicionar outra camada e apenas arrastar e soltar isso abaixo dessa camada de esboço . E agora, se eu desenhar algo, , a camada de esboço ainda estará acima dela. Uh, e então algumas outras coisas que eu queria apenas tocar muito rapidamente antes de chegarmos muito longe sobre isso é Você vê, eu desenhei este grande nosso retângulo, mas quase retângulo em torno disso. Esta é a máscara que eu estava falando na fase de miniatura. Então, eu só vou mostrar a vocês como eu configuraria isso. Uh, na verdade, vamos definir uma cor de fundo primeiro, e eu provavelmente vou mudar isso, mas apenas algo para começar. Digamos que temos um fundo azul e, em seguida, alguns na minha camada aqui. Eu só vou chamá-lo de máscara e, em seguida, abrir a minha ferramenta de seleção, que é esta coisa pequena em forma de s de cima esquerda e, em seguida, apenas um tipo de traço sobre isso. Hum, quando isso requer um pouco de prática, se você não está acostumado, Teoh , uh, pode ficar muito entediante, que é uma grande parte do porque eu estou apenas indo um tempo Lapse isso porque isso vai levar um mais tempo do que vai parecer que leva para você. Então não fique muito desencorajado se isso está levando você para sempre, e eu gosto de tipo de construir minhas seleções e peças, não há realmente nenhuma boa razão para isso, além de que é apenas uma espécie de como eu faço isso. Portanto, por padrão, esta ferramenta de seleção irá adicionar à seleção que você já tem, você possa ver que esta é uma área que não está selecionada. Esta é a área selecionada. Quero dizer, se eu adicionar Então se eu continuar tentando uma seleção e então eu voltar, nós não vimos isso. Acabei de adicionar Então eu tenho mais área selecionada, então você pode tipo de construí-lo peça por peça um pouco. Você também pode tocar para adicionar linhas retas em assim você pode desligar com a ferramenta de seleção entre toque toque guia para lotes de linhas retas, ou eu sou você pode fazer aderência linha reta e, em seguida, desenhar uma linha, e que pode ser curvilínea se você quiser. Você não quer que seja, mas e algum tipo lento de legal, porque para algo assim. Talvez eu queira uma linha curva para este canto. R E então eu poderia querer mudar para uma linha reta aqui, mas então continuar uma curva para que eu possa criar uma linha reta de onde quer que eu parei. Onde quer que eu comece de novo, e depois o próximo avião sem levantar minha caneta ou lápis de maçã, Eu acho que pode ser curvo para que você possa realmente misturar e combinar de uma forma realmente natural, o que é bom. E então eu vou entrar em selecione Branco, que já tem na minha paleta aqui. Então eu vou usar branco para esta máscara e então porque eu tenho Phil Layer configurado no meu menu rápido, lembre-se, lembre-se, nós conversamos sobre isso. Podemos ir assim e preencher a área que selecionei. Se você não configurou seu menu rápido e então eu toquei, eu tenho ele configurado. Então, o meu rápido quando você abre no toque e, em seguida, você pode tocar e segurar em algo e escolher o que você queria fazer. Então eu tenho que preencher mais tarde. Se você não quiser o seu menu rápido, você também pode tocar em suas camadas toque na camada que você deseja preencher e superior camada Phil, e então você começa esta máscara agradável. Ok, então agora você pode ver se eu estava para mover essa máscara em torno do fundo ainda é azul em todos os lugares e onde isso vai ser importante quando chegarmos à parte de código real onde estamos fazendo os controles de movimento e movendo as coisas porque, como eu mencionei antes, você não quer ver as bordas de suas diferentes camadas se sobrepõem umas às outras. Só parece um pouco estranho. E então nós vamos ter um monte de coisas. Algumas dessas coisas de fundo vão estar atrás da minha camada de máscara, e algumas delas vão aparecer na frente. E eu estou pensando agora que essas pessoas provavelmente estarão na frente disso também. Uh, então a outra coisa que eu quero mostrar é apenas então vamos dizer que as pessoas estão acima disso por enquanto, nós vamos usar a ferramenta de seleção. Eu só vou entrar e começar como fizemos com a máscara, selecionando minhas formas rapidamente. E eu vou escolher o Sculler em seguida, novamente, eu vou filmar meu menu rápido para preencher, uh e gastar. Quero dizer, apenas faça a forma pura muito rapidamente só para mostrar como queremos definir isso. Então eu sinto isso com um assassino porque esses dois, como eu mencionei, vão fazer parte da mesma imagem na exportação final. Vou começar a agrupar as coisas pela forma como quero que apareçam quando terminar. Então qualquer coisa dessas pessoas porque eles vão estar na mesma camada, especialmente porque eles estão se tocando. Seria muito complicado fazer camadas diferentes e manter isso intacto. Hum, eu vou apenas criar um grupo selecionando essas duas camadas, e você seleciona várias camadas tocando em uma e, em seguida, deslizando para a direita em outra para ter várias e, em seguida, você toca em grupo, que Eu só fiz. E então você pode ver que eles apareceram neste novo grupo aqui. Mas posso tocar para renomear que vou chamá-lo de pessoas ou humanos, porque isso é mais divertido. E então nós temos nossa máscara, qualquer que seja o ser humano, e então eu vou criar uma nova camada e mover isso para baixo, e então isso vai ser Vamos apenas fazer essa forma estranha nublada por agora, e você não quer apenas cortar isso fora porque esta máscara vai se mover. Então, meu instinto normal com algo assim, se não fosse uma ilustração comovente, é dizer que não tenho que desenhar nada aqui atrás porque ninguém além de mim verá . Mas como a camada vai se mover à medida que você move suas camadas ao redor, você precisa pensar sobre o que será visto lá. Você pode até querer definir essa máscara para 50% de opacidade ou algo assim você pode ver o que está acontecendo lá atrás e apenas notar se você decidiu parar as coisas subconscientemente ou algo assim, e então tem que decidir sobre uma cor para isso quase definitivamente não a cor que eu vou querer , mas serve para mostrar o que eu estou fazendo de vez em quando. Uma outra coisa que eu queria apontar antes de mudar isso para o modo de lapso de tempo é apenas isso . Eu vou estar usando um monte de máscaras aqui, provavelmente, hum, hum, então se você não está familiarizado com isso deixe-me apenas mostrar-lhe. Criei uma camada acima desta perna, certo? Criei uma camada acima desta perna, Se eu tocar nela uma vez e então eu toquei na máscara de recorte, então você pode ver que há uma pequena seta apontando para baixo, e está meio recuada. Isso significa que o que eu desenhar nesta camada de máscara de recorte só aparecerá dentro da forma que está mascarando ou que está sendo mascarado pelo meu palpite está realmente acontecendo. Então, se eu fizer esse tipo de joelho aqui e isso não tem que ser uma forma perfeita , e então desligo meu esboço só para facilitar a visualização e selecionar uma cor aqui. Você pode tipo de preencher isso e você pode ver no Lee. Você só pode vê-lo onde ele se sobrepõe dentro de mim. Então, se eu fosse tirar isso da máscara de recorte, você pode ver toda a forma. Se eu colocá-lo de volta na máscara de corte, você só pode ver a sobreposição. Então eu vou estar usando um pouco disso. E provavelmente vou assistir esse lapso de tempo agora e passar e tudo o que estou fazendo agora é bloquear as cores. Eu posso ficar um pouco empolgado em um par de brilho e coisas assim, mas principalmente eu estou apenas tentando obter as formas e idéia geral de cores. Acho que minhas cores estão bloqueadas aqui. Então eu vou começar a ajustar cores, um pouco mais de passeios, ingredientes em coisas, Alex e texturas mais do que eu tenho. Hum, e deixe-me falar sobre pincéis um pouco. Então, os arbustos que mais uso são provavelmente esses lápis, e esses podem ser encontrados em esboços. Eu uso o lápis técnico muito. Foi o que acusou neste caso. E ocasionalmente aquele HB e seis lápis B. E em artístico, acho que tem o pincel branco de acrílico que eu uso um pouco. E em artístico, Eu posso ter tirado isso daqui para fora apenas no cara usado para anular um também. Uh, quash me dá uma textura muito mais suave, mas com apenas um pouco de interesse nele e que acrílico pode ser muito mais, uh, tipo de aparência arranhada. Então deixe-me mostrar-lhe alguns desses. E também devo mencionar que eu tenho, uh, então meus pincéis favoritos todos nesta pedra, que eu acho que eu mencionei antes. Mas também dupliquei todos os meus pincéis em uma pasta chamada Multiplicar. Portanto, são os mesmos pincéis, mas cada um deles tem seu modo de mesclagem definido para se multiplicar. E se não sabes o que isso faz, deixa-me mostrar-te rapidamente. Digamos que eu queira uma cor. liga principal deste tipo, e eu estava a usar o quê? Acrílico sobre isso como cor roxa muito clara sobre. Eu não tenho certeza se isso é realmente bom ainda, mas então eu tenho esta camada definida para Alfa Lock. Você pode ver que há um tabuleiro de xadrez atrás dele, e isso significa que quando eu colorir nesta perna, nada aparecerá fora da perna apenas nas áreas que eu já desenhei algo. Se eu desligar nosso rebanho, você pode ver que ele aparece em todos os lugares. Uh, então você vai notar que o roxo claro não parece ótimo. Quero dizer, é muito leve, mas eu quero escurecer nas coisas enquanto mantenho a saturação. Então, se eu mudar para esta versão multiplicar do mesmo pincel multiply modo de mistura basicamente escurece as coisas enquanto as mantém saturadas. Então você pode ver que eu meio que posso passar por isso e apenas escurecer tudo. Também é transparente. Então, mesmo que eu tenha essas duas coisas a sombra, eu acho que é uma camada diferente. Mas digamos que estes eram a mesma camada. Eu ainda seria capaz de ver essa sombra tão tipo de escurece tudo uniformemente, que é realmente bom em vez de apenas cobri-la com uma cor sólida. Eu não tenho certeza se realmente queria escuro tanto assim. E talvez eu quisesse ser um pouco mais vermelho. Então, já que estamos falando sobre preencher com o pincel então eu estou usando este barco escova acrílico , você pode ver Ok. Tais camadas por acidente? Não, só desligava muitas vezes. Uh, então se eu for realmente leve, eu posso obter um radiante bem suave com ele. Ou se e isso é o que eu gosto de fazer com este pincel é realmente difícil em um lugar, que para ser levantado e, em seguida, tipo de clarear depois disso e apenas tipo de empurrar duro de vez em quando, e então você começa estes agradáveis, Texturas interessantes. Então eu meio que escuro no final deste tipo de interessante. Eu não sei o quão bem isso vai aparecer no vídeo, mas você tem uma textura mais interessante que você está recebendo. Hum, eu também vou estar refinando algumas formas aqui dizendo: “ Adoro isso.” Este tornozelo meio que tem um pequeno galo estranho aqui só um pouquinho. Então eu só vou cortar isso fora com minha ferramenta de seleção, ter essa área selecionada, e então eu posso esfregar três dedos para frente e para trás para a Grécia que você ouviu limpar, hum, tipo de cena coisa nesta camada. Outra coisa que eu queria mostrar a vocês é seleção de camada. Então, da maneira que eu tenho que configurar, eu posso segurar este botão modificador, e então eu poderia apenas tocar com um dedo. E enquanto eu deslizo ao redor da tela, eu noto que ele vai me dizer qual camada eu estou tocando atualmente. Ou se há várias camadas como porque uma dessas é uma espécie de transparente, então ele vai me dar opções e então eu posso escolher entre essas duas camadas. Então eu quero selecionar essa perna e, em seguida, apenas meio que limpar este pequeno pedaço de mim que eu acho que é um pouco demais. E novamente, se você quiser configurar jogadores, selecione dessa maneira. E novamente, se você quiser configurar jogadores, Você toca na chave inglesa do que preferências, controles de gesto, Seleção de camada. E eu tenho um modificador mais toque em nada mais. E descobri que isso funciona muito bem para mim. Você pode brincar com diferentes opções e ver o que você gosta. Então veja se há mais alguma coisa que eu queira falar aqui. A outra coisa que eu queria mencionar muito rapidamente, e eu tinha muitas pessoas me perguntando sobre isso em minha habilidade anterior. Classe compartilhada ISS, esta idéia máscara de saturação. Então o que eu gosto de fazer apenas para ter certeza de que eu tenho um bom contraste, porque às vezes é um pouco difícil de dizer. Então, por exemplo, aqui, onde o braço dessa garota está contra o fundo, parece que está vibrando um pouco para mim. E geralmente isso significa que os valores são um pouco próximos demais, não gosto que isso seja realmente horrível, mas isso é uma espécie de área onde é como se eu não tivesse certeza. Eu só quero olhar rápido para isso. Então eu vou preencher esta camada inteira acima de tudo com preto é que você poderia usar branco ,não importa, , e então eu vou bater no final. Então esta é a minha capacidade e modos de mesclagem para esta camada, e então eu vou para o topo da cor na extrema direita e, em seguida, tocar em saturação. E agora tenho essa camada que tira toda a cor de tudo que mantém meus valores. E você pode ver que eu estou realmente tendo alguns problemas com este braço bem aqui porque essa mão apenas tipo de mistura no fundo e então tudo vai e conserta que eu provavelmente estou indo para um monte de que agora mesmo, mas, É que é muito bom ter uma maneira rápida de usar isso o suficiente. Hum, eu não vejo muitos outros problemas aqui, então isso é realmente muito bom. Normalmente têm mais problemas do que isso. Então pontuação, uh, eu acho que fora isso, eu vou apenas começar o lapso de tempo novamente. e apenas passar e, uh, tentar refinar minhas cores em alguma credibilidade para coisas tipo de como eu fiz aqui, mas talvez luz em algumas áreas escuras em algumas áreas. Eu só faz para muito mais interesse visual. Se você tem tipo de mudanças de cor sutis nas coisas e eu vou partir daí, eu acho que estamos feitos o suficiente por agora. Eu só quero adicionar aquelas sombras que eu estava falando antes, e eu vou mostrar a vocês como eu faria isso. Então eu vou abrir minhas camadas e porque eu estou muito perto de fora de camadas para esta tela. Veja, eu tenho 28. Quero dizer, eu tenho 12 camadas restantes, mas eu quero duplicar esta seção inteira com este grupo de humanos ligado, e há mais de 12 camadas lá dentro. Então eu vou fazer é eu vou tocar achatar, vamos tocar uma vez, em seguida, tocar, achatar, e então eu vou tocar fora de camadas, deslizar para baixo com três dedos, copiar e então eu estou vai desfazer. E então agora não é mais platina, e então eu posso ir para a camada abaixo dele feito deslizar para baixo com três dedos e bater com base. E então eu tenho uma cópia desse grupo, e eu vou ligar e desligar um bloqueio para essa camada varrendo o menu rápido. E então eu vou Teoh, preenchê-lo com esta cor roxa clara que eu escolhi. E então eu vou mudar isso para multiplicar o modo de mesclagem para que você possa ver que eu tenho uma espécie de sombra deles agora. E eu quero que isso fique um pouco embaçado. Então, quando a imagem na frente dela se move, parece que está sendo lançada na frente eso. Antes de fazer isso, preciso desligar o Alfa Lock. E se não tiveres um homem rápido, arma-te. Você pode deslizar para a direita com dois dedos e você vai notar que o padrão quadriculado desapareceu. que significa que Alfa Lock está desligado que eu vou tocar na minha varinha mágica aqui em cima, que é o meu menu de ajustes e, em seguida, toque aconchegante, um, borrão e, em seguida, apenas balançar na tela para a direita em qualquer lugar, e eu concluo que, tanto quanto eu quero provavelmente algo assim seria muito bom em cerca de 19.7. Então faça o que quiser. Se eu virei meu grupo de camadas de humanos de volta e então ir para a minha ferramenta de movimento movido para fora e você pode ver que há uma sombra atrás deles e então eu realmente vou fazer a mesma coisa com a minha máscara. Claro, porque eu gostaria de ter a máscara lançando uma sombra sobre este pano de fundo também. Então eu vou apenas duplicar isso porque é apenas uma camada. Eu tenho muitas camadas para trabalhar com que eu posso apenas duplicar. Eu vou escolher o que é baixo, e então eu vou fazer isso. Os mesmos Ghazi e Blur. Hum, provavelmente a mesma quantidade, na verdade. Talvez um pouco menos, porque eu estou pensando que os humanos estarão na frente, que significa que isso talvez fique um pouco menos desfocado. Eu vou fazer 15% de borrão sobre isso, e então eu vou apenas deslizar para baixo para ligar Al Flock. É direito sobre para preencher a sua sem toque de cor roxa em meus modos de mistura. Mude isso para multiplicar, e agora se eu mover essa máscara, você pode ver que há uma sombra do mascarado atrás dela, e eu acredito que é isso. Na verdade, estamos criando a arte. Então, na próxima lição, eu vou passar sobre como eu vou agrupar as camadas para exportar, em seguida, e então nós vamos começar a casaco. 5. Como preparar 1 Preparando suas camadas: Tudo bem, então, neste ouvir, nós estamos apenas indo para ver como obter suas camadas exportadas combinadas da maneira que queremos que eles sejam usados em código e, em seguida, na verdade, em seu editor de código para que possamos começar , Uh, juntando seu projeto de código eso para começar, eu vou apenas deslizar da direita para a esquerda nesta miniatura do projeto em que estamos trabalhando e duplicar e a razão pela qual queremos fazer isso é para razões Na verdade, . uma é que eu não quero me livrar de todas as minhas camadas aqui, mas eu quero combinar minhas camadas. E a outra razão é que, se você se lembra, eu fiz isso maior do que eu preciso para este projeto de código era 3000 por 4000 pixels, que vai ser muito pesado se você estiver fazendo algo em um navegador da Web. Especialmente porque acho que vou acabar com algumas camadas neste projeto. Então nós vamos querer torná-lo menor, e nós vamos querer combinar um monte de camadas e, em seguida, exportá-las, e se eu fizesse isso neste projeto, então eu perderia um monte de detalhes que eu não quero perder. Então eu estou apenas criando uma duplicata abrindo isso, e então nós vamos apenas decidir quais camadas queremos combinar e tipo de como queremos que nosso projeto seja configurado para o código. Primeiro, vou apagar meus esboços e minha máscara de saturação. Eu não preciso disso para isso então. Eu só quero decidir quais camadas eu quero achatar. Então eu já sei que essas coisas flutuantes em primeiro plano, hum vai ser apenas uma camada. Meus humanos, eles serão apenas uma camada. Então eu só estou batendo uma vez do que bater e achatar minhas sombras. Acho que quero que ambas as sombras estejam na mesma camada porque elas estarão na mesma linha que o pano de fundo. Então eu só vou beliscar estes juntos para combinar uh e, em seguida, minha máscara, eu só quero que eles são dois conjuntos de elementos flutuantes. Quero ficar separado destas nuvens. Eu quero ficar separado, e você pode fazer isso do jeito que fizer mais sentido para você. Leva um pouco de tentativa e erro para tipo de ver o que faz sentido estar em diferentes camadas quando ele se move junto, então eu só quero combinar em Então eu tenho um fundo sólido então eu não usaria esta cor de fundo, Por enquanto, só porque você teria que exportar um pouco diferente. Por enquanto, Então eu simplesmente copiaria qualquer cor de fundo para uma camada acima do plano de fundo e, em seguida, combiná-lo. Se você tiver outros detalhes de fundo, eu tenho 12345678 camadas diferentes que eu quero exportar cada uma como PNG Um, então eu vou tocar na chave inglesa aqui em cima, e na verdade, antes de exportá-las, Preciso redimensionar minha tela. Eu vou dizer tamanho da lesão da colheita de lona. E então eu acho que porque isso é tão grande, certifique-se que você tem re amostra ativada, uh, então isso significa que você está dimensionando o documento em vez de cortá-lo. A amostra está ligada, e eu vou tocar aqui, e eu acho que eu vou tentar 900 por 1200 pixels para isso, uh, uh, e então você acabou de bater feito, e ele vai redimensionar. Então você pode dizer que eu perdi um pequeno detalhe, que é o que nós queríamos, que também significa que eles serão arquivos muito menores. E então eu vou tocar minha chave de novo aqui em cima e bater share. E isso é novo, Inapropriado 4.3. Então, se você não atualizou por cerca de três, isso é, uh que não estaria lá para você, mas no menu de compartilhamento, há essa área de camadas de compartilhamento, e eu vou apenas tocar em arquivos PNG. Então o que isso faz é exportar? Cada camada tem seu próprio arquivo PNG, e então eu vou dizer, salve oito imagens e isso irá salvá-las diretamente para você no meu rolo da câmera. Então, se eu não abrir isso, você pode vê-lo agora. Tenho 12345678 camadas diferentes todas salvas como PNG separadas para criar uma moral, o que é ótimo. Então, na próxima parte você pode usar de editordecódigo que você realmente quiser? Aquele em que vou usar o coda dele. Eu gosto dessa. Muita coisa por muitas razões. Acho que está muito bem feito. Eu acho que custa US $10 ou algo assim na loja APP em. Pode ser diferente agora, mas se você não quiser usar isso, há também este aplicativo chamado JavaScript em qualquer lugar que é gratuito. Isso é muito OK, e eu vou mostrar-lhe como importar imagens para lá também. Mas vou usar código na maioria das vezes. Então vamos começar com isso. Então esta é a sua primeira vez que lança o Coda? Uh, não haveria nada aqui para você. Eu sou meio nerd e tenho um monte de coisas diferentes que eu faço aqui. Então o que você vai querer fazer é apenas apertar este mais no canto superior direito superior, novo site, e então apenas dar-lhe um nome. Então eu vou chamar isso de paralaxe. Pode chamá-lo do que quiser. Se você é um nerd como eu e você tem outras coisas do site que você tem acesso de administrador , você poderia configurá-los aqui, mas eu não vou passar por isso agora em se eu tivesse feito, então eu só tenho este espaço em branco projeto, então eu vou tocar Parallax. E mais uma vez isto estaria vazio para ti se nunca tivesses aberto isto antes. Então você vai bater? Além disso, e então eu gosto de manter qualquer projeto que eu faça em ouvir em sua própria pasta. Então eu vou tocar nova pasta e, em seguida, eu vou chamar este Parallax e, em seguida, vai bater , criar, em seguida, tocar na pasta paralaxe que provavelmente estará no topo para você e então eu vou falar. Além disso, isso provavelmente irá pedir-lhe neste ponto, Teoh, permitir que ele acesse suas fotos, então certifique-se de clicar em OK sobre isso. Eu já fiz isso. Eso, você pode ver que eu tenho minhas camadas. Então isso é apenas tudo na minha biblioteca de fotos aqui que você pode rolar, o que é conveniente. Uh, então eu só vou bater e você quer ir de trás para a frente. Em suas camadas estão isso é o que eu estou fazendo de qualquer maneira. Então eu estou escolhendo minhas costas mais tarde meu fundo primeiro e tocando apenas tocando em que você pode ver que ele foi renomeado para mim, que é um pouco irritante, então eu vou apenas renomeá-lo aqui. Camada 11 ponto PNG um e, em seguida, eu vou ir e importar. Eu só vou fazer isso para cada uma das camadas que eu estou importando, e você precisa Teoh importá-los ou renomeá-los como você ir se você está fazendo isso desta maneira, caso contrário ele vai perguntar. Ele vai tentar renomeá-los da mesma coisa porque é baseado na hora do dia em que eles foram adicionados ou algo assim, e ele vai perguntar se você deseja substituí-lo. Então, se isso estiver acontecendo, certifique-se de que você está nomeando-os um de cada vez antes de importar o próximo. E isso é um pouco tedioso. Mas, Mas, bem-vindo à codificação. Além disso, a razão pela qual eu estou dando para números é se eu queria adicionar animação a estes, é que eu poderia nomear algo como camada um sublinhado para, por exemplo, camada um sublinhado três, e isso significa como quadro um. Então é basicamente como uma camada de cinco quadros um. Eu não vou entrar em animação neste tutorial porque é um pouco mais avançado , mas talvez em um líder um e último. Ok, então eu tenho 12345678 Perfeito. Ok, então todas as minhas camadas estão aqui prontas para ir. Voltaremos na próxima lição e vamos adicionar seus outros arquivos de código lá. Mas agora, eu só quero passar por este script de trabalho em qualquer lugar aplicativo realmente rapidamente. Se você optar por usar este, hum, eso você pode ver que ele só tem este projeto Olá mundo já está lá para você. Você pode ignorar isso. Vou acertar este mais no canto superior esquerdo. E então eu só vou ligar para o meu projeto Parallax e apertar Salvar e, em seguida, tocar sobre isso e cap aqui. Tem algum código aí para você. Quando chegarmos ao código, você quer apagar isso e substituí-lo pelo que estamos falando. Mas por enquanto, tudo que você precisa fazer é que há um pequeno ícone de imagem no canto inferior esquerdo. Eu vou tocar naquele hit plus e hit importar da biblioteca de fotos novamente. Isso provavelmente irá pedir-lhe acesso às suas fotos. Então eu digo, tudo bem. E então a mesma coisa que você só quer ir de trás para a frente. Eu não acredito que isso te dê qualquer maneira de renomeá-los. Devo estar enganado. - Sim. Então eu acho que é apenas chamado como ele é chamado. Então a senhorita vai importar quando você está fazendo o código, você vai precisar vir e procurar por essas referências em vez de onde escrevemos os nomes que demos a eles em Kota. Mas você vai fazer isso com cada imagem, como fizemos com Kota. Faz com que não os renomeie. Certifica-te de que funciona. Não tenta mudar o nome de outra coisa. Sim, então deve ficar bem. E OK, então sim, todas as nossas camadas de ar configuradas e prontas para ir. Você pode tocar nisso. Você pode ver isso. É a imagem que queremos eso na próxima lição. Vamos passar por cima de começar com o código, ter tudo ligado corretamente. Então, uh, você pode referenciar suas imagens de seu HTML e coisas assim. Uh, então eu vou ver na próxima lição 6. Programação 2 HTML, CSSS, e JavaScript: Certo, então vamos começar a codificar. Como eu mencionei, eu vou estar usando este aplicativo chamado Coda. Então, vou entrar aqui. Se você seguir junto com a lição anterior, você deve ter todas as suas camadas aqui já s. Então eu vou apenas criar uma pasta dentro deste suporte em vai chamá-lo de imagens, minúsculas I. E então eu vou selecionar todas essas imagens e apenas rastreá-los em sua e começar. Então agora eu deveria ter uma pasta nesta pasta paralaxe e nada mais. Então eu vou bater este mais e, em seguida, rápido novo arquivo aqui e chamá-lo índice dot html e então eu estou indo mais novamente, dormiu um novo arquivo chamar este um ponto médio Js e um mais chamado estilos CSS. Ok, então se você não está familiarizado com o código em tudo, nós vamos passar por estes apenas um pouco como nós temos as coisas configurado, mas essencialmente o índice dot html. Então html é tipo de sua estrutura de sua página. É onde você organizou as diferentes peças. CSS é o seu estilo para a página, que , uh, basicamente significa como se você quiser mudar cores, tamanhos das coisas, posições das coisas, é aí que você faria isso. E então o arquivo Js ou JavaScript é onde você faz em qualquer uma de sua lógica. Então, se você quiser que coisas reais aconteçam em sua página, geralmente será em JavaScript. Então vamos começar com o arquivo HTML. E então eu toquei nisso. E então eu vou bater editar no Coda e, em seguida, a primeira coisa que você vai querer fazer e eu vou me certificar de que eu incluir versões acabadas e em andamento versões de cada um desses arquivos e como parte do projeto. Então, se você se perder, você pode ir em referência àqueles que vamos querer fazer. Ângulo de abertura, colchete, ponto de exclamação doc, digite todas as maiúsculas e, em seguida, ht conhecido minúsculas. E então é amanhã, Slash beliscado, você sabe. Então estas são tags HTML, basicamente estas ar como pequenos contêineres. Então este dos top apenas diz que este é um documento HTML. Estes eles estão dizendo ok, e agora aqui está o HTML real. Qualquer coisa dentro deles na próxima coisa vai ser chamado de cabeça e eu vou fechá-lo barra dentro disso, nós vamos ter um par de coisas de metadados e nós vamos importar nosso arquivo CSS. Então a primeira coisa que vamos dizer é o título e você pode chamar isso do que quiser. Vou chamar-lhe “Relaxe”. Não tem que estar em barra. O próximo vai ser, uh, link é uh, igual a folha de estilo é igual a texto barra CSS Trump igual a não Sasha Styles. E então eu poderia colocar especial sobre fechá-lo dentro do ataque de abertura. Então este diz o título das minhas páginas, Parallax. Este aqui diz, é onde meu arquivo CSS está, e isso vai ser importante. Se você quiser mover as coisas em torno da página, o que fazemos e, em seguida, é o próximo. Esses estão certos, é importante. Certo, nome aqui, não o meu. O próximo é basicamente diz que Teoh sob o tamanho do dispositivo. Então, se você tem uma tela retina de alta definição, este faz com que ele realmente apareça com o tamanho certo em algumas outras coisas. Esfria igual dispositivo porque um usuário Ok, então isso é tudo para o seu elemento cabeça. Andi, pode copiar tudo isso diretamente? É absoluto. Provavelmente deveria me colocar lá. Então, para o próximo pedaço deste vai ser corpo. Então é aqui que o seu conteúdo real vai. Assim, o material principal é principalmente metadados como configurar algo que você pode importar scripts lá , embora geralmente torna mais sensível na parte inferior. Hum, e então se você quiser falar sobre isso, fazer Andi fazer alguém pode já estar familiarizado com essas coisas. Então me desculpe se isso é muito complicado ou muito simples para você. Só estou explicando do jeito que estou explicando. Então eso div basicamente é apenas um recipiente piscar em html e você vai ver alguns outros tipos de contêineres como corpo e, por exemplo, você pode ter isso, eu acho que é um parágrafo é o que o P representa. Então você tem diferentes tipos de tags HTML. Div é um que eu uso mais porque eu gosto de estilizar as coisas em meu próprio lugar onde alguns desses outros podem vir com, hum, alguns estilos construídos em alguns graus, então você pode ter algo como H um. Isso significa Cabeçalho um, e isso só vai ser maior do que o texto normal. Mas se ele usou, se é apenas um piscar de olhos e pronto para usar para o que você quiser. Então eu acho que esses são bons de usar, então um outro que nós queremos conversar. Na verdade, não vamos usar isso no projeto, mas apenas para ter certeza de que suas imagens estão no lugar certo e sendo referenciadas corretamente, vamos incluir uma imagem aqui. Então essa etiqueta é que eu sou G. E então SRC é a fonte e você diz que é igual a abertura. Citação próxima citação, tem imagens de barra barra jogador um g e eu posso apenas fechar-se com barra e também. E então precisamos ter certeza que revelou qual é. Nosso corpo está fechado, o que é, e a última coisa que queremos fazer aqui é importante. Nós vamos ver um script é igual a texto barra JavaScript R c fontes é igual a ponto barra significa Jess, e isso deve ser tudo o que precisamos para agora em nosso HTML. Então, vou guardar isso. E há um pequeno globo ocular no canto superior direito da tela. E eu vou tocar e segurar isso realmente de baixo, preso ao meu navegador safari e, em seguida, arrastá-lo e soltá-lo aqui e colocar isso lado a lado. E então eu vou tocar no globo ocular em Kota e dizer aberto no safari e isso vai esperar na minha página que é uma festa e você pode ver que eu tenho as coisas arrumadas bem aqui. Então, uh, esta palavra de teste que eu coloquei obrigado está aparecendo no topo da página e depois imagens logo abaixo disso, que é exatamente como eu disse que nós não temos nenhum estilo ainda. Então eu vou tocar neste pequeno ícone de caixa na parte superior, esquerda e direita da esquerda para a direita na tela e, em seguida, abrir estilos que CSS e lá. Eu só quero colocar um par de coisas se HTM fora do corpo. Então CSS significa folhas de estilo em cascata. Isso significa que as coisas que você coloca no nível superior para html no corpo. Se você olhar para a maneira que temos o nosso HTML estruturado é o elemento de nível superior, e qualquer coisa recuada é um filho desse elemento. Então, em cascata significa que qualquer coisa que eu colocar em medo deve afetar os elementos também ser baixado, a menos que eu substitua em outro lugar. Então a primeira coisa que vou dizer é o tamanho das caixas e a caixa, depois a margem zero. E você pode ver essa margem zero. Você pode dizer que há apenas um pouco de margem branca na borda da página agora. Então eu atualizo isso e seu CSS está ligado agora você vai ver que aquele comerciante branco vai embora, o que é ótimo. E, em seguida, essas coisas são principalmente apenas para obter o nosso conteúdo no meio da página . Você realmente não tem que entender muito sobre exatamente como eles funcionam agora. Bem, Bem, exceto de volta, isso deixa o fundo da página branco. Eu também poderia fazer preto se eu quisesse, um e então exibir Lex. Não vou entrar nos detalhes de como isso funciona. Basta dizer, é muito legal, relativamente novo com CSS, relativamente novo com CSS, e então ele permite que você centralize as coisas muito mais facilmente do que isso é apenas um centro. Então você poderia sem essa propriedade flex display. Quero dizer, não é assim que essas duas linhas estão apenas dizendo centralizar horizontalmente e verticalmente. A última coisa que quero fazer é não gostar de ter uma fonte serif na minha página a menos que eu realmente quisesse por algum motivo. Por isso, não quero os fundos deles. Eu vou dizer famílias responder que nós vamos apenas padrão Seja qual for o seu sistema sans serif fonte é e, em seguida, para o recipiente de imagem, Eu não acho que eu estou indo sem volta em HD Go. Vamos ter uma div com uma classe de contêiner de imagem e então isso vai ser display flex também. 100% 100% Max com percentual ir salvar indo para atualizar aqui. E assim parece que até mesmo mostrar isso também. Não tenho certeza onde extra em exatamente. Eu tenho interessante que provavelmente está coberto. Acredita nesta imagem. Sim, o Texas ainda está aí? Eu só vou fazer isso. Deixe gerenciar a sua e OK, por isso, se a sua página se parece com isso agora ou qualquer que seja o seu plano de fundo, então o seu CSS está ligado. Como deve ser na última coisa que queremos fazer para esta seção é apenas ter certeza de que nosso violista javascript olhou para cima como ele deve ser uma ondulação. Então eu vou falar sobre esta caixa novamente direita da esquerda para a direita e, em seguida, toque no ponto principal Js e, em seguida, toque em edição coda. E depois aqui. Não vou fazer muito agora, mas vou ficar alerta. Abrindo parênteses, e aspas de abertura. Olá, Ponto de Exclamação do Mundo Espacial. Eu vejo. E então, se você salvar isso e, em seguida, quando você atualizar sua página, nós devemos ter um pequeno pop-up que diz Olá mundo. Então, se tudo isso aconteceu, então seu HTML CSS e JavaScript e imagens estão todos configurados, certo? Se eles não são, então eu vou incluir esses arquivos no projeto em, então você vai ser capaz de passar e apenas comparar e ver o que você tem errado. Acho que não há muito aqui. Isso vai ser muito exigente até agora. Coisas para procurar se algo não está funcionando nossas letras maiúsculas em seus nomes de coisas como javascript e CSS. Esse médico precisa estar aqui antes e antes de abrir algo e ter certeza que todos os seus suportes e coisas estão fechados, certo? Esse médico precisa estar aqui antes e antes de abrir algo e ter certeza que todos os seus suportes e coisas estão fechados, Mas, novamente, você pode precisar apenas olhar através do seu código e compará-lo com como ele deve ser, porque o código pode ser apenas um pouco exigente sobre coisas assim. Então eu acho que isso é tudo o que eu queria cobrir sobre este ouvir em particular. E então, no próximo, nós vamos começar a realmente obter todas as suas imagens na página da maneira que queremos que elas sejam. Então, vamos para a próxima lista. 7. Como codificar 3 na tela: Tudo bem. Então, uh, nós vamos começar realmente colocando todas as nossas imagens em HTML 5 tela. Então o objetivo até o final desta lição é em vez de usar esta tag de imagem que estamos usando aqui, vamos usar no elemento HTML campus, que é uma coisa legal que é projetado para tipo de animação Web e muito mais coisas interativas. Eso Vamos falar sobre como usar isso um pouco. E queremos renderizar nossas imagens em um loop de renderização usando quadro de animação de solicitação, sobre o qual falaremos um pouco mais. Eso este aqui. Vai haver um monte de código, e pode parecer um pouco intimidante, mas nada aqui é muito complicado. E eu vou tentar repassar o que o básico é, o que estamos fazendo enquanto vamos. Mas se você não está familiarizado com o código, isso pode parecer um pouco esmagador. Então, novamente eu vou fornecer os arquivos para você no final, e espero que isso vai ajudar com isso. Mas, uh, aperte o cinto, eu acho. E então a primeira coisa que vamos querer retirar Thies para a tag de teste central e esta imagem de teste porque não vamos usá-los. E em vez disso, vamos colocar na classe lona igual a investir chamadas. OK, então isso com parte. Na verdade, eu quero falar sobre algumas coisas aqui. Eu só vou responder a isso e eu vou falar sobre por que eu estou fazendo isso. Estou fazendo com iguais. 900 é igual a 100 e I d igual. Então você deve ter notado que eu estou fazendo essas aulas e idéias sobre as coisas. Se você não está familiarizado com HTML, classe é geralmente usado para coisas de estilo. Então é quando você diz ponto algo assim no arquivo CSS, uh, uh, este contêiner de imagem ponto. Esta é uma classe, uh, seletor para CSS, e isso só significa que ele está procurando por qualquer coisa com essa classe nele em seu HTML, e então ele vai aplicar esses estilos a ele. Então eu tenho a classe de recipiente de imagem nesta div sobre a minha tela, e então eu estou usando recipiente de imagem ponto para estilizá-lo em CSS. Então eu tinha uma classe de tela para tela elemento, e então eu vou. Eu tinha algumas coisas para CSS em um segundo. Este com 900 elevando nosso teve 1200. Esse é o tamanho da minha arte. Se o seu trabalho artístico tiver um tamanho diferente, você vai querer incluir o tamanho do seu trabalho artístico. Uh, e então a última coisa é que eu d é igual a tela semelhante a como classe funciona e você pode realmente usar uma idéia e CSS também. Mas você provavelmente não deveria, a menos que tenha uma boa razão para fazer isso com um , sinal de número, digamos, mas não faça isso. Uh, todos queriam fazer uma tela assim, mas um I D é tipicamente usado pelo JavaScript para pegar um elemento agarrador e fazer coisas com ele. E nós vamos fazer isso em nosso arquivo de script de trabalho em um minuto. Então, basicamente, nós só queremos ser capazes de agarrar este elemento de tela de todas as maneiras JavaScript em CSS, e nós só queríamos saber que é uma tela de 900 por 1200 sobre. Isso não significa necessariamente que ele vai aparecer como 912 100 em nossa página. Mas assim como se você fosse incluir uma imagem e você poderia dizer que pode obter o tamanho completo da página ou pequeno ou o que seja, mas ainda sabe o tamanho que é. Este tipo de tela funciona. Estamos dizendo que o negócio era grande. Você é. Podemos dizer-te outra coisa no CSS. Mas só para você saber, o negócio de fazer realmente são, hum, e então eu também vejo que eu queria Teoh. Sim, nós estamos indo para fazer um par de coisas sobre o estilo lona sábio e novamente, Isso é principalmente apenas para ter certeza de que está centrado na página. Assim, com auto max, 100% X com 100% de exibição, caminhada e margem. Assumindo que fizemos as coisas certas, atualizamos nossa página aqui. Então meu olá mundo do Dr. Atribuído para enviar nada deve aparecer. Não, eu não sei ao certo se isso vai funcionar, mas eu diria que o fundo leu neste elemento de tela e você pode ver que o campus apareceu no meio da página e leva toda a largura da página. Então, o que estamos indo para aqui é que queríamos ocupar muito espaço possível, mantendo sua relação de aspecto. redimensiono Euredimensionoisso. Você pode ver que ele ocupa com a altura total da página, mas não cheio com. Isto é, na verdade, um pouco complicado de fazer. Mas aquela coisa de exibição flexível que eu estava falando na última lição ajuda a colocar esse tipo de coisa muito. Então, se você colocar uma cor de fundo em seu campus, ela deve estar aparecendo. Você pode redimensionar sua página, e ela deve sempre mostrar a coisa toda enquanto ocupa o máximo de espaço possível, se isso faz sentido. Ok, então vamos deixar isso por um segundo, e vamos para o roteiro do trabalho. Então, a propósito, se você estiver usando coda e um teclado no seu iPad, eu estou usando o comando shift e, em seguida, colchetes para alternar entre esses arquivos. Acho que é rápido. Você também pode apenas uma libra eles sobre o topo. Eles são apenas pequenas abas, então você pode dizer HTML CSS JavaScript em. Então eu vou. Teoh, apague esse alerta porque seria meio irritante se isso aparecesse cada vez adoraria a página. E a maior parte do que vamos fazer de agora em diante é dentro. JavaScript vai voltar e fazer apenas mais algumas coisas em CSS e HTML, mas principalmente aqueles ar feito ish por enquanto. Então, com javascript, vamos começar obtendo uma referência à nossa tela também. Então, se eu fizer dois slash é assim, isso significa que é um comentário e que não faz nada para trabalhar script. É só para nossas referências. Diga boa preferência para você. Então isso é só para você saber. E então eu sei o que essa linha de código está fazendo isso. Vou salvar nossa tela igual a documento. Sim, pelo campus. Ok, então um par de coisas para falar bem aqui já, esta barra e JavaScript significa variável. E então onde variável é apenas realmente qualquer coisa que queremos armazenar para usar novamente mais tarde. Então estamos chamando de tela, e você pode chamá-lo do que quiser. Vou recomendar que ligues ao Canvas. Se você está vindo junto com isso e e, em seguida, este documento não obter elemento por I d. e também certifique-se de que você prestar atenção onde as letras maiúsculas estão em tudo que fazemos aqui. Se você estragar letras maiúsculas, rede de coisas. Ok, então estamos dizendo documento Doc obter elemento por i d e suas maiúsculas no elemento e por e eu d e , em seguida, abrir tela de citações de gravidez, fechar citação, fechar privacidade. OK, então JavaScript ponto-e-vírgula é como um ponto na frase. Normalmente não importa que muito foi considerado uma boa forma. Se você colocar mais de uma coisa na mesma linha, isso importa. E às vezes as pessoas fazem isso. Vou tentar não fazer isso. Mas ainda funcionaria no meu jardim. Mas você deveria colocá-lo lá. Só que é um bom treino. Essas aspas significam que este é um fluxo, e isso significa que isso não está fazendo referência a essa variável. Mas eu disse aqui, esta é apenas a palavra tela e este elemento get by i. D. Esta é uma função embutida no seu navegador que apenas diz, ok, ok, volte para o meu html Olhe para o que eu dei O que quer que tenha dado aqui. Então lembre-se, em nosso html nós chamamos para esta tela elemento forma tela deu I d igual campus. Obrigado. Então agora isso está dizendo Vá encontrar aquela coisa que nós demos a idéia de tela e definir nesta tela variável. Ok, então devemos ter isso agora. Então vamos obter a referência ao contexto da tela. E eu vou chamar esse contexto de bar. A tela das pessoas não tem contexto para Ok, eu recebo atenção. Letras maiúsculas prestam atenção às citações. o Eoque é isso é o contexto de renderização para essa tela. Então a tela é tipo de elemento html por si só, mas contém, como, assim que você cria que ele sempre tem um contexto de dois D ou três D contido dentro. Vamos usar o contexto da TV, , e isso nos dá algo para trabalhar mais tarde. Então, quando desenhamos imagens estavam tentando para o contexto, não para a tela. Mas o contexto é parte do campus. Provavelmente não importa que você saiba disso só para que você saiba, hum e então nós vamos Teoh começar inicializado uma variável de carregamento. Então, à medida que carregamos todas as nossas imagens, precisamos saber quando elas são carregadas porque temos que esperar até que as imagens sejam carregadas antes que possamos desenhá-las. Então eu vou fazer você dizer e nossa carga sublinhar Counter People's Europe. E assim como nós carregamos imagens apenas entrando assim que qualquer imagem limitada é carregada, nós vamos dizer contador de carga mais um, e então uma vez que é igual ao número de imagens que temos, então nós podemos dizer, OK, todas as nossas imagens são adoradas, e chegaremos a isso em apenas um minuto. Então a outra coisa que vamos fazer aqui é inicializar objetos de imagem para cada uma de nossas camadas. E então se você tem camadas diferentes ou você os nomeou de forma diferente do ideo do que eu fiz, você vai precisar Teoh hit motor quantas camadas você tem e o que eles são. Então, para mim, eu tenho uma imagem de fundo e, na verdade, você ainda está feliz. Posso mostrar-te com o que estou a trabalhar. Então temos antecedentes, que é aqui. Uh, fundo é igual a novo, hum, maneira que tem sombras iguais a fazer são pessoas. Deixa-me mostrar-te isto à medida que avançamos. Então há nuvens e realmente colocar sombras fora de ordem aqui. Então vamos fazer isso, hum, então temos nuvens. É este próximo e nuvens é provavelmente um pequeno termo para o que aqueles realmente estão em. Então nós temos pequenas coisas flutuantes, estrelas e suas chamadas que nós vamos colocar o bar flutuadores um. Porque eu sei que eu tenho mais do que um desses bowties pensar, também. E então eu acredito que eu tenho minhas sombras, que eu já coloquei, e então o próximo, você não pode vê-lo porque fundo branco da torneira uma vez que você pode ver que essa é a minha máscara. Então acho que só tenho mais dois. Há as pessoas reais bar humanos, esta nova imagem e depois mais um Queijo Azul três. Ok, então se você tem mais de oito jogadores ou menos de oito camadas, você deve ter o mesmo número de itens aqui que você tem camadas. Pode chamá-los do que quiser. Esse ar, apenas índios arbitrários que estou chamando de meu. Você precisa saber o nome real do arquivo de imagem para mais tarde, mas por agora, você pode nos chamar do que quiser. Bem aqui. Uh, ok. Então a próxima coisa que estamos indo para dio é criar uma lista de objetos anteriores. Então, uh, nós vamos salvar a nossa lista de pessoas deles. Ok, então esses colchetes e javascript representam uma lista, e isso significa que é. Quero dizer, é realmente saber como descrevê-lo além de uma lista. Mas o importante a ter em mente é que esta é uma lista de algo. Pode ser cordas. Pode ser números. Pode ser objetos, que é o que vamos fazer. Poderia realmente ser qualquer coisa, mas eles são para que você crie. Há outras coisas e JavaScript que você pode fazer que não estão em ordem por padrão. Mas estes serão na ordem em que os colocarem em ordem, assuntos aqui. E então eu não abri com dizendo lista iniciada. Este é um ditado e uma lista, e então dentro disso, vamos colocar algo chamado objetos ou dicionários, dependendo de quem você fala. Você provavelmente, um, e cada um deles tem é não está em ordem, mas você pode ter chaves e valores dentro disso. Então esta é a chave. Chama-se chamar uma imagem. Você pode ver que isso é uma corda, e eles têm que ser cordas no lado da chave. E depois o quê? Nós estamos indo. E são essas variáveis de fundo que criamos aqui, então você saberá que esse fundo não está entre aspas, que significa que está referindo a variável que eu preciso. Então estamos distribuindo essa imagem, e agora é apenas um objeto de imagem piscando. Mas vamos voltar a isso e então precisamos dar a ele a fonte que vai ser. Esta será uma string, que é um caminho para a sua imagem. Então, se você configurar as coisas da mesma maneira que eu fiz, haveria camada 11 g, modo que não seria imagens de barra barra camada e gravar um sublinhado um ponto org. Se você não colocou suas imagens em uma pasta como eu fiz, então seria apenas como aquele ponto barra clara sublinhado um sublinhado um deputado. Se você estiver usando javascript em qualquer lugar, você precisa encontrar o que esse caminho é para a imagem, porque eu não acho que você poderia mudá-lo você mesmo, e então você usaria esse caminho aqui em vez disso. javascript em qualquer lugar, você precisa encontrar o que esse caminho é para a imagem, porque eu não acho que você poderia mudá-lo você mesmo, No dia, vamos dar estes. Vou explicar um pouco mais quando voltarmos a isso, mas por agora, apenas provavelmente copiá-los para baixo, ver índice, e isso vai representar o quão perto parece que esta camada está de você. Hum, posição sobre isso vai ser importante para mudar a posição da camada. Pode falar sobre isso mais tarde? Mas você pode ver que eu estou realmente dando a esta posição, Teoh um valor de outro objeto. Então ele confessou coisas assim e pode ser meio conveniente. Às vezes vamos dar um plano. Lembrar essa mistura para este não vai ser? Não. Porque este aqui é normal. Barco Flint se apenas dizer não. Isto em tudo. Não são barcos. Isso significa apenas piscar em JavaScript. Basicamente, uh, e então nós vamos dizer capacidade porque eu acho que eu vou querer mudar a opacidade em uma ou duas camadas em. Isso vai ser apenas um. Então, quando dizemos opacidade, zero é transparente, um é opaco e tem valores entre eles. Ok, então esse é um mais tarde na nossa lista de camadas, e eu tenho oito, então eu vou passar por isso bem rápido. Apenas certifique-se de entregar-lhes a imagem correta e o caminho certo para o arquivo. Essas são as coisas importantes, e estas apenas copiam como eu as tenho basicamente. E então você pode ajustar as coisas mais tarde. Não parece como você quer. Certo, Certo, então vou copiar tudo isso e basear aqui e mudar as partes que mudaram? Então vai ser uma camada de nuvens, e então você se conecta. Queremos que isso seja apenas um pouco mais perto do que o fundo, e então as outras coisas serão as mesmas e colar novamente. O próximo vai ser corpos. Um, você é três, e nós vamos fazer isso como nativo 1.25 E, na verdade, este eu quero colocar um modo de mistura. Então, de volta no meu arquivo apropriado deu isso no modo de mistura de sobreposição. Então eu vou colocar aspas, sobreposição, fim, citação. Se você tiver usado um modo em qualquer uma de suas camadas, faça isso. Eu não sei que tudo de apropriado é suportado em javascript, então você pode precisar procurar isso se você usou um estranho ou algo para usar o coração faz. Você pode se fazer algumas perguntas difíceis, no entanto. Então, só um aviso. Embora possa ser suportado que transcrição de qualquer maneira, então eu apenas enfrentei um par mais dessas flutuações constantes, também será camada para e estes índice será negativo 0.5. E novamente, eu acho que este também tem um modo de mistura de sobreposição ativado. Então o próximo é as minhas sombras. Chame de sombras. Sim, neste. E então esse é o seu cinco. E realmente perdi isso quando eu estava criando meus nomes de camada e outras coisas. Quero que este volte para o Índice Z. Eu queria estar entre as nuvens e o fundo e porque vamos ajustá-lo para se multiplicar. Na verdade, não importa que esteja mais alto na pilha por causa da forma como eu trabalho. Ele vai apenas combinado com camadas abaixo dele de qualquer maneira, então ele não vai olhar ao redor. Mas isso não é muito confuso. E nós vamos fazer 1,25 Na verdade, vamos sentir como 1,5. Veremos como isso se parece, e você pode jogar com facilidade se as coisas não ficarem como você quer. Vou mudar este para multiplicar, e vamos embora. A opacidade venceu. Pode voltar e mudar isso. E então eu penso, Como eu me resta? Mais três. Então esta é a minha máscara, está bem? E essa é a camada seis, e eu quero que seja o zero do índice. Então essa será a minha rotação central. Então isso vai ficar no lugar enquanto tudo o resto se move basicamente na camada humana sete vezes e esse é o índice vai ser positivo. Então você se lembra que eu falei sobre como é mais divertido se algo está tipo de cutucando fora da página e algo está indo para as páginas são fundos com os negativos, o índice. Eles vão parecer que eles estão indo para a página sobre essas coisas com os positivos, o índice, eles vão parecer que eles estão saindo da página, como nós temos dois ou três efeitos D. Então observa que é o índice de 0,8 e deixa tudo o resto. E então este último vai ser minha árvore flutuante, e isso é camada. E é o índice. Uh, vamos ver, hum, vamos fazer, também que para estourar muito longe e eu queria que estes querem ser apenas um pouco transparentes. Então eu vou dizer 0,9 como minha opacidade. Isso seria 90% de capacidade. E então uma coisa você precisa ter cuidado se você copiou e colou como eu fiz, você não pode ter uma vírgula no final de seus assuntos assim. Então certifique-se de se livrar disso, e que deve ser todas as nossas camadas. Novamente, isso parece intimidante. Não é muito complicado. A maioria deles são apenas cópias um do outro. Eu acho que a coisa que vai ser mais difícil é apenas certificar-se de que você tem o número certo deles certificando-se de que você tem o caminho certo. E, uh, certificando-se de que ele usou o nome de imagem certo aqui que você definiu acima. Então, novamente, não me copie a menos que você esteja realmente me copiando. Mas certifique-se de fazer as coisas de acordo com sua arte para isso. Ok, então na próxima parte, vamos dizer camada oeste. E lembre-se, essa é a lista que fizemos aparecer com colchetes. Chamamos essa camada de lista sublinhada. Então aqui embaixo, nós vamos patinar com segurança sua lista de sublinhados, que está fazendo referência a essa lista, e então estamos usando isso embutido. Nunca poderei como isto se chama. Eu não vou dizer isso aerador, mas eu posso estar errado sobre isso. Para cada função novamente. Isso é com uma comida de capital. Então lista de camada para cada função de gravidez de abertura. Índice de jogador Quebrado Aprendiz E. Hum, e esperando cruelmente raquete. Certifique-se de colocar um fechamento algo chamando no final. E então o que isso faz é que nós estamos dizendo para cada item na lista de camadas e itens na lista deste nível superior Então há objetos, cada um deles com os pequenos colchetes. Uh, então nós vamos dizer, para cada objeto nesta lista de camadas, nós vamos executar esta função. Vamos entregar o objeto e o índice para esse objeto, que é apenas o número que ele está na lista. Então essa função vai saber se você pedir camada, ele vai saber que estamos falando sobre a camada atual que ele está olhando para essa lista de camadas e, em seguida, índice será o número atual dessa camada. Então, uh, para cada uma dessas camadas estavam indo para camada tem imagem, que está referindo esta imagem. Nós o demos. Então, na verdade, é uma referência a isso que entregamos que eu sou. E então nós vamos dizer bomba ponto carregar a função das pessoas abrindo diretamente raquete com suporte onde você quer chamá-los e lembre-se, nós fizemos este encontro de carga aqui em cima. Carga sublinhado. falsificação é atualmente zero. Então, toda vez que uma dessas imagens carrega, queremos dizer carga, contador de sublinhado mais uma das pessoas Isso significa apenas adicionar uma a ela, o que quer que seja agora em uma. E depois ... Então queremos o Teoh. Não queremos fazer mais nada até que todas as imagens estejam carregadas, certo? Nós vamos dizer se carga sublinhado Counter, uh é maior ou igual a você. de Listade jogadores sublinhados. Vamos ver se vamos Teoh Drama é uma poção que ainda não fizemos, então entre nisso. Interessante. Então esta é uma declaração if e javascript. Basicamente só diz, se o que você colocar entre parênteses aqui é verdade, então faça as coisas dentro de lá e você também pode dizer outra coisa, faça algo que não estamos usando mais aqui porque tudo o que estamos interessados é se sobre isso feito. Então, se nós carregamos todas as nossas imagens, mas então nós queremos você Dr. Campus, Hum e então depois que nós configuramos aquele player, aquele download de imagem, ele não sabe o que carregar ainda. Então precisamos dizer imagem da camada s R c para fonte é igual ao jogador Doc. Elenco R C. Ok, então isso é cantar Carregar a imagem, basicamente. E então, uma vez que as imagens carregadas, a imagem já sabe executar esta função que criamos aqui em cima que irá desenhar os químicos. Então, agora, isso não vai fazer nada porque não temos um caminhão e disfunção. Mas o que não podemos fazer é vir aqui e fazer com que o nosso trabalho possa disfuncionar. Então vamos dizer função, tente isso, uh, sobre isso uh, é apenas criar uma função chamada tela que podemos chamar de qualquer lugar em nosso arquivo de script de trabalho . Então, a primeira coisa que eles vão limpar o que quer que seja. Sim, comece isso porque estamos executando isso. Vamos executar esta função uma vez, uh, vamos ver, tipo, tipo, 60 vezes por segundo, eu acho, e se você não limpá-la, eu não acho que isso realmente importaria para esta página específica, supondo que você não tem transparência passando por todo o caminho. Mas pode parecer um pouco estranho. Então, basicamente, você quer limpar tudo e tentar novamente 60 vezes por segundo. Então, vamos esclarecer primeiro dizendo contexto onde isso é uma referência ao contexto que vem com sua tela. Você está correto. Zero vírgula, zero espaços. Uh, lona nisto. O que é esse ditado é que vamos limpar esta área definida começando no canto superior esquerdo. Eu acho que isso é deixado zero top zero e indo com uma cruz e altura para baixo. Então, basicamente, o tamanho da nossa tela, estamos apenas limpando esse retângulo dentro da tela. Homens, Homens, precisamos do Teoh e desenhar o Fuselier. Você não tem que desenhar isso. Você tem que escrever esses comentários como eu sou. Gosto de tê-los porque deixa as coisas um pouco mais claras. O que estou fazendo é ler meu código novamente mais tarde. Hum, então nós vamos fazer a mesma coisa que fizemos aqui em cima, tanto quanto o para cada coisa vai, então você pode realmente apenas copiar esta linha se você quiser. Você diz mais tarde estoque para cada um. Certifique-se de que você fechou com um colchete de fechamento e feche parênteses e, em seguida, para cada camada na lista, vamos dizer o seu contexto. Imagem rochosa. Então essa é a imagem que estamos tentando. E então precisamos da camada de posições Posição X. E eu acho que se rodarmos isso agora, então isso só funcionará até agora. E vamos mudar algumas coisas antes de terminarmos esta lição. Então eu vou bater salvar na chuva superior, e então eu preciso trazer o safari novamente aqui porque eu tenho meu aplicativo de fotos aberto e eu vou apenas para atualizar. Vamos voltar para o índice dot html Ele salvar manter pressionado no globo ocular, abrir no safari e você pode ver que minha imagem apareceu aqui. Então isso significa que todas as minhas camadas estão sendo desenhadas para o contexto. Então eu preciso fazer mais algumas coisas. Nós já temos esse tipo de configuração para ir. O 1º 1 é que vamos. Teoh Roseman. Cursory. Ok, estamos indo. Teoh, certifique-se de que usamos o modo de mistura certo. para cada camada. Eso Nós só vamos dizer o seu médico porque isso vai retornar política Late Blended Sentinel, que é na maioria dessas camadas, lembra? Então eu tenho misturas. Não. Se isso é falso, então não vai fazer o que está aqui. Se é definido Teoh uma tensão como sobreposição ou multiplicar que ele vai fazer o que temos aqui revisando contexto. Bem, como é igual? Mais tarde, quando eles iam dizer outra coisa. Então, se Layer Docklands é não ou falso, vamos dizer contexto global. Foi o ciclo de citação da Operação Pessoas ? Hum e então como nós vamos para baixo s então nós podemos apenas dizer que ali tinha o comando para que você possa falar a marca de verificação no topo, certo? Vou atualizar e podem ver que meus modos de mistura de advogados mudaram. Então meu ar de sombras se multiplicará. Minhas pequenas flutuações no fundo estão configuradas para sobrepor, e isso é exatamente como e, em seguida, mais uma coisa que precisamos fazer é apenas definir a opacidade. Então, naquela camada frontal, as flutuações em primeiro plano lembram que eu disse isso t 0,9 opacidade, e agora eles são completamente opaco . Você não pode ver através deles. Vou dizer Contexto, global é igual a jogador e agora atualize isso. Você pode ver que eles se tornaram um pouco transparentes. Então eu acho que isso está quase pronto. A última coisa que precisamos é que isso só funciona uma vez, e então está feito. E lembre-se, nós conversamos sobre como vamos usar um quadro de animação de solicitação para percorrer o 60 vezes por segundo. Então você precisa ter apenas um pouco de cuidado aqui. Mas basicamente solicitar quadro de animação. É construído algo em seu navegador que irá executar uma função tantas vezes que pode desenhar para a tela, que na maioria dos navegadores modernos será 60 Rangers novamente? Então, em vez de chamar isso com os parênteses aqui, em vez disso, vamos dizer, solicitar animação, abrir fantasia. E então nós estamos apenas dando a ele o nome da função sem nada. É apenas o nome da função, que é descartado tela e, em seguida, lembre-se de prestar atenção às letras maiúsculas. Então, esse é o pedido das teclas inferiores nossa animação com tem com cada caso um e quadro com uma tela de drogas F maiúscula eso Se dissermos que, que deve passar por uma vez, que é ótimo. E então a última coisa que precisamos para dilatar é no final do nosso rochoso e disfunção. Então, após essa lista de camadas para cada Mas antes desse colchete de fechamento, vamos dizer a mesma coisa solicitando permissão. Palavra de advertência aqui. Não faça assim. Isso vai cair. Você provavelmente não faz isso. Falando por experiência própria. Então você quer chamar o quadro de animação solicitando? Rastreando isso e basicamente o que isso faz é passar por isso. Então dissemos para chamá-lo usando sua animação de busca trazer aqui. Então ele desce aqui, executa uma vez, e então chega ao fim e diz: “ Começa executa uma vez, e então chega ao fim e diz: “ Começade novo. E continua passando por isso até você falar para parar, o que não estava dizendo para parar. Então eu vou dizer que eu vou ouvir a atualização aqui, e você não deve ver nenhuma diferença, mas na verdade ele está renderizando 60 vezes por segundo. Agora isso vai ser importante. Uma atualização da posição com base no toque e movimento, porque é assim que realmente movemos as coisas. Ok, então a outra coisa que eu quero fazer é ir para este fundo para qualquer ajuda no seu CSS. Eu realmente não gosto de ter lido flash cada vez que eu carregar a página, mas eu acredito que vai ser isso para esta lição. Então, no próximo, vamos realmente fazê-lo começar a se mover com base no toque e no mouse, e então vamos a partir daí. 8. Controlos de toque e mouse: Ok, então se você seguiu todas as outras lições até agora, você deve estar em um ponto em que todas as suas imagens estão sendo desenhadas para a tela. Então isso deve ser um monte de camadas diferentes à direita. Mas deve parecer que você terminou a imagem, mas não vai fazer nada ainda, então vamos ficar assim quando você toca e arrasta na tela, as camadas realmente se movem e parecem um tipo de três D. mas não vai fazer nada ainda, então vamos ficar assim quando você toca e arrasta na tela, as camadas realmente se movem e parecem um tipo de três D. Uh, para começar, eu vou apenas criar uma seção na parte inferior do meu arquivo JavaScript aqui e usando um script de trabalho Comentário com país Slash está no início. Só vou dizer toque e controles, e então a primeira coisa que queremos fazer é que isso não importa tanto para o toque. Mas se você estiver usando o mouse, você só quer que a imagem se mova. Ao clicar e arrastar, você não quer se mover quando o mouse estiver na janela. Quero dizer, a menos que seja isso que você quer, então você faz. Mas para mim, só queria mudar-me quando estou a mudar-me intencionalmente para cá, por isso vou salvar as quedas iguais. E esta é apenas uma variável arbitrária que eu vou criar que diz, por padrão, isso é falso. Nós vamos voltar e fazer referência a isso mais tarde em algumas das coisas que estamos fazendo. Ele disse isso também. Fiel para você, comece a clicar ou comece a tocar na tela. Mas então faça isso para começar. E então a próxima coisa que queremos fazer é dizer que vamos inicializar algum tipo de contêineres para segurar nosso toque ou mouse co ordena s. Então precisamos fazer dois desses Um vai ser o que vai ser chamado de inicial de inverno , e isso vai ser em algum lugar onde nós mantemos o controle de onde você tocou pela primeira vez ou onde você clicou pela primeira vez na tela. Isso vai ser importante porque, uh, falaremos sobre isso mais tarde. Mas basicamente, se você não manter o controle disso e apenas movê-lo para onde você tocou na tela nas coisas, pule assim que você tocar no clique dela. O que parece realmente estranho. Vamos dizer x zero. Por que zero? Então este é um número de objeto, assim como a chave. É X nosso valor é zero são chaves. Por quê? O valor é zero e, em seguida, vamos salvar o nosso ponteiro. E isso vai ser apenas um contêiner para onde nosso atual comissário ou posição de toque está em algo 00 Um, e então para realmente ouvir eventos de toque ou mouse, temos que fazer essa coisa chamada adicionar um ouvinte de evento Eso Nós queremos Toe Onley dispara isso quando você tocar no campus para começar, então nós vamos dizer tela e lembre-se, isso é uma referência para ler “Shame off Canvas Dot” anúncio ouvinte e então nós vamos dizer toque, comece rastreável, Certo? E então vamos chamar a função de início de inverno porque vamos usar isso para toque e casa. Então eu só quero dizer quando você começar a tocar na tela, executar esta função sem ler a função maneira. Quer fazer a mesma coisa de terceirizar na Escuta na bagunça? Sim, ligue para a mesma pessoa, Sr. Hum, então estes dois ar construíram apenas uma espécie de nome para os eventos que disparam no seu navegador. Então você tem que nomeá-los exatamente de novo. Preste atenção às letras maiúsculas em letras minúsculas e essas coisas que eles importam. E então nós vamos realmente criar essa função. Então ponteiro em um mais passivo em efeito e que só vai passar automaticamente porque ouvinte evento , você não tem que passá-lo em. Normalmente, com uma função, você tem que realmente entregar explicitamente algo que você deseja que uma função receba, mas não neste caso. Então é meio legal. Então a primeira coisa que vamos fazer assim que começarmos a tocar ou começar a olhar é definida como se movendo muito verdade, e isso vai entrar em jogo em um minuto. Mas agora sabemos que a qualquer momento podemos checar essa variável para ver. Você está clicando na triagem no momento? Você está tocando na tela no momento? A próxima coisa é, vamos nos certificar de que realmente funciona. Então é só que é tudo o que eu vou dizer. Alerta. Sim, olá, você é a maré. Então eu vou dizer que a comunidade s você pode ter a pequena marca de seleção no canto superior direito e então eu vou apenas atualizar a página. Eu não trabalhei de novo. Ok, então eu tenho que voltar para o índice. Não segurei o globo ocular em cima, certo? E eles abrem no safari e, em seguida, atualizar a tela, Atualizar a página. E assim que eu tocar na tela, eu recebo um Olá, você toca na tela. Ok, então eu vou voltar para o meu arquivo JavaScript, e então eu realmente não quero isso lá. Isso é só para ter certeza de que estava ligado. Certo? Se acontecer de você ter algo que tem um mouse também, você pode verificar que deve funcionar também. E depois queremos ver que tipo de evento é este. Queremos verificar. Isto é sensível ou é um evento de rato? Porque mesmo que pareçam que deveriam ser iguais, você faz referência a eles um pouco diferente. Mas vamos dizer se o evento é igual a: toque, toque, comece. Está bem. E depois vamos dizer “toque”. Vamos apenas dizer toque de alerta e então todos os outros que você tem porque poderíamos dizer outra coisa se o tipo for igual a agora, caracol, então podemos dizer alerta. E eu não vou testar isso porque eu não tenho uma casa ligada a que eu tenho obviamente como um eu era 12.2 ou algo que eu estou usando aqui. Isso não é uma coisa. Eso Então eu vou refrescar aqui viagens e tela e diz toque. Então isso significa que está funcionando. Legal. Eu vou deixar você com isso. E então o quê? Queremos dio uma vez que começamos um evento de toque ou um evento de massa é que queremos definir a inicial que apontar sua coisa inicial. Lembre-se, nós fizemos este ponto sua variável inicial aqui em cima e queremos apenas definir onde você primeiro toque ou clique na tela? Caçador. Inicial X é igual ao evento Dr. Toques Bracket está aqui e então algo com branco. O que? Seu habitual Por que toca zero eso isso em? Esta é a diferença entre toque e mouse. Na medida em que você está lidando com eles, isso toca zero? Porque tecnicamente, se estás a usar o toque, ele pode estar a usar o multitoque. Assim, o zero significa é o primeiro item na matriz de toques ou a lista de toques. Zero é exatamente como você indexar o primeiro item da lista. Então, dizendo o primeiro toque a ter tocado tela. E qual é a sua posição no cliente? Deve ver qual navegador. E então, de outra forma, vamos a um ponto. Exp é igual a Find X. Tenho certeza de fumar porque você não precisa dizer o primeiro mouse que tocou a tela. Não conheço nenhum sistema que suporte mais de um mouse. Sim, me avise se você der um dio e algum melhor disser, uh, agora sabemos onde você toca na tela pela primeira vez. Então é assim que vamos fazer lá. A próxima coisa que queremos fazer é querer em qualquer lugar onde você mova o mouse ou o toque dentro da janela inteira. A próxima coisa que queremos fazer é querer em qualquer lugar onde você mova o mouse ou o toque Queremos ouvir onde ele está para que possamos mover para que possamos deslocar as imagens com base nisso . Então vamos dizer, Window, essa janela de ouvinte de evento é apenas uma coisa construída e script de trabalho. É disso que você está falando. Você tem que configurar isso. Nós vamos dizer tocar, mover, mover, e nós queríamos chamar esta função apontar seus e, em seguida, atores janela. E então nós realmente precisamos criar nossa função de remoção de ponto, e então nós queremos dizer que ele não impediu padrões. Pessoas gritando lá fora. Legal em. Isso é importante porque como você se sua janela é muito grande, que muitas vezes, ele só é baseado na maneira que Safari funciona no iPhone ou iPad. Preciso de nos salvar e refrescar. Você pode ver que são pergaminhos, mesmo que eu não queira rolar. Você pode ver que são pergaminhos, Então este evento que impede o padrão vai ser importante para isso, basicamente, apenas diz, não faça o que você faria normalmente quando eu mover meu dedo ou mouse na tela, e nós precisamos fazer isso em dois lugares. Isso ainda não funciona. Mas a outra coisa que fazemos é lembrar que temos aquela variável móvel que configuramos anteriormente. Então, para começar, era falso. Então começamos a clicar ou tocar na tela, e isso se tornou verdade. E agora só queremos dizer sobre Lee, se isso é verdade, então faça as seguintes coisas que eles estavam dizendo. Se é verdade que você pode escrever algum outro código, então nós vamos manter o controle de onde está o nosso equipamento digital ex? E para começar com Rubin Se zero, onde está nossa atual quadra branca em que era um 60 e então nós estamos colocando em um par mais. Se assim for, desculpe. Isso está recebendo um par de camadas profundas dizendo, se evento é igual ao toque, então vamos dizer X igual a evento. Tal é o seu próprio e, uh, atual Y igual a toca o seu Tudo bem. Então nós temos nossa posição inicial que nós estabelecemos aqui e então agora nós sabemos a posição atual . E se você se lembra da física, então sua posição final em Vejamos, como isso funciona, você está mudando a distância é os minutos finais iniciais, então vamos para isso em apenas um minuto. Mas também queremos ter a certeza de lidar com um evento de rato. Aqui está o que mais. Se você tem uma concessão de resfriamento apertado, X é igual ao que não é nenhum toque. Eu realmente não aguento hoje. Por que é igual parar de jogar. Ora, Ok, então agora temos nossa posição atual sempre cursor, e então nós só queremos Teoh realmente definir o deslocamento do ponteiro. Então, fora dessas duas declarações, então logo abaixo deste colchete, você quer dizer Pointer X. E lembre-se, nós configuramos isso aqui como um zero. Mas vamos passar por cima, certo? Que vamos dizer apontado para X é igual aX atual. Essa é a nossa posição final, lembra? X atual. Essa é a nossa posição final, Menos Quinter sublinhado condicional ponto Exe ponteiro y é igual a atual. Por quê? Menos. Então isso nos diz o quão longe de onde você começou isso deve ser neste momento? E então eu acho que está bem, então se você quiser apenas, uh, vamos voltar e realmente fazer isso funcionar primeiro, e então vamos limpar alguns pequenos detalhes. Mas a coisa que queremos fazer para começar é voltar para a nossa disfunção dropcam aqui antes de realmente desenhar a imagem para a tela. Agora precisamos ver onde devemos desenhar a imagem? Porque está indo. Quero dizer, esse é o ponto, nós queremos nos mover para onde estamos desenhando, e isso vai fazer parecer que as camadas são um pouco três D baseado no efeito de paralaxe . Hum, então nós vamos apenas dizer, vamos ver, nós vamos dizer posição de ponto da camada igual a obter adereços. Essa é uma função que vamos escrever em apenas um segundo conceito, o mais tarde para que obter socos offset. Vamos até aqui, infecção. Ficar chateada. E é este nome para uma camada. E vamos dizer que um toque de barra chateada X é igual ao ponteiro X, um vezes a camada que Z. Então isso vai ser importante porque se não fizermos essa camada cães, o índice, tudo se moveria juntos. E então parece que você está rolando a tela. Estamos vendo demais. Por que é igual a Pointer? Por que vezes maior. Vês? Lembre-se que os índices Z referenciando o quão perto ou longe da tela queremos que a camada apareça Então isso vai criar nosso tipo de efeito três d. E depois queremos apenas dizer que vamos adicionar mais algumas coisas a isto. Parece um pouco inútil agora, mas vamos usá-lo em um minuto. É um deslocamento de parte igual a falado entre colchetes. Obrigado vai tocar offset X e por que ele vai ser toque, que e isso com ponto-e-vírgula. E então nós vamos apenas voltar. Esse cara é uma compensação de retorno. E isso só diz o que pediu para esta função. Devolva essa coisa que acabamos de dizer, o que é isso? Então agora a oposição em camadas vai estar recebendo este deslocamento de volta em vez do 00 que demos originalmente, Hum, então agora eu acredito que se tivéssemos salvo em atualizado esta página e eu vou fazer um vídeo para você pode realmente ver o que eu estou fazendo com a minha mão. Hum, agora, quando você usar o dedo na tela, seus jogadores vão se mover. Você pode ver que ele também está rolando a tela, que nós realmente não queremos. Então vamos consertar isso em apenas um segundo, e isso provavelmente é muito forte de volta. Então vamos fazer alguns ajustes nisso, mas muito legal. Tudo bem, então a primeira coisa que queríamos Teoh é provavelmente a mais fácil é que estamos apenas cunhados para diminuir esse efeito um pouco. Então vamos salvar nosso multiplicador de toque igual a 0,3. E então, em cada um desses pequenos cálculos, estavam dizendo ponteiro ponto x vezes ele Index, nós vamos. Também dizer vezes toque, é um e você consentir este multiplicador de toque para o que quiser. Dependendo de como telas maiores e coisas assim você pode querer ajustar isso um pouco para que você possa brincar com esse número, Veja o que você gosta. Eu fiz isso um pouco mais cedo, e eu gosto deste número. Então vamos fazer um vídeo aqui e muito fresco, e assim você pode ver que isso é muito mais sutil. Nossa Disney ainda está rolando a tela, então vamos voltar e consertar isso. Então, para corrigir essa rolagem da tela, acho que precisamos fazer dio é descer aqui e dizer, um, tela não adicionar ouvinte de eventos. , Toque, mova-se, e vamos dizer evento de função. Então isso é chamado de “função eficiente em espaço”, arbitrária que você está passando para este ouvinte. Significa que você não está dando um nome. Você só está dando uma função e está ouvindo esse evento. Então nós vamos dizer, coisas do evento, padrão. Então, isso vai para o comportamento padrão quando você tocar na tela e mover é que o campus vai se mover ao redor da tela porque você está rolando tela e nós não queremos que isso aconteça. Nós só queríamos nos mover com base no que estamos dizendo para fazer, não com base no quão alto ele acha que a janela é e então nós vamos fazer o mesmo de nós. Então eu salvei isso atualizando minha página. E se você brincar com ele com o dedo agora, não, ele não vai rolar uma página mais. Então isso vai ligar. E então nós queremos dificar uma última coisa aqui, que é você vê, quando eu parei de tocar na tela, ele só fica onde eu parei em nós nunca que nós queríamos voltar para a sua posição original quando você soltar. Então, vamos dizer janelas que então estamos usando janela porque você poderia parar de tocar fora o elemento de tela. Queríamos atirar no dedo do pé sempre que olhasse o dedo em qualquer lugar do Irmão, vale a pena dizer. Como você ouvinte muito compreendê-lo e não uma descrição? Introspecção? Estamos dizendo e gestos, tenho certeza. A mesma coisa para “ digitando não”. Sr. Você sabe, nós vamos dizer e apenas você escrever nossa função digestiva, função e registros de gestos vai ser pessoal. Queremos ter certeza de mover pessoas pequenas, então se você está usando quantidades você percebe que assim que você liberou seu passaporte e ele continua se movendo, o que quer que você mover, mexa com uma tela e isso diz, Não faça mais isso porque agora é falso e estamos verificando se é verdade antes de mover qualquer coisa. E então a próxima coisa é, vamos dizer que mais rápido X é igual a zero desgaste y igual a. Ok, então agora eu guardei isso e está filmando. Vou atualizar esta página e liberar. Ele se encaixa de volta ao centro. Bastante fixe. Tudo bem, então isso é tudo para o nosso toque e mouse e qualquer que seja a palavra está movendo coisas com base em notas tocantes. Na próxima lição, vamos adicionar controles de movimento. Então, ouvindo o giroscópio no seu dispositivo, alguém, você o move fisicamente, a ação da imagem se move, então vamos começar a ouvir. 9. Como codificar cinco controles de movimento: antes de começarmos nesta seção. Se você estiver executando o IOS 12.2 ou mais recente do que você precisa ir para as configurações e, em seguida, role para baixo até o safari e certifique-se de que na seção Privacidade e Segurança o acesso ao movimento e orientação está ativado, isso será desativado por padrão. Então você precisa ligar o interruptor e ter certeza que está ligado. Se você não fizer isso, nada nesta seção vai funcionar. Tudo bem, vamos começar a implementar controles de movimento para que quando pegamos o dispositivo, você possa ter um efeito de três D. Então, apenas no arquivo muito independente Eu era script, eu vou descer e comentar dizendo Controles de movimento. Gosto de manter minhas seções separadas o máximo que posso. E isso não é É difícil fazer completamente porque há lugares onde você tem que reboque, misturar as coisas um pouco e usá-las juntas. Mas em que medida? Não acho que seja bom ter uma seção para a maioria dos meus controles de movimento. A maior parte do meu toque controla coisas assim. A primeira coisa que vamos fazer é como fizemos com os controles de toque é inicializar nossas posições. Então nós queremos que ângulo era o dispositivo que quando você atualizou a página pela primeira vez e em que ângulo ele está agora? Então, vamos dizer variáveis inicializadas ou baseadas em emoções. Relaxe. E nós vamos ficar longe. Movimento sublinhado inicial esfria objeto que alguns estão chamando para terminar X. Tudo bem, na verdade, você poderia dizer serial sobre estes. Isso não importa. Vamos ver. Bem, vamos dizer que não. Acho que era assim que eu tinha tudo antes. Vamos ficar em movimento. Nossas emoções são iguais a objetos, e essas serão X zero. Ora, você está e, em seguida, aqui em baixo, nós vamos realmente ouvir a posição do giroscópio. Então vamos dizer, uh, uh, bem, eventos. E, uh, então nós vamos dizer encaixe janela no ouvinte evento, hum, dispositivo. E depois vamos passar por isso, não disfunção. Algo estranho com meus espaços aqui que eu não gosto. Então o que queremos fazer é a primeira vez que isso passa. Isto vai passar constantemente à medida que as páginas sobem, mas a primeira vez que queremos dizer onde? Como, que ângulo seu dispositivo está atualmente? Porque não queremos que você carregue a página e ela já está em um ângulo estranho, como se as imagens já estivessem deslocadas de alguma forma estranha. Uh, então nós vamos dizer se este é o primeiro verdadeiro, hum, se não oceano inicial ponto Exe e não opção sublinhado inicial. Por quê? Então este ponto de exclamação no início de uma variável? Então eu tenho esta declaração if e então eu estou dizendo se o ponto de exclamação movimento sublinhar ponto de exclamação inicial aqui, é uma espécie de abreviação código para dizer bateu esta fonte dizendo, se isso não está lá e porque nós o chamamos nulo aparecer foi que o ponto inicial movimento Exe é não. E estamos dizendo se não movimento inicial ponto Exe porque não, que retorna verdadeiro para ele não está lá? Isso é um pouco confuso, mas basicamente estamos dizendo é que já definido e se não e a mesma coisa para por que este fim e está dizendo que estamos verificando para ambas as coisas. Então eu preciso dizer que seu ex não definido e por que Ele também não é dito. Sim, então os dois não estão prontos. Então vamos ficar em movimento sublinhados iniciais próximos iguais a que você foi Dr. Scored. Por que ele liga. Então isso significa que sabemos onde o dispositivo, em que ângulo o dispositivo foi mantido quando o carregamos pela primeira vez. Então, depois disso, queremos ver onde está o dispositivo agora e então podemos pegar a diferença e ver quanto devemos compensar as coisas com base em quão longe ele foi movido? Desde que carregou a página? Eso Há um par tudo Há quatro orientações diferentes que precisamos lidar aqui porque os eixos meio que mudam com base em como você está segurando seus dispositivos. Então precisamos lidar com isso. O dispositivo está em orientação retrato. O conselho do dispositivo está na paisagem após sua decisão. O dispositivo está na paisagem. É certo. Dispositivos laterais de cabeça para baixo. Estás a segurá-la como um animal. Ok, então, uh, este primeiro 1 nós vamos apenas dizer se a orientação do ponto da janela é igual a zero, isso significa que está em retrato. Hum, e nós realmente vamos pular isso por enquanto porque eu estou trabalhando no lado esquerdo, e eu só quero ter certeza que está funcionando antes de nós nos empolgar demais com isso. E, em seguida, se a orientação da janela é 90. Esse é o lado esquerdo em sua paisagem no seu lado esquerdo, que é a maneira que estou segurando atualmente Meu Deus. Então vamos preparar esses outros muito rapidamente. Mas então eu vou voltar a isso. Quer testar primeiro é igual a 90 negativos? Hum, isso é isso e paisagem queria para o lado direito. E então nós podemos apenas dizer outra coisa e porque a única possibilidade restante é que ele está cabeça para baixo, então eso se ele está no seu lado esquerdo, então nós vamos dizer movimento X. E lembre-se, nós configuramos nosso movimento mais antigo aqui estamos substituindo o Movimento X, e estamos vendo que é igual a ponto pita, que é a posição atual do dispositivo menos movimento sublinhado inicial X, e então movimento y é igual ao início do evento. Uh, waas. Isso deve ser negativo. Evento gama escura mais emoção. Sua pontuação condicional ponto certo. Uh, apenas certifique-se que você está certo. É sobre o Cameron. Ok, então eu acho que isso deve ser certo para segurá-lo na paisagem do lado esquerdo. Então precisamos de Teoh para a nossa função get offset onde estamos retornando o deslocamento de cada camada lembrar, e entre o seu deslocamento de toque e você está chateado objeto que retornamos, vamos dizer deslocamento de sublinhado de promoção distante, sublinhado X é igual a, uh ponto x vezes jogador Z índice sublinhado. E lembre-se, isso é o que vai fazer nossas camadas se moverem em taxas diferentes. Basicamente, fazê-lo parecer três d. Caso contrário, isso vai se mover juntos e você realmente não vai notar nada, exceto que ele se parece com as páginas. Está rastejando. Então vamos para isso e então vamos salvar a nossa moção. Sublinhado, Deslocamento. Sublinhado. Por que foi moção? Por que foi mais tarde Dodds Outro índice esporte e, em seguida, Porque eu já sei que este é um efeito muito fraco. Eu vou apenas fazer um multiplicador de movimento também. Então é um sublinhado de movimento de barra. Fornecedor de bala é igual a 2,5, e então o mesmo que fizemos com o toque um. Eu vou dizer vezes emoção sublinhado para comprar aqui, e isso é apenas copiar e colá-lo para que seja um pouco mais rápido. E, novamente, se sua tela for de um tamanho diferente, ou se você quiser que isso seja mais forte ou mais fraco, você pode jogar com esse número, e isso mudará a força do efeito de movimento. Andi, aqui na quarta-feira mais poção Sublinhado. Chateado. Sublinhe X aqui. Vamos dizer Abençoe a emoção. Sublinhado. Deslocamento. Sublinhar Por quê? E isso quer dizer que a perturbação total vai ser toque mais movimento. Assim, você pode mudar a posição das camadas com toque e inclinar o dispositivo ao mesmo tempo. E ambos vão trabalhar e nada vai saltar de uma forma estranha. Então, vou guardar isso. E depois vou ao Teoh Teik Video. Atualize a página e vamos ver se funcionou realmente vai fazer isso um pouco maior primeiro. Tudo bem, então vou me refrescar. E então se eu contasse ao meu dispositivo, você poderia ver que tudo parece legal em três D. Ok, então isso é apenas se estiver do lado esquerdo. Portanto, precisamos ir e explicar cada uma dessas diferentes orientações. E eu estou esperando que estes apenas funcionem se você está seguindo junto com o meu código de perto porque eles podem ser realmente difíceis de descobrir qual é qual e qual deve ser o caminho. Então, se não está funcionando para você, talvez você precise apenas ajustar, positivos e negativos e dizer que as coisas funcionam da maneira que deveriam. E pode ser meio confuso, mas espero que você não precise fazer isso. Então, nesta janela, a orientação do ponto é igual a zero, que é a orientação retrato. Vamos ficar em movimento. X é igual a menos movimento. Sublinhado inicial. Por quê? E então movimento por que é igual a evento? Beta menos movimento Sublinhado Inicial, uh, movimento inicial x e depois na paisagem em seu lado direito, o que é negativo. 90. Nós vamos para a emoção sobre X é igual a negativo, mesmo. Pare beta mais movimento de sua pontuação inicial ponto Exe emoção y é igual. Isso é cama menos movimento sublinhado inicial. E se estiver de cabeça para baixo, vai ser o oposto da orientação retrato. Então nós vamos dizer comoção ponto x é igual a gama negativa Não, eu não é igual aqui em cima. Só perdeu u menos seria mais sublinhado. Tudo bem. E então emoção sobre y é igual a negativo, menos estilo, X. Ok, então eu vou ver se isso e então um isso vai ser um pouco complicado para segurar meu telefone e verificar tudo isso ao mesmo tempo, Mas vou dar o meu melhor. Então indo muito fresco, eu posso ver que minha fuga não quebrou. Então, isso ainda é extremo. Eu vou dizer que não estou reprimido a página, mas você pode ver que os jogadores estão se movendo da maneira que eles disseram, Oh, isso parece um tipo de três D. Vamos para o lado do comércio. Mesma coisa Eles estão movendo o pano onde tudo isso é muito complicado. Desculpe. De cabeça para baixo. Os jogadores estão se movendo. Como eles devem esfriar. Tudo bem, então para corrigir esse problema em que você pegou isso e tudo salta para o lado, nós vamos para baixo este ouvinte de orientação de dispositivo, e nós vamos apenas dizer, janela ponto ouvinte de evento ruim Senador um , orientação, dar-lhe uma disfunção não com evento semi cólon e dizer emoção sublinhou final inicial . O X inicial é igual a zero sublinhado. Inicial y é igual a zero. Então, agora, se eu disser isso, faça outro vídeo. Isso vai ser outro estranho estranho ter o meu dispositivo por perto. Então agora funciona a paisagem. Eu mudei um retrato. Na verdade, apenas coloca tudo de volta no centro, e isso funcionará para cada reputação. São contorções estranhas de novo. Mas acredito que era tudo o que queríamos pedir para controlar as emoções. Então lá dentro, só mais algumas coisas que podemos polir um pouco. Então, em seguida, ouça, eu vou dar alguns retoques finais nas coisas, e nós vamos a partir daí. Está bem? Eu queria apontar uma última coisa com isso porque eu acho que eu vou ter perguntas sobre isso. E se você segurar seu dispositivo perfeitamente na posição vertical é um pouco complicado. Você verá que tudo salta. Isso é apenas o efeito de como o giroscópio retorna dados. E honestamente, não faço ideia de como consertar isso. Passei muito tempo tentando descobrir isso, e eu não sei. Então, se algum de vocês é assistentes de desenvolvimento legal que sabem como compensar isso, por favor me avise e eu atualizarei isso. Ouça, obrigado. 10. Programação seis toques de acabamento: Há apenas mais algumas coisas que eu gostaria de mudar aqui. Apenas um tipo de toques finais, coisas que o fazem parecer um pouco mais polido. Então o primeiro deles vai ser uma tela de carregamento. Então, se você está vivendo isso fora de um servidor, pode levar alguns segundos para carregar. E parece meio quebrado quando os Lakers entram um de cada vez. Então já estamos contados, como se já soubéssemos quando tudo está carregado. Então eu vou apenas para ir para o HTML aqui e abaixo da tela sobre ele uma vez que eles fazem, é igual a carregar tela de traço, e então eu d é igual. E, em seguida, dentro do estado africano saqueando pato barra. Ok, eu vou dizer sobre e, em seguida, ir para o seu arquivo CSS e abaixo da tela de ponto. Vamos fazer uma tela de cinzas carregada e, em seguida, abrir o suporte, e vai haver alguns destes. Então você pode precisar de um positivo obter o shopping. Mas eu vou dizer posição absoluta. Oh, eu com 100% de fundo. Zero, zero, zero, aqui. Capacidade de visibilidade. Exposição do centro têxtil. Fax direção Flix. Uh, linha I centro apenas por uh huh. Centro em transição. Lá está ele todos os seus pontos que são coloridos e também provavelmente não. Ok, então se você tem tudo isso por baixo que diz carregar o espaço de pontos da tela do Bash entre esses dois anos, uh, uh, dizendo visibilidade escondida. Aperte o seu Então basicamente, tudo isso faz uma tela de sobreposição branca que tem a palavra carregando bem no meio dela vai desaparecer quando você adicionar o hit classe nele, que vai fazer com seus cães. Bom. Hum, sim. Não há muito para isso além de alinhar verticalmente o texto e alinhando horizontalmente o texto. Então eu vou ser salvo lá. Vamos para o script Java, e depois adicionamos algumas coisas. Então eu estou no topo do arquivo de script de trabalho e logo acima dessa contagem de divagações de carga, eles são carregados, igual a quedas, quedas, e então eu quero obter uma referência para a tela de carregamento acima disso, e Isso só vai ser longe. Tela de sublinhado é igual a elemento por E. E isso é chamado de soprar em nosso HTML. Eu vou dizer que eu vou descer Teoh, onde nós verificamos, tudo está carregado. Então isso é bem aqui em nossa lista de camadas para cada dentro deste, se o contador de carga é maior ou igual a parada da lista de camadas. Então vamos dizer “oi”. Essa é uma função que precisamos escrever. Está tudo bem. E aqui em baixo nós só precisamos dizer função. Eu tenho um carregamento e dentro do que vai dizer carregando tela sublinhado Plus com um L maiúsculo na lista. Uh, ok, então diga que refresca aqui. E você pode ver que você tem uma tela de carregamento que aparece e depois desaparece. Está carregada. Então essa é uma boa adição. Então a próxima coisa que vamos querer fazer é adicionar um pouco de um efeito três D. Então você tem seus deslocamentos de camada. Mas se você está apenas olhando para isso não através de uma câmera, ele não parece Super 3 D's. Nós vamos adicionar uma espécie de rotação de todo o elemento de tela também. Hum, isso é um pouco mais complicado, provavelmente menos vindo, no entanto, então nós vamos para dentro deste jóquei e disfunção logo abaixo do nosso claro direto deitado aqui em um par de linhas e então Nós vamos dizer calcular Oh, muito. Isto deve 30. E então vamos dizer que nosso estado sublinhado X é igual a er por quê? Desde herói Negativo 05 nós vidro fantasia emoção ponto Por quê? Desde 1.2 ponto e vírgula e, em seguida, destino y é igual, que tal da próxima vez desde o seu 0,15 mais ponto x e, em seguida, abaixo disso, nós vamos realmente girar o campus? Na verdade, então vamos dizer lona, esse estilo esfria. Isso pode ser um pouco complicado, então eu poderia realmente fazer isso aqui. Isso pode ser um pouco complicado, Vou salvar a nossa transformação. Estranho, uh, igual. Então o que estamos fazendo é que estamos fazendo um estranho usando algumas variáveis dentro da string que estamos definindo como um valor CSS. Então isso é um pouco estranho, mas tenha paciência comigo. Eu preciso ter cuidado sobre onde você coloca citações aqui, no entanto. Girar X abertura da cotação final da gravidez mais peitorais sublinhado. EUA abertura citação DEG parênteses finais, Space replicate. Por quê? Está bem. Fim da gravidez. Citação mais sublinhado. Por que Deck semi cólon. Aqui. Vamos fazer referência que trata rigoroso. Ok, então eu tinha salvo e eu vou girar nossa página de caloiros aqui e agora você pode ver que a coisa toda realmente gira um pouco. Isso é para eu não precisar desse negativo, na verdade. Negativo 0,15 e parece melhor. Então agora a coisa toda meio que gira apenas um pouco enquanto eu movo meu dedo ao redor da tela ou se eu mover meu dispositivo, um deles é invertido quando eu estou vivendo meu dispositivo. Então eu provavelmente preciso de duas vezes negativo nesse movimento e provavelmente movimento Por que, sim, eu acho que é melhor. OK, legal. Então agora você tem mais três efeito D. Ótima. Hum, e então na última coisa que eu quero fazer é você sabe, isso quando eu estou usando controles de toque ou mouse e, em seguida, deixar ir apenas imediatamente volta ao normal. Eu gostaria de animar isso de volta. Eu fui treinado para não usar bibliotecas JavaScript de terceiros principalmente, mas há um muito legal que eu só quero mostrar-lhe muito rápido chamado Tween dot Js . Então isso está disponível no get ter e eu vou incluir um link para ele no projeto em, Mas você abri-lo. Vamos ver se você vai para Tween O J s. Esta é a página que você viria para você e então você e toque na fonte aqui e, em seguida entre Dutch A s e e você pode bater rock e você deve ser capaz de selecionar tudo tocando e segurando na tela. Isso pode ser um pouco irritante no IOS, mas com pacientes suficientes, eu acho que você poderia fazê-lo. Eu vou copiar tudo isso e, em seguida, de volta em Kota e vai tocar no ícone da caixa pequena no canto superior esquerdo e, em seguida, eu vou bater o mais no canto superior direito do código, Uma tela e bater novo arquivo Tenho um problema entre ponto Js todo o caso e creed E então eu quero tocar no editor de topo do Tween Dodgy no Kota Tap uns e colar E parece que eu tenho tudo bem e eu vou apertar Salvar no topo, certo? E então eu só vou tocar em Tween Duchy s no topo e fechou a Duquesa Tween. Então, vamos voltar ao índice dot html E isso é exatamente como você incluiria outra biblioteca de script de trabalho Então logo acima do nosso arquivo Js de ponto principal. Eu vou dizer que tipo de script é igual a barra JavaScript Force é igual a citação que barra sim, abra isso. Eu vou salvar isso e, em seguida, voltar para você no arquivo de script Java. E há alguns lugares que precisamos editar isso. Vamos voltar à nossa imagem aqui. Certifique-se de que está funcionando. Ok, então eu só não vejo onde isso vai começar. Tipo de conceitualmente é quando você libera toque ou mouse. Então isso está em nossa função de gesto final, que é bem aqui. Então você vai excluir ponteiro dot exe e ponteiro dia y é igual a zero ambas as linhas . E em vez disso você vai dizer entre capitais capitalmente e então nós vamos dizer estão sob média sublinhada é igual a novas capitais vencíveis. Um par de açúcar que para e obrigado zero Por quê? É um herói. Suporte encaracolado, 300 princey. Fácil. Quero dizer com medo de volta. Eu acho que isso é certo. - Sim. Ok, então basicamente o que isso faz é que quando você parar de tocar ou clicar na tela, ele vai iniciar uma nova interpolação que será atualizada automaticamente em nosso loop de renderização. Então precisamos voltar ao nosso loop de renderização, que tem sido rock duro e disfunção aqui. Então logo abaixo da parte onde você limpa o contexto oh, nós somos bem conhecidos. Ele está morto. Nós só vamos dizer, e vamos dizer essa data e eu acho que isso é tudo que você precisa fazer. Então nós poderíamos salvar e, em seguida, atualizar a página e, em seguida, movê-lo e, em seguida, deixar ir. Você pode ver isso agora. Ele se recupera bem, então você não precisa fazer isso. Isso é opcional, mas acho que é um pouco mais agradável. Não parece que está quebrado quando você solta. Hum, e realmente, é só isso. Oh, eu espero que você tenha gostado disso. Avise-me se você tiver dúvidas na seção de discussão. Eu, infelizmente, não posso ajudar todo mundo com todo o seu código como eu mencionei antes. Mas se você tiver algumas perguntas específicas, certifique-se de verificar o código que eu vou incluir e me avise. E muito obrigado por trabalhar 11. Suporte para iOS 13: Ei caras. Então eu só queria te dar uma atualização rápida desde que eu tive um West 13 e eu tinha 13 anos saiu . Tive algumas perguntas sobre como fazer o movimento do giroscópio funcionar. A Apple mudou isso com os sistemas operacionais mais recentes. Então, se você se lembra na lição anterior, eu disse que você precisa ir para as configurações e habilitar uma mudança lá para fazê-lo funcionar. Três boas notícias é que você não precisa mais fazer isso. A má notícia é que você tem que adicionar um pouco mais revestido para fazer isso funcionar agora. Mas eu acho que no geral é uma solução melhor do que Waas. Então isso é realmente muito rápido. Então, estou inclinando meu iPad. Você não pode ver isso, mas a imagem à direita não está se movendo, e isso não é o que queremos. Então isso é apenas começando com o fim do exemplo de código que eu coloquei no recurso é produtos de seção e recursos. E na parte inferior do seu arquivo Js de ponto principal, você só vai adicionar uma linha que diz ponto de janela no ouvinte de eventos, certifique-se de prestar atenção à capitalização sobre essas coisas como fim e, em seguida, funcionar. Você fecha esse ponto-e-vírgula e então nós vamos apenas dizer dentro de que ativar oceano e então nós precisamos escrever que habilitar funções de movimento Nós vamos funcionar e máquina capaz . E então, dentro disso, nós vamos apenas dizer se vamos colocar vocês na estação coreana, em seguida, complementação de dispositivo e solicitar permissão e fechar isso com, um entre parênteses aqui, e certifique-se de que você obtenha o capital d no início deste no capital de propriedade do Capitol. Você isso é um construído em Eu não sei essa coisa construída em coisa construindo em seu navegador web . Então você precisa se certificar de que se você errar a capitalização, não funcionará em salvar isso. E então se eu atualizar minha página da Web aqui e então eu estou inclinando meu iPad e ainda nada está acontecendo. Mas quando eu tocar na tela, ele vai exibir esta pequena mensagem que diz, Eu gostaria de acessar movimento e orientação, então eu vou bater, permitir. E agora, como eu disse ao meu iPad, você pode ver que ele está funcionando novamente. Eso você pode Eu só estou fazendo isso baseado no toque. E essa é a parte do ouvinte de eventos de anúncio aqui. E isso só significa que quando você tocar na tela, assim que você levantar o dedo, isso vai correr. E você pode adicionar um mas ou algo assim, nossa outra maneira de habilitar isso. Então, no meu site, se você olhar para alguns desses, eu tenho um pequeno botão que diz Ativar acesso à orientação. Há muito mais CSS envolvido nisso. Então eu não vou me incomodar agora, mas essa é provavelmente uma maneira um pouco mais óbvia de fazer as coisas. Mas, por enquanto, isto vai funcionar. Mas você sabe. Se você quiser habilitar isso de outra forma, então apenas um toque final. Você não pode fazer isso automaticamente. Essa é a pegadinha aqui. Você não pode executar isso assim que a página carregar. Tem que ser algo com o qual o usuário interage que o faça funcionar. Eso que poderia ser um clique de toque. Eu não acho que você pode fazer isso no Swipe. Pode tentar, se quiser. Mas, uh, sim, então eu espero que isso ajude um pouco de vista e, uh, boa sorte. Avise-me se tiver dúvidas 12. Apêndice 2: Ei, então eu só queria passar um pouco de depuração sobre isso, desde que eu estou fazendo atualizações para a classe s. Oh, eu deveria ter ido sobre isso mais originalmente, mas existem algumas maneiras fáceis de descobrir ou pelo menos tenha uma pista de onde seu código está dando errado. Principalmente temos andado a correr o nosso código lado a lado. Assim, o editor de código APP está no lado esquerdo e safaris no lado direito. Mas para usar esse problema no editor de código ou o que eles chamam agora, uh, uh, você precisa Teoh realmente executar seu código em sua pré-visualização embutida. Hum, então no seu arquivo de índice dot html, você poderia apenas tocar este globo ocular no topo. Hum, eu acho que para abrir e apoiar você bater e segurar uma frustração. Faça isso em uma lição anterior. Mas você acabou de acontecer uma vez e você pode ver que você tem esta pequena prévia agradável correndo bem na sua metade no Ben no topo, certo? Logo abaixo da marca de seleção. Há um retângulo com os pêlos cruzados nele. Se você tocar nisso, você vai ver que você tem este grande retângulo cinza com alguns pouco 20 0 coisas no canto superior esquerdo dele s Então isso é chamado de seu console. O único neste aplicativo não é fantástico. Há muito melhores em navegadores de desktop. Mas esta é uma das melhores opções no iPad. Então agora você pode ver que eu não tenho nenhum erro, que significa que meu código está funcionando bem, o que é ótimo. Muitos de vocês quando se deparam com problemas, provavelmente teriam um monte de Ares aqui. Então eu vou mostrar a vocês tipo de como eles se parecem e como rastrear algo . Então vamos mudar alguma coisa aqui. Como, por exemplo, digamos que eu soletrei sua inicial como inicial apostador, e espero que não seja uma palavra ruim, uh, uh, em um idioma que eu não conheço ou algo assim. Mas se eu voltar para o meu violino índice, basta bater, atualizar no topo, ainda sem erros. Mas uma vez que eu toquei na tela para começar a se mover de repente ele está cheio de vermelho disse, dizendo, Não é possível encontrar iniciais ponteiro variável. Então isso me diz no meu javascript algo está errado com esse ponto. Sua variável inicial . Então eu volto para o script Java. Basicamente, você poderia fazer uma pesquisa aqui ou algo assim e apenas tentar encontrar o que está acontecendo ou até a ordem começar basicamente e em navegadores de desktop muitas vezes, eu vou dizer-lhe em que número de linha o problema está também em morcegos, esses pequenos números fora para o lado esquerdo da tela em. Mas eu só quero consertar isso. Volte para trás. E então também, se você acabar com um cônsul completamente cheio de erros como este, você pode tocar nosso tipo claramente na parte inferior dele com sua pequena função. Parênteses, entendido. Entrar nele vai limpar tudo para você. Sim, então isso são apenas algumas dicas de depuração muito rápidas. Espero que isso ajude alguém, obrigado .