Construindo HTML5 responsivo com Tumult Hype 3 Pro

1. 01 sobre este curso: Olá e bem-vindo a este curso sobre To Mull Type Now to mull type é um animador HTML cinco que permite que você crie interações. Html cinco Interações que podem ser usadas para banners da Web. Você poderia ser usado para aprendizagem E para iBooks, widgets autor Ah, muitos aplicativos diferentes que você pode realmente entrar e usar para mull type, pois é muito fácil de usar. É muito responsivo também. Você pode criar sites responsivos, banners responsivos que se adaptarão a qualquer tamanho de tela ou qualquer dispositivo que o usuário está usando. E então é um aplicativo muito divertido e é muito Robustas Bem, então nós vamos entrar e nós realmente vamos mergulhar e dar uma olhada no que você pode fazer com o tipo toupeira Agora, primeiro de tudo, vamos em frente e lado e falar sobre qual versão do hype e também o que você pode realmente construir Usando hype. Vamos dar uma olhada em alguns exemplos antes de entrar na ferramenta e realmente começar a usar a ferramenta para construir fora. Esses tipos de HTML cinco interações. Então a primeira coisa é, vamos para mut dot com nós vamos para multi ponto com. Ok, então uma ameaça para mudar ponto com vá em frente e para cima. Clique em Hype Pro. Agora descendo para High Pro. Isso lhe dará um pouco de informação sobre hype, pro e os tipos de coisas que você pode fazer com ele. Mas o que eu quero focar é na galeria aqui. Se eu clicar na galeria e depois descer, você vai notar um monte de exemplos diferentes usados em dois maltes ou usados para construir ah, muitos exemplos diferentes que foram realmente construídos usando hype. Então vamos em frente e dar uma olhada em alguns desses Agora, eu já tenho alguns desses pullup na minha conta aqui, então eu vou passar por ele e vamos falar sobre eles, e então vamos entrar no curso real sobre como construir esses tipos de coisas. Então a primeira coisa é este foguete, então você vai notar algumas coisas diferentes. Ah, neste foguete. Então você primeiro percebe como ele começa a tremer, e então como ele começa a fumar começa a sair e então ele começa Teoh começa a ir e levantar-se no ar e tudo, modo que é usar To mull type. Você pode usar alguns dos recursos de animação. Você também pode usar símbolos para criar suas próprias animações aninhadas. Você pode fazer as coisas crescerem. Você pode fazer com que as coisas fiquem menores. Estes são os tipos de coisas que você pode usar com o tipo tamal. Agora, aqui está outro exemplo. Deixe-me realmente voltar aqui. Esta é a do Castelo. Agora isso está usando algo que só está disponível em tumult, pro ou high pro. E essa é a física. Deixe-me recomeçar isso de novo. Então você vai notar na física aqui na Bola de Canhão e a Bola de Canhão interage com diferentes tijolos no castelo. E então esses tijolos meio que caem em pedaços. E isso é usar a física dentro do tumult, tipo dois multi pro. Então é por isso que queremos ficar nesta sessão de que vamos falar. Ou nesta aula, nós vamos estar falando sobre a visita são o aplicativo hiper pro. Então aqui está outro que eu gosto, e este é um infográfico. Então, se você está falando, hum, se você está querendo construir algo que seja mais interativo. Esse é um gráfico que os usuários realmente entram, e eles clicam em Teoh View Different informações. Bem, hype é um excelente aplicativo para construir esses tipos de coisas para que você possa clicar neste item aqui e você vai notar o destaque roxo que vem em. E como eu venho, eu acho que começar a mudar e começar a se mover no ar, coisas diferentes que você pode fazer dentro de diferentes linhas de tempo do tipo mull. Ok, então aqui está outro exemplo Agora isso está embutido dentro de um site. Então aqui, assim que eu chegar a este site, os sites, um site normal. Mas você vai notar esta animação que começa a animar as diferentes partes. Hum, e eu posso entrar, e eu posso clicar nesses diferentes elementos aqui. Agora. Esta parte é feita dentro do Tumult. Dunn é feito dentro do hype para que você possa levá-lo, e você pode construir apenas elementos diferentes dentro do hype e, em seguida, incorporá-lo com seu site atual, seu WordPress ou um HTML normal. Ou você pode até pegar esses tipos de interações e colocá-lo dentro do iBooks Author e tornar seu livro um pouco mais interativo também. Agora este é um pouco mais complexo. Você verá um mundo aqui. Temos muitos elementos animados diferentes. Temos um avião que voa. Temos uma montanha-russa, um, um, ou este “Desculpe, este camião que está a passar por ruas diferentes e todo este comboio que passa, Ah, Ah, estes moinhos de vento, um monte de diferentes elementos que estão acontecendo aqui e estes são realmente elementos interativos. Quando você clica em coisas diferentes, em seguida, eles zoom em diferentes cenas, e então você pode clicar em diferentes elementos lá também. Então isso é um monte de animações aninhadas dentro do hype. Um, e muita diferença tem cenas que dizem, é assim que você entra na parte de zoom é nas cenas aqui. Então agora aqui está um banner interativo. Agora todos nós vimos esses tipos de banners, tipicamente no passado. Eles foram construídos com flash adobe, mas desde ah, muitos navegadores ar não suportando flash. Qualquer mais hype é grates aplicação para construir esses tipos de banners e você vai notar que ele é responsivo. Assim que eu começar a redimensionar minha tela, ela se adaptará automaticamente ao novo tamanho. E essa é uma característica que é hype nos dá agora. Aqui está outro banner. Vamos em frente e clicar nisso. Este é um pouco mais interativo. Ele realmente permite que você atire em coisas diferentes. Então temos a nossa arma aqui. Ah, e então podemos entrar e clicar em um item diferente. Atire nele. E então esse pequeno banner aparece no final. Então há outro banner que eu tenho que clicar neste ícone de mais, você pode ver. Aqui está uma pequena diferença de física que ele faz e diferentes animações que virão em momentos diferentes. Então agora você tem que interagir com essa? Você pode ver. Como eu arrastei para a esquerda aqui, Ah sub-menu vai realmente aparecer, e agora eu posso clicar em diferentes itens aqui que só permite que você. Ou que mostra a capacidade de hypes para adicionar arrastar e com base no arrastar em diferentes elementos dentro de sua animação. Ali. Agora, este eu realmente gosto porque ele tem, ah, ah, animação legal de cartão que está sendo dobrado para fora e então você pode ver que você pode fazer esses tipos de animações aqui E agora todos esses exemplos no site tipos você pode realmente baixar a nossa maioria deles. Você pode baixar onde diz este documento hype e você pode realmente abri-lo e você pode ver exatamente como eles construíram. Então, eles querem compartilhar como esses diferentes arquivos de exemplo e compartilhar como eles construíram para que você possa baixá-lo e conferir. Este eu realmente gosto porque, hum, você pode realmente clicar na planta, esse poder, e ele vai levantar símbolos diferentes. É um símbolo aninhado que anima os testamentos. Você também pode clicar em Fly Solo e que irá animar um avião para fora e, em seguida, animar o outro plano no meio. Você tem um monte de diferentes ícones de nuvem e tudo o que está acontecendo. um Háummonte de elementos diferentes com os quais você está trabalhando aqui. Agora aqui está ah, OVNI um onde você pode realmente clicar sobre a ovelha e este OVNI vai entrar. E então eu amo pato que ovelha e você pode clicar em um item diferente aqui. E não importa onde está este OVNI que onde quer que você clique irá realmente para aquela ovelha que você acabou de clicar. Então, e isso é usar um monte de linhas de tempo e as animações e coisas assim que você configurar dentro de um hype. E esses são os tipos de coisas que você pode construir um tipo. E então nós vamos ensinar-lhe o básico nesta classe como você pode começar. Eu posso usar thes, diferentes linhas do tempo, thes diferentes animações e como você pode criar suas interações responsivas e assim eles vão se adaptar aos diferentes tamanhos de tela e tudo mais. Então vamos falar sobre esse tipo de coisa. Mas antes de tudo, vamos em frente e começar com como baixar o hype e como começar a usá-los. 2. 02 como obter Hype: Tudo bem. Há duas maneiras diferentes de conseguir algum tipo antigo. Se você for para a Moult Dot com e então você vir aqui e novamente, nós vamos estar falando sobre esta sessão, nós vamos estar falando sobre hiper pro. Vamos clicar no hyper pro, e isso nos dá a capacidade de baixar um teste gratuito. Se você quiser experimentá-lo gratuitamente. E se você clicar no teste gratuito aqui ou você pode atualizar do tipo tumult. Se você já comprou a versão anterior do hype, você pode realmente atualizar por apenas $49 ou você pode comprá-lo completo por apenas $99. E é isso. Uma vez, , e você sabe, e então qualquer atualização depois disso, se estiver na mesma versão, como agora, é tumulto. Tipo três. Se eles forem para quatro, isso pode ser uma atualização paga, mas se eles forem 3.5, isso geralmente é uma atualização gratuita. Então você não precisa se preocupar em gastar dinheiro cada vez com cada atualização única que eles fazem aqui. Então tudo bem, então se você clicar no teste gratuito ou se você clicar em agora, Essa é uma opção de realmente baixar tipo tumult. A outra opção é realmente passar pela loja de aplicativos pela Apple App Store. Agora, tipo Tamal é um Mac baseado na aplicação Lee. Então você tem que ter um Mac para realmente baixá-lo. Hum, mas eu vou entrar aqui e eu vou na caixa de busca. Eu quero digitar em hype e assim que eu, mas lá está, bem ali. Hipe três. Hum e agora ele aparece com o hype três. E então eu clico neste Hype três, e então eu compro lá. Agora, no entanto, Hype três aqui é apenas a versão básica do hype. Então você está basicamente comprando através da loja de aplicativos, a versão menor, mas então você pode atualizá-lo, e então é a versão completa. Mas você tem que baixá-lo compras neste e, em seguida, comprar a atualização depois. Então, cabe a você. Se você quiser fazer isso, quaisquer atualizações ou quaisquer atualizações que para vários sair com, eles irão automaticamente através da loja de aplicativos. Então, se você gosta de gerenciar todos os seus APS e todas as atualizações através da loja APP. Esta pode ser uma boa maneira, e também é fácil, muito fácil se você vai para outro Mac para realmente apenas entrar em sua área de compra e baixar novas versões do seu APS basicamente e obter o seu Mac já para ir com todos os APS que você já comprou. Portanto, é uma boa maneira de garantir que você tenha todos os seus aplicativos em um único local. Ok, então uma vez que eu tenha baixado o teste gratuito tudo a partir daqui, ele vai baixar em aplicativo para qualquer pode downloads ou minha área de trabalho. E então eu só tenho que arrastar isso para a minha pasta Aplicativos, e é isso. Uma vez que está na minha pasta de aplicativos, então eu posso vir aqui e eu posso apenas clicar em Hype três bem ali. Assim, assim que a campanha publicitária for iniciada, esta é a primeira tela que você verá, então ela começa com o Projeto Blink. Você tem sua tela branca aqui, você tem seus diferentes elementos, seu inspetor, suas cenas no lado esquerdo, e agora você pode começar a criar seus cursos para que nós vamos entrar na próxima iniciar um projeto e trabalhar com os arquivos lá 3. 03 iniciando um novo projeto: Tudo bem, assim que você tiver o hype ativo e funcionando, a primeira coisa que você precisa fazer é salvar seu projeto. Assim que você tem, você sabe exatamente onde está o seu projeto. Você pode abrir mais tarde, e então você só precisa pressionar o comando s toda vez que quiser salvar uma nova versão dele ou salvar a versão atualizada dele. Então, vamos em frente e aperte o comando s aqui, ou você pode ir até o arquivo e depois descer para salvar de qualquer maneira funciona. E agora ele está me pedindo para salvar este projeto em uma determinada área. Por isso, vou continuar e guardar isto na minha área de trabalho por enquanto. E vamos chamar esta amostra assim que eu nomear. Amostra acertada. Entrar. Agora, se eu chegar ao meu desktop e ir em frente e fechar isso agora, se eu chegar ao meu desktop, então nós temos este projeto de exemplo. Agora, aquele projeto de amostra. Se eu fosse fechar este hiper projeto aqui e apenas clicar duas vezes no projeto de amostra que vai abrir esse projeto exatamente como eu salvei um dentro de hype e então eu posso ir , e é realmente um rápido, uh, Aberto. Você realmente não sabe. Não leva muito tempo. Você pode apenas ir em frente e clicar duas vezes sobre ele, carregá-lo, hum, ou clicar duas vezes sobre ele. Abra e comece a trabalhar com ele. Agora, sempre que você está trazendo arquivos de áudio que você está trazendo em imagens ou qualquer coisa, realmente mantê-lo dentro de seu recurso é pasta para que você possa clicar sobre sobre sobre o lado direito. Você pode clicar em seu recurso é pasta e você pode chegar a todos esses arquivos. Então, realmente, quando você está mantendo o controle desses arquivos, você pode querer manter uma cópia deles em algum lugar. Mas realmente, a coisa mais importante é este arquivo de um projeto certificando-se de que você tem esse arquivo de projeto e que você mantenha esse arquivo de projeto mesmo depois que você para liberou seu projeto, a fim de atualizar novas versões do seu projeto ou se você precisa dele para fazer uma alteração rapidamente, você abre o arquivo do projeto e, em seguida, publica o projeto e, em seguida, carrega a partir daí . Então esse é o processo de basicamente manter esse arquivo de projeto, atualizando que publicando a saída desse projeto e, em seguida, carregando esse projeto para o site da Web ou importando dentro. iBooks, Author, qualquer método que você está realmente indo para entregar este aplicativo hype aqui. Então é assim que você entra e como você começa um novo projeto e como você salva o projeto em como você abre o projeto, rapaz, mais tarde. 4. 04 Explorando a UI: Tudo bem agora, vamos em frente e explorar um pouco a interface do usuário. Vamos nos familiarizar com onde tudo está. E então, quando começamos a construir, esses projetos estavam familiarizados com onde chegar a tudo. Então, a primeira coisa que você vê quando você inicia um novo projeto e você salvou o projeto é suas cenas no lado esquerdo. Agora as cenas é ah, boa maneira de separar o seu conteúdo. Então, se você vai gostar que vimos naquele mapa interativo no primeiro vídeo, se você vai ter o mapa como a cena principal e então você vai entrar em ampliado em partes desse mapa, bem, você entraria e você criaria novas cenas para aqueles com zoom em partes do mapa. E é assim que você também pode separar o conteúdo. Se você estiver construindo, digamos que você está construindo elementos de aprendizagem interativos, e esse elemento de aprendizagem interativo tem diferentes guias ou informações de diferença Will. Você pode usar essas cenas diferentes para realmente saltar para esses diferentes elementos nas diferentes informações, apenas chegando e clicando no ícone de adição que lhe permitirá criar novas cenas . Vamos aprofundar as cenas mais tarde. Mas a próxima coisa são os layouts. Agora, os layouts não são realçados por padrão. Mas se eu entrar aqui e clicar nele, então ele abrirá com os layouts e falaremos sobre layouts mais detalhadamente. Mas é só uma forma de criar diferentes pontos de pausa no Ben. Ajuste seu conteúdo dependendo desses pontos de interrupção. Então, se você quiser que algo pareça completamente diferente em um telefone que ele faz um tablet, você criaria um layouts diferentes, e então você usaria esse layout para criar esses elementos lá, hum, e reorganizar esses elementos e de forma diferente nos diferentes dispositivos em diferentes pontos de quebra. Agora, cruzando o topo aqui, vamos entrar na seção Elementos. Se eu selecionar a caixa suspensa na seção Elementos, teremos algumas coisas diferentes. Temos nossos elementos de texto onde podemos inserir botões de texto, botões texturizados, imagens, vídeos, audiófilos, widgets html para que possamos trazer em html externo, hum, dentro de um hype e usar isso para embutido dentro de hype. E então podemos criar nossa própria forma para que pudéssemos fazer retângulos, retângulos arredondados e elipses ou círculos, basicamente e depois disso, temos símbolos. Agora vamos falar sobre símbolos mais em profundidade, mas sua maneira de criar linhas de tempo aninhadas para que você possa até mesmo saber. Digamos que sua linha de tempo principal esteja pausada. Você ainda pode ter algo tipo de girar independentemente de sua linha de tempo principal. E novamente, nós vimos isso no mapa onde tínhamos os diferentes trens passando e tínhamos diferentes , como o carrossel circulando e ao redor e ao redor. Aqueles foram todos aninhados são símbolos diferentes, basicamente com suas próprias linhas de tempo rodando aqueles diferentes para animações em suas próprias linhas de tempo. E você tem um copo. Você tem duas opções diferentes agora. Um é o novo símbolo, e o outro é um símbolo novo e persistente. Ah, vamos falar sobre isso mais em profundidade, mas o símbolo persistente. Se você tiver várias cenas e criar um símbolo, ele será adicionado a uma dessas cenas. Um símbolo persistente irá adicioná-lo a cada cena automaticamente, por isso é bom se você tiver um fundo ou algo assim e você não quiser copiá-lo e colá-lo em cada cena. Vamos adicionar como um símbolo persistente sobre ele será em cada cena automaticamente. Vai ter cuidado com isso, caso queiras esconder-te e mostrar coisas diferentes. Mas se você quisesse ter sua em todas as cenas automaticamente, essa é a maneira que você faria isso. Então o outro elemento é o grupo que temos ungroomed temos trazer para frente trazer para trás essas aplicações normais de ar ou elementos normais que você pode usar e praticamente todas as ferramentas. Amplie e, em seguida, também temos uma pré-visualização. Agora, a visualização usará o padrão ou o que for. Seu navegador padrão é menos safari. Mas se seus navegadores padrão forem cromados ou algo assim, você poderá ver um símbolo cromado lá. No entanto, você também pode praticar as melhores práticas para testar este e este muitos navegadores como você pode. Ah, e você ainda pode ver esta caixa suspensa. E essa caixa permite testá-la em outros navegadores que instalei neste computador. Então, por exemplo, Firefox e Chrome, , e eu poderia fazer isso. Eu posso simplesmente selecionar a caixa suspensa e, em seguida, selecionar fire boxer chrome, e ele vai pré-visualizar o meu projeto dentro de lá. Agora, uma tecla de atalho é Thekla tripulado inter símbolo ou comando tecla Enter. E se você selecionar isso sem sequer selecionar chegando aqui e clicando nesse botão, ele irá pré-visualizar o seu curso para que eu possa apertar o comando, entrar e, em seguida, ele vai abrir. Eu tenho isso na minha outra janela aqui, mas ele vai abrir com a pré-visualização e lá vamos nós. Então agora eu posso apenas pressionar comando enter novamente e ele vai atualizar sempre que eu tenho aberto lá. A próxima coisa é o meu inspetor, se eu desligar e ligar o meu inspetor, é este painel direito e tem um monte de diferentes elementos e inspetores que vamos falar mais em profundidade. Então, inspetor de documentos. Ah, é aqui que eu adiciono ações. Este é o lugar onde eu uso física sobre isso é onde eu adicionar em diferentes dar rótulos para os meus diferentes elementos no palco. É também aqui que eu faço as coisas flexíveis e responsivas e adiciono o tamanho da justiça para o meu palco e tudo mais. Então isso é algo com que você vai trabalhar muito e vai morrer mais com ele agora. O outro elemento em toda a parte superior aqui é o recurso é este não é realçado por padrão. Mas se eu selecionar isso, isso vai me dar uma lista de todos os meus recursos é assim cada vez que eu trazer uma imagem, cada vez que eu trazer um arquivo de áudio, cada vez que eu trazer um arquivo de vídeo, todos eles serão colocados dentro do meu recurso é pasta e, em seguida, eu poderia apenas tomar esses elementos aqui, arrastá-lo e soltá-lo neste palco e usá-los uma e outra vez em várias cenas diferentes ou qualquer coisa assim. Aqui também é onde eu posso entrar e criar emprego. Funções de um script. Então, se eu quisesse obter mais em profundidade, hum, com a capacidade, esse hype vem por padrão e eu queria adicionar em JavaScript e outros elementos diferentes, eu posso criar uma função aqui, e então Eu poderia executar essa função em qualquer outra ação qualquer outro gatilho ou qualquer coisa assim. Posso criar a função aqui e depois fazer isso. Agora, adicionar um arquivo também me permite trazer elementos de script Java externos. Oh, então se eu tivesse se eu quisesse usar Sock verde, por exemplo, ou se eu quisesse trazer outros tipos de JavaScript, bibliotecas Jake Worry. Eu poderia fazer isso dentro daqui e anexar esses arquivos aqui e, em seguida, tirar vantagem desses aqui também. Agora, eu também não posso adicionar fontes. Se eu tiver uma fonte personalizada que eu quero fazer, eu posso fazer isso. Dentro do recurso é o próximo elemento é o tempo real ou o palco em si aqui. Então esta área branca é o que vai ser visível para o usuário final. Então você quer adicionar o seu elemento. Você iria reorganizá-lo e projetá-lo dentro daqui. Você também pode clicar em jogar, e você pode clicar em registro e e diferentes elementos diretamente da linha do tempo. , Agora, acima disso, acima disso, ganhe a área do palco, embora você possa arrastar barras de diferença se quiser obter um posicionamento exato e obter diferentes guias inteligentes e tudo mais. Tudo que você tem que fazer é chegar até a régua, clicar nela, arrastá-la para baixo, e isso irá fornecer os guias para você para que você possa organizar as coisas uma linha, as coisas exatamente como você quer agora aqui na linha do tempo novamente, Temos a nossa peça. Nós temos nosso registro, e vamos falar sobre gravação assim que entrarmos em animações. Ah, você tem a capacidade de modificar a linha do tempo real para que você possa ampliar a linha do tempo e ficar realmente em profundidade com suas animações e seus quadros-chave. Você também tem elementos diferentes. Depois de começar a inserir coisas, você começa a adicionar círculos e quadrados diferentes e outras coisas que você vai animar . Você pode selecionar essas coisas diferentes ao longo da linha de tempo e, em seguida, abaixo que estão as propriedades. Agora, as propriedades são basicamente os elementos que você pode anime uma vez que você tem algo selecionado. Então, se eu selecionar algo na minha linha do tempo, eu vou seguir em frente e apenas criar um elemento aqui para que eu possa mostrar como criar um retângulo na minha linha do tempo, um, ou no meu palco aqui, e você pode ver que se eu não tiver selecionado, hum, nada aparece em minhas propriedades. Agora há um retângulo na minha camada de linha do tempo. No entanto, eu tenho que selecionar nesse retângulo para ver as propriedades que eu posso animar abaixo dele. Então, agora que eu tiver selecionado isso, agora eu posso vir aqui e eu posso animar a opacidade. Eu posso animar a esquerda, a parte superior do tamanho que com. Mas eu também posso selecionar esta caixa suspensa e, em seguida, anime. Um monte de outras propriedades. Aqui temos contraste, brilho, outras coisas. Estes são todos os elementos que você pode inimigo, e você tem que ter a imagem ou o objeto selecionado a fim de visualizar essas propriedades . Agora aqui eu também posso alternar a visibilidade para que eu possa desligá-lo e ativá-lo. Se eu só quiser me concentrar em certos elementos, eu posso esconder todo o resto. Então eu também posso bloqueá-lo para que eu não selecioná-lo acidentalmente e movê-lo se eu tê-lo no local exato que eu quero. Então esses elementos de ar diferentes que você poderia fazer com sua linha do tempo. Isso é apenas uma visão geral básica da interface de usuário real. Dentro do tumulto, digite 5. 05 de visualização do seu conteúdo no celular: Tudo bem. Falamos brevemente sobre como falar ou não pré-visualizar seu projeto no vídeo anterior, mas vamos falar um pouco mais detalhadamente sobre como fazer isso. Então aqui eu posso ir para a seção de pré-visualização. Posso clicar neste símbolo de safári. Como o safari é o meu navegador padrão, eu posso colocar aqui a opção de pré-visualização em vez do Firefox ou a opção de pré-visualização dentro de um cromo. Agora, algumas outras coisas que eu posso fazer é se eu tiver o tipo tumulto refletir aplicativo no meu telefone, que você pode obter através da loja APP. Você pode realmente enviar as informações diretamente para o seu telefone. Então, se eu entrar aqui e selecionar a caixa suspensa, o que eu tenho que fazer é antes de tudo, estar no mesmo wireless. E agora estou no rádio. O meu telemóvel está na mesma rede sem fios que o meu computador. E assim como eu tenho aqui e eu tenho o aplicativo puxado para cima aqui, o tipo tumulto reflete. É uma aplicação gratuita. Uma vez que eu o tenha aqui, então eu tenho a opção. Uma vez que eu selecionar a visualização para realmente visualizar nesse dispositivo para que eu pudesse ter esse mesmo aplicativo refletir no meu iPad. E se eu quisesse testar isso, eu posso fazer isso. Mas por aqui, eu vou em frente e basta clicar no iPhone Jeff Bats e então ele vai enviar essa informação. Você pode ver que ele é atualizado automaticamente, e, hum, lá está ele bem ali. Tenha a minha ereção. Eu sei que é um pouco difícil de ver lá, mas eu tenho meu retângulo lá, e eu posso realmente testar tudo no meu telefone diretamente. E isso é tudo que eu tenho que fazer é realmente selecionar essa caixa suspensa, ter o aplicativo para cima, e então ele funciona automaticamente. E então ele poderia começar a testá-lo sem ter que colocar isso em um site em algum lugar ou carregado e, em seguida, ir para navegar Teoh u R l ou algo com o meu dispositivo e, em seguida, testado para fora . Isso é muito mais fácil ter o aplicativo, que é que o hype refletem aplicativo baixado em seus diferentes dispositivos, e então você pode testá-lo a partir daí 6. 06 de volta a entrar e sair: quando você está trabalhando com o tipo tumult e você quer ampliar em diferentes partes e você quer realmente entrar em detalhes finos de suas animações, o que acontece muito. Você quer usar a ferramenta de zoom que você vai notar se você chegar ao zoom para cima na barra superior e selecionar a caixa suspensa. Aqui, você terá muitas opções de predefinição diferentes. Então eu consome 25 50 75 ah 1 25 todo o caminho até 3200%. Ah, e isso permite que você obtê-lo realmente detalhado e diz Humano sobre os certos elementos sua animação real. Ou se eu entrar e disse ou rolar para baixo um pouco mais Ah, eu posso ver que o zoom in e zoom out tem uma pequena tecla de atalho, que é o comando e que o sinal maior ou menos, hum, o sinal menor. Então, se eu entrar aqui no meu palco área hit comando e, em seguida, apenas um maior ou menor do que ele vai ampliar agora eu tenho aqueles é acionado é outra coisa. E então ele realmente iria puxar para cima outra coisa. Eu teria que ajustar as teclas de atalho e as teclas de atalho nas minhas preferências dentro das preferências do meu sistema para ter certeza de que nenhum outro aplicativo está usando as teclas de atalho. Então isso é uma coisa a ter em mente. Mas, por enquanto, posso ir em frente e usar a caixa suspensa para ampliar os diferentes elementos. E agora, uma vez que eu tenho isso, eu posso entrar e apenas rolar ao redor, usei meu mouse para rolar ao redor e ver esses diferentes elementos aqui. Então essa é a maneira de ampliar para realmente chegar a um detalhe fino. Alguém examine um pouco mais. Você pode ver que eu poderia entrar direto na forma e ver exatamente como modificar essa forma ou C. Ok, o que está acontecendo com essa forma? Você pode ver que eu poderia entrar direto na forma e ver exatamente como modificar essa forma ou C. Ok, E eu posso ir lá e ajustá-lo, ampliando assim. E então eu poderia diminuir o zoom. Só de voltar para 100% vai me levar de volta ao tamanho real do seu Agora. Eu não criei nenhuma capacidade de resposta ou qualquer coisa assim ainda falaremos sobre isso mais tarde . Então, o que? Eu sou realmente visto aqui vai ser o tamanho das animações uma vez que eu publicá-lo para fora. Então é assim que você amplia e usa sua boca em seu projeto. 7. 07 como trabalhar com formas: Tudo bem. Neste vídeo, vamos falar sobre os diferentes tipos de formas que você pode usar dentro do tipo tamal . E há basicamente três tipos diferentes de formas. Há um retângulo, um retângulo arredondado ou ferramenta de elipse ou uma ferramenta de círculo. Basicamente, agora, fora dessas ferramentas você pode então entrar e você pode manipular. Você pode então entrar e adicionar em suas próprias cores e outras coisas. Mas essas eram as três ferramentas básicas, então você pode usar isso para fundos transparentes. Você pode usar isso para ah Grady na cor, fundo enviado ou qualquer outro tipo de forma que você deseja dentro do tipo tumulto. Então a maneira que você adiciona, hum, uma forma dentro do tipo tumulto é entrando no painel de elementos e descendo sob esta linha. Aqui na caixa suspensa, há um retângulo arredondado retângulo em um banquinho labial. Vamos em frente e adicionar apenas uma ferramenta de retângulo. Agora, com essa ferramenta de retângulo selecionada, você notará algumas coisas na parte inferior. Temos nossas propriedades agora. Estas apresentam as propriedades que estão sendo afetadas que você pode fazer com a animação no objeto que você tem seletiva, que o objeto que selecionamos atualmente é a ferramenta de retângulo. Agora, se eu chegar ao lado direito, que é a janela Thean Specter, é aí que eu tenho diferentes elementos que eu posso mudar sobre o retângulo. Agora você tem que ter certeza de que você tem esse retângulo selecionado, mas você vai notar que este forma um, que é os elementos, inspetor, Hum, Hum, e que o inspetor de elementos permite que você afete a forma de o objeto que você selecionou sobre a cor dos diferentes elementos, as propriedades dessa forma. Então a primeira coisa que você vê é o fundo. Agora isso me permite selecionar a caixa suspensa de Cor Teoh Radiance ou para imagem se eu tiver um padrão. Se eu quisesse, como um padrão de madeira ou algo assim, bem, bem, você pode ir encontrar uma imagem padrão de madeira e, em seguida, vir para a imagem aqui e, em seguida, selecionar qual imagem eu realmente quero ter substituir ou estar repetindo ou Algo assim. A cor é uma cor sólida, ou se eu entrar em crédito, ele vai ter a mim. A cor é uma cor sólida, ou se eu entrar em crédito, Ah, terá que cores que me permitirão ter uma cor superior e, em seguida, uma cor inferior. E então eu posso ajustar a rotação desse Grady int também. Basta comprar entrar no número aqui ou apenas pegar este pequeno círculo nisso, pegar o mostrador e ajustar o poço do Diallo, então eu vou ficar com uma cor normal. Vou selecionar o seletor de cores, e este é um seletor de cores de maçã padrão para que eu possa entrar aqui e ajustar diferentes elementos sobre ele se eu quisesse inserir no valor hexadecimal. Se eu tiver uma cor específica que eu quero usar, eu posso entrar aqui e inserir o valor hexadecimal ali mesmo. E a próxima coisa é a fronteira. A borda me permite ajustar o basicamente a barra que vai ao redor no curso que vai em torno da forma e eu un selecionou para que eu possa ver isso um pouco melhor. E você pode ver que é apenas uma cor cinza clara e escura. Eu vou em frente e eu vou subir a largura dele até o evento com. Agora ele podia ver um pouco melhor. Eu podia ver esta borda ao redor da forma. Ele me permite entrar e ajustar essa forma ou apenas delinear a forma. Basicamente, agora, se eu quisesse ajustar o raio dessa borda, eu poderia entrar aqui e eu poderia subir o raio, e assim ele começa a fazer uma pequena curva arredondada. Mas está afetando apenas o raio. Se eu quisesse afetar a borda também, bem, é aí que eu teria que entrar e adicionar um retângulo arredondado. Só está afetando o raio da fronteira. Isso é algo a ter em mente agora. Se eu quisesse ter apenas certos cantos arredondados em certos objetos ou certos lados do retângulo real, você poderia apenas desmarcar aqui dessa forma, ele só terá, hum, certas áreas e lutar Verifique aqui e então eu posso ajustar o raio. Só estou nessa área para que possam ver que peguei o raio no lado superior direito . Eu reduzi o raio para zero. Agora que chegou a zero, tudo o resto tem um canto arredondado. Excepto por aquele lado. Esse lado tem apenas um canto quadrado pode ficar doente, então agora, eu vou entrar aqui. Hum, e eu posso ajustar a cor da borda real selecionando esta cor aqui. Hum, na verdade, deixe-me apenas mudar de volta para todos. Você tem que mudar este dedo de trás por todo o meio aqui, e eu vou mudar a cor da borda apenas selecionando que é a mesma caixa suspensa . Vamos em frente e subir isso para uma cor mais escura e que vai até a cor lá. Agora, usando suas próprias formas em vez de tentar, como, recriar formas dentro do tipo tamal Em vez de trazer imagens da loja de fotos ou algo assim, vamos ajudar com o tamanho do arquivo. Então, se você quiser torná-lo um pouco menor, tente usar formas e cores bem no lado daqui. E especialmente com botão isso se você poderia tentar afetar os botões dentro do tipo tumult , você ainda obter toda a funcionalidade dos botões, o estado de foco sobre o estado de baixo e tudo mais. Então eu vou entrar aqui e agora você pode mudar a opacidade de um objeto se você quiser tornar isso Ah, um pouco transparente. Eu realmente não posso dizer agora, mas se eu vir aqui, na verdade é duplicar a forma. E você pode ver que agora que eu duplicei, se eu tenho ou sobre outra forma, é onde eu posso ver isso. Sim, há alguém passivamente nisso. Se eu levar a opacidade um pouco mais baixo, você vai notar que ela quase desaparece lá. Agora tenha em mente que há qualquer hype tempo, na verdade, você faz algo que hype que significa, não trabalhar em alguns navegadores. Hif vai realmente avisá-lo sobre isso. Então há um pequeno símbolo amarelo logo acima da opacidade. Vamos em frente e clique no que agora ele nos diz em todos os oitos. A opacidade não será exibida quando houver Ah, arredondamento de canto. Ah, fundo radiante ou uma sombra de caixa aplicada. Isso é que eu comi. Então, se você está preocupado com todos os oitos, se isso é algo que você sabe que está tentando resolver, você está tentando atingir um, eu tenho oito anos e abaixo. Você pode querer levar isso em consideração. Se você sabe que você vai apenas se preocupar com ou seja, nove e acima do qual eu recebo nove tem muito mais apoio para as coisas. Bem, então, apenas ignore que você pode apenas ir em frente e apertar demitir, e alguns eles ainda vão mostrar esse aviso. Mas isso é apenas algo que o hype está tentando deixar você saber que dizer, hey, isso não vai funcionar totalmente dentro de mim e você está tentando se concentrar nisso, ok, então a próxima coisa é a sombra. Vamos nos livrar de uma dessas formas. Só vamos ficar com um por enquanto. Eu vou elevar a opacidade de volta para onde estava 100% e eu vou pegar a sombra. Vou mudar alguns elementos diferentes. Agora, há algumas coisas diferentes que eu poderia fazer com isso. Eu posso pegar este pequeno círculo bem no meio aqui, e eu posso ajustar isso apenas arrastando para cima e você vai notar que ele cria essa sombra. Quanto mais longe eu vou, mais longe a sombra, a distância entre aquele quadrado e a sombra realmente vai. Então isso me permite ajustar visualmente Dragon drop ou ele pode vir aqui e apenas entrar em certos números. Se eu quiser um certo número, vou em frente e dizer, vamos fazer três x e vamos fazer um pouco de borrão que queremos ter. A coisa com a sombra é sim, é basicamente criar uma forma duplicada. Queremos ter um pouco de borrão, porque isso é tipicamente o que as sombras são. Alguém teve um cinco, e então eu vou entrar aqui e adicionar três para o porquê. E agora, quando você entrar na cor, agora a cor, eu vou me ajustar. Neste momento , está muito escuro. É realmente preto, então eu vou em frente e só isso para ser um pouco mais leve. Eu quero que a sombra seja apenas um efeito realmente leve, e assim, ajustando a leveza da sombra, isso faz com que seja assim. Não é uma sombra tão dura lá. Agora eu posso entrar aqui, e eu posso ajustar alguns dos efeitos de filtro agora em qualquer um desses tipos de efeitos. Tenha em mente que, uma vez que entramos na seção de animação do hype, você pode animar esses diferentes elementos para que você possa animar uma sombra se movendo. Se você queria simular um filho, e enquanto o sol se move, as sombras dos diferentes objetos também se movem. Bem, você pode animar isso com hype. A mesma coisa com estes filtros. Se você quisesse animar o desfoque se você quisesse animar a sépia, a saturação, a tonalidade, o brilho, o contraste. Essas eram todas propriedades diferentes que você pode inimigo dentro do tipo tumulto. E isso é apenas uma coisa a ter em mente quando você está ajustando essas coisas que você queria animar, inanimar como a opacidade. Hum, isso é o que vai para esses diferentes elementos é o que você está animando. Ok, então eu posso me ajustar. Estes itens diferentes vão jogar com eles mais tarde. Mas se eu ficar totalmente fora de controle e eu estragar tudo como eu estou tentando afetar isso enquanto em vez de tentar lembrar o que os elementos padrão diferença onde eu poderia apenas clicar em redefinir filtros para padrões e que vai voltar para o padrão filtrar em si e , em seguida, temos um par de outros itens diferentes A próxima seção é a reflexão que nos permite adicionar em um reflexo de qualquer objeto que nós selecionamos. Eu posso fazer a profundidade e então eu posso fazer o deslocamento. Ah, quão longe está o reflexo real? Então, se você quisesse fazer parecer que estava em uma certa superfície, e então essa superfície era reflexiva e você queria. E o reflexo lá tipo tumulto permite que você faça isso, que novamente, também, você pode animar o reflexo para que você possa ter aquele inimigo em animar e fazer coisas diferentes como isso alguns. Tudo bem, então são formas. Saiba tudo o que falamos com retângulos e direcionamento arredondado nosso aplica-se a retângulos arredondados. Tudo o que falamos também se aplica ao Ellipse Tal. Agora a ferramenta Elipse não nos dá a opção. A única coisa que é diferente não nos dá a opção de ajustar o raio porque esse é o círculo injustiças sobre a quantidade de raio que ele é. Então, agora. Se eu quisesse ajustar as formas, eu poderia ir em frente e apenas esticar as barras de punho, e eu poderia fazer isso o mais largo e alto que eu posso ir, , e então eu posso também, se eu quisesse manter as proporções dele, eu apenas segurar o botão Shift e, em seguida, agarrar um dos cantos e apenas arrastá-lo para fora. Agora, assim que eu fiz isso, agora ele redimensionar é em proporção e mantém o seu, Ah, no meu mantém um proporcional, basicamente, não importa o tamanho que é, e eu posso fazer exatamente o tamanho exato que eu quero algo com a elipse. Se eu quisesse pegar isso e fazer isso um pouco maior, eu poderia fazer isso também. Agora você pode fazer esses tipos de formas. Você pode pendurar alguns deles. Você pode manipulá-los para que você possa obter o tipo de forma que você deseja. Tenha isso em mente e também tenha em mente, como mencionei antes, que quanto mais formas você usar e menos imagens estiver trazendo, menor será o tamanho do arquivo. Esse é um dos benefícios de tentar usar formas I, em vez de trazer suas próprias imagens para tudo lá. Então, mas ainda temos todos os outros elementos. Quando se trata de lábios, fezes e retângulos arredondados, basicamente nos permite manter tudo isso praticamente igual. Eles estão bem. Então é assim que você cria formas dentro do tamal, digite 8. 08 itens de organização: Tudo bem. Então, quando você tem essas formas diferentes em seu palco e você quer reorganizá-las, há algumas opções diferentes que você pode fazer dentro do tipo tumult. A primeira opção é selecionando esses diferentes elementos. Vamos em frente na Nestlé só para que possamos dizer a diferença aqui. Vou mudar a cor, mudar este círculo para ler. Eu quero mudar este retângulo arredondado para um pouco de verde, e vamos manter o retângulo atrás dele, da mesma forma. Então, ok, então você pode ver que o círculo vermelho está na frente de tudo o resto e nós temos o retângulo arredondado verde que está no meio, e então nós temos o retângulo grande que está atrás de tudo o resto. Então, se eu quisesse trazer essa rodada ou isso é um retângulo, o retângulo grande na frente de tudo agora há um atalho que eu posso realmente tomar sem ter que descer até a linha do tempo e arrastar isso acima de tudo. Posso fazer isso se você quiser. No entanto, em cima do topo há este botão frontal, e que de Button vai pegar qualquer objeto que você selecionou e trazê-lo para a frente automaticamente. Então, selecionando que é trazido para a frente do círculo. É trazido à frente do retângulo arredondado, e agora isso está no topo da linha do tempo. Então, na linha do tempo aqui temos aquele retângulo lá em cima. Agora, a mesma coisa com trazê-lo para trás é que você pode realmente ver o que aquele objeto selecionou. Você pode apenas bater lá atrás, e nós vamos levá-lo todo o caminho para trás atrás de cada objeto. Então, se você tem uma linha de tempo que é muito grande e você tem várias camadas diferentes. Bem, usando esses botões, se você quisesse pegar um elemento que você quisesse trazê-lo para a frente, editá-lo e então levá-lo para trás. Esta é uma ótima opção para você ser capaz de simplesmente reorganizar esses itens diferentes. Agora não há apenas uma apresentação. Uma vez primavera para a frente, outro e tudo assim é apenas esses dois botões vai apenas trazê-lo para a frente todo o caminho ou trazê-lo de volta todo o caminho. Se você queria apenas fazer uma camada de cada vez, no entanto, é onde apenas descer para a linha do tempo em si e arrastar e reposicionar isso. Pegue isso e mexa. Organizamos isso nessa ordem onde eu quisesse. Lá que funciona um pouco melhor, mas é assim que você organiza o seu qualquer elemento que seja se for uma imagem. Se for um vídeo de seus arquivos de áudio, é assim que você organiza sua linha do tempo, trazendo coisas para a frente, levando coisas para trás ou simplesmente reorganizando certas camadas de cada vez. 9. 09 agrupamento: Tudo bem. Então, se eu tiver objetos diferentes que eu quero agrupar juntos, a fim de mover esses objetos ou ocultar esses objetos todos em um momento para que eu não tenha que passar por ah, botão que tem várias camadas e ocultar individualmente. Se eu quisesse focar apenas em um elemento, eu quero escondê-los individualmente. Eles podem pegar aquele grupo, e então eu posso escondê-lo de lá sem ter que criar um símbolo. Agora, símbolo é outra maneira de fazer isso. Mas um símbolo apenas cria uma linha de tempo completamente nova. Não quero fazer isso com isto. Eu só quero realmente entrar e agrupar certos elementos juntos. Então eu vou entrar aqui e selecionar itens diferentes no palco. Então eu quero selecionar meu retângulo arredondado e eu vou entrar aqui, e é como o retângulo grande, e então eu vou subir e clicar em Grupo. Agora ele vai levar os diferentes elementos que eu selecionei dentro da minha linha do tempo, e ele vai colocá-lo no lado de uma pasta. Agora eu posso clicar duas vezes nessa pasta, e eu posso mudar apenas para o que eu quiser. Então vamos dizer que este é o fundo e eu vou ter esse fundo aqui e agora eu posso então pegar a pequena coisa girada no lado do menu ou dentro da pasta, e eu poderia selecionar isso. E então ele vai girar tudo para que eu ainda possa ver todos os diferentes elementos dentro daqui. Mas pelo menos me permite reorganizar o fundo apenas arrastando e soltando esse elemento. E tem todas as coisas que estão naquele grupo. Então esses são os diferentes elementos. Se eu quisesse, também poderia vir aqui e levar outras coisas. Se eu quisesse adicioná-lo dentro de um grupo mais tarde, eu poderia pegar isso como esta forma de elipse. Se eu quisesse adicionar isso dentro do fundo, deixe-me apenas pegar isso, mouse no fundo e depois soltar. E agora que a ferramenta Elipse está dentro do grupo. Se eu quisesse, então, as coisas do grupo da ONU. Se eu decidir bem, isso não está funcionando. Vamos em frente e no grupo e ter os diferentes elementos mostrando por que pode selecionar essa camada de fundo vir até o topo e, em seguida, clique no grupo. E então nós vamos basicamente pegar essa pasta em, pegar todos os elementos nessa pasta e então un grupo um shopping, e agora você pode usá-lo dentro do nosso. Agora eles são apenas camadas separadas dentro de seu projeto tipo tumulto aqui. Então é assim que você tira elementos diferentes e você agrupa, hum, não colocá-los dentro de símbolos, mas como você agrupa e, em seguida, como você adiciona outras coisas ao grupo e, em seguida, como você desfaz o grupo em um momento posterior. 10. 10 como trabalhar com texto: Certo, agora vamos falar sobre como construir formas, como usar retângulos, retângulos arredondados e como usar seus lábios. Tinha um grupo que os organizava e coisas diferentes assim. Agora, o agrupamento na organização se aplica a todos os diferentes elementos que você pode usar no palco. Então, se você estiver usando texto, se você estiver usando vídeo, se você usar um áudio ou algo assim, tudo isso se aplicará, e será o mesmo. Agora vamos falar sobre o próximo, como usar texto ou então vamos falar sobre áudio e vídeo e coisas diferentes como essa. Então vamos em frente e primeiro nos concentrar no texto sobre como inserir texto, como usar texto sobre como atualizar texto. Então eu quero entrar na seção de elementos. Eu vou ir em frente e clicar na caixa Miss Drop e, em seguida, selecionar o texto, e isso irá adicionar um elemento de texto para o meu palco e realmente tudo a partir daqui. Tudo o que têm de fazer é começar a escrever. Então, vou inserir um texto. Este é um texto de exemplo, e ele irá automaticamente apenas pegar esse texto. Tudo o que você começar a digitar e vai esticá-lo até o comprimento do texto. Agora, se eu quiser, se eu entrar em um texto no bom hum, eu queria esticar uma certa área desse texto. Eu posso fazer isso também. Agora, a diferença entre apenas deixar que ele se encha automaticamente e levar isso com é agora o Eu venho aqui ou pegar o com e dimensioná-lo automaticamente para isso. Agora, quando eu entrar aqui e eu começar a digitá-lo automaticamente redimensionar uma vez que eu aperte, digite para esse tamanho lá para que o tamanho automático será assim que você começar a digitar. Isso é o com do tamanho real. Se você especificar o tamanho do retângulo antes de começar a digitar ou o quadrado, o que quer que seja e do seu texto, então ele só terá esse tamanho. E então pode, enquanto você está digitando, que pode parecer que levou mais tempo, mas assim que você entrar, então ele vai apenas basicamente pegar isso e levá-lo para a próxima linha também. Então, vou apagar isso por enquanto. Mas enquanto eu estava digitando. Há também outra coisa que surgiu. Se eu entrar aqui, nos livramos desse texano com uma nova mensagem aqui. Este é um exemplo de texto, e como eu estava digitando aqui, você vai notar. Logo abaixo deste texto há um pequeno lápis. Agora que o lápis, se eu clicar, vai abrir um pouco pop, uma pequena janela pop aberta e parece praticamente o mesmo tem o mesmo texto. Então você está se perguntando por que qual é a diferença aí? Por que não escrevo no palco? Bem, a diferença é que, com esta pequena janela pop-up, você pode realmente inserir tags HTML dentro daqui, e isso vai usar o ataque. Então, se eu quisesse marcar ou negrito, por exemplo, isto é, digamos que queríamos adicionar que em vez de tags fortes, eu vou seguir em frente e apenas digitar um imposto forte antes disso e, em seguida, digitar no final de ele. Vamos fechar a etiqueta forte e você vai notar agora no texto. É um pouco mais difícil de ver na tela, mas diz que está em parafuso agora. Pode vir aqui e vamos dar uma pausa. Então eu vou somar br slash e então eu vou terminar isso e você percebe que automaticamente até mesmo saber dentro desta pequena janela pop-up, não fez diferença. Mas em vez do texto real em si, a renderização trouxe que acrescentou uma quebra. E assim trouxe essa linha. Hum, que entre o qualquer coisa depois da quebra o BR, ele trouxe para a próxima linha. E então agora ele realmente tem que dentro aqui, você pode adicionar suas próprias tags HTML e construir seu próprio HD ou usar suas próprias tags HTML dentro do tipo de símbolo. Essa é uma característica enorme e agradável para ser capaz de fazer isso para que você possa estilizar I certos elementos. Se você só queria que certos textos fossem de certa cor. Ela queria que certos impostos fossem ousados. Você pode fazer isso dentro daqui Agora você também pode entrar selecionando o texto. Aqui, você pode entrar na tipografia, Inspetor, Inspetor, o inspetor de tipografia permite que você altere diferentes elementos sobre o texto. Então, se você queria vir aqui e ousado e apenas alguns elementos se você não está confortável com HTML. Hum e você está confortável em apenas mudar a janela do inspetor. Eles estão certos. A maioria das pessoas são Bem, você pode apenas selecionar os diferentes itens do texto, e você pode vir aqui e clicar em negrito itálico, sublinhar e fazer coisas diferentes. Mas o que você não pode dialogar é que você não pode adicionar na lista de pedidos para que você possa ter, tipo, um item de lista com marcadores como html normal. lista de pedidos para que você possa ter, tipo, Quando você faz isso, você é você l tag, um, ou Ally Tag ou qualquer coisa assim. Você não pode fazer isso ou essa etiqueta inteira que tínhamos um, um, você não poderia fazer isso dentro de, hum, hum, dentro de apenas o inspetor. Então é aí que o benefício de ser capaz de editar HTML entra em jogo porque você pode fazer isso em vez da pequena janela pop-up que você Kansteiner aliados dentro, selecionando imposto e chegando ao inspetor de tipografia. Mas você não pode adicionar outros impostos HTML. Eles são alguns dos outros elementos que você pode editar dentro da tipografia, Inspector é a família Thea Font. Então eu posso entrar aqui pode mudar a família de fontes, qualquer opção que eu selecionei aqui como nós aprendemos antes. Se você quisesse adicionar suas próprias fontes, você realmente teria que entrar no recurso, descer para o ícone de adição, descer para a fonte. E uma vez que você tenha adicionado as fontes, ele deve aparecer nesta janela aqui. Mas posso ajustar o tamanho que posso inserir em um tamanho específico dos fundos que eu queria. Eu também posso entrar aqui e selecionar um tamanho lá. Ou eu poderia apenas vir aqui e apenas selecionar este pequeno controle deslizante, e isso vai apenas apenas apenas arrastá-lo para cima e torná-lo maior como você arrasta para cima ou torná-lo menor como você arrasta para baixo. Então eu poderia vir aqui, fazer o seu itálico. Você também pode vir na cor. Aqui está o adicionar mais fontes onde ele pode entrar e me permite Teoh, isso é Ah, aperte Cancelar por agora, e nós vamos entrar aqui e clicar em Adicionar mais fundos e agora ele tem me adicionar meu próprio cliente. Posso ver as fontes do Google. Eu posso adicionar qualquer tipo de fonte do Google, ou eu posso clicar em CSS personalizado. Agora, há muitas fontes diferentes nos fundos do Google. Ou se há fontes nesse ano que a empresa usa que são fundos específicos, você provavelmente pode encontrar algo semelhante em fontes do Google e, em seguida, trazer isso para lá. E se eu clicar em vamos entrar aqui e este aqui. E se eu clicar em Adicionar Funt, então essa fonte foi adicionada. Por isso não me lembro onde acho que é este ou ouço este Martel. E então essa é a que eu acabei de adicionar. Agora está na minha seleção aqui. Se eu entrar no meu recurso está lá ele está bem ali. Minha fonte foi adicionada ao meu projeto, e alguns eu posso usá-lo como parte da seleção lá. É assim que você tinha fontes personalizadas lá. Ou você também pode entrar e sob a caixa suspensa em CSS personalizado, e isso permite que você anexe o CSS para quaisquer outras fontes. Essa é uma fonte muito específica que você quer usar na cama. HTML. Você pode fazer com que são embutidos html cabeça para inserir isso, e é assim que você adicionar seu próprio fundo personalizado. Agora você pode fazer os alinhamentos, você pode alternar os alinhamentos da esquerda alinhados para apenas o centro. Você também pode fazer esquerda. Você está certo, justificado ou bloquear justificado também. Se você quiser cronometrar o bloco de texto, você também pode fazer espaçamento entre letras. Digamos que você queria espaçamento entre as letras diferentes, e essas são as letras diferentes das palavras, não apenas as próprias palavras. Você também pode adicionar espaçamento de palavras, então haverá mais espaçamento entre as palavras, e você também pode adicionar a altura da linha. Quanta altura existe entre a linha acima dela em comparação com a linha abaixo dela? Você pode ajustar isso também. Agora isso vem a calhar. Se você estiver ajustando o tamanho do botão Thea, talvez seja necessário posicionar o rótulo de texto real do botão. Falaremos sobre isso assim que entrarmos em botões. Precisamos de ajustar isso e mudar isso com o botão também. E então, assim como fizemos com nosso painel Elementos, onde pudemos ajustar a sombra dos diferentes objetos que selecionamos, podemos adicionar uma sombra às nossas coisas às nossas letras também. Então eu posso fazer isso clicando neste pequeno ícone de círculo e arrastando isso para cima. Hum, eu também posso ajustar o borrão. Eu posso ajustar a cor se eu quisesse ter pouco contraste com a cor, hum, e e ajustar isso agora se eu não quiser que haja uma sombra e apenas levar isso de volta para zero todos esses elementos diferentes de volta para zero e essa sombra tem foi removido. Mas é assim que você adiciona texto, hum, e inserido dentro do seu projeto. Agora, com esse texto selecionado, você pode animar o texto. Você pode desvanecê-lo. Você pode movê-lo para cima se você quiser pontos de bala para voar em determinados momentos. Você pode fazer isso também e disse que todos os elementos que se aplicam a formas e aplicar a imagens também se aplicam ao texto. E então você só tem que fazer isso assim que entrarmos na seção de animação. Mas é assim que, por enquanto, você edita seu texto, como você altera alguns dos HTML, alguns dos diferentes elementos, como você adiciona suas próprias fontes personalizadas e tudo dentro do tumult, digite 11. 11 botões: Tudo bem. Em seguida, vamos falar sobre como trabalhar com botões dentro de um hype. Agora você pode trazer em suas próprias imagens, se você quiser, mas no ism usado como botões e adicionar em ações e coisas diferentes como essa. Mas o hype tem alguns botões padrão que têm estados de foco e estados inativos e tudo mais. Então, se você entrar nos elementos, painéis selecionar sobre os elementos que vêm para baixo para o botão. Isso irá adicionar o botão dentro de dentro de sua área de palco. Agora você pode ver que há exatamente como o texto. Há um lápis como no. Se eu selecionar esse ícone de lápis, eu poderia realmente formatar esse botão de qualquer maneira que eu queira o rótulo de texto dentro desse botão apenas clicando duas vezes sobre isso e eu posso adicionar em minhas próprias tags HTML, assim como fizemos com nosso texto. Mas se eu tiver este selecionado, você vai notar algo que é um pouco diferente do que vimos com o texto deles é temos 100 estados oprimidos oito e então temos um estado normal. Agora, com esses itens diferentes selecionados, eu posso mudar as cores e eu posso mudar os diferentes elementos sobre o que eu estou nesses diferentes estados, e isso então vai mostrar sempre que eu estiver pairando e sobre ou quando Estou pressionando. Agora, quando você está no celular, eu gosto se você está em um iPad ou se você está no Android ou algo assim. Ah, o pairar não vai aparecer. O pairar basicamente não será visível. Nesse ponto, apenas o pressionado irá realmente mostrar uma vez que você pressioná-lo. Então, é importante que você atualize os três estados diferentes para o pairar e a imprensa e os presentes, os usuários, algum tipo de indicação de que algo foi selecionado. Então eu vou entrar aqui sob o estado normal. Vou mudar esses dois elementos diferentes que já falamos. Um elemento do primeiro elemento foi apenas o inspetor de elementos, que nos permite mudar as cores das formas e as bordas e coisas diferentes como essa. Bem, isso é o mesmo com um botão é basicamente nós estamos trabalhando com a forma combinada ah, um retângulo e uma combinação de elementos de texto, e você pode mudar dentro do inspetor. Você pode alterar os elementos, inspetor, e você pode alterar as informações do inspetor de tipografia para atualizar e fazer o botão praticamente. Olha, você quer que ele pareça, então eu quero entrar na seção Elementos em primeiro lugar, quando é como a cor suspensa e isso vai em frente e apenas muda para uma cor verde e eu vou entrar assim como aprendemos com as suas formas. Na verdade, vou remover a fronteira. Não quero que a fronteira esteja lá. Eu quero levar a largura da borda apenas para cima. Leve para baixo para zero agora. Ele também poderia apenas tomar este estilo se eu quisesse ter um estilo, enquanto sólido duplo ou algo assim, eu poderia mudar isso para nenhum Ambas as maneiras funcionam se você quiser apenas apertar a seta para baixo para zero ou selecionar a caixa suspensa e selecionar Nenhum funciona de qualquer maneira. Então eu quero entrar na tipografia e eu gosto que eu gosto de brancos no fundo da cor . Então eu vou ir em frente e realmente mudar o fundo onde a tipografia para ser um rótulo branco . E assim com esse rótulo branco agora eu posso entrar realmente parece um pouco embaçado para a minha visão. Mas, hum vamos mantê-lo assim por enquanto. Mas se eu clicar no estado pairar, você notará que qualquer coisa que eu acabei de mudar no estado normal também passa para o pairar e para a data de imprensa. O que eu preciso fazer é que eles precisam diferenciar, diferenciar o que vai ser diferente com o mesmo estado que vai ser diferente com o estado de imprensa. Então, com os estados hover selecionados, eu vou voltar para o meu painel de elementos. Eu realmente mudaria a cor aqui. Só vou torná-lo um pouco mais escuro. E assim, quando ele está pairando, você pode ver que é um pouco mais escuro, e quando pressionado, eu realmente vou fazer o mesmo ou realmente ficar um pouco mais escuro do que isso. Então, quando você entra na seção pressionada, mudou na cor ou selecione a cor e, em seguida, apenas torná-lo ainda mais escuro do que o que estava dentro do pairar. Agora, se eu voltar e verificar meu pairar, você pode ver que o estado de foco ainda está lá é a mesma cor que eu acabei de selecionar sobre. Meu estado normal é da mesma cor que eu tinha antes. Então, novamente, qualquer coisa que você mudar em vez do estado normal irá apenas em cascata para o pairado na imprensa apenas para o caso. Mas se você queria ter um item diferente pairado, impressionado enquanto você pode ir para o pairado, você pode mudar, ir para a imprensa e alterar os elementos de diferença nos elementos, inspetor. Ou você pode entrar e mudar os diferentes elementos dentro da tipografia. E se você quiser que o texto mude, digamos que quando ele estiver pairado, eu quero que o texto seja um pouco negrito. Então eu vou entrar no pairinho e eu vou entrar e estilizar o parafuso. E então agora passar o mouse o texto fica um pouco em negrito. Mas se eu voltar aqui, o texto não será ousado. Então é basicamente me permite diferenciar o que eu quiser lá. Agora, se eu entrar aqui e inserir, uh, uh, se eu quiser inserir um pouco mais de texto, eu posso vir aqui e mudar o rótulo e depois ter o texto além. Posso até mudar os cheques quando pairar. Hum, o que você queria fazer lá. Então é assim que você entrar e adicionar um botão e disse, Alterar os diferentes elementos no botão. Mas também posso fazer a mesma coisa com o meu botão texturizado. A única diferença com o meu botão de textura é que eu posso entrar aqui e em vez de uma cor normal . Na verdade, é um Grady em cores. E agora eu posso mudar os diferentes elementos. Ah, o Grady INTs dentro do meu botão aqui. Então, quando uma mudança a primeira cor para tipo de um verde mais claro segunda cor para um verde ligeiramente mais escuro. E agora eu vou mudar também o 10 a tipografia para, ah, rótulo branco. E então vamos nos livrar da fronteira. Nós temos uma borda lá, então quando você muda a largura para zero e lá vamos nós. Então, agora eu posso ir para o estado flutuante e vamos pegar os dois elementos do Harbour State no isqueiro. O que? Eu só vou levar isso um pouco mais escuro e mais escuro. Um. Só vou fazer um pouco mais sombrio do que isso. E lá vamos nós. Então, agora, se eu vir aqui, meu pairar e meu pressionado, há uma ligeira diferença. Eu provavelmente preciso torná-lo um pouco mais drástico, mas há uma ligeira diferença com o meu pairar e a minha imprensa lá. Agora vamos dizer que eu queria uma forma muito específica ou menos. Eu queria uma imagem e eu queria que disse ter diferentes estados pairar e imprensa também. Bem, com um objeto selecionado. Ainda não falamos sobre imagens, mas com um botão, é objeto selecionado. Eu posso realmente entrar aqui, e eu posso vir para o menu de edição e ir para baixo para mostrar controles de botão. Quando eu clico neste show controles botão, ele vai pop aberto com o meu normal, meu pairar e meu estado de imprensa com esta forma. Então não é exatamente um botão, mas é. Ele ainda tem um estado pairado e oprime que eu posso habilitar, e então ele pode vir aqui e mudar os diferentes elementos sobre a forma para habilitar o mouse e habilitar a imprensa em qualquer forma que eu quiser, ou qualquer imagem que Eu também quero. Eu também posso entrar aqui, e se eu não estou vendo os elementos HTML eu posso entrar na edição e eu posso clicar em, hum nele elementos HTML interno e aquela caixa papa que vimos antes com os rótulos eo que o texto agora aparece no textura para que eu possa realmente vir aqui e na minha forma, eu posso inserir texto nessa forma. Então isso significa que eu posso basicamente adicionar em tags HTML, e eu posso adicionar em outros elementos. Eu posso até fazer um quadro de olho ou qualquer tipo de código de incorporação ou qualquer coisa assim dentro deste HTML, e você pode fazer isso com qualquer objeto no palco. Você pode editar o masculino HC dentro de sua e novamente que é indo para as edições e, em seguida indo para qualquer ah, mostrar controles de botão ou ocultar controles de botão ou indo para os elementos de edição em nosso HTML e permite que você obtenha esses dois com os quais já trabalhamos com o botão e com o texto. Então é assim que você insere o botão normal e o botão texturizado e como você pega praticamente qualquer forma e converte em um botão dentro de um tipo tumulto 12. 12 imagens: Muito bem, já falámos sobre formas. Nós falamos sobre ser capaz de inserir botões e texto e tudo no lado do tipo tumulto. Mas nós não falamos sobre realmente teve um trabalho com imagens diferentes que você construiu fora, como no comprador de fotos, Adobe Illustrator ou algo assim. Então, neste, vamos falar sobre isso, como trazer uma imagem. E isso está na mesma seção de elementos com que temos trabalhado. Vamos entrar nos elementos, vamos selecionar a caixa suspensa, e então eu vou entrar e selecionar a imagem aqui. Agora tudo o que eles têm que fazer é procurar por essa imagem. Posso entrar aqui e na minha área de trabalho. Tenho uma miniatura aqui. Eu só vou selecionar abrir. E você pode ver que isso foi trazido para a minha área de palco. Agora, com isso selecionado, eu posso entrar aqui e simplesmente deslizá-lo para onde eu queria estar. Isto é um J. Peg. Posso trazer presentes para o John. Eu posso trazer arquivos PNG diferentes arquivos de imagem, e eu quero. Agora, a partir daqui, eu posso entrar e mudar os diferentes elementos que você vai notar no fundo da imagem que está realmente definido. É como uma forma. Mas em vez de o estilo de preenchimento ser como uma cor ou ingredientes, na verdade é apenas uma imagem. E então temos uma opção diferente para escalar. Para ajustar repetições, repita verticalmente ou repita horizontalmente. Se eu quisesse ter um padrão ou algum tipo de fundo como você normalmente faz dentro, HTML era apenas uma espécie de escala para caber. Então, o que realmente se encaixa dentro da minha área de palco? E assim e então não está repetindo e o que esse objeto selecionado se eu quisesse trocá-lo qualquer momento, eu posso clicar em Escolher, e então eu posso entrar aqui e digamos, Digamos que eu não tenha atualizado J Peg ou PNG atualizado. Posso entrar lá, selecionar esse objeto e trocá-lo também. Eu também posso ajustar a opacidade das bordas se eu descer para opacidade, ajustar a sombra, o borrão e tudo mais. A mesma coisa que você fez com a diferença de formas que diz os mesmos elementos lá. Agora a outra coisa boa é que eu poderia trabalhar com o SPG. Neve. SPG é que se você é conhecido na diferença entre J Pegs, P e G é quando você pega um J peg e PNG e você esticá-lo para fora, você vai realmente obter algum pixel ization. Se a imagem foi feita muito pequena e você começar a esticá-la para fora, você vai ter um pouco de pixel ization. Vai parecer embaçado. Vai parecer distorcido ou algo assim. Agora, com SPG es, você pode realmente pegar isso e torná-lo tão grande quanto você quiser ou um pequeno quanto você quiser. E você não vai ter nenhum tipo de distorção. Portanto, se você estiver trabalhando com o Illustrator, você pode salvá-lo. Assim como SPG es. Se você está trabalhando com loja de fotos, é preciso uma abordagem um pouco diferente ou um pouco diferente para trabalhar com S. P. G. Mas eu vou entrar aqui e vou clicar no painel Elementos, entrar na imagem e entrar na forma. SPG é o arquivo que eu tenho na minha área de trabalho, e eu vou ir em frente e clicar em abrir. Agora aqui está a minha forma, e o que eu posso fazer com o SPG é que eu poderia fazer essa forma realmente grande e você pode ver que não há qualquer pixel ization. E essa é a coisa boa de salvar seus arquivos. Se você está trabalhando com o Illustrator altamente recomendando salvar seus S P G se você vai animar essas coisas quantidade inanimada, ele leva um pouco mais de tamanho de arquivo. Então, se você está se você não vai estar animando cultivá-los, torná-los menores, qualquer coisa assim, então apenas salvar a bagunça P e G ou J packs vai ser muito bom lá. Mas tenha em mente que qualquer coisa que você faz qualquer tipo de J. Peg ou A P e G que você deseja tomar usam as mesmas práticas que o desenvolvimento normal da Web, então você quer ter certeza de que você salvá-los para a Web. Você diz, otimizá-los o máximo possível. E então há Este tamanho de arquivo é muito menor porque qualquer coisa, qualquer imagem como essa se é uma imagem realmente grande e você trazê-lo e definir o tipo de símbolo bem, isso vai tornar o seu projeto alto ainda muito maior. Então você quer torná-lo pequeno tamanho de arquivo o mais pequeno possível, e você faz isso normalmente dentro do Photoshop ou Illustrator ou algo assim, hum e então trazê-lo para dentro do tipo tumult. E então se eu entrar em recurso é eu então tenho o meu Você pode ver bem aqui eu tenho meu spg lá. Tenho o meu J. Peg. então eu Eentão eutambém tenho a opção de fazer referência ou um arquivo retina de referência também. Se eu quisesse ter uma tela de retina. Então, se eu estiver trabalhando no iPad ou iPhone e eu quiser ter uma exibição um pouco mais nítida, eu posso fazer isso também. Mas também tenha em mente que isso aumenta o tamanho do seu arquivo para todo o seu projeto Web lá. Mas se eu entrar aqui e eu não tenho uma retina ainda e eu queria adicionar uma retina bem, com esta miniatura selecionada, eu posso entrar na retina às vezes também, também, e eu posso entrar e adicionar arquivo fonte. E é aí que eu adicionaria a fonte para este polegar. Agora, Agora, esta miniatura já grande o Eu não tenho certeza o que é mesmo chamado polegar agora, honestamente , hum, mas já é grande para começar, então eu realmente não preciso de uma retina. Mas se eu quisesse ter elementos diferentes quando estiver em uma tela de retina. Ele automaticamente sabe puxar isso e alguns. Então eu estou apenas adicionando a fonte lá. E lá vamos nós. Agora que tem parece mais nítido, mais limpo em um iPhone ou iPad ou resolução muito grande. Ah, computador. Então lá vai você. É assim que você insere imagens, como você responde SPG e como você trocá-lo. Você também pode entrar aqui e selecionar no objeto que você pode selecionar. Isto foi, diz remover. Quando a referência não remover mais o objeto para ajudar a acelerar seu código, ele vai pré-carregar essa imagem. E assim, antes da interação, nossa animação ainda começa a ser reproduzida até pré-carregada e pode levar um pouco mais de carga no dedo do pé . , E,em seguida, ele também otimizado automaticamente ao exportar. Então, se você quiser otimizar, mas se você achar que o vento é otimizado, ele irá. Na verdade, não gostas da distorção que estás a ter com ela. Você pode simplesmente desmarcar isso aqui e então a qualquer momento você pode substituir uma imagem sem afetar nada que eu fiz na minha animação? Então vamos dizer que eu usei isso e que eu tenha animado tudo próprio lugar, e eu estou tipo, oh droga! Preciso atualizar essa imagem sem afetar essa imagem lá. Eu poderia apenas vir aqui e substituir ah, fazer upload de uma nova imagem, e então ele realmente vai atualizar isso Bem, eu fiz isso na forma errada. Eu fiz isso na forma SPG em vez disso. Quando um seleto aqui, clique em substituir Go Thumbnail aqui e, em seguida, você pode vê-lo piscou por um segundo porque atualizado a imagem onde quer que ele foi usado em todo o projeto. E isso é tudo que eu tinha que fazer. Estava indo lá, substituí-lo lá. Hum, agora dentro da minha outra coisa referência dentro do meu recurso é, é que eu também posso vir aqui e ter filtrar isso se eu quisesse procurar apenas imagens. Se eu quisesse procurar apenas vídeos, arquivos de áudio, funções, fontes, qualquer coisa assim, eu poderia fazer isso apenas vindo aqui ou apenas se meu recurso se tornar realmente grande, eu poderia apenas começar a digitar o Minch, encontrar a imagem e depois substituí-la a partir daí. Então é assim que você trabalha com imagens. Arquivos SPG presentes de P e G, J. Paige ou qualquer coisa assim dentro dele. Tipo pequeno 13. 13 áudio: Trabalhamos com imagens. Trabalhamos com as formas que trabalhamos com texto. Agora vamos para o arquivo de áudio e, em seguida, vamos falar sobre vídeo. Então, a fim de responder áudio dentro de seu projeto de tipo de templo, você apenas entra nos elementos. PanAm descer para áudio, e então, com esse áudio selecionado, eu posso então encontrar o áudio na minha área de trabalho, que eu tenho um arquivo de amostra aqui Azaz audio dot mp três. Eu vou clicar em abrir e disse que automaticamente caracteriza um botão para mim. Agora que o botão de áudio, então, converte esse áudio em ou não converte. Mas, para reproduzir o áudio, se você quiser ter certeza de que ele é reproduzido em todos os dispositivos, você pode ver que aqui está colocado. Dentro do meu recurso está Folder, uma pasta de áudio que tem uma referência ao ponto de áudio MP três. Bem, há algumas outras coisas novamente para, a fim de jogar em vários dispositivos diferentes que eu provavelmente gostaria de converter ou disparar ou converter o arquivo de áudio em um ponto org ou ponto whv longe arquivo. E assim você pode fazer como o Adobe Edge ou o Adobe Audition lamentável. E para converter isso sobre você também pode dio audácia e exportar isso para os diferentes elementos para o arquivo Ogi ou o arquivo caminho. E uma vez que você fez isso, a fim , você sabe, não perturbar o projeto porque agora eu não tenho que ter esses arquivos. Agora, eu posso realmente trabalhar com aqueles que podem, hum, inseri-los e usar o áudio sempre que eu quiser, a fim de fazer isso antes, eu gostaria de fazer isso antes de publicar isso para tê-lo, certifique-se de que funciona em todos os dispositivos. Bem, eu gostaria de ter certeza de que ele entrar aqui e no meu recurso é selecionar a barra de áudio o g e, em seguida, entrar na fonte do anúncio e, em seguida, ir encontrar esse arquivo Ogi dessa forma. Ele sabe que é o mesmo arquivo de áudio, mas é a versão Ogi ou é o mesmo audiófilo em sua versão w, a versão maneira. Mas ainda não tenho de os ter para o desenvolvimento. Eu só quero ter certeza que eu recebo isso antes de publicar a quantidade. Agora, uma vez que o áudio está realmente no lugar, ele automaticamente cria um botão porque o áudio precisa de algo para ser capaz de acionar. Então eu vou entrar aqui e entrar em minhas ações. Ainda não conversamos sobre isso, mas agora é teatral em está pronto para tocar som. E esse som vai ser o arquivo de áudio. E eu também posso este é um lugar onde eu posso ligar meu MP três versão minha versão O G. A, ou minha versão onda se eu quisesse. Mesmo lugar. E se eu não fizer isso, você verá esses avisos que dizem OK, Firefox 3.64 ponto 5.0 e acima de fontes de áudio nog ou onda necessárias para reprodução. Então, já que esses avisos são, não posso nem ter um nog ou arquivar minha Disney nem um. Então, se eu tiver uma maneira arquivada, então eu poderia apenas ligar isso. E então esse aviso provavelmente desaparecerá depois disso. Nesse ponto, se eu quisesse que isso tocasse automaticamente, eu poderia entrar aqui e na minha cena, Inspetor, qual é a cena? A cena inicial. Quando eu entrar nesta página, por que pode entrar em carga cena e selecionar a caixa suspensa e, em seguida, descer para reproduzir som. E se eu selecionar o nesta caixa suspensa, qual o som que eu quero reproduzir, selecione o arquivo de áudio lá. Em seguida, ele irá selecionar o It vai começar a tocar o som sem a pessoa realmente ter um gatilho. Aquele botão. Se eu tiver uma imagem, digamos, deixe-me ir em frente e inserir minha imagem aqui. Eu só vou trazer essa imagem de volta a imagem aleatória e eu entro aqui e inserir 12 imagens de arquivo de disco. A inserir essa imagem aqui e então eu posso entrar nas ações, descer para o mouse, clique, clique, selecione a caixa suspensa para reproduzir som e, em seguida, selecione isso e dizer, OK, há o arquivo de áudio. Vai tocar esse som. Ah, quando a pessoa clica na imagem, então não é especificamente que você não pode reproduzir, basta ter áudio reproduzido. É só que você tem que especificar quando o áudio está sendo reproduzido. No entanto, ainda temos um aviso com carga vista. Você vai notar a caixa suspensa. Há mais um aviso que é ah, não específico para ter o formato Ogi ou formato ausente, diz aqui. Android 2.3 e certos IOS um, elementos que realmente praticamente todos os elementos IOS não pode reproduzir áudio automaticamente em dispositivos móveis a menos que seja, ah, tela inicial Web app. Então, se é uma web stream home up, ele será automaticamente reproduzido. No entanto, necessidades IOS ou até mesmo algumas versões do Android precisam que o usuário inicie o som ou inicie algo, e então o som reclama. Depois disso, se isso é ah botão começar onde você normalmente verá em diferentes jogos ou interações. Ah, botão começar quando eles clicam em começar Depois disso, então você está OK para iniciar sons diferentes e usar elementos diferentes. É só que precisa haver algum tipo de entrada do usuário, a fim de permitir que você faça isso. E eu acho que é uma restrição Napoli que eles querem três usuário para não apenas ter este este estes todos esses arquivos de áudio está jogando aleatoriamente. Eles querem que o usuário se envolva no arquivo de áudio a mesma coisa com vídeo que você não pode ter em dispositivos IOS vídeo apenas reproduzindo automaticamente seu usuário precisa se envolver com ele, e eles precisam pressionar o botão de reprodução e para que ele comece a jogar. Então é assim que você realmente entra aqui e insere áudio e como você usa áudio em diferentes gatilhos, seja a carga da cena para começar a reproduzir automaticamente. E novamente, eu provavelmente não gostaria de fazer isso no IOS, mas é assim que você gostaria de fazer isso se você está apenas segmentando desktops ou algo assim , mas também como você adiciona no áudio para começar a tocar em Ah Imagem de Preston ou qualquer outra coisa assim. É assim que se trabalha com áudio. 14. 14 vídeos: Em seguida, vamos falar sobre como inserir vídeo dentro do seu projeto. Então eu vou até a seção de elementos, descer para o vídeo, e quando eu descer para o vídeo, eu tenho que, hum, hum, encontrar o meu vídeo, que agora eu tenho esse vídeo do coelho assassino do Monty Python assim como esta amostra vai clicar em abrir aqui e isso vai inserir o vídeo dentro do meu projeto. Agora, na parte inferior, você vai notar que há uma faixa de vídeo. Se eu entrar em minhas propriedades, eu tenho que ter certeza de que ele está selecionado. Eu vou esticar esta seção de propriedades e você percebe que eu posso realmente ver os diferentes elementos do vídeo aqui. Agora, isso é bom, porque então eu posso acionar ou inserir elementos da linha do tempo toe acontecer em certo ponto para o vídeo. Mas por enquanto, agora, por padrão, eu não tenho. Ainda não falamos sobre esses gatilhos, então não vou me preocupar com isso. Mas isso é apenas algo para ter em mente. Agora, com este painel Elementos selecionado, eu quero vir aqui e na verdade vocês notarão dois elementos diferentes com este painel de elementos selecionado. A primeira coisa é que o vídeo em si me dá um pequeno aviso. Aqui, A diz móvel safari auto. Auto reproduz ignorado, então não reproduz automaticamente. Auto reproduz ignorado, E então ele me diz as fontes de vídeo Fox em chamas necessárias para reprodução. Então realmente precisa deste arquivo Oh, gv ou este w este arquivo Web m. Então, assim como o áudio, eu realmente preciso ter certeza de que têm os três formatos diferentes para os diferentes navegadores, a fim de ter certeza de que eu tomar meu projeto funciona em todos os navegadores. Eu não me certifiquei que esses formatos estão corretos são formatados no formato correto para que eu possa trabalhar com dentro do tipo tumult. Agora, o codificador Adobe Media permite que você codifique vídeo para que eu possa pegar isso. E antes disso, eu tenho que ir para Adobe media encoder e, em seguida, convertido para os formatos certos, a fim de usá-lo dentro daqui. E então eu tenho um par de diferença que controla aqui em baixo. Eu tenho este auto play, mas novamente IOS vai ignorar isso. E então vamos mostrar um botões de jogo. Eles realmente têm que tocar Play se eu quiser mostrar os controles ou não. Se eu quiser que o usuário seja capaz de controlá-lo. Eu posso fazer isso. Eu queria ser silenciado por padrão. Seiken basta selecionar silenciado. E se eu quisesse fazer loop uma vez que ele chega ao final do vídeo, ele volta para o início do vídeo e começa de novo? Posso fazer isso também. Então, se eu quisesse que isso fosse, ah, um vídeo em loop e eu quisesse ser silenciado em segundo plano, vamos apenas pegar esse vídeo, esticá-lo para toda a área do palco aqui e agora. Eu poderia ter esse loop, e ele vai ter tipo de seu vídeo animado indo para o fundo como você viu em alguns banners da Web lá. Essa é uma maneira de fazer isso lá. Mas eu vou voltar. Traga isso de volta para os controles aqui. E uma coisa que você vai notar aqui é se eu visualizar isso em diferentes dispositivos, é que depende os controles dependem do dispositivo ou do navegador que você está realmente usando. Então, , o dispositivo para Então, se você estiver usando um iPad, ele usará os controles padrão que você vê em um iPad e iPhone. A mesma coisa com o mandroid que vai usar os controles padrão do jogador para que a mesma coisa foi longe. Ele vai usar os controles padrão com isso. Então, se eu entrar aqui, clique em jogar aqui, você vai notar que há os controles padrão e eu tenho que voltar 30 segundos. Eu também tenho que ir para tela cheia para que ele possa ir para tela cheia. E eu também posso ter certeza de que este ajuste para auto play também. Então é assim que eu entro aqui e ajusto diferentes elementos no meu vídeo selecionando os diferentes objetos aqui e alguns eu posso entrar e alguns têm reprodução automática. Posso controlá-lo, mostrar os controles. Posso ter um mudo. Eu posso ter um loop em coisas diferentes, mas isso é o básico de usar vídeo dentro dele para multi-pichon também vêm aqui, hum, inimigo na opacidade. Eu também posso animar Ah, o vídeo que eu posso ter uma mosca em se eu quisesse Teoh animá-lo em animado fora. Então, um monte de elementos diferentes, os mesmos elementos que você usa com formas normais e diferenças. arquivos de texto e tudo assim ainda funcionará no lado de arquivos de vídeo e áudio, enquanto não áudio, mas botões que têm arquivos de áudio anexados a ele. Então é assim que você trabalha com vídeo dentro de seu tipo Immel. 15. 15 widgets HTML: a última coisa elemento que vamos estar falando dentro do tipo tumult é o widget html de ervas incorporar. Então eu vou entrar na seção Elementos. Eu quero ir para baixo para widget HTML. O que isso vai fazer você vai notar no rótulo aqui, diz widget html em Humo Wedge A é usado para exibir HTML incorporado em sua cena ou incorporado no meu quadro de um objeto Web diferente tão bonito que nos dá a capacidade de adicionar o que quer que código que queremos. Então, acima do nos elementos, Inspetor, temos este widget HTML. Eu posso clicar neste snippet de código de edição, e se eu clicar em adicionar um snippet de código agora, isso deve ser familiar. Isto é o que estamos trabalhando antes, onde podemos realmente digitar o código que quisermos. Código Html Now. Normalmente, estávamos fazendo apenas arquivos de texto diferentes ou elementos de texto diferentes, mas eu poderia realmente colocar em uma de suas tags que uma vez dentro aqui apenas manter em mente. É apenas algo que, , seja qual for o código com o qual você está trabalhando, você só tem que ter certeza se você está fazendo referência a objetos diferentes, você faz referência a ele no lugar certo e tudo mais. Então, podemos editar o HTML bem dentro de lá, ou podemos realmente entrar aqui e dentro dos elementos. Inspetor enfraquecer. Apenas um especificar u R L que queremos usar que em incorporar e eu quadro código dentro de lá, modo que é praticamente isso com o widget HTML é que você pode inserir outro HTML. Você pode vincular a sites ou ah, trazendo outros elementos como esse, ou você pode responder em seu próprio HTML. Adicione em sua própria moldura de olho ou qualquer coisa assim dentro de ah to mull type. Agora, a única coisa boa sobre isso é, se você está apenas especificado em uma determinada área para ser esse HTML como um Google Maps ou algo assim, você pode então animar nesses mapas em determinados momentos, e você pode ter esses apenas em certas páginas e tudo. Mas é assim que você usa o widget HTML. Dentro do tumulto, digite 16. 16 símbolos: Tudo bem. Então a próxima coisa de que vamos falar são símbolos dentro dele. Tipo pequeno. Agora, símbolos são muito bom recurso, porque permite que você tenha animações aninhadas. Se você quiser ter certos elementos. Digamos que você está usando sua linha do tempo para saltar para pontos diferentes. Mas você queria ter elementos que são independentes de sua linha do tempo e ainda podem animar continuamente mesmo se você parou sua linha do tempo. Basicamente ligado. Vimos isso logo no começo quando eu estava mostrando os diferentes exemplos do mapa e você viu o mapa apenas tipo de ficar em um lugar. Mas então você viu os diferentes elementos, como o carrossel ou o trem que ficava circulando várias vezes. Eram todas linhas do tempo aninhadas dentro da animação de propaganda aqui. Então agora eu vou gostar de pensar, manter as coisas básicas. Não vou construir algo muito complexo aqui. E então você está se perguntando, OK, como eu cheguei a esse ponto para começar? Eu só gosto de manter as coisas com diferentes formas e elementos diferentes realmente básicos. Então nós aprendemos o conceito central, e então em outros tutoriais ou outros cursos ou algo assim depois do básico, depois que você sabe como fazer apenas com formas normais, então nós podemos entrar em coisas mais complexas, como, Ok, como eu construo essa coisa específica sabendo que o básico que eu já sei, como ninguém olhava, em seguida, tomar isso e, em seguida, implementar em diferentes áreas e outras coisas para que nós vamos entrar nisso é apenas novamente. Meu estilo é apenas manter o básico, manter as formas básicas. Então você não está se perguntando como chegou a um certo ponto ou qualquer coisa assim que eu configurou um arquivo de amostra ou algo assim? Certo, então vamos entrar aqui e clicar no novo símbolo. Você tem duas opções diferentes. Você pode simplesmente clicar em criar um símbolo completamente novo, ou você pode criar uma forma que vai se tornar um símbolo. Então eu vou entrar em um retângulo, e eu só vou com isso diz, retângulo selecionado, indo para selecionar esse símbolo em, diz novo símbolo da seleção. Então, se eu tinha vários itens que estão indo para ser animado dentro desse símbolo, eu posso querer selecionar todos esses itens e, em seguida, entrar em novo símbolo da seleção. Bem, eu vou clicar no novo símbolo da seleção aqui, e realmente não mudou muito. Você notará em vez de retângulo para baixo na linha do tempo. Ele agora diz símbolo, se livrar do meu widget HTML lá. Mas só diz símbolo e posso dar o nome que quiser. No entanto, quando você está querendo e nós ainda estamos trabalhando com a linha do tempo principal na área principal , não em qualquer símbolo qualquer. Se eu quisesse entrar nesse símbolo e trabalhar com essa linha do tempo, também posso fazer isso. Mas para conseguir esse conceito, vou começar por animar e ainda não falamos sobre animação, mas vamos fazer um inimigo rápido qualquer um para entrar aqui e apenas animar. Então eu vou colocar isso em uma posição atual, e então eu vou para animates. Eu cliquei neste botão vermelho de gravação. Isso vai gravar qualquer movimento que eu fiz. Agora eu mexi este objeto apenas para registrar que este é o estado inicial do botão ou desculpe do retângulo, e eu vou mover meu cursor ou esta linha do tempo para um segundo, e então eu posso esticar isso sobre Teoh animar para o lado direito para que você vai notar uma coisa e novamente vamos entrar em profundidade com a animação. Mas você vai notar esta linha azul que é criada que é theano mation na linha do tempo principal . Não estamos trabalhando com nenhum símbolo. Agora, se eu quisesse ir para este símbolo e animar algo dentro desse símbolo que é independente da linha do tempo que eu acabei de criar enquanto eu poderia entrar deixe-me apenas ter certeza que eu vou bater Stop record primeiro de tudo, mas eu vou entrar neste símbolo para entrar no símbolo que você tem que clicar duas vezes sobre o objeto que o símbolo em si. Então eu vou selecionar este símbolo e você vai notar. Agora eu tenho essa linha roxa que aparece na minha linha do tempo. Isso realmente me dá algumas migalhas de pão para me dizer onde estou porque você pode ter um símbolo dentro de um símbolo, e você pode nos levar fundo. É que você quer basicamente, e isso novamente permite que você apenas manter o controle sobre agora porque eu entrei neste símbolo com o retângulo, hum, ele não tem nada que eu acabei de fazer na linha do tempo principal porque este é do que acabamos de fazer no horário do Maine. Como agora eu posso criar minhas próprias animações neste ponto que vai continuamente loop uma e outra vez mesmo que a linha do tempo principal pára. Então eu vou entrar aqui, clicar no botão de gravação e alguém para mover. Na verdade, vou me esticar aqui. Nós só pegamos essa rotação e eu vou para a minha propriedade de elementos, e eu vou e então vou para a minha rotação. Pensa na minha acção de rotação. Minha rotação está nas minhas métricas, Inspetor. Eu vou entrar na minha rotação, e eu só vou subir essa rotação para ser algo como, digamos ah 3 60 Bem, isso é fazer isso realmente, uh, para 73. Parece que estamos no ar e chegar um pouco mais perto do 72. Provavelmente para 70. Lá vamos nós. Eu só queria mantê-lo nas mesmas caixas de limite que tínhamos antes. E, hum, agora , na verdade, nós precisamos começar este fora do zero. Desculpe-se. Preciso mudar minha linha do tempo. Lembre-se, vamos falar sobre isso, e assim que entrarmos na seção de animação onde você precisa mover seu dedo do pé um segundo ou o tempo que quiser. E agora podemos ir em frente e resolver isso uma vez completamente. E vamos fazer um total de 360 lá, lá vamos nós. Então, basicamente, apenas virou uma vez, todo o caminho para 360 graus e alguns Isso é tudo. Então, mas precisamos fazer mais uma coisa é que precisamos fazer loop no loop de animação, a animação que realmente precisamos adicionar um gatilho. E apenas clicando no ícone de adição dentro do diamante, podemos então entrar em ação e então podemos ir para Vamos descer para iniciar a linha do tempo e vamos para a linha do tempo principal. Então, por dentro. E ainda não falamos sobre linhas temporais múltiplas linhas temporais. Mas dentro de cada linha de tempo média ou mesmo símbolo, você tem diferentes linhas de tempo. Você pode vir aqui e ver. Agora mesmo. Eu só tenho uma linha do tempo principal, e essa linha do tempo principal vai ser executada apenas uma vez por padrão. Mas o que eu quero fazer é que eu quero um loop de volta para correr novamente. Então, mas tudo o que estou a fazer aqui está dentro deste símbolo. Então eu estou fazendo loop apenas a animação, que é a rotação aqui e para que a linha do tempo principal não deve ser afetada forma alguma. Ok, então uma coisa que nós não conseguimos fazer até agora, se eu odeio visualização é que a linha do tempo aninhada não joga automaticamente bem, como faço para começar o plano? Então, uma coisa que eu preciso fazer é na verdade na minha linha do tempo principal ou na minha camada principal em si. Preciso vir aqui e selecionar esse símbolo. E então eu preciso descer para as propriedades e sob ações de símbolos. Eu preciso realmente clicar neste ícone mais e, em seguida, abre com esta ação símbolo. E, em seguida, seleciono a caixa suspensa para iniciar a linha do tempo. Bem, ele vai especificar em qual linha do tempo, mas eu vou ter várias linhas do tempo aqui. E quando o nome é o que está lá apenas por padrão é a linha do tempo principal. Então eu vou ter certeza de que isso é selecionado, e é basicamente isso porque eu estou falando com a linha do tempo do símbolo. Não estou falando do cronograma geral do projeto. Eu só estou falando com a linha do tempo do símbolo, então eu quero ir um hit e hit preview agora e você vai notar que a linha do tempo, a linha do tempo principal que nós paramos porque nós não estamos looping aquele, mas a rotação, uma palavra em loop mais e mais e mais e mais. Ele vai continuar a animar, e dessa forma nós temos basicamente a linha do tempo principal. Parar e independente dessa linha do tempo é outra linha do tempo que continua a repetir repetidamente e de novo e de novo e de novo assim. Então essa é a beleza dos símbolos. Agora, uma outra diferença, símbolos persistentes que permitem que você pegue esse símbolo e praticamente ter um cruzado qualquer nova cena que você realmente criar. Vamos falar sobre isso no próximo vídeo. 17. 17 símbolos persistentes: no último vídeo, falamos sobre símbolos. Neste vídeo, vamos falar de símbolos persistentes. Agora. A diferença é que é a mesma coisa. Você ainda pode ter animações funcionais. Você pode ter cronogramas independentes um do outro. E assim, mesmo que sua linha do tempo esteja sendo, sua própria linha do tempo está sendo executada na linha entretanto e você tem outra linha do tempo que está sendo looped repetidamente. Oh, isso é o mesmo. A única diferença com símbolos persistentes é o fato de que ele atravessa todas as cenas. Então, se eu entrar aqui e na minha seção de cena, vamos em frente e adicionar uma nova cena. Ao clicar neste ícone de adição, ele vai adicionar uma cena completamente nova. Eu vou voltar a ver um, e vamos dizer que eu tenho um passado que vai ser semelhante, gramado todos os objetos de diferença. Podemos pensar que OK pode vir aqui, selecionar o criar um cabelo retângulo e apenas esticar esse item. E agora isso vai ser o meu passado. Bem, eu vou entrar no painel de elementos, mudar isso para ler, e lá vamos nós. Agora. Se eu quisesse que isso passasse por todas as cenas diferentes. Bem, eu teria que copiar isso e colar em todas as cenas que poderiam se tornar um pesadelo . E você teria que gastar muito tempo nisso. Hum, se você quisesse basicamente apenas de uma só vez, ter que em todas as suas diferentes cenas vai fazer um símbolo persistente. Então eu vou entrar aqui e sob o símbolo. Eu vou clicar, fazer novo símbolo persistente da seleção, que eu tenho o retângulo selecionado. E está indo Teoh, me dê a opção de ver adicionado ao atual visto ou adicionado dedo do pé todas as cenas. Bem, vamos em frente e adicioná-lo a todas as cenas e você vai notar automaticamente e visto para ele agora tem aquele símbolo persistente lá. Eu não tenho que criar. Eu não tenho que fazer nada. Então, se eu criar uma nova cena, ele vai ter aquele símbolo persistente lá novamente. E essa é a coisa boa é que eu ainda posso vir aqui para aquela linha do tempo ou aquele símbolo, criar em qualquer animação que eu quiser. Ele pode ter um fundo animado tendo diferentes objetos passando como vimos naquele mapa. Você tem a venda de cuidados. Você tinha os diferentes elementos animados independentemente da linha do tempo principal real. Você pode fazer isso aqui, também, mas então qualquer projeto ou qualquer cena que você cria que tenha diferentes objetos voando dentro ou voando para fora tem o mesmo símbolo de fundo realmente útil, recurso extremamente útil que você tem Dentro. É um tipo de toupeira que eu não vi outro, um, projetos ou outros arquivos são aplicativos como este em si. Ok, então, mas se você quiser em cenas específicas, esconder este símbolo persistente, bem, você tem isso na sua linha do tempo. Ainda assim, então você poderia apenas clicar no, hum, globo ocular, e isso realmente iria escondê-lo da sua linha do tempo. Então não está dentro do seu tempo principal ou daquela linha de tempo, mas é uma linha de tempo cada outra, mesmo que eu crie mais linhas de tempo. As novas linhas do tempo têm esse símbolo, mas a outra naquela cena específica está escondida lá agora. Alguma mudança? Uma das coisas boas sobre símbolos ou símbolos persistentes? É praticamente qualquer mudança que você faz em uma área vai atravessar a placa. Então, se eu entrar aqui e sob este símbolo persistente, clique duas vezes nele e depois mude a cor para, digamos, verde bem em todo o resto. Todas as minhas cenas de diferenças. Esse projeto agora mudou para ou que é um plano de fundo agora mudou um verde. Se eu adicionei outros elementos indo para esse símbolo e, em seguida, adicionando outros elementos como , digamos, um elemento de texto aqui agora adicionou isso a todas as instâncias desse símbolo. Então, se eu voltar para parecer visto um, bem, eles são Innis, ele está lá. Então eu basicamente faço minha mudança em um só lugar. E então é uma cruz no tabuleiro em todos os elementos, e isso é a mesma coisa com apenas símbolos normais. Se você vai ter um botão que vai ser montado, vamos criar o botão e, em seguida, ir em frente e, em seguida, colocar esse botão e usar esse botão e em todas as suas diferentes cenas. E se você precisa fazer uma alteração nesse botão, digamos que você precisa atualizar as cores que precisa, atualizar os rótulos ou algo assim. Você mudá-lo em um ponto, e quando você muda em um ponto e em cascata para todos os itens diferentes, isso é outra característica enorme de trabalhar com símbolos dentro. É um tipo de toupeira. 18. 18 a linha tempo principal: Vamos falar sobre as principais linhas do tempo lá dentro. É um tipo de espião agora em um novo projeto. Se você vier do lado esquerdo dentado aqui um fundo, você vai notar. Se eu selecionar esta caixa suspensa, há alguns erros que me permitem saber que é uma caixa suspensa e eu posso alternar entre as diferentes linhas de tempo disponíveis aqui e eu posso entrar. E agora só tenho uma linha do tempo, que é a linha do tempo principal. Mas eu posso realmente entrar aqui e clicar em novas linhas de tempo ou ir para editar linhas de tempo. Outra maneira de chegar aos meus cronogramas é chegar ao meu inspetor e depois ir para a minha cena. Esperar er clicando na cena e, em seguida, eu posso ajustar ou ADM ou linhas de tempo vindo aqui e clicando no plus. Ou posso selecionar a linha do tempo e remover essa linha de tempo também. Então, uma das coisas sobre linhas de tempo é basicamente animações opcionais que acontecer para que você possa saltar para cenas diferentes. Você pode ter conteúdo diferente, camadas diferentes também, e você pode ter separado seu conteúdo mesmo com símbolos e tudo o mais. Mas a coisa sobre linhas de tempo é que você pode ter essas animações opcionais, e isso é realmente o que linhas de tempo, pelo menos como eu vejo linhas de tempo é animação opcional. Então, se alguém clicar neste botão, ele pode executar esta linha de tempo. Ou se alguém clicar em outro pão, ele pode executar cronograma para e assim por diante. Então você pode ter essas coisas de diferença, basicamente, que essas linhas de tempo, onde essas opções serão animadas com base no que é clicado ou baseado em qualquer tipo de condição ou algo assim. Portanto, não são símbolos persistentes ou não são símbolos onde você tem um tipo de animação em execução em sua própria linha do tempo, e isso está dentro de outra linha do tempo. É uma linha do tempo completamente separada onde as coisas podem ser completamente diferentes. As coisas podem acontecer dependendo do que é clicado e do que não é coletado ou o que quer aconteça naquele momento. Então, de novo, cabe a você. É se você clicar em uma opção que diz relativo aqui, ele vai levar o objeto de onde quer que esteja naquele ponto, servi-lo animado na Linha do Tempo Principal um, e então você clica no botão que vai para linha do tempo para, por exemplo, Em seguida, ele iria levá-lo onde quer que a linha do tempo principal foi e, em seguida, animado para onde quer que ele está dentro de uma linha do tempo para. Então a melhor opção que eu posso ver é basicamente, se você queria algo para ir de um lado ou de outro, e você pode usar uma linha do tempo para animá-la de um jeito e, em seguida, usar outras linhas de tempo e animar o animado do outro lado. Vamos mergulhar Mawr nas linhas do tempo mais tarde neste curso. Mas, por enquanto, isso é pelo menos uma apresentação. Neste momento, vamos trabalhar com a linha do tempo principal. Então vamos para o próximo vídeo e realmente começar a animar alguns objetos. 19. 19 Linha tempo do tempo de Animaton, Animaton: Agora vamos começar a animar alguns objetos em nosso palco. Agora há duas maneiras diferentes de você realmente animar objetos neste palco dentro do tipo tumulto. Vamos em frente e adicionar um objeto. Então eu quero chegar até meus elementos, ir para baixo para retângulo e vamos em frente e mover este retângulo para cima. Agora eu vou entrar em minha forma, Inspetor ou meu elemento, Inspetor, Eu quero mudar essa cor só para que seja um pouco mais óbvio. Antes era aquele cinza tão misturado com o branco. Mas agora que está aí, quero chegar à minha linha do tempo principal. E quando um clique duplo sobre isso para ir em frente e renomear isso e eu vou apenas dizer objeto um, vá em frente e clique. OK, agora, daqui para baixo, vou esticar isto um pouco mais para podermos vê-lo. Mas você pode ver se eu entrar aqui e esticar esta linha do tempo, eu posso ver todos os meus objetos aqui, mas então eu posso ver minhas propriedades lá em baixo. Agora vamos falar um pouco mais sobre o que são as propriedades e o que você pode fazer com isso. Então, agora, por enquanto, eu vou em frente e descer para as minhas propriedades e eu posso clicar em mais para a origem esquerda no topo da origem. Então isso é basicamente da esquerda para a direita. Vai ser a esquerda. Se você estiver indo para animá-lo da esquerda para a direita ou mesmo da direita para a esquerda , você ainda usa esta opção, e em seguida, em cima é, se você vai animado de baixo para baixo ou de baixo para cima, então é de qualquer maneira, você vai basicamente usar esses dois elementos. Então, a fim de começar um cronograma para começar um quadro chave, então eu venho aqui e mover minha linha do tempo para cá. Isto usando este purificador, e eu vou movê-lo para o ponto que eu realmente quero começar esta animação. Então eu vou ir em frente e clicar em mais para este ícone de diamante e isso vai ser o mais . Ok, eu vou animar minha esquerda e então eu vou em frente e bater. Além disso, para Animate Top é bem, modo que começa a minha animação. É daqui que vai começar. Então, agora, daqui, eu vou em frente e mover meu porta-chaves um pouco mais. E agora eu posso mover meu objeto para outro local e, em seguida, clicar em mais novamente e, em seguida, mais novamente também. Agora ele realmente não anima automaticamente. Eu realmente tenho que entrar e ter certeza de que isso acontece automaticamente. Você pode ver isso. Na verdade, às vezes quando eu faço isso dessa maneira, ele nem sequer registra que eu mudei para outro lugar. Então eu preciso voltar para ele e, em seguida, movê-lo de volta para onde estava antes. Agora, se eu quisesse obter as dimensões exatas, eu poderia vir aqui, entrar em minhas métricas, vir para a esquerda e entrar na largura vindo para o topo, chegando para a altura. E eu poderia realmente entrar e obter isso exatamente onde eu quero posicionado desde o início . E então se eu quisesse movê-lo até o fim. Agora eu posso ajustar o posicionamento do final também, modo que cria automaticamente Este ah Tween basicamente entre um quadro-chave e o outro quadro-chave contra. Às vezes, ele não registra o primeiro quadro de chave, então você pode ter que mexer um pouco no primeiro quadro que veio para que ele se registre e, em seguida, movê-lo para cima, mover o seu depurador um pouco mais e, em seguida, mover o objeto para onde você quer que ele se anime, também. Então, se eu for em frente e tocar no jogo, você pode ver que ele pausa por um segundo, e então ele toca o objeto. Agora, em vez de ter que inserir esses quadros-chave para cada vez que eu quero animar algo, há uma maneira mais fácil. E tem esse botão de gravação. Então eu vou ir em frente e selecionar esta linha do tempo ou esta animação para a esquerda. Vou apertar Deletar, e ela pode ver isso. Agora é apenas como a parte superior e inferior. Eu quero ir em frente e selecionar esse também e apertar, excluir. E agora, neste momento, não tenho nenhuma animação. Então a maneira mais fácil de fazer isso é realmente agarrar o botão de gravação, clicar no botão de gravação e, em seguida, mover meu depurador para aqui e você pode ver que um dois muito início disso. Este é o início da linha do tempo e então eu posso realmente mover este ponto. OK, onde eu quero que esta animação comece bem na frente desta animação. E então eu posso mover o lavador. OK, onde eu quero que isso acabe? E então eu defini esses dois pontos. E se assim que eu definir esses dois pontos, tudo o que eles têm que fazer é realmente mover meu objeto e você pode ver que automaticamente registra o quadro de chave frontal e o último quadro de chave. E ele tem essa animação no tempo em que eu comecei, este quadro chave aqui começou nesta animação. E então quando eu terminei, que é bem aqui, eu poderia esticar isso. Eu poderia torná-lo menor. Eu posso torná-lo maior também, mas é apenas animar as mesmas propriedades que estão indo de um local para o mesmo local. Não importa a quantidade de tempo que leva para fazê-lo, ele simplesmente não faz automaticamente. A coisa boa sobre o registro é apenas o fato de que eu não tenho que clicar no quadro de chave add . Toda vez que eu queria começar. Então eu vou em frente e basta clicar no registro da ONU ou parar de gravar. Então, quando eu mover meu cursor sobre e eu vou clicar no botão gravar novamente Agora eu posso mover meu ponto de partida para estar em outro lugar. Vamos em frente e mover isso para três segundos, e então eu vou mover meu purificador para lá estar cerca de cinco segundos. Agora, se eu me mover com aqueles no lugar agora, eu posso ir em frente e mover meus objetos para outro lugar. E você pode ver que ele pausa por um segundo porque eu comecei uma nova linha do tempo ou eu comecei uma nova animação em três segundos. E então eu terminei aquela animação em cinco segundos. E assim ele faz isso para mim automaticamente para que eu possa ir em frente e apenas bater, parar de gravar novamente e, em seguida, fazer a mesma coisa. Então, se eu quiser mover meu depurador novamente, eu posso animar isso quantas vezes eu quiser. Posso entrar aqui em outros elementos, animar esses elementos também. Então é assim que eu começo com a animação, ambos fazendo isso sozinho nos quadros-chave, ou realmente usando o botão de gravação para gravar minha animação também 20. Como facilitar animações: Então, no último vídeo, falamos sobre animar ao longo de sua linha do tempo. Agora eu já tenho uma animação aqui para começar. Se eu pegar meu depurador e eu quiser visualizar essa animação, eu poderia movê-la para a esquerda e para a direita aqui, e eu poderia vê-lo vai do lado esquerdo para o lado direito, uma animação bem simples lá. Se eu não vir minhas propriedades na parte inferior, eu poderia ir em frente e selecionar esse objeto, e agora eu poderia ver a animação. A única coisa que está realmente animando é a propriedade esquerda, e está indo da esquerda para agora. A coisa boa sobre isso é que você pode realmente adicionar sobre o que é chamado de flexibilização, que aliviação adiciona um início realista, então ele realmente não permanece a mesma velocidade o tempo todo. Se você tem inquietação dentro, isso é pensar em dentro e fora como início e fim. Então, se eu adicionar no East End, isso significa que vai ter essa facilidade no início. No início, se eu adicionar algo que diz que ele está fora, então ele vai ter esta facilidade ou este abrandamento no final porque é fácil fora, então ele está em significa começar facilidade fora significa terminar agora. Se você selecionar algo que diz que ele está dentro e fora, então ambos vão aliviar no início, e isso vai aliviar no final. Então, do que estou falando quando digo “calma”? Bem, se você quiser selecionar a opção, eu posso ir em frente e selecionar este ano. Eu posso vir para o lado direito e selecionar esta opção aqui onde diz que ele está dentro e fora e ele vai me dar uma caixa pop-up de coisas diferentes que eu posso realmente escolher a partir daqui ou outra maneira de chegar a esse mesmo menu é clicando duas vezes no animação. E se eu quisesse amarrar isso a um muito específico que eu possa clicar duas vezes sobre ele sobre o lado direito irá realmente aplicar essa mesma flexibilização para todas as propriedades diferentes que são animadas. Então isso me permite ser muito específico com eles. Então, se eu entrar aqui, eu posso selecionar. Se eu quiser que isso seja instantâneo e você pode ver que não há desaceleração, não há como começar um pouco lento e depois ficar mais rápido. Acontece na mesma velocidade o tempo todo. Hum e, em seguida, linear é realmente instantâneo apenas acontece. Não há nenhuma animação. Apenas acontece instantaneamente. Apenas salta para a nova área. Linear vai basicamente apenas dizer OK, ele permanece a mesma velocidade no início e no final, facilidade em, say's Ok, Qualquer facilidade que eu aplicar vai acontecer no início. Mas isso não vai acontecer no final. Ele vai ficar o mesmo e você pode ver isso com o gráfico. É meio que permanece o mesmo no final. Facilidade para fora permanecerá o mesmo no início. Mas depois abrandar no final, ele entra e sai vai ensopar os dois. Basicamente, ele vai começar devagar no início, e então ele vai lento no final também. Então eu tenho coisas como saltar onde você pode ver que ele tipo de salta. Se eu quisesse comprar uma bola de basquete e eu quisesse que a própria basquete parecesse que está saltando, eu poderia fazer esse tipo elástico de supera sua marca e depois volta para ele semelhante ao salto. Ele apenas se recupera e, em seguida, volta basicamente diz , Ok, ele vai ultrapassar a sua marca, mas depois voltar lentamente também. Agora, a coisa boa sobre qualquer uma dessas opções que eu escolher, você vai notar que eu tenho essas barras bem aqui que eu posso realmente agarrar para fora. E eu posso ajustar isso como eu quiser, para que eu possa personalizar essas facilidade que facilitar e aliviar de qualquer maneira que eu quiser. Agora algumas outras opções que eu tenho é que você pode ver que se eu selecionar na facilidade para fora, por exemplo, eu posso entrar e eu posso escolher Cubic Quad Court, marmelo visto ou Expo ou Cirque. Basicamente, estas só me dão opções diferentes. Então, se eu entrar aqui, eu posso ver como o gráfico realmente vai mudar, dependendo do que eu realmente selecionei. Então, se há algo que eu gosto um pouco mais do que eu posso entrar aqui e clicar na Expo, eu posso entrar aqui, clicar no Cirque ou algo assim. Então basicamente diz que é , realmente uma preferência, então o que você mais gosta, você pode ir em frente e testá-lo. Aperte o play e você pode ver que começou muito rápido e, em seguida, apenas meio que abrandou no final. Se esse é o efeito que estou procurando. É assim que eu aplico. Se eu não é exatamente o que eu estou procurando, que eu posso voltar aqui, clique duas vezes sobre isso e, em seguida, escolher uma opção diferente e obter algo mawr aliando ao que eu estou procurando lá para que você possa ver que um é um pouco mais lento e começa normal, e então fica um pouco mais lento no final. Então é assim que você aplica neste, basicamente qualquer uma das propriedades que você anima. Então agora isso só foi aplicado Teoh a origem esquerda. Mas se você tiver coisas como tamanho, altura, largura ou qualquer coisa assim, você pode aplicar essa facilidade dentro ou fora a qualquer uma dessas animações de propriedade 21. 21 animando outras propriedades: até este ponto. Nós só temos movimento animado. Nós animamos de um lado do palco para outro lado do palco. Agora vamos falar sobre animar outras propriedades para que possam ver que já tenho essa animação. Eu poderia vir aqui e eu poderia realmente adicionar mais propriedades. Aqueles que eu tenho opções. As opções que eu tenho agora são opacidade esquerda, alta hype e chicote. Há outras propriedades que eu também posso ajustar vindo aqui para diz Propriedades. Eu posso selecionar esta caixa suspensa, mover o mouse um pouco para baixo e você pode ver que há um monte de outras propriedades que eu realmente posso ajustar. Posso ajustar a imagem de fundo. Posso animar a imagem de fundo. Qualquer uma dessas opções são coisas que eu posso animar para que eu possa adicionar à minha animação. Eu vou ajustar o brilho do tamanho da fonte, a família da fonte. Você pode alterar a família de fontes animada de um fundo para outro tipo de letra. É basicamente o que você quiser. Qualquer estilo que você quiser, eu posso animar a fronteira. Eu posso animar a cor da borda na parte inferior na borda do raio da borda esquerda com também . Se eu quisesse uma borda em um determinado tamanho, eu também poderia fazer isso. Posso animar a ousadia, a cor de fundo. Eu também posso anima tapinhas se eu quisesse que houvesse mais saturação de preenchimento. CPL. Um monte de coisas diferentes. Linha têxtil. Se eu quisesse ir do centro para a esquerda justificada, cabe a você Inter altura da linha html também. Então estes são todos os tipos diferentes de opções de leilão que eu posso usar para que eu possa vir aqui e apenas selecionar o que eu quero, e então ele poderia ir em frente e animá-lo a partir daí. No entanto, vou ficar com os que estão aqui por enquanto. Então eu vou em frente e vamos animar isso. Eu quero que isso desapareça para que seja a opacidade vai ser zero para começar, e então ele vai se animar em totalmente transparente. Então eu vou ou então isso vai animar em para ser totalmente, eles vão ir em frente e clicar em adicionar um quadro-chave. Eu quero ir até lá. Ok. Neste ponto, eu queria estar totalmente lá é quando eu tinha outro quadro-chave agora vai voltar aqui e selecionar este quadro-chave, e então eu vou entrar aqui e eu vou mudar a opacidade. Então, quando ele vem para os elementos, inspetor aqui e aqui é onde eu mudei a visibilidade. Então eu quero ir em frente e selecionar essa visibilidade para ser zero. Eu não preciso que isso esteja no final, porque quando eu criei este quadro-chave, a opacidade para este objeto já estava definida 200% de modo que já tinha essas propriedades. Mas agora que eu o animei desde o início, você pode ver que basicamente, como eu pego meu esfregaço, removê-lo da esquerda para a direita. Você pode ver que ele se foi completamente no início, mas ele começa a desaparecer no final disso. Agora, eu poderia fazer a mesma coisa com a altura, então eu vou ir em frente e selecionar a altura, e eu vou ter certeza de que eu criar alguns quadros-chave no hype construído no início e no fim. Agora o que eu vou fazer com a altura não vai ir em frente e apenas esticar isso um pouco e você pode ver que ele é automaticamente animado do início ao fim, e você pode ver que ele começa a ficar maior. Eu poderia fazer a mesma coisa com o com. Vamos em frente e apenas adicionar um quadro-chave com chicoteado no início. Adicione um quadro chave no final para a largura e vamos em frente e apenas mudar isso com um pouco, bem, você possa ver que ele começa como uma pequena caixa e começa a crescer para uma caixa maior. Eu posso fazer isso em registro também. Vamos apagar isso como aprendemos no último vídeo. Nós não temos que criar os quadros chave que eu poderia realmente gravar aqui. Vá em frente e vamos mover isto como está. Vamos em frente e mover isso para o final da animação, e então eu vou seguir em frente e apenas mantenha pressionado o botão Shift. Estique isso e você pode ver que ele criou automaticamente aquela animação o tamanho para a altura e o tamanho para a largura. E agora, se eu entrar aqui, vocês podem ver que cresce de menor para maior no botão de gravação. Basicamente, apenas ajude a economizar tempo, você pode ver Ok, começar a partir daqui. E então, neste momento, e eu quero que você seja algo diferente e você pode ajustar a cor. Você vai apenas outros elementos. Vamos em frente e aperte o botão de cor ou o botão de gravação. Venha aqui e eu vou mudar a cor de fundo para vermelho para que você possa ver que a cor começa a mudar de verdade. Então começa verde. Sei que não podemos ver isso com capacidades, então vamos nos livrar dessa opacidade por enquanto. E vamos apenas aumentar o nas propriedades acima da capacidade para que você possa ver no início que começa em um verde. Mas começa a mudar de cores, e no final, vira para ler. Então é assim que automaticamente apenas apertar o botão de gravação chegando às minhas propriedades adicionou automaticamente esta propriedade de cor de fundo à minha animação. E aí está. E agora posso começar. Praticamente qualquer coisa que está mais na seção de propriedades no lado direito é me permite animá-lo para que eu possa começar com uma cor. As alterações para uma cor diferente começaram em um tamanho muda para um tamanho diferente no animado . Essa sombra anima outros objetos, como raio de borda ou cantos para algo. Se eu quisesse ir de um quadrado a um círculo, eu poderia animar isso também. Então, muitas possibilidades distantes e diferentes. Mas isso é pelo menos como você adiciona propriedades adicionais e como você usa a ferramenta de registro para poder animar essas propriedades ou até mesmo a ferramenta de quadro-chave para poder animar essas propriedades também. 22. 22 de pontos em mudança: Digamos que depois que eu animei algo, Eu preciso voltar e eu preciso Teoh um apenas uma dessas propriedades ou qualquer um para ajustar um determinado elemento sobre essa propriedade ou quadro-chave. Will. Você pode entrar e selecionar o objeto e, em seguida, voltar para as minhas propriedades e eu posso selecionar uma dessas propriedades. E se eu mover meu purificador aqui em um certo ponto, eu posso realmente pegar e selecionar. Se eu selecionar este elemento no topo, ele irá selecionar todas as minhas propriedades. Mas se eu entrar aqui e selecionar apenas um quadro chave, eu posso ajustar esse quadro chave. E eu poderia dizer, OK, o tamanho vai realmente demorar um pouco mais, que significa que toda a animação vai acontecer bem ali. Mas então o tamanho vai continuar animando lá. Eu poderia até vir aqui e adicionar um quadro de chave adicional para que eu pudesse mover meu depurador para o ponto que eu quero tê-lo. Eu vou em frente e selecionar isso aqui e então eu vou vir para estes diamantes com o plus e então clique sobre isso e agora isso vai ser um novo quadro chave. O importante a ter em mente com os quadros-chave é que os quadros-chave significam que algo diferente vai acontecer agora a Interpolação ou a animação indo de um ponto para outro ponto indo de um ponto, algo se parece com um diferença ou algo olha para uma certa maneira e, em seguida, indo para outro quadro-chave, que significa que agora ele vai olhar para este lado. Vai ter uma nova altura. Há novos, com ou qualquer coisa e, em seguida, entre automaticamente anima ok deste como ele parecia a partir daqui para como ele parece novo após o final desta animação para que Interpolação aconteça automaticamente. Agora, se eu quisesse adicionar quadros de chave adicionais e ok, neste ponto vai saltar para aqui e, em seguida, neste ponto vai saltar para a sua nós podemos entrar aqui e eu posso adicionar esses quadros-chave e você pode ver que na altura, Vamos realmente torná-lo um pouco menor. Então, neste momento, ele vai realmente ficar um pouco menor. E então, assim que ele atinge este quadro-chave, ele agora vai animar para o maior para que eu possa ter algo animado em pequeno. E então, assim que atingir uma determinada área, então eu posso tê-lo inimigo ou esticar um pouco mais também. Ah, muitas possibilidades diferentes. Mas é assim que eu posso entrar aqui, e eu posso animar este quadro chave, e eu posso até entrar e arrastá-lo para onde eu quiser. Posso esticar isso. Se eu quisesse ser um pouco mais longo, você pode esticar este quadro chave para fora se eu quisesse que a primeira animação para ir um pouco mais rápido sobre a altura e, em seguida, um pouco mais Depois que a animação acontece. Cabe a você. Mas é assim que você insere novos quadros-chave, quadros chave adicionais. Eu poderia vir aqui e até mesmo selecionar que isso é Ah ponto chave quadro e, em seguida, apenas sentar excluir. E então ele vai pegar aquele quadro chave que começou ou no meio, e eu vou simplesmente apagá-lo completamente. E agora só está animando desse quadro-chave para o quadro-chave novamente. Quadros principais são quando algo diferente ou algo diferente acontece ou parece diferente em um determinado ponto, ou algumas propriedades mudaram ou algo assim. É um porta-chaves. E então qualquer coisa no meio. Esta barra é basicamente a animação que vai de um quadro chave de como ele olha quadro-chave para este novo quadro-chave e como ele olha para o novo quadro-chave. E nós vamos inimigo qualquer que seja a propriedade no início, para a animação ou para essa propriedade, como ela parece no final, eu não tenho que animá-la. Se eu não quiser Teoh, você pode realmente desligar as animações, e assim ele apenas salta automaticamente para um certo ponto. Mas isso não é animador. Isso é basicamente mudar as propriedades em um determinado ponto. Então é assim que você, pelo menos, trabalha com os diferentes quadros-chave. Adicione novos quadros-chave e ajuste o tempo de seus quadros-chave também 23. 23 animações duplicas: uma outra coisa que você pode querer fazer. Ela pode querer copiar sua animação que você fez em um objeto e colá-la em outro objeto. Se eu entrar aqui e adicionar um objeto completamente novo, vamos em frente e adicionar este círculo aqui. Eu quero mudar a cor de fundo para ser uma cor diferente aqui. E então o que eu vou fazer é selecionar este objeto para o quadrado, e eu vou em frente e selecionar a animação. Se eu quiser toda a animação, uma cópia sobre uma condição como aquela animação hit comando, ver e, em seguida, vir aqui e selecionar o meu círculo e, em seguida, pressione Command V e que irá colá-lo . Mas a coisa é, é anima na mesma largura e altura, a mesma origem que é esquerda e superior. Então é realmente por trás desse objeto. Mas se eu precisasse, então livre-se da praça. Eu posso ir em frente e excluir o quadrado aqui, e você pode ver que agora ele mudou para o círculo, e porque eu tinha uma cor específica, ele muda a cor também. Mas agora eu tenho esse círculo automaticamente e fiz isso. Se eu precisava mudar o objeto, se eu precisava de uma mudança, um certo elemento e, em seguida, aquela animação que eu levei o tempo para criar. Nesse elemento, eu apenas copio e colo, o que é bom. Se o seu enquadramento de fio e você não tem exatamente todos os visuais ainda, você pode ir em frente e configurar algumas caixas apenas por enquanto. E depois. Depois de obter os visuais, você pode copiar os visuais dessa caixa ou a animação dessa caixa, e então você pode pagar para o visual que você realmente recebe. Você também pode apenas fazê-lo em um determinado elementos de linha. Se eu entrar aqui e selecionar esse elemento de linha, eu poderia copiar essa animação de linha. Venha para um objeto diferente aqui, e vamos em frente e apenas ritmo que a animação forro. Então não colou tudo. Ele só colou aquela propriedade que eu animei. Se eu só quero que a mesma animação nesta animação é da esquerda para a direita. Se eu quisesse a mesma animação naquele objeto, eu poderia fazer isso também. Uma outra opção é que eu poderia vir aqui, clicar com o botão direito nele, descer para duplicar, e isso irá duplicar meus objetos. Então, é exatamente o mesmo objeto, e todas as animações acontecerão ou permanecerão as mesmas. Mas você pode ver isso porque eu estou no começo. Se eu tornar este objeto um pouco menor, ele ainda vai animar para este ponto chave do quadro. Então eu não poderia mover isso um pouco mais, e agora vai demorar um pouco mais nessa animação. Então é assim que você copia animações que você fez com um objeto e cola-o em outro objeto. 24. 24 caminhos de movimento: Agora, uma coisa que eu posso querer fazer é, como eu estou animando objetos, eu posso querer ajustar a curva do objeto real em vez de apenas ter um preso da esquerda para a direita. Você pode querer que ele suba um pouco e, em seguida, para baixo um pouco também. Você pode fazer isso com um objeto, alguém para vir aqui e apenas criar um novo retângulo que eu vou entrar e selecionar a cor para ser uma cor diferente. E então eu vou ir em frente e animar isso. Vou clicar no botão de gravação. Vamos passar para dois segundos e depois vamos passar para o lado direito. Agora você percebe que como eu a tenho sobre esta barra azul, isso realmente me permite. Ele destaca um pouco e me permite saber que eu poderia selecionar isso e eu posso adicionar basicamente um ponto que irá curvá-lo para que eu possa apenas selecionar isso aqui e, em seguida, movê-lo um pouco mais e, em seguida, me permite ajustar a curva dessa animação, e isso me dá alguns guidões que eu posso realmente esticar isso um pouco mais. Se eu quisesse ser mais curvo no lado direito ou se eu quisesse ser mais curvo no lado esquerdo, eu poderia fazer isso. E então eu posso inclinar a curva também. Agora, isso basicamente me dá realmente Ah, grande detalhe de como ou controle sobre estes sobre esta animação, eu posso vir aqui e ter outros pontos também. Então, se eu quisesse ter uma espécie de curva para cima e depois para baixo em como, uma onda, eu posso fazer isso automaticamente também. Então isso me dá a habilidade de criar essa curva. E agora, se eu for em frente e tocar em Play, você pode ver que esse objeto se anima ao longo do Kurt. Agora, outra coisa que você pode querer fazer é que você pode querer ter este objeto, Por exemplo, se você estava tentando animar um pássaro ou algo assim, você pode querer que esse objeto siga a curva. E então a cabeça desse objeto, se for um pássaro, descerá e fará mais sentido além do corpo ou da barriga do pássaro. Apenas desça também. Então você pode querer alinhar a essa animação. Você pode fazer isso dentro das propriedades, vindo para as propriedades aqui e, em seguida, vir para a rotação e clicar em rotação segue Caminho de movimento. Agora, sob isso, isso está sob as métricas, inspetor descendo para a seção de rotação e apenas selecionando essa opção. Você pode ver agora se eu vir e tocar play, isso é retângulo ou que o quadrado vai basicamente seguir o caminho. Esta é uma curva muito afiada, então eu meio que pulei um pouco. Mas ele seguirá o caminho dessa animação, e isso é tudo o que eles tinham a ver com Select Us Now. Eu poderia animar que a rotação eu mesmo se eu quisesse e criar alguns pontos-chave se eu quisesse obter detalhes realmente finos de como isso é rotação acontece, Mas neste caso, é bom o suficiente para que eu possa ir em frente e apenas sair. selecionado na rotação segue o Caminho de movimento e, em seguida, ele seguirá automaticamente esse caminho de movimento. E então, quando eu visualizo isso, este objeto HTML animado é basicamente animado ao longo deste caminho, e é assim que eu faço movimento passar dentro do tumult, digite 25. 25 filtros de CSS: agora, uma das coisas que você pode querer anime são os filtros CSS. Isso é um pouco diferente dos filtros normais ou propriedades normais porque às vezes esses filtros, depende do navegador que está sendo visualizado em algum momento. Esses filtros realmente não funcionam, mas o que eu quero dizer com isso é vamos em frente e clicar no botão de gravação. Eu vou em frente e mover meu purificador aqui para dois segundos, e então eu vou em frente e vamos apenas mover isso para cima. Um pouco do meu botão de gravação foi desfeito. Alguém mexa isso, mas eu vou entrar nos elementos, Inspetor, eu vou rolar até ela diz efeitos de filtro. Agora, é aqui que eu posso ajustar o borrão. Eu posso ajustar o CPI, mas eu posso ajustar a saturação, Aiken apenas a tonalidade e tudo assim. Agora que o mesmo é o que já estamos animando. Então, o topo, a altura, a largura e tudo o que é praticamente o mesmo. No entanto, uma coisa que você verá está no lado direito. Isto é um aviso? Se eu clicar nesse aviso, ele me avisará disso. Ei, este é CSS três filtros e seu não suportado por esses navegadores, que são muito velhos navegadores. Mas isso é apenas algo para ter em mente. Se você não está preocupado com isso, então você pode ir em frente e apenas manter este ano. Mas uma palavra de cautela é não tornar esta animação crucial para o seu aplicativo real que você está construindo este site que você está construindo. Porque se você estiver usando isso e por algum motivo seus usuários estão em um desses navegadores mais antigos , mesmo eu e. 11 ou algo assim, então essa animação não funcionará exatamente como você não funcionou. Então isso é apenas uma coisa a ter em mente. Teoh, esteja ciente desse aviso. Dê uma olhada nesse aviso e se você estiver bem sem aviso, então você pode ir em frente e continuar. Se você não estiver, você pode querer pensar em animar algo diferente ou ter algum outro tipo de cor de propriedade. O que você quisesse fazer. Ah, tem que muda bem, Então é assim que pelo menos uma palavra de aviso quando você está usando estavam animando filtros CSS 26. 26 ações de linha de tempo: na última seção. Falamos sobre animações nesta seção. Vamos falar de ações agora, ações são um pedaço de código ou um pedaço de lógica que vai acontecer em um certo ponto da linha do tempo. Ou pode acontecer quando algo é clicado ou pode acontecer em outros tipos de determinação em rotação ou arrastar ou algo assim. Então vamos cobrir como criar essas ações e como adicionar essas ações. Dois objetos diferentes em sua linha do tempo. Então, neste vídeo, vamos estar em primeiro lugar, falando sobre as ações da linha do tempo, ações linha do tempo acontecerão em um certo ponto dentro da linha do tempo. Então, uma vez que atinge cinco segundos ou uma vez que você alcança são dois segundos, você pode executar algum tipo de código execuções, algum tipo de lógica. Você pode pausar a linha do tempo. Você pode continuar a linha do tempo quando algo é clicado. O Utkan. Basicamente, você pode até mesmo controlar a linha do tempo como algo é arrastado ou um monte de diferentes possibilidades para escolher. Então, novamente, para ser simples, não vamos mostrar nada complexo. Eles têm que descobrir como foi construído. Vou apenas mantê-lo elementos simples explorar algumas dessas opções que você pode entrar e você pode usar para criar esses tipos de ações. Então, primeiro de tudo, para ver as diferentes ações da linha do tempo que você pode fazer, eu quero ir em frente e entrar na minha amostra de hype aqui. Só uma tela em branco. Se você queria apenas começar um novo projeto, você pode. Vou em frente e adicionar um elemento, apenas um elemento retangular. Agora vou mudar a cor de fundo desta cena. Então, estou sob as propriedades das cenas. Vou passar para o fundo, selecionar a caixa suspensa para uma cor verde aqui e ir em frente. E vamos animar isto como aprendemos no nosso último vídeo. Vá em frente e clique no botão de gravação e você pode ver que temos a linha de partida aqui . Eu posso mover isso para onde eu quiser e, em seguida, também estão terminando linha. Vamos em frente e mover esses 23 segundos, e então eu posso ir em frente e apenas arrastá-lo segurando o botão Shift para baixo para obter uma linha reta , e nós vamos arrastar isso para o outro lado do palco. Agora, essa é a única coisa que eu quero fazer para esta pequena animação. Então, vou em frente e desmarcar o botão de gravação. E agora temos nossa animação indo do lado esquerdo da areia do palco. Faça o lado direito do palco. Agora. O que eu quero fazer é adicionar um gatilho de linha do tempo aqui. Então, se no meio da linha do tempo o que vai acontecer é que vai pausar a linha do tempo, então vai ficar bem no meio, e não vai continuar essa linha do tempo. fim de adicionar um gatilho de linha do tempo, eu venho para o lado esquerdo, onde diz Linha do tempo principal e eu ir em frente e clique sobre este diamante que tem uma vantagem no meio Isso é basicamente adicionando um quadro chave ou, em Neste caso, uma ação cronológica neste código, como acontecerá assim que meu purificador, que é esta barra branca. Posso colocar isto onde quiser. É aí que a ação vai acontecer. E eu vou ir em frente e clicar nesta nova ação e ela abrirá esta ação da linha do tempo . Eu posso ir em frente e selecionar a caixa suspensa e então essas são minhas ações padrão que eu posso fazer isso aqui. E pode não se parecer muito, mas há algumas das ações que você pode dio oferecer muita flexibilidade, como executar, dirigir um como executar script ou acionar um comportamento personalizado, ou reproduzir som ou iniciar uma determinada linha do tempo ou algo assim assim. Então eu vou entrar aqui. Eu também posso saltar para uma certa cena. Posso ir em frente e começar a linha do tempo positiva. E eu posso até especificar qual linha do tempo em minha fala, porque no lado direito em minhas propriedades de palco, você vai se lembrar que nós podemos ter várias linhas de tempo diferentes, que é basicamente vários tipos diferentes de possíveis animações. E eu posso acionar essas animações possíveis, dependendo de certa lógica ou certos pontos da linha do tempo que eles recebem dois ou a linha do tempo principal . Então, há muitas possibilidades diferentes lá. Então eu vou em frente e pausar a linha do tempo, e eu vou deixar onde diz Timeline é a linha do tempo principal, e isso é praticamente ele. Então, se eu precisar voltar para isso e modificá-lo mais tarde, tudo o que eles têm a fazer é clicar duas vezes sobre o diamante, e ele vai aparecer com a minha ação de linha do tempo que eu posso modificar mais tarde. Vamos em frente e pré-visualizar isso. Então eu vou bater, Save. Eu vou apertar o comando enter para visualizá-lo e você pode ver que a animação pára bem no meio para que ele não me permite continuar ou algo assim, mesmo se eu clicar nele. Se eu tentar fazer alguma coisa , não vai continuar. Eu tenho que de alguma forma acionar que a animação ou a ação para continuar com outra coisa . Eu posso acionar isso por um clique de botão ou algo como um botão play ou algo assim . E então vamos aprender sobre isso no próximo vídeo. Como adicionar em ação em um objeto. Mas isso é pelo menos como você adiciona em ação à linha do tempo quando Teoh atinge um certo ponto dentro da linha do tempo, e eu poderia voltar aqui para HEIP e eu poderia ter várias ações diferentes que vão jogar ao longo da minha linha do tempo. Então, se eu quisesse colocar certos audiófilos em certos pontos, eu poderia fazer isso com ações na linha do tempo. Então, no próximo vídeo, vamos em frente e falar sobre como continuar essa animação. Uma vez que este retângulo é clicado em 27. 27 ações de objetos: Tudo bem. Então, no último vídeo, falamos sobre ações na linha do tempo. Mas neste vídeo, vamos falar sobre os diferentes tipos de ações que você pode adicionar aos objetos . Então, se eu quiser adicionar em ação quando isso é clicado para continuar a linha do tempo, eu simplesmente seleciono este objeto. E então eu venho aqui para minha área de inspetor, ter certeza de que isso está habilitado. Se você não vê-lo, certifique-se de clicar em onde diz Inspetor, em cima. E então eu vou até lá não na minha cena, Inspetor, como estivemos explorando em vídeos anteriores. Vou até aqui onde são as minhas ações. Inspetor, esta mão é basicamente? E isso, basicamente, são as diferentes ações que eu posso aplicar. E você pode ver aqui onde eu digo no clique do mouse, isso será basicamente em um dispositivo móvel. Este será um toque no mouse para baixo. Isso será quando ele começar a tocar quando eles começarem a tocá-lo antes de eles levantarem, e então, no mouse para cima, será realmente o toque. E assim que eles levantaram, então qualquer um desses tipos de ações. Se eu fizer isso no próprio dispositivo ou se estiver na área de trabalho, será apenas um simples clique do mouse ou assim por diante. Se for uma área de trabalho, isso basicamente não se aplica a este código. Não se aplica a dispositivos de toque. Mas se eu quisesse executar código no mouse sobre quando ele é pairado sobre ou quando é o meu mouse realmente sai do lado do objeto, eu posso executar algum código lá também. Eu também posso fazer em drag ou entrevista. Porto significa que assim que esta cena realmente ficar visível, eu posso executar alguma lógica também. Ou quando essa cena é exposta ou deixada, você deixa essa cena para outra cena. Você pode executar algum código também, então eu vou em frente. Basta fazer um simples clique do mouse e vá em frente e clique sobre isso. Além disso, quando eu quiser adicionar em ação e eu vou selecionar a caixa suspensa e você notará que a caixa suspensa é a mesma que tivemos em nossa ação de linha do tempo. Estas são as diferentes opções padrão para nossas ações dentro do tipo tumult, então eu quero ir em frente e dizer, OK, OK, uma vez que eles clicam nele, eu só quero continuar a linha do tempo. Então ele pausar a linha do tempo automaticamente em nossa ação de linha do tempo. Mas agora quero continuar essa linha do tempo. E a que horas eu quero continuar a linha do tempo? Bem, vai ser a linha do tempo principal, a única linha do tempo que eu tenho. E então eu também posso clicar em jogar ao contrário e, em seguida, dar-lhe a opção de pode reiniciar linha do tempo, se necessário também. Então, se eu quisesse que isso tocasse, mas voltasse para onde estava antes, eu poderia fazer essa opção também. Mas isso é praticamente tudo o que eu quero fazer por isso. E você podia ver isso. E se eu selecionar no meu palco aqui? Esta ação realmente aparece aqui onde é o palco inteiro. Eu poderia adicionar algumas ações em todo o palco apenas selecionando qualquer lugar na área cinza . Você vai admitir que isso significa que quando eu clicar em qualquer um do palco, eu poderia pausar a linha do tempo e, em seguida, reiniciar a linha do tempo, se necessário. Eu também poderia vir aqui e tão bem no mouse sobre a própria área de trabalho. Eu poderia ter acionado algo também, mas eu vou em frente. E se eu precisar voltar aqui, ainda pode ficar assim. Volte aqui e modifique esta ação. Vamos em frente e pré-visualizar isso. Alguém vá em frente e aperte o comando enter. Você pode ver que ele faz uma pausa no meio da linha do tempo, mas se eu for em frente e clicar nisso, ele vai continuar a linha do tempo. Agora adicionamos em ação com sucesso a esse objeto dentro do tipo tumulto. Então vamos voltar para o hype. E agora vamos em frente e explorar algumas outras coisas. Se eu selecionar este objeto, eu também posso adicionar vários outros tipos de ações em que eu clicar. Além disso, você pode ver que adiciona uma ação adicional. Então, se eu quiser ir em frente e adicionar mais ações, eu posso fazer isso também. Mas no próximo vídeo, vamos falar sobre remover essas ações, reorganizar essas ações, se necessário, também 28. 28 ações para remover ações: Certo, então, nos últimos dois vídeos, falamos sobre ações na linha do tempo, e falamos sobre adicionar ações em objetos. Agora, o que acontece se eu precisar remover essas ações? Você vem aqui, e se eu selecionar isso, eu realmente não posso simplesmente ir em frente e bater. Excluir. Você tem que vir aqui e sob a ação, selecionar a caixa suspensa e ir para remover, e isso irá remover apenas essa ação para que eu possa entrar aqui. E se eu tiver vários, venha em uma das vezes e remova essas ações diferentes. Então não é visível. Então eu queria ter certeza de que isso foi pelo menos apontado que você pode entrar em qualquer ação que você adicionar. Se você decidir que não quer ter essa ação, você pode entrar aqui e selecionar a ação, caixa suspensa e descer para remover. Ou se você decidir que deseja alternar de, digamos, um salto para ação vista para outra ação. Você pode vir aqui e alterá-lo para uma ação diferente e, em seguida, preencher as diferentes informações para fazer essa nova ação Então é pelo menos assim que você remove essa ação do objeto. Você tem que se certificar de que as oportunidades estão selecionadas ou entrando na minha linha do tempo, eu posso deslizar esta caixa suspensa e ir para baixo para remover ou na linha do tempo. É um pouco diferente porque eu poderia selecionar a linha do tempo e eu poderia apertar o botão excluir na linha do tempo. Mas você não pode fazer isso aqui, ou você não pode mesmo fazer isso neste palco porque você vai apagar todo o objeto. Então você tem que selecionar a caixa suspensa para ir para baixo para remover para remover o objeto. Então é assim que você remove diferentes ações dentro, é um tipo de toupeira. 29. 29 explorando as ações padrão: neste vídeo. Eu só queria explorar algumas das diferentes ações que você pode realmente usar dentro. É uma passagem múltipla. Então, essas ações padrão irá falar sobre ações JavaScript personalizadas mais tarde. Mas é assim que você entra e adiciona algumas dessas ações. Então eu vou entrar aqui e sob o clique do mouse. Eu quero ir em frente e clicar no ícone de mais, e eu vou descer aqui para saltar para parecer quando eu clicar em Ir para visto Isto vai realmente me permitir saltar para um visto específico por padrão. É só a próxima cena. Se você queria saltar automaticamente para a próxima cena, ele estará lá. Ou você pode selecionar a caixa suspensa para ser vista pela primeira vez, vista pela última vez. Ou é aqui que ele vai nos dar um monte de diferentes. Vi todas as diferentes cenas disponíveis. Neste momento, só temos uma cena do lado esquerdo. Eu poderia clicar duas vezes sobre isso e vamos apenas nomear esta cena um. E eu posso vir aqui para este ícone de adição em uma nova cena, e vamos nomear esta cena. Claro, eu soletro bem vendo também, e eu quero voltar aqui. Bem, antes de fazermos isso, vamos nos certificar de que saltamos para a cena do crime. Então, quando você seleciona o texto aqui e diz que isso é visto para ir em frente e digitar isso lá e agora voltar para um visto, eu quero entrar neste retângulo, e agora ele vai saltar para cena, que é o próximo cena. Mas se eu quisesse pular, especificar uma cena específica e vir aqui e selecionar essa cena ou eu posso apenas dizer OK, bem, sua próxima cena, eu só vou pular para a próxima cena agora nós também podemos selecionar a transição, qual será a transição. Desvanecimento cruzado instantâneo, troca, empurre para a esquerda, empurre para a direita, empurre de cima para baixo. E isso é tipo de animação, os efeitos de paralaxe que você obtém quando você quer ir de uma página para outra página. Então vamos em frente, e eu vou mudar isso para empurrar de baixo para cima, e eu vou salvar isso. Vá em frente e visualize. E agora eu vou selecionar neste quadrado aqui, e você pode ver que essa cena agora é empurrada de baixo, e agora é empurrada ou até o topo. E eu poderia até voltar em parece que vamos em frente e na cena, também. Se eu quisesse ter, tipo, tipo, um botão de volta ou algo assim. Vamos em frente e basta selecionar este retângulo duplo clique nele e dizer de volta, obviamente, eu posso querer ter Ah, vamos trazer um botão aqui. Isto pode ser um pouco melhor. Tudo bem, então vamos ficar aqui e agora o que vai acontecer é neste clique do mouse. Vamos em frente e bater, além de saltar para ver e nós vamos dizer cena anterior e isso vai tudo para em vez de de baixo para cima. Isto vai ser de cima para baixo. E assim ele vai se ele está voltando, ele vai ser de cima para baixo como se ele está animando de volta para cima. Então eu vou ir em frente e visualizar este clique neste quadrado. Ele vai animar para a próxima cena, e então eu posso clicar em Backend vai animar de volta para aquela cena para que você possa ter diferentes seções que tipo de executar paralaxe através de uma página para outra página, eles podem estar pensando, Por que está apenas em uma seção? É porque isso não é realmente responsivo ainda você pode vir aqui e selecionar sob a cena Propriedades selecionar a escala que será 100% e as alturas para ser 100% 100% no com 100% no hype. E agora eu posso ir em frente e bater em salvar, e você pode ver que ele está meio esticado um pouco mais. Mas se eu bater neste quadrado novamente, toda a página vai realmente animar do topo de baixo para o topo e, em seguida, também a mesma coisa. Se eu clicar para trás, isso será animado para trás. Vamos falar sobre a capacidade de resposta e como você pode anexar isso a determinadas áreas ou ancorar em determinadas áreas em um vídeo diferente. Mas isso é pelo menos como você mudaria para, ah, 100% se você quisesse ter toda a janela, toda a área animada de baixo para cima. Então vamos em frente e explorar algumas outras coisas, então eu vou voltar para o painel de ações. Vamos mudar isso para executar o script Java. Agora, JavaScript é uma funcionalidade de ladrão que você pode executar e vamos falar mais sobre isso em profundidade . Mas se eu quisesse ir em frente e criar uma nova função, Aiken, vá em frente. Assim como essa opção. E agora você pode ver aqui função chamada função. Eu posso colocar o código JavaScript dentro daqui, então eu poderia realmente dizer alerta e essa cor vai dizer olá. Então, se eu salvar isso quando isso é clicado, ele realmente vai alertar. Olá. Então eu vou ir em frente e visualizar este clique neste quadrado e agora há meus alertas. Diz “Olá”. Eu posso ir em frente e apertar perto lá para que eu pudesse executar JavaScript. E há um monte de outras coisas que você pode obter. Você pode navegar para páginas diferentes. Você pode ter variáveis e outras coisas dentro do JavaScript, que irá aprender sobre em um vídeo posterior. Deixe-me ir em frente e mudar isso para nós vamos voltar para desencadear um comportamento personalizado. Mas eu quero ir até você Estou aqui. E então vamos em frente e apenas puxar para cima aprender dojo dot nets um ritmo que você está l voltando em hype. Vou acelerar isso até aqui. Então eu copiei o URL do Safari e eu colá-lo lá dentro, mas queria abrir isso em uma nova janela. Posso, ou deixá-la desmarcada se quiser tirá-la da janela atual. Na verdade, vamos abrir de uma nova janela. Então vá em frente e bater, salvar e, em seguida, clique neste quadrado e você pode ver que ele abre uma janela completamente nova para o que você estava bem, que eu realmente anexado lá. Isso é ótimo. Então vamos em frente e tentar algo diferente. Você pode ver o e-mail composto. É Ah, você pode ter este e-mail direto para uma pessoa específica, se eu quiser. Então Jeff, ao aprender dodô, eu poderia ter um assunto. Eu também poderia ter algum corpo de texto aqui, e então quando isso realmente acontecer, vamos em frente e bater pré-visualização. Não tenho certeza se meu cliente de e-mail está ativo, mas vamos em frente e pré-visualizar. Sim, está puxando meus e-mails. Você pode ver que é automaticamente endereçado a Jeff tem minha linha de assunto de amostra. Eu não coloquei nada bem Eu coloquei algo no corpo têxtil tem que olhar para o porque isso não é ponto lá dentro. Mas pelo menos é assim que você entra e adiciona o local de redigir e-mail. O som permitirá que você anexe um som que eu não trouxe em nenhum som. Entraremos no som mais tarde, mas eu precisaria trazer o MP 30 G. A e acender o arquivo agora. A razão é porque isso basicamente está se preparando para estar em qualquer navegador para ser compatível com qualquer navegador. Então você precisa trazer o MP 30 G A e caminho arquivo para que ele possa jogar nos diferentes navegadores disponíveis. Eu queria fazer um loop. Eu posso fazer isso também. Stop Sound é a mesma coisa. Iniciar linha do tempo vai. Basicamente, já aprendemos sobre pausar e continuar. Comece com a linha do tempo. Se eu não tiver uma linha do tempo jogada por padrão, posso começar em um determinado ponto ou ir para uma linha do tempo principal ou tempo dentro da linha do . Eu posso selecionar que horas são, e então eu posso entrar aqui e em segundos. Eu vou realmente dizer que vou pular para cinco segundos e isso vai saltar automaticamente para cinco segundos em vez da linha do tempo. Então esse é um pouco do padrão. Açúcares diferentes irão. Volte para o script de trabalho de execução e mergulhe mais no JavaScript de execução mais tarde. Mas isso é pelo menos alguns dos gatilhos padrão disponíveis dentro do tipo tumult. 30. 30 ação de arrastar: um outro elemento legal que eu quero apresentá-lo é o som do elemento de arrasto. O elemento arrastar permite que você faça algumas coisas diferentes. Então eu quero entrar aqui. E em primeiro lugar, vou criar uma animação para os meus objetos. Eu quero clicar sobre estes Record vindo para a minha linha do tempo, e eu vou ir em frente e esticar os três segundos e então vamos animar isso da esquerda para a direita. Então agora a partir daqui é que eu quero criar outro objeto que irá controlar essa animação. Eu vou ir em frente e clicar no A nem no registro stop, e eu vou entrar e selecionar este retângulo aqui. Vamos criar um novo retângulo e esticar isto para ser uma certa área no fundo . Então, uma vez que temos este objeto, agora podemos entrar aqui e selecionar esta caixa suspensa, e podemos dizer linha do tempo de controle. O que isso vai fazer é que linha de tempo queremos controlar? Bem, essa vai ser a linha do tempo principal. Queremos controlar o acesso horizontal por dragão horizontalmente, ou queremos controlá-lo. Se arrastarmos para cima e para baixo verticalmente, essa é outra opção que podemos fazer. Nós também podemos ter um ir para a frente ou podemos ter um ir para trás com base em nossa linha do tempo. Então vou mudar isso e também a velocidade. E então esta é a opção da mudança. Ou você pode fazer velocidade, bem como continuar depois de arrastar depois que eu arrastei. Quer que o impulso continue depois disso? Então vamos ver o que isso faz. Eu quero ir em frente e salvá-lo e, em seguida, visualizá-lo e você pode ver que a linha do tempo ainda vai jogar. Mas se eu entrar aqui e selecionar em arrastar, eu estou clicando e arrastando isso para qualquer lugar dentro da minha linha do tempo, você pode ver que a linha do tempo é controlada por essa área de arrasto para que eu possa entrar aqui e tipo de movimento se eu quiser. E você pode ver que eu estou deixando ir agora, e ele apenas tipo de movimento e mantém esse impulso em andamento. Não faz todo o caminho. Ah, eu posso entrar aqui e apenas jogá-lo. No que eu quiser agora, eu poderia fazer dessa maneira onde eu estou apenas deslizando meu dedo através do que controlar esta linha do tempo ou a outra opção é vir aqui. Vamos fazer isso um pouco menor, e vamos não apenas controlar a linha do tempo, mas também vamos selecionar e adicionar um novo arrasto. Selecione esta caixa suspensa e nós vamos descer aqui e dizer, Elemento de controle, posição, controle, elemento Posição significa que ele vai arrastar esse objeto com o palco em si ou eu comecei Com os dedos, então eu vou ir em frente e apertar o estagiário de Comando para que ele reproduza a animação. Mas o que eu posso fazer é quando a animação começa a ser reproduzida, eu posso realmente clicar e arrastar esse objeto, e você pode ver que ele realmente controla esse objeto com base no que eu tenho. Onde quer que este objeto que estou arrastando esteja localizado no acesso horizontal para que eu possa controlá-lo na linha do tempo onde eu estou deslizando meu dedo, ou ele pode controlá-lo aqui arrastando realmente o objeto. Agora, algumas aplicações. Você pode ser capaz de fazer isso se você quiser ter uma linha do tempo. Animação como uma diferença. Se você estiver tentando explicar diferentes pontos em uma linha do tempo, você pode fazer com que o usuário realmente clique no dedo ou toque no dedo e arraste ao longo da linha do tempo e fazer com que animações diferentes comecem a ser reproduzidas. Com base nessa linha do tempo, se você não quiser que a animação ou a linha do tempo comece a ser reproduzida automaticamente, você pode parar isso, e então é apenas controlado pelo seu arrasto real. Então é assim que você faz algum arrastamento dentro de pequeno tipo. Se você quisesse ter algum tipo de lógica que, assim que você soltar isso em algum lugar, ele irá determinar se ele é descartado em uma determinada área e, em seguida, fazer alguma outra lógica que realmente teria que ser executada. Solte um script e assim você teria que entrar e determinar a posição e outras coisas, e nós entraremos em mais de script de trabalho mais tarde. Eu não quero mergulhar fundo nisso agora, mas essas são as duas opções que você tem, que ou são controladas linha do tempo eram posição do elemento de controle, e então a terceira opção entrará em mais tarde, que é o script de trabalho de execução. E é assim que você usa alguns dos diferentes tipos de ações dentro de um tipo tumulto 31. 31 linhas de tempo: Agora vamos falar de linhas temporais. Cronogramas nos dá a opção de ser capaz de criar opções de diferença ou resultados diferentes para o usuário. Então vamos em frente e começar com um novo projeto aqui. Vou em frente e salvar este projeto. Isso é só um projeto piscar de olhos por enquanto. Vou guardá-lo na minha área de trabalho, e vamos chamar isto de cronogramas e ir em frente e clicar em Salvar deles. Agora eu vou entrar nos elementos e descer para apenas erguer. Só precisamos de algo para trabalhar aqui. Então, quando você ir em frente e mover isso para o lado esquerdo e nós vamos criar várias linhas de tempo para isso, mas para ter as opções para ir para essas diferentes linhas de tempo, o que eu quero dio é muito para criar dois botões que diz Timeline um ou linha do tempo para porque você tem que ser capaz de acionar a linha do tempo em algum lugar. Eu poderia acioná-lo com a ação da linha do tempo aqui. Parece que já tenho um. Eu quero ir em frente e excluir isso, mas eu posso acionar com a ação da linha do tempo Oregon gatilho com algum tipo de entrada de usuário , como um botão Então eu vou entrar aqui para os elementos. Eu quero ir em frente e clicar em adicionar um botão e nós vamos chamar esta linha de tempo um, e nós vamos vir aqui. Basta colocá-lo no lado inferior esquerdo. Vou em frente e inserir um novo botão e vamos chamar esta linha do tempo para este ar vai ser nossas duas opções aqui que eu posso selecionar e ter isso ir para Linha do Tempo um ou linha do tempo para agora, na minha linha do tempo principal ou no meu principal. Sim, minha linha do tempo principal aqui. Eu posso ter esta opção anima e fazer o que eu precisar. Então eu vou seguir em frente e apenas fazer com que essas animações comecem desde o início e, em seguida anime para o lado direito e é isso. Se eu pressionar Salvar e depois visualizar, você notará minha opção. Meu retângulo apenas anima para o lado direito. Ótima. Isso é o que precisamos para começar. Então nós vamos em frente e apenas hits parar no disco lá. Mas agora vamos chegar às nossas propriedades vistas, e isso acabou. Se você não vê-lo, você tem que clicar no inspetor vir para a segunda opção aqui, visto inspetor e, em seguida, vir até ela, diz cronogramas de animação. O 1º 1 com o qual temos trabalhado. Você vê isso? Diz “Linha do tempo principal “, mas podemos vir aqui e adicionar linhas temporais adicionais. Se eu clicar no botão de mais, vamos em frente e chamar essa linha de tempo Um só assim eram consistentes com os botões aqui embaixo. Vamos em frente e adicionar uma nova linha do tempo e vamos dizer a linha do tempo novamente. Eu gosto de pensar neles como um tipo de, como escolher suas próprias aventuras ou resultados opcionais para esta animação para que eu possa ter diferentes animações com base na entrada do usuário. Então na linha do tempo parece que eu perdi cinto que você pode clicar duas vezes sobre ele para mudar o texto se você quiser. Quero ir em frente e selecionar Linha do tempo um. Vou selecionar este retângulo aqui, clicar no botão de gravação, mover o meu depurador por alguns segundos e depois mover isto para o lado inferior esquerdo aqui. Então essa é a Linha do Tempo 1. Essa opção vai acontecer, e então vamos em frente e selecionar linha do tempo realmente parece que eu ainda estava na linha do tempo para Oh , eu esqueci de fazer. Uma coisa é que eu esqueci de realmente selecionar isso e clique em mostrar linha de tempo. Se você não fizer isso, então você estará realmente trabalhando com a linha do tempo que você estava antes. Agora estou na linha 1. Vamos fazer a mesma coisa lá. Alguém clique no registro, mova meu depurador um pouco e depois vá para o lado inferior esquerdo. Você pode vender isso. Veja que eu tenho uma duração de dois segundos e 20,27. Isso significa que essa é a linha do tempo que acabou de ser afetada. Então eu estou bem lá. Quando você clica em Parar registro, venha para a linha do tempo para clicar na linha do tempo do Showtime, e agora você pode ver na linha do tempo para Não há realmente nenhuma opção de linha do tempo aqui, então eu vou clicar no registro aqui, e então eu vou mover meu quadrado apenas para baixo para o lado direito inferior lá para que você possa ver se isso está agora levando 2.20 segundos. E então eu vou em frente e bater. Pare de gravar. Agora vamos apenas visualizar isso por enquanto, e você pode ver que nada realmente acontece neste momento. É se eu clicar na linha do tempo uma vez ou como nada acontece porque eu não acionei aqueles para realmente aparecer. Então eu vou em frente e voltar aqui e nós vamos para a linha do tempo principal Clique na linha do Showtime, e eu vou até a Linha do Tempo um aqui. Um botão na linha do tempo e eu vou chegar às minhas ações, inspetor. Ele vem ao nosso diz no clique do mouse, Clique no plus, E eles estavam indo para selecionar uma opção para iniciar linha do tempo. Agora, qual linha do tempo ou vamos começar? Bem, neste caso, vamos começar a Linha do Tempo 1. Se esta opção estiver selecionada, ela iniciará a linha do tempo um. Agora ele pode ir em frente e selecionar a mesma coisa para uma linha do tempo para vamos como aquele botão saltar aqui, também. Onde diz iniciar linha do tempo e selecione a caixa suspensa para linha de tempo para Agora estes ar apenas opções que essas linhas de tempo vai jogar se esses botões ar selecionado. Então vamos em frente e aperte salvar e você pode ver a linha do tempo principal joga muito bem. Mas se eu ir em frente e bater na linha do tempo um ele vai realmente levá-lo de seu local anterior porque esse era o fim do tempo, como a linha do tempo principal e movê-lo para o local que definimos para Linha do tempo um. 32. 32 linhas de tempo relativas: Bem, vamos ver o que acontece se clicarmos na linha do tempo para que você possa ver que ele salta de volta para onde estava antes e, em seguida, movê-lo para baixo nesse ponto. Então, praticamente o que acontece é que ele ignora a Linha do Tempo 1, o local que foi que no tempo Linha 1 e apenas diz, Oh, bem, bem, este é o lugar onde ele estava começando antes e move-o para baixo se você quiser fazer Se ele foi movido aqui para, em seguida, passar para o lado direito, Bem, é um simples, basta clicar em marcar Mark. Se eu voltar à minha cena, Inspetor, posso ir em frente e fazer esta linha do tempo. Se eu selecionar isso, apertamos a linha do tempo só para ter certeza de que esse é o único. Sim, esse é o que temos. Então eu quero clicar neste botão relativo, e então eu vou ir em frente e clicar no botão relativo para linha do tempo também. Se eu apertar salvar a visualização agora você pode ver a mesma coisa acontece na linha do tempo principal por Click Timeline. A mesma coisa vai acontecer, mas o que vai acontecer a tempo, como dois é que ele vai levá-lo deste local e movê-lo para o local final que foi isso antes de eu fazer a mesma coisa com linha do tempo uma vez. Então, se eu clicar em Linha do tempo um, ele vai tirá-lo de sua localização atual e movê-lo para cima. Então é por isso que eu gosto de pensar nisso como escolher sua própria aventura ou diferentes opções que você pode selecioná-lo com base na entrada do usuário. Você pode ter um inimigo baseado em dois locais diferentes ou diferentes, e então você pode até mesmo acionar essas coisas diferentes para acontecer na linha do tempo também. Então, se eu voltar para a linha do tempo principal, vamos clicar na linha Showtime. Eu vou descer aqui e nesse gatilho de linha do tempo, eu vou em frente e adicionar uma ação de linha do tempo. E essa ação vai começar a linha do tempo, e vamos começar a Linha do Tempo 1. Então, agora o usuário nem sequer tem que inserir que eu poderia ir em frente e bater, salvá-lo, vai animar mais e, em seguida, começar automaticamente a animar sobre o lado esquerdo. Isso também é uma maneira que você poderia se você quisesse sequenciar suas linhas temporais e não tê-las todas na linha do tempo principal e você queria fazer uma linha do tempo, jogar esta outra, e então uma vez que isso é feito, jogar esta linha do tempo, é meio que separá-los. Você pode fazer isso também, então cabe a você sobre isso. Mas é pelo menos assim que você cria novas linhas de tempo e como aciona essas linhas de tempo, tanto por meio de entrada do usuário quanto por meio das ações da linha do tempo. 33. 33 loop de tempo: E se você quisesse fazer um loop na sua linha do tempo e começar uma e outra vez? A menos que um usuário pare a linha do tempo, bem, essa é uma opção que enfraquece fazer. Então, vou em frente e vir aqui para o exemplo anterior que tivemos. Tínhamos um par de cronogramas diferentes, mas não preciso mais desses cronogramas extras. E eu não preciso desses botões extras. Eu vou manter um dos botões, e eu realmente vou dizer parar animação que vai parar a animação. Tirando isso, vai continuar repetindo uma e outra vez. Eu quero me livrar deste anterior que eu tinha antes desta ação cronológica. Nós vamos adicionar outro aqui em um segundo, mas eu só queria me livrar disso. Então, agora, se eu for em frente e visualizar isso, ele deve ser inimigo. Mas então ele vai parar nesse ponto. Então, e o que eu quero fazer é que eu quero um loop de novo e de novo. Então só começa. Ele pára e começa e tudo automaticamente. Então eu vou seguir em frente e no final desta animação, então eu vou apenas certificar-me de meus depuradores no final da animação em si. Vou adicionar uma ação de linha do tempo, e essa ação vai seguir em frente e dizer, Iniciar linha do tempo, linha do tempo principal. Então, agora, se eu seguir em frente e bater, salvar e visualizar, ele vai chegar a esse ponto e então ele vai começar automaticamente de novo. Se eu quisesse, eu também poderia jogar isso ao contrário. Vamos em frente e basta clicar duas vezes sobre isso e você pode ver isso como jogar ao contrário. Então eu vou ir em frente e bater, salvar e pré-visualizar, e ele vai pegar isso e vai animá-lo de volta para onde estava antes. Então ele vai ter esse efeito saltitante. Percebemos que uma vez que chega ao contrário, não há ação para realmente começar de novo. Então o que eu vou fazer se eu quisesse ter um tipo de salto para frente e para trás, eu vou adicionar uma nova ação de linha do tempo, e eu vou seguir em frente e bater linha do tempo inicial, e desta vez eu não preciso fazer uma jogada ao contrário. Vai começar a linha do tempo lá, por isso vai saltar todo o caminho para o lado direito eu ia voltar para o lado esquerdo. Vai acertar aquela nova ação e voltar para trás. Então agora temos que tipo de loop infinito de ir e voltar. Pode haver algumas vezes em que você quer que pode haver. Às vezes não queremos isso, então você quer dar ao usuário a capacidade de parar a animação. Então agora vamos voltar para o hype aqui. Vou selecionar essa ação, passar para as ações do mouse e, em vez de iniciar a linha do tempo, vou selecionar a caixa suspensa para pausar a luz do tempo. Então, agora, se eu pressionar Pausar linha do tempo, qual linha do tempo eu quero pausar? Bem, vou pausar a linha do tempo principal. E então agora vamos em frente e os hits pré-visualizar. Você pode ver que nossa animação começa a fazer loop para frente e para trás. Bem, vamos em frente e bater Stop animação e você pode ver a animação pára morto em seus trilhos. Bem, como eu comecei de novo? Bem, eu posso entrar aqui, e eu posso ir em frente e adicionar um novo botão se eu quiser. Vamos em frente e adicionar um novo botão que diz Iniciar animação, e poderíamos fazer um gatilho simples para continuar a linha do tempo. E se eu quisesse saltar para um certo ponto na linha do tempo, eu poderia realmente ir para o tempo da linha do tempo na linha do tempo e dizer, ok, ir nessa certa quantidade de segundos. Então eu vou ir em frente e bater, Salvar aqui, hit preview, parar a animação, Mas, em seguida, clique em Iniciar a animação para iniciá-lo novamente para que eu pudesse ter toda essa animação. Eu posso dar ao usuário a capacidade de pausar a animação para parar a animação e, em seguida, retomá-la quando eles querem voltar para. E é assim que você faz isso através desses controles diferentes e também como você realmente faria loop de sua animação se você quisesse um loop de ah contínuo de animações ou algum tipo de vontade que continua a animar ou algum tipo de fumaça que continua a animar. Você queria repeti-lo repetidamente. Você pode fazer isso através desses gatilhos da linha do tempo 34. 34 a criar cenas: Tudo bem. A próxima coisa que vamos falar são cenas. Agora, as cenas estão dentro do tipo tumulto e são basicamente páginas diferentes que você pode navegar Teoh Então você pode entrar aqui e na tela principal aqui. Se eu vir para a esquerda dentro, eu posso clicar em cenas aqui, e isso vai me dar uma lista de todas as diferentes cenas disponíveis para mim dentro deste projeto. Agora a primeira cena é uma cena sem título. E se eu quiser isso ou se eu quiser navegar para isso mais tarde, eu posso querer mudar isso para algo que faz um pouco mais de sentido. Então vamos chamar de cena principal. E então agora eu posso vir aqui e eles podem adicionar novas cenas. Então eu vou clicar neste ícone mais para adicionar outra cena, e você pode vê-lo adiciona outro sem título visto. Então vamos em frente e nomear este parecer e, em seguida, criar mais um que diz parecer três. Agora, o conteúdo que você tem dentro de uma cena nem sempre é transferido para outra cena. Então, se eu entrar aqui e clicar no retângulo. Tenho a minha própria linha do tempo para isto, e tenho a minha. Nós só vamos esticar isso para fora disso. Então eu tenho minha própria linha do tempo com meus próprios objetos aqui. E se eu chegar a parecer que eu tenho. Esse objeto que estava na cena principal não está nesta cena. Então, ao contrário das linhas do tempo, se eu voltar para a cena principal e entrar na cena, inspetor, inspetor, ao contrário das linhas do tempo onde ele compartilha os mesmos objetos que estão no palco através de todas as diferentes linhas do tempo, as cenas em si não compartilham nenhum conteúdo. A menos que você faça algo um símbolo persistente, um símbolo persistente significa que ele estará em uma cena, e então ele irá automaticamente para todas as cascatas de cena para cada cena. Ou você pode especificar quais cenas não têm e entregar uma cena por cena. Mas isso é com você. Mas no principal visto, você pelo menos tem. Esse é um objeto aqui, e você pode trabalhar com esse objeto. Mas quando você está pronto para seguir em frente para algo completamente diferente, é aí que você criaria uma nova cena. Então, vou apagar isso por enquanto. Ok? Na verdade, deletou o meu visto principal. Então eu quero ir em frente e criar essa cena novamente, e eu posso arrastar e soltar essas cenas, organizá-las como eu quiser Teoh. Então vamos em frente e chamar essa cena principal, e eu vou inserir um texto. Vou fazer a pergunta ao usuário. Qual é a melhor resposta? Eu vou ir em frente e posicionar isso no meio e vamos selecionar retângulo e vamos em frente uma inserção nos lábios aqui e eu vou dar ao usuário uma pergunta aqui e com base em sua escolha, eu vou mostrar-lhes Ah, escolha ou vou mostrar-lhes a resposta. Então, na primeira cena, ou realmente parece aqui, eu vou ir em frente e inserir algum texto e dizer, Correcto. Era um retângulo. E só para fazer um pouco mais de sentido, vamos para cá. E vamos mudar isso para selecionar o retângulo. Então agora aqui o desafio deles é selecionar o retângulo, e então se eles selecionarem, ele vai chegar a este. Se eles não selecionarem isso, então ele vai dar-lhes resposta de Desculpe, como isso não foi correto. Tudo bem, cena tão simples. Mas, novamente, é mais trabalhar através da lógica para garantir que entendemos o que precisa acontecer aqui. Então eu vou ir em frente e voltar aqui e eu vou inserir um gatilho que se isso for selecionado, ele vai ver, se isso for selecionado, vai realmente ir para ver três. Então eu vou em frente e selecionar esse objeto. Venha aqui para o painel de ações, venha para o meu mouse, clique e, em seguida, quando é como a ação para saltar para visto e eu poderia selecionar a caixa suspensa para ver. E então a próxima coisa é, eu vou selecionar a Ellipse, e eu vou vir aqui na inação para saltar para ver, e este vai ser visto três. Se eu quisesse ir para a próxima cena, eu poderia fazer isso. Se eu quiser ir à primeira cena, pode fazer isso. A última coisa que posso fazer isso, mas neste caso, vou especificamente ver três. Eu não quero selecionar visto pela última vez aqui, nem saber o que é, a última cena. Eu não quero selecionar isso porque eu posso adicionar outras páginas mais tarde. Agora, se eu seguir em frente e bater, salvar e visualizar, você pode ver que há minha opção aqui. Posso selecionar o retângulo que diz “ Correcto”. Esse era o retângulo Nós ir em frente e bater, Atualizar para voltar agora. Se eu selecionar Elipse, ele selecionará a Elipse ou irá para a opção Elipse. Eles são ótimos. Então isso está funcionando muito bem. Então isso está funcionando. Então, no próximo vídeo, vamos falar sobre a transição de uma cena para outra cena e as diferentes opções que você pode fazer para isso. 35. 35 Transistions de cena: No último vídeo, falamos sobre a criação de novas cenas e acionar com um clique de botão ou uma ação do mouse para ir para uma determinada cena. Agora o que vamos fazer é fazer a transição para a cena porque atualmente, se você selecionar um desses objetos, ele vai para aquela cena. Então, e se você quisesse fazer a transição que fosse desejada, algum tipo de efeito de animação de paralaxe que vai para a próxima cena? Bem, há algumas opções que podemos escolher. Então, se eu selecionar esta opção e voltar para ela, diz no mouse Clique, Eu apenas gosto desta opção onde diz transição e eu posso ver que Aiken ir para um fade cruz, usar uma troca de fade cruz ou este empurrão realmente me permite obter que efeito de paralaxe para que eu possa ir empurrar da esquerda para a direita, empurrar o dedo direito para a esquerda, empurrar de baixo para cima ou empurrar de cima para baixo. E então eu quero ir em frente e selecionar um desses e, em seguida, hits, salvar e visualizar. Selecione uma dessas opções, e você pode ver que ele empurra isso de cima para baixo. Talvez eu queira ter um código para baixo como se estivesse indo de uma cena para outra folha de cima para baixo. Então eu vou ir em frente e selecionar aquele fundo seguro para cima e, em seguida, ir em frente e clicar em pré-visualização e você pode ver que anima para fora. E a nova cena se anima agora por causa do fundo. Posso não ser capaz de ver isso muito bem, então vamos em frente e mudar a cor da tese een. Aqui. Eu quero ir em frente e mudar a cor de fundo para algum verde e, em seguida, na cena para eu vou mudar a cor de fundo para algum tom de vermelho. Agora, se eu apertar Salvar, você pode ver que toda a cena aqui está lá, e como eu vejo, rola fora e a nova cena entra. Agora está vermelho, uma coisa a ter em mente. Isso se você alterar a cor do plano de fundo da primeira página. Ele vai realmente herdar para ser o fundo de tudo isso. Se você clicar sobre isso e a nova página vem com uma cor diferente, o lado de fora ainda será cor ruim, então se eu clicar em habilidade, ele vai aplicar isso a 100%. E então, se eu entrar em parecer, eu quero ter certeza de que esta escala também é aplicada a 100% lá. E então, agora, se eu for em frente e clicar em pré-visualização, clique nesse retângulo, então as páginas inteiras vão deslizar para fora e as novas páginas vão diminuir. Então não é só essa seção, vai ocupar 100%. Então, pelo menos, é assim que você faz a transição ou aplica uma transição para ir de uma página para outra dentro de um tipo tamal. 36. 36 Transistions: já falamos sobre como adicionar um gatilho usando o painel de ações. E assim, quando você clicar sobre isso, ele irá navegar para a próxima página ou como acionar para uma cena diferente, não apenas a próxima cena em si. Mas eu quero falar sobre mais um gatilho que você pode fazer para ser capaz de desencadear essas transições de treinamento para outra cena. Então eu quero entrar na cena, inspetor, inspetor, e quando um pergaminho aqui e você vai notar que no Deslizar para a esquerda, deslizar para a direita, deslizar para cima e deslizar para baixo. Temos certos açúcares que não se aplicam a objetos específicos, mas se aplicam a qualquer lugar da cena. Basicamente, e esta é uma ótima maneira de especialmente para celular, para permitir que a navegação seja apenas intuitiva, para ser capaz de deslizar para cima e deslizar para baixo em si. Então eu vou ir em frente e selecionar ou dizer, deslizar para cima. Eu vou selecionar o gatilho e eu vou saltar para uma cena e eu vou ir em frente e selecionar a cena específica que diz Cena dois, e eu vou ir em frente e mantê-lo em empurrar de baixo para cima, e então eu também posso mudar o duração aqui é bem, então você pode decidir quanto tempo isso vai realmente levar para ir de uma cena para outra cena. Eu vou bater, salvar e bater pré-visualização, e agora eu vou deslizar para cima e você pode ver assim que eu deslizar para cima. Então eu cliquei e arrastei de cima de baixo para cima e desliza automaticamente ou transições automaticamente como se meu deslize em si acionasse essa animação, essa transição. Então eu vou entrar aqui e fazer a mesma coisa com essa cena. Então agora eu estou em cena para eu quero deslizar para baixo para voltar para aquela página. Então eu quero ir em frente e salvar saltou para parecer, e então eu vou dizer, visto cena principal. E agora vai para o lugar de baixo para cima. Vai ser de cima para baixo. Assim, é a navegação em si. Se eu fui para baixo uma vez, eu não quero que ele vá para baixo novamente, a fim de voltar uma página e queria ir de onde ele está atualmente de volta para o topo aqui. Então eu vou deslizar para baixo, e então eu vou ir em frente e deslizar aqui para cima. Vai me levar de volta ao local onde a cena estava antes. Então, apenas uma maneira de criar esta navegação, para ir de uma cena para outra cena e obter esse tipo de efeito de paralaxe para ir como se estivesse indo de uma seção para outra seção. Então é assim que você faz isso e disse que tipo tumulto. 37. Esculpir a 37 níveis baseados em century: Tudo bem. Agora vamos falar de maneiras que você pode tornar seus aplicativos de tipo tumult responsivos, que eles se adaptem aos diferentes tamanhos de tela. É redimensionar é onde âncoras para diferentes partes da tela também. Mas o ponto chave é que ele simplesmente não permanece do mesmo tamanho que ele muda e uma resposta para as diferentes telas do dispositivo. Agora há uma maneira de ser capaz de criar layouts, que, em outras palavras, são como pontos de quebra dizendo, Ok, agora isso vai desaparecer. Neste tamanho, isto vai chegar a este tamanho. Isto vai parecer um pouco diferente neste tamanho. Há uma maneira de fazer isso. Mas antes de entrarmos nessa parte, vou falar sobre como tirar vantagem e fazer com que seu palco aproveite a tela inteira. Então, primeiro de tudo, eu vou ir em frente e responder um texto ou um elemento de forma, vir para o retângulo, e nós vamos apenas colocar este tipo de no lado direito do palco por padrão. Se eu visualizar isso, você verá que ele está definido para cima no lado direito. É meio que no meio da própria caixa. É meio que certo por aqui porque este agora, tamanho atual é de 600 por 400 isto é definido nas propriedades da minha cena na minha área de inspetor, e realmente não vai além disso. Então, se eu for em frente e eu redimensionar isso, vá e pegue aquilo, você pode ver que ele não responde ou não se adapta aos diferentes tamanhos. Ele praticamente permanece do mesmo tamanho. Podemos mudar isso dentro do tipo tamal. Basta entrar na cena, inspetor e no tamanho da tela, você pode selecionar a caixa suspensa. Você pode ver os diferentes tamanhos de tela disponíveis para você se você estiver tentando direcionar inicialmente um determinado tamanho. Mas se você quiser que isso se adapte a toda a tela, tudo que você precisa fazer é clicar nesta caixa de seleção de escala ao lado da largura e da caixa de seleção de escala ao lado da altura. Agora, o que vai acontecer é que se eu salvar isso na pré-visualização, você vai notar que ele realmente se moveu para o lado esquerdo. A razão é porque isso agora se tornou responsivo. Então ele ocupa toda a tela. Não podemos dizer isso só com o fundo branco. Podemos dizer que, no entanto, se eu entrar aqui e mudar o fundo para uma cor diferente. Então eu vou mudar esse hit de fundo, entrar, e agora você pode ver que ele está adaptado para o mais recente ou agora está pegando a tela inteira . Ah, e assim a página inteira em si tem o novo tamanho. Se eu entrar aqui e eu queria Teoh criar um layout diferente, eu tenho isso de forma responsiva fora, mas vamos entrar nessa seção nos próximos vídeos. Mas, por enquanto, vou em frente e selecionar esse objeto. Você notou que este objeto não responde com base no meu tamanho porque isso não é uma base percentual e sua âncora para a mordida D cair. Ele está ancorado na parte superior e no lado esquerdo da tela para que ele não se adapte ou flua com o lado direito da tela. Se eu estava re dimensionando isso à esquerda, você pode ver que ele tipo de permanece o mesmo ou está no mesmo lugar no lado esquerdo, mas ele não faz isso no lado direito. Se eu quisesse que isso fosse ancorado no lado direito, eu poderia entrar em minhas métricas aqui, e eu posso vir para o layout flexível e você vai notar que eu tenho a opção de fixar e tamanho. Então isso me permite realmente fixar isso nos direitos, na esquerda, na parte superior ou na parte inferior. Eu posso fazer todos os três. Aiken fazer todos os quatro que eu poderia fazer para Aiken fazer um. É bastante flexível lá, então eu vou ir em frente e bater, salvar e visualizar, e você vai notar que ele meio que muda tanto para o lado esquerdo quanto para o lado direito. Está ancorando assim. Está ancorando à esquerda, e está ancorando no topo. No entanto, não está ancorando na parte inferior. Se eu quisesse ancorar no fundo ou pino no fundo, eu poderia fazer isso. Você pode ver que ele meio que me dá uma prévia dizendo que isso vai ser no meio e vai se adaptar aos diferentes tamanhos, então ele muda quando eu subir e descer muda quando eu vou para a esquerda e direita e assim por diante. Então, essas eram maneiras diferentes de adaptar isso ou penitência se eu fizesse, se eu quisesse, principalmente ficar do lado direito da tela. Posso clicar no pino à esquerda e ter certeza de que está desmarcado. Ela está desmarcada quando está cinza, está marcada quando está azul, e agora se eu apertar salvar a visualização, você pode ver isso no lado esquerdo. Se eu tipo de ajustar que ele praticamente permanece o mesmo. No entanto, quando ajusto o lado direito, ele se adapta e fica do lado direito. Então eu posso tipo de consertar as coisas em certas áreas e ter coisas sempre em uma determinada área aqui . Não só posso fazer isso com o posicionamento onde os pinos, mas também posso fazer isso com o dimensionamento para que você possa ver essas duas setas indo para a esquerda e direita e duas setas indo para cima e para baixo. Se eu queria ajustar e ter a largura ser uma porcentagem, por que basta selecionar essa opção? E você pode ver que essas setas agora se tornaram destacadas. Eu também posso selecionar as setas superior e inferior, e agora ele vai esticar tanto, hum, hum, a largura sábia e altura sábia. Se eu seguir em frente e pressionar Salvar na pré-visualização, minha caixa agora se tornou um pouco maior. Ao redimensionar minha tela, você pode ver que a caixa será redimensionada dependendo da minha largura e altura do meu navegador. Então, fazendo tudo isso, você pode ter coisas que ficam menores, aumentar a âncora ou fixar em certos lados da tela. Não muda o conteúdo. Eu não posso dizer Ok, uma vez que chegar a este ponto, venha aqui. É aí que os diferentes layouts entrarão em jogo assim que entrarmos nos layouts. Mas isso, pelo menos, permite que você crie alguma capacidade de resposta e faça com que as coisas ancorem em determinados locais também. Se eu vir aqui e selecionar essa opção, você pode ver que eu tenho mais algumas opções aqui para o comportamento de escala. Posso selecionar esta caixa suspensa. Eu posso ver psiquiatra para caber ou expandir para preencher. Se eu clicar em encolher para caber aqui, vamos ir em frente e re tamanhos e você pode ver que ele permanece um pouco mais proporcional em vez de esticar o com ele mantém em sua proporção lá, se você quiser. Se esse for o efeito desejado, você pode fazer isso ou expandir para preencher. Você pode ver que ele faz uma coisa semelhante aqui, apenas da maneira que ele meio que faz isso em segundo plano. Você pode fazer expandir para sentir, ou você pode fazer encolher para caber, ou você pode mantê-lo. É padrão se esticar, mas isso irá esticar a largura e a altura também. Então é assim que você faz parte da escala e ajusta sua tela para ser ajustada automaticamente para os navegadores de tamanhos diferentes. E é assim que você faz alguns layouts flexíveis com objetos diferentes. Você pode fazer isso com texto. Você pode fazer isso com elementos de diferença, botões e coisas assim e isso será automaticamente redimensionado para elementos de posição em determinadas áreas. Então você pode começar se você quiser Ah, mudar com base no tamanho da tela. É aí que você começará a adicionar pontos de interrupção ou começará a adicionar layouts diferentes para que possamos entrar nesse vídeo no próximo vídeo de como criar layouts diferentes e adaptar seu conteúdo com base no tamanho da tela 38. 38 como criar layouts diferentes: no último vídeo, falamos sobre ajustar o tamanho da tela para responder automaticamente e não apenas tirar. Oppa define tamanho, mas realmente ocupam o tamanho de todo o seu navegador. Mas pode haver momentos em que você precise ajustar seu conteúdo com base nos layouts. Então é aí que a opção de layouts no lado superior esquerdo entra em jogo. Se eu selecionar essa opção, ela me dará um novo painel chamado Layouts. Se eu quisesse esconder cenas por enquanto, eu poderia ir em frente e desmarcar cenas e apenas ter minha opção de layout agora por padrão. Este é o layout inicial que eu recebi, mas eu posso vir aqui e eu posso adicionar novos layouts, e eu posso renomear esse layout também. Então eu vou chamar este padrão, e eu vou ir em frente e clicar no ícone de mais, e isso me dá a opção de ajustar ou criar. O tamanho é baseado no iPhone, o iPad em Portrait, o iPad em Paisagem e, em seguida, desktop também desktop. Agora estamos em cerca de 600, então estamos meio entre estavam realmente entre o iPhone e o iPad. Inicialmente, eso podemos querer projetar o retrato iPad. Podemos querer projetar a paisagem do iPad e assim por diante. Então vamos em frente e primeiro de tudo, começar com o retrato do iPad e ele vai me dizer o que o ponto de ruptura IHS eo ponto de interrupção agora é 7 68 Eu vou ir em frente e clicar em adicionar um layout. Agora, isso vai funcionar para qualquer coisa que chegue a esse tamanho de cerca de 7 68 Então tablets Android basicamente, já que você está trabalhando com um Mac, eu acho que é por isso que eles só têm os tamanhos IOS lá. Mas qualquer coisa que chegue a este ponto, como se fosse um tablet Android, irá automaticamente redimensionar ou fazer com que esses pontos de quebra aconteçam nesse tamanho certo. Então, vou diminuir o zoom. Isso é meio grande, e então eu vou pegar meu zoom na parte superior e diminuir o zoom para que eu possa ver um pouco mais do meu palco para que você possa ver este é o tamanho do retrato do iPad. E então qualquer coisa que eu fizer aqui vai realmente se adaptar ou mudar dependendo desse tamanho, então você pode ver aqui o padrão se eu mudar novamente é sobre o lado direito , mas o retrato do iPad agora está sobre o lado esquerdo. Então, se eu apertar salvar visualização, você pode ver o lado esquerdo era um pouco maior do que o que um iPad ou do que o 600. Então o que vai acontecer é quando eu começar a redimensionar e eu chegar a esse ponto 600, você pode ver que meu objeto mudou, e agora ele está usando esse layout em vez desse outro layout. Então, se eu quisesse ser muito específico, eu poderia vir aqui e adicionar uma paisagem de iPad aqui. Vamos em frente e adicionar morcegos e você vê que ele ainda tem o meu conteúdo de cima. Mas agora eu posso dizer, OK , bem , no modo paisagem, ele vai ser agora no lado inferior direito. Eu posso ajustar o tamanho, eu posso ajustar a inteligência, e você pode ver que isso não afeta o tamanho ou a largura do meu outro objeto. Bem, o que acontece se eu tiver uma animação? Bem, vamos entrar aqui. Vamos adicionar uma animação. E eu só vou mover meu cursor. Minha de barrade lavagem para o lado direito e mova isso e vá em frente e desmarque isso. Então, se eu vir aqui para o retrato do iPad, você vai notar que a animação não acontece. Então eu tenho diferentes opções de linha do tempo que esses tamanhos diferentes e ele pode criar uma experiência específica real para o retrato iPad ou uma experiência específica para o cenário iPad ou experiência específica para o iPad ou o iPhone ou desktop Agora. Normalmente, o tamanho inicial do hype é muito pequeno. 600. Então eu realmente gosto de me livrar desse layout. Aiken, direito, clique nele e vá para excluir layout. E então eu gosto de mantê-lo no iPad Paisagem iPad retrato em um desktop lá dentro, um para os tamanhos maiores. E então eu quero ir em frente e adicionar um iPhone aqui novamente, não é. Basicamente, qualquer telefone Android que chegará a este ponto. Você pode ir em frente e ainda desenvolvê-lo para esse tamanho, e então qualquer telefone Android vai aproveitar esse tamanho. Não é específico para o iPhone, que significa que este tamanho só vai funcionar no iPhone para que eu possa vir aqui e redimensionar isso e dizer OK no iPhone. Lá vamos nós. Podemos ir em frente e vai ficar assim. Então, eu vou bater em segurança e pré-visualização, e eu vou mostrar a vocês um exemplo aqui. Isso realmente vai me deixar entrar aqui muito rápido e eu vou mostrar a vocês como visualizar isso em diferentes dispositivos. Se estiver a utilizar o safari, se estiver a utilizar o Chrome, é um pouco diferente. Mas no safari, se você apertar o comando opção são ao mesmo tempo, ele vai realmente entrar em uma pré-visualização aqui, e você pode ver o que isso vai se parecer com os diferentes tamanhos. Então temos um iPhone S. E. Temos um iPhone 6. Temos um iPhone 6. Além disso. Se eu clicar nesse ícone de novo, ele vai girar para um tamanho diferente. Se eu vir aqui para o iPad Mini 4 em Paisagem, você pode ver que nossa animação acontece. Bem, vamos girar isso para o modo retrato, e você pode ver agora isso é o que vai parecer um retrato. Agora. O iPad Mini quatro e o iPad Air dois são praticamente do mesmo tamanho. Então, se eu mudar aqui, isso me permite ver como vai ficar na paisagem. É assim que vai parecer no modo retrato. Eu também posso entrar no iPad pro, e eu posso ir para tamanhos diferentes também. Tem uma barra de arrasto no lado esquerdo, esquerda aqui, lado direito aqui e depois o fundo. Então, se eu tiver um tamanho de tela muito específico que eu queria tentar, eu posso fazer isso também. Agora o que? Como se chega a esse tipo de coisa dentro de um cromo? Se você está acostumado a usar o Chrome, você vai entrar aqui onde você vai ver e, em seguida, ir para o desenvolvedor, vir para ver as ferramentas de código-fonte ou desenvolvedor? Eu vou para ferramentas de desenvolvedor aqui, e eu estou indo para clicar nesta barra de guia dispositivo ou barra de ferramentas, e isso vai realmente me permitir ajustar o meu tamanho diferente de revisão meus tamanhos diferentes aqui. Então eu de 56 mais seis iPad, iPad, Pro e Galaxy nexus e outras coisas. Se eu clicar sobre isso, você pode ver o que você é conteúdo diferença vai ser com isso. Se você usa cromo, eu costumo usar safari. Mas se estiver usando cromo, é um bom caminho. Para fazer isso também. Para sair dele, basta clicar em Option Command são novamente, e que irá levá-lo para fora dessa área de visualização. Então é assim que você cria os diferentes layouts e adiciona novos layouts para os diferentes tamanhos de tablets, desktops e telefones no próximo. Vamos falar sobre a criação de um tamanho personalizado se você souber que está tentando segmentar dispositivos diferentes. E não é um desses tamanhos diferentes, e você queria criar um personalizado. Vamos falar sobre isso no próximo vídeo. 39. 39 pontos de fuga: Então, nos últimos vídeos, falamos sobre ajustar sua tela para que automaticamente aproveite todo o tamanho da tela . Falamos sobre a criação de um novo layout para que você possa obter conteúdo específico para layouts específicos nos diferentes layouts disponíveis por padrão. Mas o que acontece se você tiver um layout muito personalizado ou quiser? Digamos que, entre iPad, retrato e iPhone, você queria ter um layout para iPhone six plus ou algo assim. Bem, é aí que você pode entrar nos layouts, e você pode realmente adicionar um novo layout apenas dizendo ponto de quebra vindo aqui e ajustando isso com dizer, ok, bem, eu Quero ter algo em torno de 500 500 em si e então eu posso vir aqui e dizer, Ok, agora isso é de 500 a 768 Ele vai ter este layout. Eu também posso vir aqui em minha cena, inspetor ajustando ou adicionando o novo layout responsivo. Eu posso vir aqui e dizer Adicionar novo layout e ele vai fazer a mesma coisa para que eu possa adicionar nos layouts iPad os layouts de desktop. Se eu ainda não os comi. Ou você pode vir aqui e tamanho injustiça e economizar 500 clique em adicionar novo layout. Agora ele vai admitir layout entre o meu iPhone e o meu retrato iPad, e eu posso vir aqui e dizer, Ok , bem, isso vai ser iPhone 6 mais ou iPhone 7 mais ou, você sabe, seja qual for o tamanho que for no momento. Então agora eu tenho isso. E se eu quisesse, poderia vir aqui e ajustar a altura. Se eu quisesse ter a altura inicial, seja alguma coisa. Mas a escala praticamente aproveita a altura. Então isso vai ser 100% do hype de qualquer maneira, então você não precisa ser muito específico. Pelo menos tem que chegar ao ponto inicial dizendo, OK, aqui é onde isso vai ser. Outra coisa que você pode querer aproveitar é chegar ao retrato do iPad . Vamos apenas ir em frente e entrar em nossas métricas. Inspetor, você pode querer realmente descer e ajustar a esquerda no topo na altura, ou lá com inicialmente. Então, a esquerda está vindo do lado esquerdo. Isto vai realmente ajustar a partir do lado esquerdo, e este vai ser o posicionamento inicial, mesmo que este está ancorado no lado direito, você ainda ajustar o posicionamento inicial sobre o lado esquerdo agora, então isso é apenas algo a ter em mente que até sabe que está ancorado à direita. Ele vai ser originalmente posicionado nisso, então você sempre tem que colocá-lo originalmente em algum momento. Mas quando ele está se adaptando ou redimensionando para toda a tela, basta ter em mente. Isso é Ah, onde quer que você coloque , vai ser inicial, e vai ser uma porcentagem nesse ponto da sua coisa inicial, vai ser essa porcentagem 40. 40 ações em JavaScript: nós passamos por muitas das partes de ser capaz de animar seus diferentes objetos, sendo capaz de ajustar algumas das configurações dentro do tipo tumult. Agora vamos falar sobre adicionar algumas funcionalidades personalizadas usando ações JavaScript dentro. É um tipo de toupeira. Então eu tenho um projeto de amostra aqui. Vou continuar e guardar isto na minha área de trabalho. Vou chamar de amostra de novo. Estou mais preocupado com apenas uma espécie de obter a funcionalidade para baixo, e, em seguida, espero que mais tarde, e os vídeos de treinamento terão diferentes exemplos que você pode trabalhar através. Mas eu vou seguir em frente e apenas apertar salvar aqui, e então eu vou entrar e criar um elemento. Vou descer e limpar, clicar no retângulo. E assim temos algo para trabalhar no palco. Agora, para adicionar um código JavaScript personalizado em um palco ou em qualquer objeto de diferença, você precisa entrar na cena, inspetor, ou você precisa entrar nas ações, Inspetor. Se eu entrar na cena, Inspetor, Inspetor, este é o lugar onde ele pode entrar e adicionar em ações para ver carga visto em deslizar para a esquerda em, deslizou para a direita em, deslizar para cima, para baixo e assim por diante. Então, se eu quisesse ter algum código JavaScript personalizado em um desses elementos ou em uma dessas ações que podem fazer isso aqui, eu vou em frente, basta selecionar esse objeto. E eu quero que este código seja executado assim que este selecionar nele. Então eu vou vir aqui e selecionar este mouse ou as ações que mão ações inspetor, e eu vou vir e dizer, OK, OK, vamos apenas ter isso acontecer nos cliques do mouse Eu quero clicar em Plus selecionar a gota caixa abaixo e eu vou descer para executar JavaScript. Queremos rodar um pouco de javascript. Agora o que acontece está dentro do meu recurso é que você vai notar assim que eu criar uma função JavaScript vai adicioná-lo. Dentro do meu recurso é porque a coisa boa sobre isso é que eu posso reutilizar esta função JavaScript com qualquer botão ou qualquer elemento que é realmente chamá-lo. Assim, uma vez que a função criativa, é reutilizável. Dentro, é uma passagem múltipla, então vamos descer e selecionar esta caixa suspensa. Se eu já tivesse criado uma função, ela realmente mostraria as diferentes funções aqui . Mas neste caso, eu vou ir em frente e apenas clicar em nova função, porque eu não tenho nada iniciado ainda. E isso é o que mostra seus shows. Aqui, Pops, abra uma nova guia, mas volte para aqui para ver este testamento sem título. Isso me permite voltar para a linha do tempo, e você vai notar que no recurso é que agora temos essa função sem título. No entanto, se eu voltar a função intitulada, a primeira coisa que eu quero fazer é que eu quero nomear esta função. Agora, isso é que você está trabalhando com todo o seu código não precisa entrar nesta função. E então vamos em frente e apenas nomeá-lo algo que clique duas vezes onde diz função sem título. E eu vou dar um nome a esta amostra de Funks ou beliche, hum, e ter esse visto. Vamos apenas adicionar um a ele, porque nós vamos adicionar várias funções, mas nós vamos apenas ir em frente e adicionar isso aqui. Não, está passando alguns parâmetros. Ah, hype, elementos de documento e painel de eventos. Este não é um curso de roteiro de trabalho. E assim, se você quiser aprender tudo sobre JavaScript? Eu recomendo que você volte a aprender dojo dot nets e inscreva-se no nosso curso JavaScript lá. Então eu vou em frente e entrar aqui e nós vamos apenas fazer um alerta simples. Então eu vou abrir Prince Estes parênteses próximos, aspas abertas, citações próximas e nós vamos apenas dizer, Ei, nós vamos apenas alertar um simples Ei lá agora. O que vai acontecer é que se eu voltar para o meu direito visto, você vai notar que a função dentro do recurso é realmente mudou. Então, isso irá atualizar dependendo da guia aqui também. Ele irá atualizar dependendo do que eu nomeei aqui que as mesmas regras se aplicam com JavaScript. As suas funções têm de ser um nome. Eles não podem ter espaços ou algo assim. Então siga os mesmos métodos até onde você está nomeando. Tudo bem, então vamos em frente e ver se isso funciona. Eu vou bater, salvar, e então eu vou pré-visualizar isso, e assim que eu clicar nele é quando essa função vai acontecer e você pode ver aqui é minha função javascript que faz seus alertas simples dentro de lá, no entanto, você pode querer adicionar funcionalidades adicionais além de apenas alertar se você quiser, há muito que você pode dio se eu precisar voltar para esta função. Por alguma razão, se essa guia está fechada, Eu poderia voltar para o recurso é e clicar duas vezes sobre isso ou clique para baixo em sua fonte. No entanto, a maneira mais rápida que eu encontrar é apenas clicando sobre isso e, em seguida, clicando nesta seta aqui e que irá realmente aparecer na nova aba e me levar de volta para essa função . Há muito que você pode fazer com o JavaScript, mas você precisa saber como referenciar seus documentos em azedo seus elementos dentro do tipo tumult . E o bom disso é que diz que estamos aqui. OK, o elemento é o documento masculino HT que acionou a função. Então, o que desencadeou esta função que serão os elementos. O evento é Theo evento que é acionado esta função. Basicamente, se for um evento de mouse ou um toque ou algo assim, você pode determinar isso e usá-lo como um tipo de se e declarações se você precisar. No entanto, você pode não saber tudo o resto aqui, por isso, na parte inferior. Temos uma lista de recursos diferentes é que você pode realmente fazer. Vamos rever vários desses nos próximos vídeos, mas por enquanto, só quero que saiba como entrar e adicionar um desses. Então você precisa Primeiro de tudo, coloque o cursor em algum lugar dentro da função e, em seguida, encontrar o que você deseja. Então vamos em frente e dizer, um bem, vamos apenas ir em frente e dizer o documento I D. Aqui nós só precisamos fazer com este é o que eu quero. Eu quero ir em frente e clicar duas vezes sobre ele e você vai notar agora, coloca esse código dentro dessa função se eu precisar. Posso adicionar uma variável e dizer que a amostra é igual ao documento hype. E assim, se eu colocá-lo dentro de um muito preto e, em seguida, alerta, alguém pode dizer barra de amostras de alerta. E agora, se eu bater em pré-visualização, ele vai alertar este índice. Contêiner sublinhado hype sublinhado. Então, um monte de elementos diferentes que vamos rever como fazer alguns destes. Você pode iniciar e parar a linha do tempo. Você pode obter elementos por. Você pode obter a propriedade. Em seguida, você pode definir a propriedade de um determinado elemento para ser opacidade zero. Se você quisesse esconder e mostrar coisas, se você quisesse entrar e pular para a próxima cena através do JavaScript, você poderia fazer isso. Se você quiser pausar a linha do tempo se quiser iniciar a linha do tempo. Algumas dessas coisas são as mesmas que uma ação seria seo. Pode haver casos que não queremos fazer isso, mas você pode querer ter um elemento condicional dizendo, se isso está jogando bem, então pare com isso, ou se esta é a duração disso é uma certa quantidade, Então pare com isso ou jogue. Isso é ou fazer algo assim. Portanto, é útil em algumas situações ser capaz de fazer referência a este código. Então eu vou apenas passar pelos próximos vídeos e vamos mostrar a vocês como fazer alguns desses, começando com o documento como você pode trabalhar com o documento obtendo o I d ou definindo um I D e como você pode definir alguns propriedades de elementos diferentes, então vamos em frente e começar sobre isso no próximo vídeo. 41. 41 eventos de documentos: no último vídeo, falamos sobre a criação desta função a partir de uma ação do mouse. E então neste vídeo, vamos apenas ir em frente e explorar alguns dos elementos de código de diferença que podemos fazer aqui em baixo, as diferentes coisas de código Hansen que temos disponíveis para nós agora se eu quisesse, como você aprendeu em o último vídeo, se você apenas clicar duas vezes em algo, se você quiser usá-lo e então você pode modificá-lo a partir daí. Mas a primeira coisa que quero fazer é que já falamos um pouco sobre o documento chamado Dr. Night. O recurso é pasta e funções. Eu realmente não uso esses ah muito. Eles estão lá. Se precisar do Teoh, faça uma referência a eles um pouco mais. E se isso não fornecer informações suficientes sobre o que você vai trabalhar com , há um botão mais informações que irá aparecer com uma documentação para o tipo tumult, e ele vai para um pouco mais de profundidade do que você pode quer usar para, como, as linhas do tempo, como você inicia essas diferentes linhas de tempo ou algo assim. Então isso é apenas algo a ter em mente é que você pode clicar sobre ele e obter um pouco mais ler um pouco mais lá. Mas se você é como eu, gosto de ver coisas em ação. Então vamos em frente e explorar um pouco disso. Eu vou primeiro de tudo, vir para obter elemento por i d. que possamos realmente obter um elemento específico se vamos falar com um elemento, especialmente se vamos esconder um certo elemento. Esse não é o elemento que foi clicado porque você vai notar aqui nós temos o elemento ficando passado dentro. Então, se estamos falando apenas com este elemento, então tudo o que precisamos fazer é referenciá-lo por elemento. Mas se vamos falar com outro elemento, bem, então precisamos realmente entrar. E precisamos obter os elementos e precisamos identificar isso, então isso é útil para esse tipo de coisa. Então eu vou ir em frente e clique duas vezes sobre isso e, em seguida, você pode ver que ele diz hype documento dot get element by I D. E, em seguida, dentro de aspas é I. D. Bem, não há realmente um elemento que é chamado I d lá fora, então nós realmente precisamos ir para a nossa cena e nós precisamos criar um elemento que tem um I d. Então eu vou entrar e criar este círculo e você pode dar aos elementos um 90 vindo para a janela do inspetor aqui no lado direito. E este é na verdade o inspetor de identidade e nós vamos descer agora mesmo. Diz nome de exibição. Isso é o que é exibido aqui. Posso mudar isso aqui. Ou poderia dar a isso um elemento único. Eu d e assim todos os elementos. Ele não pode ter a mesma classe que não pode ou não pode ter o mesmo I d mais de um elemento. Você precisa dar um único. Se você queria falar com várias coisas de uma só vez, você pode fazer isso pelo nome da classe, e assim você pode dar-lhe um monte de nomes de classes diferentes e referenciá-lo dessa forma. Mas neste caso, vamos falar com este item específico porque os eventos que estão sendo chamados estão neste elemento. Então não estamos falando com aquele específico. Vamos conversar com outra coisa, então eu vou ligar para esse círculo e então eu vou bater, salvar e voltar para a minha função de amostra. Um aqui e nós vamos dizer, bem, isso vai ser um círculo. Vamos falar com aquele círculo. Mas o bom é que, se eu quisesse fazer referência a isso dentro de outros elementos, se eu vou adicionar mais código, provavelmente é mais fácil colocar isso dentro de uma variável. E então nós vamos dizer círculo igual a e então temos isso logo depois. Então, agora, a partir de agora, eu posso ir em frente e usar o círculo de referência, e ele vai estar falando sobre esses elementos no palco. Então essa é uma maneira de realmente referenciar o I D. Mas nós também podemos obter as diferentes propriedades sobre isso I d. Então eu vou ir em frente e clicar duas vezes sobre isso aqui. E então vamos dizer hype document, get element propriedade e qual elemento vamos falar. Bem, não vamos falar sobre o que foi clicado. Na verdade, vamos falar sobre esse círculo, então eu quero ir em frente e clicar duas vezes sobre isso. E então qual o nome da propriedade que vamos fazer? Bem, vamos dizer esquerda. Então vamos pegar a propriedade esquerda. Qual é a propriedade esquerda? Eu quero saber. Bem, para mim, se eu visualizá-lo aqui e clicar nele eu realmente não vejo isso porque eu não estou fazendo nada com essa informação. Então eu preciso fazer algo com essa informação. Então vamos em frente e embrulhe isso dentro de um alerta simples. Eu quero ter um alerta que vai aparecer com a propriedade elemento lá. Então eu vou embrulhar os documentos de hype quentes, obtém o círculo de propriedade do elemento e tudo dentro de parênteses e parênteses de alerta. Ali. Eu vou bater, salvar e, salvar e, em seguida, pré-visualizar. E se eu clicar nele, você vai notar que aqui diz, 445. Essa é a propriedade esquerda para isso. E assim eu posso reunir algumas informações sobre diferentes elementos no meu palco. É aí que se torna útil. E então, se eu morrer, então eu posso adicionar declarações como se a propriedade get elementos círculo esquerda é maior do que isso, em seguida, fazer aquilo. E então você pode adicionar algumas coisas condicionais dentro de lá, que, para fazer isso, eu colocaria dentro de outra variável. Vou me livrar disso. Alerte os parênteses abertos, feche parênteses lá, e então eu vou salvar nosso círculo igual à esquerda e dizer, OK, isso vai ser a propriedade da esquerda aqui. E então vamos em frente e dizer, se o círculo esquerdo é maior ou igual a 500 bem, então vamos alertar. Então diga: “ desculpe”. Menos do que em. Isso é o que isso é menor do que se o círculo esquerdo é menor ou igual a 500 e então aspas ou fazer isso, eu vou tentar uma coisa aqui só para ver se podemos fazê-lo sem as aspas. E ainda assim podemos, para que você possa fazer isso. As aspas serão uma string que, neste caso, ele funciona. Hum, mas se você quisesse ter o valor exato da propriedade, então eu faria isso sem as cordas lá. Então agora, se eu quisesse fazer mais do que então eu poderia fazer como, ah, ah, 200 aqui, e você poderia ver que 445 é maior do que E então isso é o que é útil sobre obter essas propriedades de elementos colocando-os, e então, ajustando a lógica, e isso é algo que você não pode fazer apenas com os gatilhos normais dentro. É um tipo de toupeira. Então vamos em frente e fazer mais uma coisa. Vamos realmente definir a propriedade elemento. Não preciso mais disso porque acabei de conseguir. Mas eu vou ir em frente e dizer, Ei , círculo, vamos definir sua propriedade elemento vindo aqui para definir propriedade elemento. Quando um duplo clique sobre isso e nós vamos dizer documento ponto conjunto propriedade elemento e nós não estamos falando com o elemento, o que nós clicamos em. Na verdade, vamos falar com o círculo. Então eu vou copiar isso e colar aqui. E qual é o nome da propriedade que vamos falar? Bem, quais são as opções aqui em baixo? Ele me diz quais são as opções, diz superior esquerdo com altura, girar, escala Z, X escala y opacidade e índice Z. Se eu quisesse trazer as coisas ah, cima ou para baixo a camada, eu posso usar o índice Z. Nós só vamos dizer esquerda e depois o valor aqui. Bem, que valor queremos? Bem, vamos dizer que serão 100 e queremos que isto assuma ou dois inimigos. Se não o fizermos, podemos levar isso. Este é o número de segundos, e podemos reduzir isso a zero, e isso acontecerá instantaneamente. Se o fizermos, então vamos em frente e deixar isso em 1,0, que é um segundo. E então eu posso dizer, Aqui está a minha facilidade dentro e fora para que eu pudesse fazer apenas facilidade dentro, aliviar para fora se eu quisesse que isso provocasse dentro ou ele adicionasse alguma flexibilização a isso. Então eu vou seguir em frente em apenas uma prévia sobre isso, e assim que eu clicar nele, você vai notar que meu círculo se anima do lado direito para o lado esquerdo e o lado, e isso me permite ser um pouco mais específico com ele. E então eu posso escolher para animar várias coisas de uma só vez e assim, o tempo gosta e correr por conta própria. E então isso me permite acionar essa animação sempre que eu quiser. Então isso é uma coisa útil sobre isso. Agora. Existem algumas outras coisas para que você possa acionar um comportamento personalizado. Se você tiver outro comportamento em algum lugar, você pode acionar isso. Eu realmente não tendem a usar tanto ou não se deparar com qualquer situação em que eu usei isso e realmente fora, se necessário. Se você quiser explorar um pouco mais, você pode dar uma olhada nisso também. Mas é assim que se trabalha com o documento. Como você obtém alguns dos elementos no palco, como você atualiza algumas das propriedades no palco também. Hum, e será como você animar essas propriedades para o próximo valor também. 42. 42 de referências a símbolos JavaScript: Tudo bem. Então a última seção que eu vou estar falando é o símbolo Instances Now, as instâncias de símbolo se você realmente vir e dar uma olhada na linha do tempo e os diferentes símbolos bem aqui ou obter elementos. Desculpe. Se você olhar para as linhas do tempo e também cenas, qualquer coisa que está dentro dos símbolos, Ele diz basicamente como fazer referência a um símbolo por I d. pelo nome também. E então você pode Isso irá mostrar-lhe como realmente iniciar uma linha do tempo de um símbolo como continuar uma linha do tempo, como obter a duração da linha do tempo dentro de um símbolo como ver se esse símbolo está tocando ou não coisas tão diferentes que você pode fazer. Mas símbolos são um pouco diferentes do que os elementos são. Então você está apenas referindo isso de uma maneira um pouco diferente. Então vamos em frente e voltar para um visto aqui, e vamos converter um desses objetos em um símbolo. Então, primeiro de tudo, eu vou fazer um objeto diferente aqui. Só para termos algo um pouco diferente, vamos torná-lo menor, e eu vou mudar a cor disso para cores diferentes. Então vamos em frente e mudá-lo para como um verde aqui e eu vou clicar com o botão direito sobre isso e eu vou realmente eu quero sair para símbolo e então ir para ele. Desculpe, este grupo desfaz. Eu quero fazer selecionar que, ir para o novo símbolo da seleção e que irá criar um símbolo para mim. Então, como aprendemos em vídeos anteriores, se você ignorar esses vídeos por algum motivo, recomendo voltar para a seção de símbolos. Mas os símbolos têm diferentes linhas de tempo dentro dele. Então, se eu clicar duas vezes nele, ele vai me levar para aquele símbolo. E se eu esticar a linha do tempo aqui um pouco mais, você pode ver que esse é o meu símbolo. Há as minhas propriedades diferentes e assim por diante. Então eu estou aqui. Este bar roxo diz-me em que símbolo estou. Eu estou dentro deste símbolo, e eu vou ir em frente e apenas criar uma animação para a segunda animação aqui, e nós vamos apenas ir em frente e apenas ter este movimento sobre a mão esquerda direita lá, e É basicamente isso. Então, se eu seguir em frente e bater, salvar e depois entrar, você vai notar que esse símbolo, a animação desse símbolo, está tocando dentro do próprio símbolo. Porque se eu sair de que aquela animação em si, não é no que é na hora principal. Linus é muito visível aqui, mas na verdade é a animação. Eu não posso mudar essa animação sem entrar no símbolo em si, clicar duas vezes sobre ela e depois entrar no símbolo lá. Então, se por algum motivo ao mesmo tempo que eu quiser pausar essa animação ou fazer algo com essa animação, eu também posso querer fazer referência a essa animação em si. Eu poderia fazer isso. E primeiro de tudo, você precisa dar a ele uma identificação então quando você entrar no inspetor de identidade e eu vou dar a isso um eu d de Green Square e agora eu vou entrar na minha função de amostra, e se você não vê isso, você pode ir em frente e selecionar este objeto aqui, entrar em seu painel de ações e, em seguida, clicar na seta e que irá aparecer na função de exemplo . Agora o que eu preciso fazer é fazer referência a esse símbolo. Então eu venho até a seção de símbolos e eu vou ir em frente e primeiro de tudo, criar do nosso e nós vamos dizer Green Square é igual a E então eu vou clicar duas vezes Onde diz obter símbolo por eu ter certeza de que eu sou clicado aqui e lá vamos nós. Vou mudar o i d para Green Square. E foi isso que dei a identidade identidade dentro do inspetor de identidade. E agora eu posso fazer referência a isso e falar com aquele quadrado verde apenas digitando Green Square aqui. Agora, eu posso fazer mais do que um se eu quisesse. Se eu quisesse falar com várias instâncias diferentes, então eu vou em frente e dizer, OK, OK, nome do símbolo. Se houver algum tipo de nome do símbolo, posso falar com cada símbolo que recebe símbolos que você pode usar várias vezes. E se você quiser falar com todos eles, você pode fazê-lo assim também. E assim o próximo objeto é Obter instância simples Se você quiser obter uma ocorrência de símbolo por determinado nome, um nome de símbolo retorna o nome do símbolo se você quiser obter isso se você quiser obter um elemento e lado do símbolo porque o símbolo em si poderia ter vários elementos. Você pode fazer isso. Neste caso, vamos descer. Você pode iniciar a linha do tempo e pode pausar a linha do tempo. Agora, eu tenho que saber o nome da linha do tempo. Então eu vou entrar nesse símbolo de novo, e eu vou entrar em ratos. Quero entrar no meu símbolo, inspetor. E você pode ver que o inspetor de símbolos diz linha do tempo principal. E então eu vou em frente e apenas entrar na minha função de amostra e descer a linha, e vamos fazer uma pausa. Clique duas vezes sobre isso. Eu vou ter certeza que você vem aqui quando um duplo clique em Pausa Timeline. E vou substituir isso pela linha do tempo principal. Vamos ver. Que símbolo vamos conseguir? Vamos dizer Green Square. Oh, desculpe. Não substitua essa primeira parte pela Green Square e vamos em frente e basta clicar nisso e você pode ver agora que está pausado. Então eu tenho que substituir a primeira parte. Mas só diz pausa, Linha do tempo nomeada, e vamos nomear a linha do tempo em si está na linha do tempo principal, então vamos posicionar essa linha do tempo. Podemos então continuar a linha do tempo. Podemos ir para um certo tempo na linha do tempo como aprendemos na anterior. Podemos ter a duração. Podemos ver se está tocando, mas é só que você tem que fazer referência a isso de uma maneira diferente. Você tem que obter o símbolo de uma maneira diferente do que você fez com os elementos. E uma vez que você faz isso, você pode praticamente fazer a mesma coisa com que você está trabalhando antes de você ainda pode se trocar. As propriedades dos diferentes elementos que você pode entrar e obter esses elementos dentro do símbolo e ajustar a propriedade esquerda. Ajustar a capacidade. Ajuste praticamente tudo o que você precisa para obter com esta instância de símbolo. Tudo que você tem que fazer é digitar. Se eu fosse clicar aqui, entrar e dizer instância simples. Claro, eu clico em sua instância de símbolo e obter esse elemento, e então eu basicamente tenho que definir o elemento que eu quero obter algum. É assim que se trabalha com símbolos. Uma outra coisa que nota está dentro do seu inspetor de símbolos, você pode alterar este símbolo de padrão para persistente, persistente , basicamente ajustado. Então você pode realmente ter isso em várias cenas de diferença ou várias páginas diferentes , cenas, o que quer que você precise com isso, mas muito mais. Tudo o resto é o mesmo, e permite que você entre e faça referência a esse símbolo com suas funções com seu script de trabalho lá. 43. 43 de tempo em cena JavaScript: nesta próxima seção. Quero falar sobre cenas e cronogramas. Então, essas são duas coisas diferentes que você pode fazer dentro do tipo tumult para navegar para uma determinada cena ou para iniciar uma determinada linha do tempo, depositar determinada linha do tempo, ou até mesmo verificar se uma determinada linha do tempo é simples. E então nós vamos em frente e apenas explorar alguns desses. E então a primeira coisa que ainda estamos na mesma função onde temos a cena intitulada e temos esse retângulo que está basicamente acionando essa função. Eu me livrei de conseguir isso. Eu ainda tenho o elemento que eu tinha ali. Mas eu me livrei de fazer referência a isso por enquanto. Então vamos em frente e, a fim de saltar para outra cena ou para outra cena, eu preciso vir e ter certeza que o painel de cenas de maio está aparecendo aqui. Clique no ícone de adição e, em seguida, vá em frente e crie uma nova cena. Então vamos dar um nome a esta cena. Um clique duplo sobre isso e eu vou dizer cena um, e então eu vou nomear o próximo parece, e agora o que nós vamos fazer é em cena para eu apenas vou adicionar um texto dizendo que isso é visto para apenas para sabermos que nós navegamos para que parecem agora novamente, você pode entrar e você pode adicionar em ah, através deste eventos você pode adicionar em um ir para cena. Mas fazer isso através do script de trabalho permitiu que você no dedo adicionar um pouco mais de funcionalidade dizendo, Bem, eles têm que clicar nisso e isso antes de realmente continuarem. Então isso é algo onde pode vir útil para fazer isso ainda, mas adicionando um pouco mais de lógica a ele. Então eu vou seguir em frente e sob a seção de cena, eu vou dizer o nome visto atual quando um clique duplo sobre isso. E então vamos apenas colocar isso dentro de uma variável. Na verdade, vamos apenas colocar isso dentro de alertas para que possamos ver qual é o nome das correntes visto, e então você pode ver que ele vai alertar visto um, e assim Toe nos permite saber que essa é a cena, e nós podemos executar alguma lógica dizendo, se visto um fazer isso se parece fazer isso e assim por diante. Então vamos em frente e nos livrar disso. Então aqui e o próximo é um show visto chamado, e isso nos permitirá ir a uma determinada cena, e ele ainda nos permite ir ou especificar a transição ou o desvanecimento cruzado para que você possa ver o aqui, diz K. Visto transição Cross desvanecer-se. Bem, que outras opções temos? Estas são as diferentes opções que temos disponíveis. Desvanecimento cruzado, troca de deslize ou troca desculpe empurrado de baixo para cima. E essas eram as mesmas opções que nós temos podemos definir no número de segundos que leva para realmente ir para isso. Agora temos que especificar os nomes da cena, então eu quero ir em frente e dizer vendo dois e então nós vamos bater. Nós vamos clicar sobre isso e agora ele vai para parecer, e você pode ver que ele fez a cruz desaparecer Vaid de uma cena para a próxima cena. Ao fazer isso Javascript lá Agora, se você não sabe qual será a próxima cena, você não precisa especificar o nome. Especificamente, você pode ir para e clicar no próximo show próxima cena e isso irá para a próxima cena e você pode especificar a transição também. Ou você conduce anterior visto isso bem, Então vamos em frente e se livrar desse duplo clique na cena anterior e que irá para a cena anterior. Então isso é basicamente apenas ser as cenas. E novamente, o você pode fazer isso através dos gatilhos e disse que pequeno tipo com o poder real de que é você pode especificar uma lógica adicional add. Variáveis adicionais de verificação do JavaScript para ver se algo foi clicado antes de você realmente executar essa transição. Então esse é o benefício de Rial para isso. Se você quiser adicionar alguma lógica condicional lá, então vamos em frente e falar sobre linhas do tempo. Agora, agora, linhas do tempo, se você notar no nosso inspetor visto, se eu entrar na cena Inspetor aqui, é aqui que eu posso adicionar linhas de tempo adicionais. Então eu quero ir em frente e criar uma nova linha do tempo e nós vamos chamar esta linha do tempo para e na linha do tempo para ter certeza que eu clique na linha do Showtime. Vou seguir em frente e clicar no registro e mover isso aqui meu círculo aqui, e isso vai levar cerca de quatro segundos. Ótima. Vamos em frente e voltar para a linha do tempo principal Clique em mostrar Linha do tempo. Mas se eu bater, entrar que a linha do tempo não joga. Então vamos voltar para esta função de exemplo e vamos em frente e dizer, Iniciar linha do tempo nomeado e eu quero clicar duas vezes sobre isso. E basicamente vai querer que o nome da linha do tempo que chamamos Linha do tempo para, e você pode fazer isso em frente ou você pode fazê-lo em reverso é bem, então eu vou ir em frente e apertar salvar em pré-visualização. E agora, assim que eu clicar nisso, ele vai começar a linha do tempo. Agora eu posso voltar aqui e dizer, bem, se essa vez, avião Linus. Então vamos voltar aqui e começar uma linha do tempo principal. Vamos adicionar uma animação à linha do tempo principal, e eu vou dizer que isso realmente vai se mover para cá, e isso vai estar na minha linha do tempo principal. Bem, agora vamos em frente, e eu quero pausar que se isso for clicado, vamos pausar isso em vez de ir para a ou jogar a outra linha do tempo. Eu quero positivos linha do tempo atual. Então vamos nos livrar desse código aqui atrás. Vá em frente e bata. Exclua isso e nós vamos clicar duas vezes onde ele diz Pausa, Linha do tempo vai que tempo mais tarde, nós vamos pausar. Essa vai ser a linha do tempo principal. Então, dentro das aspas, eu quero dizer linha do tempo principal e ter certeza de que eu tenho esse espaço por causa de voltar para meu visto meu nome da linha do tempo tem esse espaço também. Então, agora vá. Vá em frente e aperte, salve em pré-visualização. E você vê, se eu clicar sobre isso no meio da animação, ele vai pausar, e então eu posso acioná-lo para reproduzir novamente, se necessário. Então essa é outra opção para pausar. Nós também continuamos cronograma, e assim será. Basicamente, se estiver em pausa, continue a linha do tempo, se necessário, ou pode ir para uma hora específica na linha do tempo. Isso é útil se você quiser saltar para um determinado ponto. Ah, nós sabemos que o nome da linha do tempo vai ser a linha do tempo principal e então vamos pular para ,digamos, , dois segundos. E quando eu apertei salvar visualização, clique sobre isso muito rápido e você pode ver que ele meio que pulou. Se eu clicar nisso novamente, você pode ver que ele salta de volta para que para a segunda linha do tempo. Aqui é onde você entra não há realmente uma função drop down para este tipo de coisa. Então é aqui que você pode entrar em algumas funcionalidades adicionais. Então a linha do tempo atual nomeou sua hora atual e linha do tempo Isso basicamente, se colocarmos isso dentro de uma variável e salvar nosso tempo atual é igual a e então vamos clicar duas vezes sobre isso O quê? Vamos ter a hora atual na linha do tempo principal, e agora vou alertar a hora atual. E agora, se eu clicar sobre isso, você pode vê-lo alerta aqui. E é aqui que eu posso dizer começar a adicionar algumas funcionalidades adicionais. Bem, se o tempo atual for menor ou igual a dois segundos, então quando isso for clicado, vamos alertar a linha do tempo não terminada. Agora, se eu for em frente e acertar a visualização, você poderá ver a linha do tempo não terminar os inícios ou os gatilhos nesse ponto. Mas se eu clicar nele novamente, nada realmente acontece. Porque agora a hora atual é mais de dois segundos dentro da linha do tempo. Bem, vamos verificar a próxima opção. Digamos que a duração da linha do tempo. Então, vamos dizer, OK, OK, vamos alertar este abrir parênteses e, em seguida, com o cursor no meio dos meus parênteses. E quando ele clica duas vezes nesta tomada, essa foi a errada. Vamos dizer duração para a linha do tempo, e isso vai alertar a duração da linha do tempo principal. Então, não importa quando eu clicar que ele só vai alertar, ele define em seis pontos para a duração dessa linha de tempo. Mas isso também me permite dizer Ok, se a duração é em um determinado momento e se a hora atual é, você sabe, terminado com a duração do que eu poderia fazer alguma outra lógica também. Então direção atual para linha do tempo, isso é basicamente dizer que vai para a frente está indo para trás. Isso me permite obter algumas informações lá, mas então o final é o é simples se eu quiser verificar para ver se ele é simples, se ele não está jogando do que executar alguma lógica, mas vamos ir em frente e clicar duas vezes sobre isso e você pode ver documento é linha do tempo simples e nomeado, e nós vamos dizer que realmente vamos dizer linha do tempo um. Volte aqui e certifique-se que esse é o nome da linha do tempo para que o sem nome e vamos verificar se isso é claro. Se não é que vamos fazer outra coisa. Então nós vamos dizer, vamos apenas alertar isso então eu coloquei isso entre parênteses. É simples? Ele vai me dar um verdadeiro ou falso lá hit, salvar e você pode ver que ele diz falhas. Agora o que eu vou fazer é, em vez disso, se é culpa e então vamos em frente e colocar isso em uma variável para que possamos trabalhar com ela um pouco melhor. Então eu vou salvar a linha do tempo distante para o plano igual e então nós vamos dizer está jogando lá e então eu vou dizer se a linha do tempo para o avião é igual a então o que nós vamos para o dio é que vamos tocar essas linhas do tempo quando eu voltar e ouvir, Iniciar linha do tempo nomeada e nós vamos dizer linha do tempo para, e nós vamos começar isso nesse ponto se ele não está jogando, então ele não está jogando agora. Se eu seguir em frente e apertar este botão, você pode ver que foi iniciado naquela linha do tempo. Eu não tenho a opção para relativo selecionado. Então eu vou ir em frente e apenas selecionar os dois para ser relativo e agora clique em pré-visualização e você pode ver que ele começa a animar mais. E é o parente onde quer que a posição fosse essa. Então agora é automaticamente animado com essa linha do tempo. Então, basicamente, adicionando essa funcionalidade de script de trabalho diferente com o com as linhas de tempo das cenas basicamente só obtém muito mais detalhes, e você pode adicionar mais condições ao seu interior do tipo de símbolo. Então esse é o verdadeiro benefício de ser capaz de fazer esse tipo de coisa. 44. 44 funções reutilizáveis: Se você criou uma função e você deseja reutilizar essa função em diferentes instâncias, quando algo mais é clicado e você não quer ter que reescrever o código, você pode entrar. E se essa função está dentro do recurso é pasta aqui para que você possa ver que eu tenho isso. Uma amostra de funk. Um dentro do recurso é se eu quiser também acionar essa mesma coisa quando isso é clicado aqui, eu posso entrar e clicar no mouse. As ações vão até o clique do mouse, selecione a caixa suspensa para executar JavaScript e, em seguida, eu posso selecionar o Dropbox para executar este funk de exemplo. Uma é, essa é a coisa boa é, uma vez que você configurar essa função, você pode realmente acionar essa função de qualquer maneira. Você pode acionar essa função quando ela for arrastada. Você pode acionar quando ele está sobre o mouse, você pode acionar quando ele é tocado em. Você pode acionar quando é quando ele deslizou e coisas diferentes como que você pode simplesmente executar mesma função. Mas isso é apenas uma maneira simples de basicamente dizer OK, uma vez que eu tenha criado essa função, eu vou acionar essa mesma função várias vezes diferentes 45. 45 como anexar o jQuery: uma das coisas agradáveis sobre duas ervilhas multi que você pode trazer em outras bibliotecas JavaScript externas de qualquer lugar basicamente de meia verde de J Query e outros elementos que você deseja trazer e usar essa funcionalidade. Isso é parte da biblioteca JavaScript dentro. É um multi poços. Um dedo do pé muito bonito. Eu quero te mostrar como fazer isso? Então eu vou trazer em um dos padrões, que é basicamente apenas consulta J. Eu quero ir. Vá em frente e venha aqui e eu fui para j query dot com e, em seguida, a seção de download. E isso me permite fazer o download. E eu selecionei o download. Produção comprimida Jay Query 3.1 ponto um. Se for mais tarde, isso ainda funcionará. Se for mais cedo, ainda funcionará. Mas baixei isso para minha área de trabalho. Então eu tenho esse Jake Preocupações 3.1 ponto 1 homens ponto Js. Então eu vou entrar aqui e voltar para o tipo tumulto e dentro do tipo tumulto nós vamos entrar no recurso é painel. Nós vamos clicar neste ícone de mais e vamos dizer adicionar e JavaScript ou Adicionar arquivo e nós vamos entrar aqui selecionar para o J. Corey Mobile uma estrela, não Jaqui Mobile, apenas Jake Worry normal. E agora que basicamente foi adicionado ao nosso recurso é. Mas se eu selecionar sobre isso, você vai notar que ele diz incluir no Document Head. Isso significa que vai Teoh anexar isso. Se eu visualizar isso, vamos em frente e ver isso. E quando você clicar com o botão direito do mouse, vá para inspecionar elementos quando ele vem até a cabeça e você vai notar aqui que temos um script que está anexado que vai para o ponto de índice hiper ou Hypo Resource é barra. E depois há o RJ Query Mobile um. Selecionando isso basicamente e certificando-se de que isso é selecionado para incluir no cabeçalho do documento, agora podemos usar essa função Jake Worry em qualquer ou como nós referenciamos para objetos em qualquer local, qualquer script Java que usamos. Então eu vou entrar aqui, e eu ainda tenho minha amostra funk um aqui, e eu vou ir em frente e usar a maneira padrão de referência e objeto na consulta J. Se você se lembra, este círculo tem um i d. Nós lhe demos um I d de círculo. Então, em vez de fazer referência como, hum hype faz, vamos ir em frente e referenciá-lo como Jaqui faz se você já está familiarizado com isso . Então vamos dificar um cifrão, abrir parênteses e, em seguida, entre aspas. Vamos em frente e fazer um hash tag, que é com isso que estamos conversando. Se fosse uma classe que adicionássemos, nós adicionaríamos o ponto, mas neste caso, vamos dizer hashtag e então vamos dizer círculo que é o nome do I.D. vamos fazer um simples esconderijo de ponto que é uma função de pedreira J para esconder. Isso é um elemento. Basicamente, o que quer que o objeto tenha que eu d. Então eu vou ir em frente e bater salvar na pré-visualização, e assim que eu clicar sobre isso, você vai notar que o círculo agora desapareceu. Então, se eu quisesse, poderia me esconder. Eu posso fazer um show que eu poderia fazer se ele é visível ou não, e então eu posso fazer qualquer função J. Corey que eu já estou familiarizado com dentro do tipo tumulto. E isso acrescenta muita funcionalidade adicional. Algumas das minhas bibliotecas JavaScript favoritas são você tem meia verde. Tens o Jake cansado e há muitas saídas por aí. Mas essas são as minhas duas melhores favoritas que eu realmente gosto. Então, é assim que você usa Jake se preocupar dentro do tipo tamal ou qualquer biblioteca JavaScript adicional e disse que pequeno tipo. 46. 46 variáveis globais: Agora vamos falar sobre variáveis globais porque agora já fizemos isso em vídeos anteriores onde criamos dentro de nosso JavaScript Ah,variável local, variável local Same var. Vamos dizer que o Numb é igual a cinco. E lá vamos nós que cria, ah, variável chamada dormente, e definimos um valor como cinco. Mas o problema é que, se eu executar outra função em algum lugar, ela não será capaz de acessar essa variável. Então, se eu entrar aqui e digamos, bem, essa função vai ser executada aqui. Então vamos alertar este dormente aqui. E se eu executar essa função, você pode ver alerta cinco grandes. Isso funciona. Mas vamos tentar acessar esse mesmo a partir de uma nova função. Então, quando você entrar em minhas ações e eu realmente vou criar uma nova função e nós vamos chamar este alerta novamente, é com você. O que, você diz lá. Mas vamos em frente e apenas tentar alertas. Cinco. Uma vez que já foi criado ou alerta, dormente para que funcionará. A variável foi criada. No entanto, quando eu clico no círculo, nada acontece porque ele não sabe o que alertar. E então vamos em frente e entrar. E nesta função de amostra, vamos fazer uma coisa para o entorpecimento. Na verdade, vamos dizer que o ponto da janela é igual a cinco. E agora, se eu entrar aqui e clicar nisso, ele vai dizer cinco lá. Mas agora, se eu clicar no círculo, ele salvará cinco também. Então, basicamente, o que eu estou fazendo é apenas dizer, Ei, janela, que é a janela inteira ou a janela de nível superior. Nós vamos criar uma variável chamada Numb, e ela vai ser igual a cinco e porque eu criei lá uma vez, eu tento usá-lo novamente porque eu criei lá. Uma vez que eu tento usá-lo novamente, eu posso se eu quiser apenas tê-lo no início, em vez de ter uma função que é executado assim que ele clica. Eu poderia entrar aqui indo para a minha cena, inspetor e vir aqui e clicar na carga da cena. Podemos ir em frente e executar uma função que cria as variáveis que vamos usar ao longo de todas as páginas ou através de diferentes cenas e tudo ou as funções de diferença e coisas assim Isso é realmente tudo o que você precisa fazer para uma variável global, apenas dizendo janela dot numb é igual a cinco, e então uma vez que você criou isso, você pode usar essa variável em qualquer função, qualquer local dentro do seu projeto. 47. 47 a publicar seu projeto: Tudo bem. Então, quando você estiver pronto para levar isso para um site em algum lugar, você não pode simplesmente levar o arquivo do projeto com o qual estamos trabalhando e fazer upload para um site em algum lugar. Você precisa realmente publicá-lo para, uh, arquivo html, bem como seus arquivos de suporte, e, em seguida, levá-lo e enviá-lo para uma amostra ou para um site em algum lugar. E então seus usuários navegarão até esse site ou você pode colocar o conteúdo em algum lugar, como dentro de um curso de aprendizagem ou algo assim. É que basicamente, tem que ser exportado para fora. Este arquivo de projeto é apenas para edição. Você quer salvá-lo para edição futura mais tarde, mas basicamente esta bile em si não pode ser visualizado quando alguém não tem o hype, tumulto ou esse pequeno tipo de projeto. Então, a fim de fazer isso é uma vez que você tem este projeto, vamos apenas ir em frente. Eu só tenho uma amostra de projeto em branco. Vou criar algum conteúdo, e depois vou exportá-lo para cá. Então eu vou bater, salvar, sair para arquivo e descer para exportar como HTML cinco. Agora eu posso ir para exportar seu filme se eu não tiver quaisquer elementos interativos onde botão que é clicado em ou algo que tem que ser interagido com, e é apenas uma animação. Então eu posso realmente exportá-lo para fora como vídeo animado GIF ou sequência PNG. E assim, se você quiser obter algo rápido como um GIF animado para algo assim, então você pode realmente fazer animado dentro do tipo tumult e e exportá-lo como um presente ou um vídeo ou algo assim. Mas neste caso, vou exportá-la como HTML 5. Vamos falar sobre as diferentes opções no vídeo diferente. Mas por enquanto, eu só vou ir em frente e vir até a pasta, e nós vamos ter certeza de que essas opções de ar selecionado onde ele vai salvar em arquivo html. Ele irá incluir o conteúdo de texto para motores de busca, e por isso poderia ser pesquisável pelo diferente pela diferença motores da Web como Google e outras coisas. E então eu vou criar isso dentro de uma pasta anexada. Se eu não tiver isso dentro de uma pasta envolvente, o que vai acontecer é que ele realmente vai pagar lugar todos os arquivos no lado do meu ou na minha área de trabalho , e eu faria minha área de trabalho muito desordenada. Então eu quero ter certeza de que isso está incluído e, em seguida, ir em frente e pressionar Salvar e é isso. Então, o que aconteceu se eu voltar aqui é que ele criou esta pasta para mim chamada Sample e se eu clicar duas vezes sobre ele, agora ele vai dizer exemplo que arquivo HTML e então eu tenho minha amostra. Esse recurso de hype está dentro daqui, que tem meus arquivos GIF. Ele tem meus arquivos JavaScript, qualquer anexo que eu fiz. Se eu tivesse gostado de um anexo de consulta J ou algo assim, teria isso dentro de lá. Agora, a coisa boa sobre isso é que eu posso realmente entrar, e eu posso atualizar o código mais tarde. Se eu quisesse abrir isso dentro de um editor de texto ou algo assim. Se eu nos puxei para dentro de um texto sublime, você vai notar. Aqui está o meu editor de HTML. Eu tenho o meu CSS aqui e, em seguida, eu tenho este recipiente então vamos falar sobre por que este recipiente é útil em um vídeo posterior. Mas, por enquanto, aqui é pelo menos onde você pode realmente levar este, hum, recipiente. Ou você pode acessar o arquivo HTML e atualizá-lo mais tarde. Então esse é o arquivo do pacote. Você levaria os dois arquivos carregados para um site em algum lugar e, em seguida, apontaria seus usuários para esse site, e então eles podem experimentar a interação que você criou dentro do tipo tumult. 48. 48 importando o Hype: Agora o que? Se você quiser realmente pegar seu conteúdo, você deseja incorporá-lo dentro de algum outro arquivo HTML? Então você quer ter algum outro tipo de quebra ou qualquer coisa assim, e então coloque isso dentro desse arquivo HTML. Então o que nós vamos fazer é realmente puxar para cima em texto sublime, que é um editor de texto, e eu vou ir em frente e eu vou salvar A como eu estava criando um site, um site padrão. Eu vou criar uma pasta, e eu vou apenas chamar este exemplo, e em seguida, dentro de lá, eu vou criar um arquivo html index dot e então eu vou começar a criar, apenas, como exemplo html insira sites de amostra agora dentro da tag body. Vou começar a criar alguns elementos diferentes. Primeiro 1, vou apenas criar um parágrafo. Este é um exemplo, Riggio, talvez como um título também. E lá vamos nós. Então, se eu fosse para ir em frente e visualizar isso agora, eu quero ir para o exemplo. Clique duas vezes no arquivo html index dot, e eu vou trazer isso aqui, e você pode ver que ele tem meu HTML padrão e minha idade para o meu parágrafo também. Mas não tem nenhum tipo de estilo, então não vamos falar sobre isso. Não é uma aula sobre CSS ou algo assim. Então vamos voltar ao texto sublime e eu vou mostrar a vocês, na verdade, na verdade, como pegar o conteúdo do seu projeto tipo tumulto e colocá-lo dentro de qualquer outro HTML . Então eu vou voltar aqui e apenas vou esconder tudo, e nós vamos pegar o projeto de exemplo que foi exportado de hype, e eu quero pegar o exemplo dot recurso Hype é pasta e eu vou copiar isso para o local de meu site. E assim, onde quer que o seu site esteja, esta pasta pelo menos precisa estar dentro de lá. Eu também vou abrir o exemplo que arquivo html dentro do texto sublime, e eu também vou ter certeza de que é o meu arquivo de índice é aberto também. Então vamos em frente e apenas tipo de redimensionar esses dois. E quando o Regulus acabar. Então estamos no mesmo projeto. Lá vamos nós. Então agora eu tenho minha amostra html e meu índice dot html. Agora eu quero que o projeto hype para jogar ser colocado dentro deste índice dot html. Então eu quero entrar no arquivo HTML que fica embrulhado dentro de quando o tipo tumult foi produzido. E eu vou ir em frente e copiar este código aqui. E ele diz que copiou exatamente essas linhas de código em seus documentos. E é aqui que o fim da cópia vai em frente e copiar isso. Venha para o meu índice aquele arquivo html. Eu quero descer algumas linhas e, em seguida, apenas bater colar lá. Agora que vai ser o conteúdo do meu arquivo HTML, meu projeto hype. Basicamente, e isso é tudo que eu tenho que fazer se eu voltar para este índice aquele arquivo HTML, que era meu novo site. Eu apontei colado no exemplo hype Resource is folder, e eu também adicionei o arquivo HTML que código snippet no arquivo html index dot. Agora, se eu clicar duas vezes sobre ele, você notou que meu arquivo HTML normal ainda está lá, e então eu tenho meu projeto hype logo abaixo dele para que ele automaticamente leva apostas feitas dentro do outro conteúdo também. Então, a outra opção que você tem dentro de dois multi irritado para exportar como um, um, arquivo e O A m arquivo é na verdade um basicamente um gerenciamento de projeto adobe embrulhado ou arquivo adobe . Esse é um único arquivo que você pode importar dentro do Dreamweaver, onde você pode importar dentro de Se você estiver usando o adobe ctivate ou algo assim, é apenas uma maneira adobes de compactá-lo e, em seguida, importá-lo para seus sites ou para seus estrutura, basicamente, e assim você pode usar esses arquivos externos e, em seguida, usá-lo e publicá-lo dessa forma. Então isso é apenas algo para ter em mente. No próximo vídeo, falaremos sobre o iBooks e como pegar o conteúdo que você criou e exportou quatro iBooks e como importar para o iBooks e usá-lo dentro do iBooks. Autor 49. 49 iBooks Author: uma das coisas agradáveis que pequeno tipo faz para uso. Ele permite exportar conteúdo facilmente Para o iBooks autor Agora, iBooks author é um aplicativo da Apple que permite que professores ou instrutores criem seus próprios livros didáticos. Mas para ir além do normal apenas tipo de página Turner e permite que ele crie elementos interativos , questionários interativos sobre inserir outras coisas, como vídeos ou imagens ou arquivos de áudio e coisas dedo do pé para trazer o livro em si Toe vida. Agora, uma coisa boa sobre a mull type é que o iBooks Author permite que você importe arquivos HTML e você pode criar seus próprios arquivos HTML. , Mas, para que o tenha dentro do iBooks Author, você precisa saber como fechar o zíper. Você também precisa ter alguns arquivos extras. Você precisa saber como fazer uma captura de tela para e colocá-la em um determinado local e nome em uma determinada coisa também. Então há muito que tem que ir para criar que é e, em seguida, empacotá-lo para que ele possa ser trabalhado para que ele possa ser importado dentro de ah ibooks autor. E então o que o hype faz para uso quando você cria essa interação. Você pode exportá-lo e já fechou para você, e você poderia apenas importá-lo diretamente para os meus livros lá fora. Então, é uma boa maneira de criar as interações internas. Eu livros lá fora e exportar quantidade e usá-los dentro. iBooks. Autor. Então eu tenho esse exemplo de interação aqui. Não é muito, é apenas uma animação. Então deixe-me ir em frente e arrastar isso, e eu tenho essas animações que tipo de animação de um lado do palco para o outro lado do palco, e quando um é clicado, ele pula para o outro estágio. Então, novamente, não está acontecendo muito lá, mas pelo menos vai nos dar uma idéia de como pegar um arquivo de conteúdo que fizemos dentro do tipo tumult e exportá-lo para fora antes que eu livro autores. Eu vou em frente, vá em frente e venha para o arquivo, vá para baixo para exportar como html cinco e, em seguida, vir para o painel ou iBooks, widget autor. Então, se eu clicar nisso, vou em frente e nomeá-lo. Seja qual for. Quero salvá-lo na minha área de trabalho e, em seguida, clique em seguro. É isso. Se eu for à minha área de trabalho, deixe-me esconder isso. Se eu for à minha área de trabalho. Este é agora o meu autor do iBooks. Widget pronto. É também o painel. Se você usar o seu painel de controle para o Mac, pode realmente instalá-lo como uma interação dentro do seu painel. Eu, pessoalmente, não uso muito o painel, então eu não vou fazer isso agora, mas este arquivo de pacote está pronto para eu importá-lo diretamente dentro do iBooks. Autor. Então eu vou puxar o iBooks autor aqui, e eu não tenho muito criado neste livro de autor do iBooks ainda, mas eu vou chegar a widgets, e eu vou até onde ele diz html. E assim que eu clicar em HTML, ele me permite colocar este arquivo HTML no local que eu queria ser para o livro. E então eu vou dizer, joga na página reproduz tela cheia ou reproduz automaticamente. E então agora, basicamente, estas eram apenas as diferentes opções que eu posso escolher. É como qualquer aplicativo Mac. Você tem sua janela inspetor aqui, e então eu vou para o html cinco widget, clique em escolher e, em seguida, mover isso sobre um pouco. Agora eu posso escolher que html cinco, que é este arquivo de pacote? Clique em inserir. E leva uma captura de tela para mim automaticamente dentro de um tipo de templo. E essa é a captura de tela que é usada. Assim, o aluno não verá quando estiver vendo isso dentro de seus iBooks. Isso não verá essa interação até que eles entrem nela e eles tenham que tocá-la para realmente entrar nela. Então eu vou avançar e visualizar isso, e se eu tivesse um iPad conectado, ele realmente me daria a opção de selecionar meu iPad. E tudo que eu tenho que fazer é puxar para cima por livros no meu iPad. Mas neste caso, eu vou ir em frente e basta clicar na pré-visualização aqui e depois clicar. OK, vamos em frente e apenas fechar isso por enquanto e agora eu posso expandir isso e lá está minha animação que eu criei e definir o símbolo digite sua animação. E também é interativo, que eu possa usá-lo para colocá-lo dentro do iBooks Author e fazer com que o conteúdo interativo ajude os alunos a interagir um pouco mais e aprender os conceitos com os quais eles estão trabalhando . Ah, e você pode usar o tipo tumult para criar esses tipos de interações e inseri-las dentro do iBooks Author. 50. 50 inspector de documentos: agora neste vídeo estão nesta seção. Nós vamos estar falando sobre os diferentes painéis inspetores e as diferentes opções que você pode usar que nós realmente não fomos capazes de mergulhar profundamente. Então vamos falar basicamente sobre algumas das diferentes opções. Então, no lado direito, apenas certifique-se de que seus inspetores mostrando no primeiro vídeo esta seção nós vamos estar falando sobre o inspetor de documentos. Então agora, este título de página HTML é gerado automaticamente, mas você pode ir em frente e sobrescrever isso apenas digitando algum título de página. As outras opções de casal que você pode mostrar indicador de carregamento como isso está realmente carregando. Eu não sei. Pode ser muito rápido para mostrá-lo localmente aqui, mas como isso está carregando, ele vai realmente mostrar uma barra de carregamento como os vídeos carregando ou algo assim. Se você queria que isso acontecesse, então você pode ir em frente e clicar sobre isso, tornar o plano de fundo transparente. Então, se há um fundo, então você pode realmente tornar isso transparente. Vamos tentar mudar a cor e ver se funciona aqui. Se eu seguir em frente e clicar em pré-visualização, você vai notar que ele preenche toda a tela. Mas se eu clicar em um fundo make transparente, então você percebe que ele não preenche toda a tela e Onley que basicamente o fundo em si, mesmo que seja verde, vai ser transparente. Então, se você colocar isso em um site em algum lugar, isso não vai ter um passado. Seja qual for o fundo que você usou naquele site, bem, então terá lugar. E então é apenas um basicamente qualquer coisa que eu inserir aqui ainda estará lá. E eu pude ver que colocar o fundo em si não vai ter nenhum efeito. E vai ocupar o lugar de onde quer que seja, onde quer que o conteúdo seja colocado. Então essa é apenas outra opção. Eles vão voltar aqui e mudar isso de volta para uma cor branca ali. Ok? E agora vamos voltar ao meu documento. Specter, a próxima coisa é criar dinheiro de aplicativo offline. Então, se isso é basicamente vai ser descontado, ou se o usuário vai olhar para este site off-line mais tarde, então você quer criar esse dinheiro e assim ele pode salvar onde eles estavam em tomar e salvar diferentes informações sobre ele. Se eu quisesse entrar na cabeça. HTML. Isso me permite entrar aqui, e eu poderia realmente anexar um arquivo de script de trabalho que está usando um cdn. Então, se eu quiser, um cdn é basicamente apenas uma hospedagem para diferentes bibliotecas JavaScript. Então, se eu quisesse colocar isso dentro daqui dentro da tag principal ou se eu quisesse anexar meu próprio CSS, eu poderia fazer isso dentro deste arquivo head. Você também pode fazê-lo dentro do recurso é dobrado como aprendemos. Mas se você queria entrar direto no arquivo html head, este é o local para fazê-lo. A próxima coisa são as opções avançadas. Proteja seus links externos e/ou seus estilos externos e, portanto, os usuários não podem acessar. Ele vai basicamente modificá-lo tipo de mudança de uma forma que ele é criptografado. Ah usado aceleração de gráficos de pontapé Web. Então, qualquer navegador que usa Web kit isso vai usar a aceleração gráfica para torná-lo executar um pouco melhor posição com CSS superior e esquerda. Então, em vez de posicionar com o X e Y, ele vai usar os valores superior e esquerdo em vez disso. E assim opções móveis É basicamente a porta de visualização com vai ser o documento com ou você pode fazê-lo com base no dispositivo com ou o dispositivo. Ah, hype. Agora, o documento com é basicamente o que você define como o ajuste que aqui vai ser 600. Mas se você for documento com, ele basicamente irá definir o tamanho da porta de exibição nessa escala inicial. Isso é mais para, como, se ele vai ser usado para dispositivos móveis, você quer ter certeza de que ele está selecionado porque isso vai garantir que ele é renderizado nos telefones de alta resolução que ele renderiza corretamente. E isso permite que o usuário escale se você quiser que eles sejam capazes de pensão ou não. Se você não quer que eles sejam capazes de beliscar, você simplesmente desmarque isso. Agora isso me dá um aviso dizendo “Ei no Android”. Prevenir o dimensionamento do usuário não é quando nós pop-up que para cima no gengibre impede que o dimensionamento do usuário não é suportado. Então pães de gengibre meio velho, então realmente não importa. Ah, use eventos de toque mostrar no clique do mouse. Basicamente vai dizer Ok se eu tiver um clique, também vai ser um toque. Se eu desmarcar isso, você vai notar que geralmente diz como ou toque aqui. É o que diz no clique do mouse. Ele não tem essa opção de toque, então ele não vai ser realmente viável em um dispositivo móvel, então eu realmente não vejo por que não usar isso. Então, se eu selecionar que você pode ver aqui é toque, toque, início, toque, fim e coisas assim. E, em seguida, aqui mesmo tela inicial Web app. Basicamente, isso me permite. Se eu quisesse salvar isso na tela inicial, posso definir a barra de status. Se ele for lançado novamente, eu posso definir a barra de status para translúcida ou preta ou padrão, E assim quando ele abrir a tela novamente em tela cheia, será que vamos nos livrar da barra de status ou mudar a cor e, em seguida, também mostram avisos de compatibilidade E compatíveis com o navegador. Isto é, se eu quiser me ajustar a alguns dos navegadores e dizer, OK, eu realmente não vou suportar Mac Safari em nada mais cedo do que 6.0 ponto cinco, e então não me mostre esses avisos. Isso não vai funcionar na mesma coisa com eu e. É se você realmente não vai suportar nada, porque a Microsoft realmente não suporta eu e oito mais. Então, se você realmente não está preocupado com isso, então bem, não me mostre mais esses avisos. Se você está indo apenas apoiar, Eu como 11 ou algo assim ou você é 10 e, em seguida, também ibooks autor, Apenas o que quer. A mais recente ISS. Hum, então ele vai te dar esses avisos se ele não vai funcionar no iBooks autor para que essas configurações de ar apenas para o documento como um todo esses ar, as diferentes opções que você pode escolher e você pode verificar essas e em Dentro do documento, Inspetor. 51. 51 inspector de cenas: Tudo bem. O próximo painel de inspetores. É o inspetor de cena. Então, se eu rolar até aqui e chegar ao local, Inspetor, nós já trabalhamos muito com a cena, inspetor. Então eu não vou cobrir tudo, porque nós já conversamos sobre escala. Falamos sobre a adição de novos pontos de pausa. Trabalhamos muito com cronogramas e tudo mais. Mas algumas coisas para ter em mente, embora não tenhamos realmente mergulhado profundamente é que você pode definir o tamanho inicial da cena para o tamanho que você quiser. Então, se você está indo para inicialmente ah, sites grandes ou médios, então você pode selecionar isso sobre e ele vai automaticamente E quando eu zoom para fora aqui, mas é automaticamente vai definir para o 1000 por 5 40 E isso vai para direcionar esse dispositivo. Ou se eu queria segmentar paisagem iPad, em seguida, ele vai configurar o 10 24 por 7 68 e ele vai definir automaticamente o tamanho padrão do que Ou se eu rolar para trás e voltar para o padrão e tem 600 por 400. Este é o tamanho padrão que qualquer aplicativo tipo tumult começa com, mas eu poderia vir aqui e ajustado realmente para o que eu queria para o tamanho padrão novamente. Tenha em mente que você pode adicionar novos pontos de quebra e diferentes layouts com base no tamanho é que você deseja lá. Mas você inicialmente tem que ter um tamanho definido para começar. Outras coisas que eu quero mencionar aqui estão na cena. Se você queria executar algum script Java e você queria criar algumas variáveis, normalmente as variáveis globais que você pode estar usando é melhor para fazer isso na carga da cena. Então, se eu clicar neste ícone de mais, eu vou entrar aqui e rodar JavaScript. Nós vamos criar uma nova função, e eu vou chamar essa função apenas carregar variáveis. E uma das coisas boas que eu sou sobre ser capaz de ter funções diferentes aqui e ali é que eu posso separar meu código. Em vez de ter um grande e longo arquivo JavaScript. Eu gosto de separar em diferentes seções e só usá-los em determinados momentos. Então era aqui que eu entrava e fazia os pontos da janela. Adormecido é igual a cinco. O valor inicial disso. E agora vai ser uma variável global que pode ser usada praticamente em qualquer lugar em qualquer local, uh , qualquer função JavaScript que seja chamada mais tarde. Eu poderia apenas ter esta função assim que ele carrega que eu posso então usar essa variável em diferentes arquivos JavaScript ou Jim Doubt funções JavaScript ou algo assim . E assim também, se eu quisesse algo Teoh descarregar ou mudar quando eu mudar Santos Aiken fazer isso. Mantenha-se descansar. Se eu clicar em Tecla pressionada, ele me permite saltar para uma determinada cena. Permite-me ir a ah, como posso mudar isso com base nas ações que aprendemos? Mas isso é basicamente apenas manter em mente que isso é qualquer tecla pressionada. Se você quisesse criar um comportamento personalizado, você poderia fazer isso, Hum, mas agora, basta tecla para baixo, tecla afiada ou desculpe, deslizar para a esquerda, deslizar para a direita. E isso é apenas deslizar em qualquer lugar. Se você deslizar qualquer um em qualquer local ou algo assim, ele vai fazer algum tipo de ação ou algo assim e, em seguida, o último é arrastar ao arrastar. Ele vai fazer algum local ou fazer alguma ação também. Se eu arrastar um determinado item, posso controlar a linha do tempo ou posso remover Desculpe, executar script de trabalho ou fazer algo. Então, agora o arrasto. Se eu arrastar um item Ah, e você controlar a linha do tempo por Dragão. Nós já aprendemos isso em um vídeo anterior. Então, se você quiser mergulhar fundo nisso, eu recomendo voltar para aquele vídeo em algumas de nossas seções anteriores. Mas esse é o inspetor de cena que é realmente o mais. Você trabalhará com os tamanhos adicionando layouts de nudez e, em seguida, adicionando código de cena ou funcionalidade vista, deslizamentos ou algo semelhante para navegar de uma cena para outra. 52. 52 métricas inspector: No próximo vídeo, vamos falar sobre as métricas, Inspetor. Agora as métricas, inspetor, já trabalhamos com os lotes. Então fizemos a colocação. Fizemos a largura da escala. Também fizemos os layouts flexíveis e não fizemos tanto da rotação, da origem da transformação ou do excesso de conteúdo. Então eu vou falar um pouco sobre isso e nesta seção, então você sabe o que você pode fazer com eles? Então, em primeiro lugar, o conteúdo float, ele permite que você defina uma área se ele vai além de um determinado elemento ou certa largura e altura, como é como é que ele é controlado? E então, neste caso, eu vou entrar aqui e só para mostrar a vocês, eu vou clicar neste texto aqui, e eu vou vir e pegar um texto da Laura Ipsen e alguém que eu já tenho isso. Vou pegar um parágrafo aqui,copiar isso, copiar isso, entrar no tipo tumulto, e depois colar isso aí. Então vamos redimensionar isso um pouco mais e eu vou com este selecionado vir para as métricas como a caixa suspensa, e aqui é onde eu tenho a opção para barras de rolagem escondidas ou automóveis, Crowbars, esquilo auto auto barras de rolagem é que ele irá apenas indicar se ele é mais longo do que uma determinada área que irá criar automaticamente essa rolagem. Mas você percebe bem aqui este texto realmente vai além do que esta largura e altura é para que eu possa corrigir isso e, você sabe, algumas maneiras diferentes que eu posso realmente vir aqui e ajustar a largura e a altura se eu queria. Então o topo na altura bem aqui, se eu quisesse ajustar isso, e então levaria toda a tela, eu poderia ajustar isso, mas realmente, o que eu quero fazer é criar apenas um certo para ser a caixa de texto, e qualquer coisa além disso é apenas uma espécie de herbal de rolagem. Então, se você está em um ipad, você pode apenas tipo de movimento para baixo para ver o resto do texto. E agora, com esse estouro de conteúdo definido como visível, esse não será o caso. Então eu realmente preciso selecionar barras de rolagem automática ou barras de esquilo, e isso irá definir qualquer coisa além desse ponto. A largura ou o hype está indo Teoh ser criado com as barras de rolagem. Eu quero ir em frente e bater em salvar na pré-visualização e você vai notar meu tipo de corte do Texas. Mas tudo bem, porque isso pode rolar para baixo. E se você estiver em um iPad, você pode usar o dedo para meio que deslizar para baixo também. Não só você pode fazer isso com texto, mas você também pode fazer isso com elementos agrupados. Então eu vou em frente e criar alguns itens diferentes. Então eu vou criar um retângulo, entrar e criar um círculo aqui. E então eu vou entrar e criar um item de texto. Deixe-me realmente criar esse item de texto mais tarde. Vamos em frente e selecione esses itens. Estou pressionando o botão de mudança. Vou clicar com o botão direito e depois ir para o grupo. E agora, na minha linha do tempo, vamos expandir isso um pouco mais para que você possa ver que tem uma pasta com o grupo dentro de lá. Com esse grupo selecionado, vou em frente e selecionar algum texto e ter certeza de que o Texas realmente colocado dentro do grupo e eu vou em frente e mover este texto um pouco mais, mas eu vou ter um fora do grupo quando o temos abaixo do grupo. Agora, com o grupo selecionado, eu vou voltar para o conteúdo, transbordar e selecionar as barras de rolagem, e agora ele não está visível lá. Mas se eu ir em frente e clicar em pré-visualização, eu posso rolar para baixo e ver o que o texto está lá embaixo. Então, isso permite que você defina um grupo para encontrar determinados elementos e, em seguida, criar uma barra de rolagem para ver os elementos se eles vão além da largura e altura que você realmente definiu. E uma das coisas que quero falar é sobre a rotação e a origem da transformação. Mas esse é o conteúdo visível. Um vá em frente e acerte a liderança aqui. Eu vou vir e depois insere outro retângulo, e quando eu começar a girar, você vai notar assim que eu começar, você pode usar o ângulo de Z. Eu também posso usar o ângulo de por que um X vai falar sobre eles mais tarde, mas você vai notar que tipo de gira no meio. Este ponto central, enquanto estou girando, está diretamente no meio. Isso é porque a origem da transformação aqui. O deslocamento X no deslocamento branco dos EUA em 50 50 coloca esse deslocamento. Ou é aí que o ponto intermediário da transformação do ponto intermediário está diretamente no próprio meio. Se eu quisesse que isso fosse apenas em uma esquina, eu poderia dizer, OK, 100% e então ir para compensar Por quê? 100%? E então o que vai acontecer? Assim que eu começar a girar isso, você vai notar que está no canto superior direito lá. Porque não só é o X ali, mas o porquê está ali e assumido que como eu rodar ele gira na esquina. Só depende de como você deseja realmente transformar ou animar esses objetos diferentes. Se eu estava animando a rotação, é assim que se anima. Não no meio, mas seria animada na esquina. Cabe a você como você quer que isso gire. Depende de qual objeto você está trabalhando dentro do tipo tumulto. Agora, outra coisa que eu quero falar é sobre três. Porquê a rotação? Então você percebe que eu poderia obter alguns três efeitos D e eu posso obter alguns X s 03 d efeitos com ambos os valores X e Y. Mas uma coisa a ter em mente é que há muitos navegadores que não suportam isso. Portanto, depende se você está segmentando e eles são principalmente os navegadores mais antigos. Mas se você está segmentando os navegadores mais antigos por algum motivo, como eu tenho oito ou nove, então você quer ficar longe deles. Se você está segmentando os novos navegadores mais recentes, como o Chrome ou o safari ou algo assim, então você pode ir em frente e usá-los. Só há algo a ter em mente. Mas foi assim que usou o inspetor de métricas, dentro do tipo tumulto. 53. 53 elementos: Certo, então agora vamos falar sobre essa forma, inspetor. Agora esta forma ou o elemento esperar, er eu também chamá-lo de Inspector forma porque ele tem as formas para o ícone. Mas este é o elemento esperar er, e isso vai destacar assim que eu tiver algum tipo de elementos selecionados, e isso me dá as diferentes opções para esse elemento. Então eu vou entrar e inserir um botão, por exemplo, e as opções para esse botão são selecionadas quando eu realmente tenho esse botão selecionado, ou ele volta para a forma, e as opções para isso são selecionadas aqui também. Existem algumas opções diferentes. Você pode selecionar a caixa suspensa aqui para que o plano de fundo seja uma cor sólida, selecionando a cor para escolher a cor que deseja. Ou você pode fazer ingredientes também, que terá duas cores. E você pode ajustar o ângulo do radiante como quiser. Ou você também pode inserir uma imagem e fazer com que essa imagem seja seu plano de fundo, um plano de fundo repetido ou algo assim. Então, nos botões, mesma coisa. Você pode ter Grady INTs para o seu botão. Se você quisesse. Você poderia ter uma imagem para o seu botão. Tudo o que você precisava para dialogar em que se você selecionar nenhum como a sensação, ele só terá o contorno. Então você notou. Agora eu tenho o apenas o esboço em si tipo de oco. Se eu quisesse mudar a cor, podemos mudar este dedo branco aqui. E se o meu fundo era uma cor mais escura, é uma cor oca lá. Ele permite que você mude isso e então eu posso ir para o texto e mudar a cor lá também . Agora algumas outras coisas, algo vá em frente e apague o botão. Por enquanto, vamos apenas trabalhar com a forma vai transformá-lo de volta para apenas uma cor sólida e algumas coisas que podemos mudar na próxima seção é a borda. Então, podemos ajustar a borda com podemos ajustar a cor da borda. Também podemos ajustar o estilo da borda. Então, temos pontilhado grupo traço suas configurações típicas lá. Então eu não vou passar por cima de todos eles. Se eu quisesse me livrar das fronteiras e eu pudesse apenas definir isso para zero e agora a fronteira não está mais lá. Se eu quisesse ajustar o raio, eu poderia vir aqui e ajustar o raio da fronteira também. Então você pode ver. E agora temos os cantos arredondados. Então eu vou entrar. E se eu quisesse ajustar o raio apenas para um canto, eu posso selecionar nesta área um canto e apenas subir um pouco mais também. Então agora eu tenho uma boa forma. Eu ainda tenho os cantos arredondados sobre os outros porque quando eu ajustado isso no meio, Eu tinha todas essas opções selecionar são ajustados isso no meio. Então eu basicamente ajustei todos eles. Mas se eu selecionar apenas um deles, então eu estou apenas selecionando um deles. Posso definir esse raio para apenas um específico. Então eu vou fazer as mãos assim no meio aqui. Eu vou para a próxima seção, que é visibilidade. Essa capacidade me permite ajustar as coisas do casal antes de tudo, a opacidade se eu quisesse fazer isso transparente, mas também a exibição. Assim, a exibição em si é uma das propriedades na animação. Se você rolar para baixo, você pode descer e adicionar a tela para que você possa realmente na sua linha do tempo, desativar e ativar as coisas à medida que ela está crescendo. Por alguma razão, se você queria não mostrar no início, eu posso selecionar um quadro-chave, vir para exibir e selecionar isso em oculto. Então, quando chegar a quatro segundos. Se eu quisesse apenas aparecer que eu posso entrar aqui, selecione o quadro-chave e, em seguida, selecione esta volta muito visível. Mesmo que pareça que tem uma animação, realmente não é a dúzia de inimigos. Isso é mais da opacidade que vai animar se você pudesse ver logo abaixo. Aqui temos a opacidade, mas a exibição não faz anime. É apenas uma espécie de assim que ele atinge o próximo quadro chave, ele aparece, e então você também pode usar isso. Se você estiver usando JavaScript, você pode alterar o elemento de exibição, e você pode alterá-lo para visível ou oculto e ajustá-lo conforme necessário lá. Mas essa é a próxima seção lá, e então você também tem a capacidade de criar uma sombra para que você possa subir a sombra adicionando alguns valores X e Y. Você também pode adicionar os valores de desfoque se quiser desfocar um pouco mais e, em seguida, alterar a cor de como deseja. Então mudar de cor para um tipo de cinza mais claro faz parecer que é um pouco mais transparente. E então você pode até ajustar a opacidade se você quiser e obter alguns efeitos de sombra legal lá, ou se você não quiser apenas inseri-lo lá. Você pode realmente usar este arrastador de sombras agradável, e isso irá realmente permitir que você arraste tanto a distância do valor X e Y. E você pode simplesmente arrastar isso para o local que você quer lá. E então, finalmente, você tem algumas coisas diferentes que filtram opções. Vou em frente e livrar-me da sombra. Vamos apenas levar isto para zero e assim você tem F sépia borrada. Você tem saturação. Você tem matiz, brilho, contraste quando você está entrando nessas coisas algumas coisas que têm em mente que um monte dessas coisas depende apenas do navegador. Então, certifique-se de que, enquanto você está começando a trabalhar nisso, você está olhando para os filtros, certificando-se de que não é um navegador, que você trabalha com os lotes ou você está tentando segmentar ou qualquer coisa. Então, tenha isso em mente. Mas é realmente apenas um tipo de ajuste aqui. Ou o primeiro plano ou o plano de fundo. Você pode ajustar alguns desses, e então a última coisa é o reflexo. Vou adicionar um reflexo a qualquer objeto. Posso adicionar a profundidade do reflexo, como o quanto essa reflexão mostra esse objeto. E eu também posso adicionar o deslocamento Quão longe de uma distância é lá? Então, se eu quisesse algum tipo de superfície reflexiva desses objetos diferentes, eu posso adicionar um reflexo a qualquer momento. Então, essas são algumas das opções que você pode fazer com o elemento Inspetor em seu painel inspetor dentro de um tipo de templo 54. 54 inspector de física: neste vídeo, vamos falar sobre apenas uma simples introdução à física e as diferentes coisas que você pode fazer com a física. Agora eu estou esperando para, mais tarde, ter diferentes tutoriais sobre como usar a física para construir diferentes tipos de jogos. Esta é apenas uma ação desinteressada para como começar com o tipo térmico e como começar com a física em si. Então, se eu entrar aqui e entrar nos elementos, eu posso selecionar a caixa suspensa e apenas realmente fazer um círculo aqui. Então eu quero ir em frente e selecionar um círculo e eu vou ter que apenas tipo de cima no topo agora, por padrão. O círculo não faz nada neste momento. Então eu vou em frente e adicionar um pouco de física a esse círculo. Então, selecionamos a caixa suspensa e descemos para dinâmica. E o que acontecerá assim que eu selecionar isso para ser dinâmico é que a física em si começará a se aplicar. Agora eu posso fazer algumas coisas com visto como eu posso dizer, OK, quão rápido eu quero que isso forçado realmente aconteça para que eu possa ajustar isso para ser Vamos apenas tentar 100 por exemplo, e você pode ver que isso acontece muito rapidamente que é Basicamente a força. Essa é a força da gravidade é basicamente muito forte nesse ponto. Mas por padrão é apenas deixá-lo em um, então apenas tipo de cai em um ritmo normal. A próxima coisa que eu poderia fazer é ajustar o ângulo, então, por padrão, é 180. Mas vamos em frente e tentar ajustar isto para, tipo, tipo, 90 ou algo assim por aí. Então, 90. E o que vai acontecer é que agora o ângulo em si é que diz que o ponto de gravidade é por aqui 90 graus em vez de 180. Bem, eu sugeri para o lado esquerdo, e você pode ver que agora ele cai para a esquerda também, então você pode ajustar como isso faz na cena por padrão. E então outra coisa que você pode usar você pode controlar a gravidade com a inclinação do seu dispositivo. Então, se eu for aqui e eu realmente estou em um iPhone ou um telefone Android ou qualquer coisa, eu posso realmente, com a inclinação para o controle do meu dispositivo, onde a gravidade realmente cai onde faz aquela bola cair. O que permite que você crie algum tipo legal de interativo usando o acelerômetro usando cria, hum, conteúdo interativo lá algum. Ok, então eu vou ir em frente e ajustar isso de volta 280 então nós vamos vir aqui e ajustar algumas coisas é, digamos que eu quero que isso fique dentro da minha cena e vá em frente e acerte um, retângulo aqui, e eu vou ter este tipo de interagir ou saltar fora deste retângulo agora mesmo. Tipo um bar. Se eu fosse apenas para bater aquele hit salvando preview, você pode ver que ele passa para a direita, a fim de que algo para interagir com isso. Isso realmente precisa ser chamado de estático ou alterado para estático, então interage sem movimento . E assim, o que acontece é que é apenas um tipo de saltos contra ele. Algumas coisas que eu posso fazer é densidade é basicamente o quão pesado é essa coisa. Então, quando interage, ela empurra outras coisas. Vai ser um bom empurrão como um empurrão pesado, ou vai ser apenas um empurrão leve? Há algumas coisas que você pode fazer, ou apenas na densidade. Eu vou entrar aqui e pegar aquela bola. Eu vou. É como o efeito saltitante e apenas tipo de ajustar isso. Então você pode ver que o equilíbrio é realmente saltitante agora, então ele vai saltar por um tempo. Vai demorar um pouco para saltar para baixo também. Mas se eu quisesse ajustar isso para ser extremamente saltitante, eu também posso ajustar isso um pouco mais alto também. E fricção é um arrasto de ar é uma espécie de arrasto de ar é fricção de ladrão com o ar. É, eu quase penso nisso como se a bola está caindo e há um ventilador abaixo, será que o ventilador dependendo de como a força desse ventilador pode fazer com que a bola caia um pouco mais? Ou pode fazer com que os Balti não caiam em tudo ou algo assim. Então é isso que o ar drag icis. Qual é a fricção no ar? Se estiver ventando, então você vai as bolas não vai cair tão rápido em si, então você pode ajustar esse tipo de coisas agora, dependendo do ângulo de sua tela, você também pode querer, ou o ângulo de sua objetos. Vamos entrar no elemento, Inspetor. Aqui, na verdade, métricas, inspetor. E vamos ajustar um pouco o ângulo desta barra. Você pode ver aqui a bola vai tipo de saltar fora dele um pouco e rolar fora. Ou se eu tiver uma animação para isso, vamos em frente e apenas bater gravar e então ter esse tipo de inimigo um pouco mais, e você pode ver que o tipo de animação girou um pouco e saltar a bola fora para que você pudesse até acionar essa animação baseada em um clique e ter o início de um jogo de tipo de interagir com ele. Se eu não quero que a bola saia da tela em tudo, por que teria que criar vários tipos de retângulos aqui e vamos em frente e então o que eu posso fazer é que eu poderia pegar cada um desses retângulos segurando o botão shift vindo para o meu inspetores de física como aqueles todos para ser estático, mas também entrar em meu espectro elemento e fazer a opacidade zero para que eu realmente não vejo isso em si, mas você pode ver que é ele é interagir com ele. Mas o usuário não o vê, então ele meio que o contém nessa caixa. Bem, eu vou clicar sobre isso de novo, esta pequena barra giratória, e eu vou adicionar um gatilho para ir em frente e começar a linha do tempo novamente. Então vamos dizer, iniciar a linha do tempo e vai ser a linha do tempo principal e depois jogar ao contrário. Então, agora, quando eu clico “boom “, ele reproduz em sentido inverso novamente. Então você pode começar a interagir com esses objetos usando os elementos estáticos. Isso é essencialmente o que a física é. Se isso estivesse em um dispositivo e eu tivesse esse controle, que inclinação? Isso me permitiria também usar meu dispositivo para controlá-lo, fazer com que ele salte também. Mas isso é uma introdução, uma pequena introdução à física novamente, na esperança de ter tutoriais para aprofundar a física mais tarde. Mas por enquanto, isso pelo menos faz você começar com como começar a brincar com o Inspetor de Física 55. 55 inspector de identidade: O último painel de inspetores que vamos falar é o Painel do Inspetor de Identidade Theo . O painel do inspetor de identidade é encontrado na última guia da seção de inspetores, e há algumas coisas que você pode fazer com isso. Você pode ver que agora eu realmente não tenho nenhum lugar para clicar, mas se eu selecionar este item, ele me permite adicionar um par de coisas que eu posso adicionar texto alternativo. E isso é bom para se houver algum tipo de leitor de tela de leitura de texto ou algo assim , isso descreverá o que esse elemento é. Portanto, é uma boa prática para qualquer elemento que você tem no palco para adicionar algum texto alternativo para ter em mente os leitores de tela para aquelas pessoas que não podem ver e isso irá adicionar, o leitor de tela irá basicamente descrever o que você colocar aqui basicamente, e a outra coisa está incluída na navegação do teclado. Isso também é importante para diferentes teclados. Se alguém precisar de uma guia através de algo para chegar a determinado conteúdo, então você gostaria de aumentar ou incluir isso na navegação do teclado se eles precisarem acessá-lo, especialmente se eles precisarem interagir com ele Se alguém precisar de uma guia através de algo para chegar a determinado conteúdo, então você gostaria de aumentar ou incluir isso na navegação do teclado se eles precisarem acessá-lo , se eles precisam clicar sobre ele ou se eles precisam Teoh Navegar ou para lê-lo ou algo assim, então e então você pode decidir. Certo, qual é a conta? Índice? O que significa que o primeiro item no índice será a primeira guia. segundo item vai ser a segunda guia e assim por diante. Então você pode decidir quando isso realmente acontece. E, em seguida, a próxima coisa é o nome de exibição do nome de exibição. Aprendemos sobre isso em alguns vídeos anteriores. Mas você pode ver aqui o nome da Ellipse bem aqui. Este será, na verdade, o nome a apresentar. Posso mudar isto para o que eu quiser. Meu nome, essa amostra. Você vai notar que a linha do tempo realmente diz amostra também. Outra coisa que eu posso fazer é dar a ele uma identidadeúnica identidade Nós aprendemos sobre isso principalmente na seção JavaScript. Então, se você quiser fazer referência à seção javascript, você pode fazer isso. Ou se você estiver indo para anexar um arquivo CSS externo ou se você estiver indo para anexar um script de trabalho externo violento, você quer falar com vários elementos no palco Bem, você pode dar a este um nome de classe também. Então, se você quiser que ele dê a este um nome de classe um círculo, então sempre que você fizer referência ou adicionar algum CSS externo para essa classe, ele vai tirar proveito de qualquer que seja. Portanto, quaisquer imagens de fundo ou quaisquer cores ou bordas ou qualquer coisa que você faça no CSS ou faça dentro do JavaScript ocorrerá com esse nome de classe. Então é essencialmente isso. É assim que se trabalha com o inspetor de identidade. Lá dentro, é do tipo toupeira. 56. 56 Conclusion: Eu só queria dizer obrigado por tomar o tempo para passar por isso para curso mull type. Felizmente, é dado a você a introdução que você precisa para começar com o tipo térmico. Eu sei que ainda há muito que você pode aprender. Espero ter mais exemplos e espero que alguns arquivos iniciais que você confinou em aprender Joe Joe dot net. E assim você pode baixar alguns desses arquivos de exemplo e começar com mais alguns arquivos de ajuda em postagens de bloqueio e tudo o mais. Então confira o meu site em aprender Joe dot nets para arquivos mais úteis. Mas obrigado. Obrigado por fazer este curso para fazer todo o caminho até o fim. Então eu só queria agradecer. E se você tiver alguma outra dúvida, sinta-se à vontade para entrar em contato comigo na aprendizagem dojo dot net