Transcrições
1. Introdução: neste tutorial, quero orientá-lo sobre como criar uma animação básica no adobe animate CC 2019. Eu tenho o meu famoso pequeno quadrado vermelho bem aqui no O que eu quero fazer é que eu quero tirá-lo de adobe, animar e importado para WordPress. Tenho aqui um exemplo do produto acabado. Este é um arquivo de animação de adobe totalmente responsivo com este pequeno quadrado vermelho se movendo pela tela. Como você pode ver, eu posso dimensioná-lo para baixo. Aiken dimensioná-lo para cima. É totalmente responsivo. E se eu tornar meu navegador ainda maior, ele fica no lugar. Vou levá-lo através do processo de exportação de adobe Animate e para WordPress . Estou usando a Virgin 5. Então eu vou criar um arquivo html animate totalmente responsivo adobe cinco e fazer upload no WordPress que você pode usar em seu site. Vamos começar
2. Configurando seu projeto de animação de HTML5: Tudo bem, só não vou deixar você saber antes de ir longe demais que eu estou executando o Adobe Animate CC 2019. Então, se você estiver lendo 2018, certifique-se de atualizá-lo para a versão milhões. Se você tiver a Creative Cloud, ela será atualizada quase automaticamente. Então, fique atento. Tudo o que faço está na nova versão do Adobe Animate CC 2019. Vamos levar o doutor para lá e sair do caminho. A primeira coisa que eu quero fazer ao configurar meu design é ter certeza de que verifiquei a plataforma Digite minha versão do Animate por algum motivo, e isso poderia ser seu ou não poderia ser seu Ainda usa como padrão Action Script 3.0 Action script 3.0. Basicamente morreu em 2012 quando Steve Jobs, quando ele ainda estava vivo, basicamente disse, pisca morto e matou a plataforma. Então, dinheiro, isso é o que há sete anos atrás, então basicamente o que aconteceu foi que a Adobe teve que embaralhar e criar um novo formato para o Adobe Animate, e eles fizeram isso na forma de HTML 5 canvas. Chegou muito tempo, mas sinto que está indo muito bem. E adoro o que fizeram até agora. Ok, então o primeiro a ter certeza de que eu quero dizer script de ação 3.0 na tela HTML cinco. Agora você pode definir o padrão se você quiser, mas para o meu design e também para matemática fácil porque eu sou um bacharel em artes plásticas. Então, para mim, matemática pode ser difícil. Vou dizer 1000 por 500 depois. Rahmani usou isso como a proporção ou a porcentagem de com duas altura. Este é um 50%. Então, para mim, é matemática fácil. Se você tem 1000 por 1000 isso é totalmente bom. Mas anote isso para o fim da estrada. Eu vou ficar com 1000 por 500 html cinco tela e criar. E essa é a sua configuração básica para Adobe Animate certificando-se que diz cannabis aqui em cima se
você criar o formato errado. Então, se eu escolher tripes de ação 3.0, que é essencialmente um arquivo rápido, ele vai dizer aqui nada. Não vai dizer tela. Portanto, se você não vir a palavra tela, ela está configurada incorretamente. A razão pela qual estou fazendo isso agora é que não há maneira de mudar de ação. Roteiro três. Basicamente, estás a dizer qual é a versão do flash. Então, se você configurar isso incorretamente da tela para o Swift, não
há volta e você precisa reiniciar todo o design. Portanto, esteja ciente disso desde o início, e eu estou fazendo um grande ponto para ter certeza de que você seleciona tela versus script de ação 3.0!
3. Configurar uma animação básica: Tudo bem, vamos criar uma animação básica no Adobe Animate CC 2019 na tela HTML cinco. Deixe-me fechar a versão não lona. Vou desenhar um pequeno retângulo. Poucos são para retângulo. E no meu exemplo eu usei um quadrado vermelho, então eu vou manter esse olhar vermelho, eu vou manter a tecla shift pressionada e apenas desenhar um quadrado simples agora, animado Eu não posso apenas mantê-lo neste design. Eu realmente tenho que colocá-lo em um clipe de filme. Então eu estou realmente indo para clicar duas vezes isso porque a razão pela qual eu clique duas vezes nesta técnica velha escola e eu vou mostrá-lo para você se eu colocar um traço em torno do meu design vamos adicionar como um traço laranja para isso e eu desenhar este retângulo Você provavelmente não Perceba Oops, Sua Vamos fazê-lo desta maneira Se este golpe foi o seu tamanho enorme Se eu clicar um único clique, eu só recebo o preenchimento. Mas se eu clicar duas vezes, eu realmente conflito o Phil e o derrame. Isto é realmente de um caminho, caminho, caminho, caminho, caminho de volta na Macromedia e até mesmo os dias futuros da onda. Isso é quanto tempo eu volto para dentro de um flash de barra animada que se você clicar duas vezes no seu desenho você conflito Whoa, lá, meu pequeno rato mágico em esteróides. Posso clicar duas vezes e pegar o Phil e o derrame. Como eu não tenho um Phil, eu geralmente ainda dubleclick caso eu esqueça, então eu clique duas vezes isso muito. Então, se você ouvir um pequeno clique duplo no fundo apenas observa o que eu dio Então eu vou controlar Click, e eu vou descer para converter em símbolo. Na verdade, eu tenho um teclado da velha escola aqui na minha mesa do computador que realmente tem as
teclas f. E eu adoro isso porque as teclas F ainda estavam penduradas em animação da Macromedia e dos futuros dias da Onda. Obrigado, Adobe, por seguir sua famosa regra de que uma vez que entra, ela nunca sai. Mas, infelizmente, eu discordo. Eu vou dizer converta em símbolo e eu vou dizer Praça Vermelha Agora aqui está uma coisa que você pode notar o nome do símbolo poderia ser maiúscula. Espaço minúsculo é o que você quiser. Isto é interno. Parece preocupar-se com o nome aqui no fim da estrada. Ficaremos preocupados com nomes de arquivos, mas por aqui pode comer o que quiser. Eu vou escolher clipe de filme o botão e er gráfico de uma era passada nos
anos 90 e os dois milhares de registro clipe de filme Diga Ok, tudo bem. Agora, se você notar que quando você clicar neste quadrado vermelho, você não recebe o pontinho Você só tem uma linha azul com o ponto de registro
no canto superior esquerdo. Vou agora descer a camada de um dedo do pé e clicar duas vezes. Agora aqui dizendo importante mudou a partir da nova versão do Animate. Se eu digitar Praça Vermelha e eu tiver um espaço lá, ele vai realmente converter para um sublinhado. Então, vai ser lido “Underscore Square”. Há uma caixa de alerta que aparece, mas eu já disse, não continue mostrando para mim agora. Claro que estou dando aula, e eu queria que ela aparecesse. Mas ele irá avisá-lo se você não usou animate antes ou você colocar um espaço lá, que ele não vai permitir espaços. Esta é uma coisa nova que mudou no adobe animate CC 2019. Então aqui eu vou dizer Red Underscore Square, mesmo que seja a mesma coisa só para ter certeza que eu estou no lugar certo. Agora, aqui está como você cria o quadro de animação. Um vai estar bem aqui. Eu vou passar por cima como um quadro 120 para ser um movimento lento, e eu tenho teclas F no meu teclado. Ainda assim, se você não fizer isso, você pode usar uma de algumas maneiras se eu apertar a tecla F seis que cria o que é chamado de um novo
quadro chave . Se eu desfazê-lo, eu também posso controlar, clicar e dizer, inserir quadro-chave. A única coisa é que ele não mostra a tecla F seis aqui, mas eu ainda posso ver inserir quadro-chave e ele está bem ali e o terceiro caminho está subindo. Insira a linha do tempo e insira. Bem, aí está, quadro
chave agora aqui dizendo único. Ainda não mostra a tecla F6. No entanto, a tecla F seis ainda funcionará. Pegue a tecla Phantom F seis que eu acabei de aprender com duas décadas usando adobe animate barra, barra barra futuro. Splash para a questão de curiosidades como sempre voltar para mais tarde. Então eu vou criar um quadro chave. E pelo menos, no meu caso, aos 120 anos e perco para frente e para trás. Eu vou fazer um quadro chave sem emoldurado para 40 F seis para mim. Mas você também pode controlar clique, inserir, quadro-chave ou inserir linha de tempo e quadro-chave também. Você pode fazer uma de três coisas. Eu ia colocar três quadros básicos para cima, e agora vou mover o quadrado para frente e para trás.
4. Crie uma animação clássica: Tudo bem. Agora que montamos nosso quadro de três chaves, vamos mover este quadrado para frente e para trás. O que eu vou fazer é controlar Click ou eu acho, no PC É Ault. Se você souber a resposta,
por favor, deixe-me saber os comentários. Eu sou uma pessoa Mac, então eu estou sempre adivinhando quando se trata do lado do PC em termos de atalhos de teclado e controles ou se você tem um mouse que é dois cliques do mouse, Eu só tenho o Magic Mountain só tem um, mas alguns Os ratos têm de o fazer. Você pode clicar com o botão direito do mouse e puxar este menu contextual e eu vou dizer criar
Tween clássico . Agora, se você já usou adobe animate ou flash no passado, você está acostumado com uma cor mais clara roxa. Eles mudaram a cor. Não sei bem porquê. Talvez alguma carta estivesse cansada do roxo chato depois de 24 anos. Então eles já foram com um tom mais escuro de roxo. Não se preocupe se você está acostumado com essa sombra diferente, é um bem, meus dois centavos eu não mudaria, mas, novamente, eu não trabalho para a Adobe. Então eu vou fazer agora vai ter esta animação básica. Se eu deslizar para trás sobre os 120 você notará que nada se move. Isso porque o quadro-chave no quadro um e o quadro-chave em 120 são exatamente os mesmos. Mas se eu Magic Mouse Olá lá. Se eu mudar isso, vou segurar a tecla Shift. Clique e arraste. E agora, se eu voltar para enquadrar uma nota que ela se move tão lentamente, eu não posso a tecla Enter no meu teclado para visualizar a velocidade e apertar a tecla Enter novamente para pará-la e ela se move. Agora eu vou fazer o próximo é eu vou repetir esse processo. Tenho um rato mágico muito feliz, aparentemente hoje. Então eu vou controlar o clique, pelo
menos no meu. Tenho-o em 120 anos. Pode parecer diferente Se for mais rápido, mais lento, eu vou dizer criar Tween clássico e porque 40 partidas para o primeiro quadro ele
vai apenas saltar e ir para frente e para trás. Então, se eu tivesse a tecla Enter, isso vai levar alguns segundos, mas vai ir da direita para trás do dedo esquerdo e vai invariavelmente loop uma e outra e outra vez. Agora, mais
uma vez, Aiken, diga loop. Se eu quiser visualizar isso, eu não vou para quem eu deveria desligar isso. Isso foi uma má ideia. Não tente fazer coisas novas entre sua rotina habitual, Hayden. Então eu não vou ter esse loop configurado. Retiro o que disse. Eu ia manter assim, mas por padrão, isso vai dar voltas e voltas até eu dizer “pare”. Ou sugeri que só acontecesse uma vez. Quero que isto toque uma e outra vez, por isso vou mantê-lo do jeito que está. Mas é assim que criar uma animação básica dentro do adobe animate CC 2019.
5. Como gravar e visualizar a animação: Tudo bem, está tudo bem. Mas vamos realmente salvar este arquivo. Ainda não fizemos isso. E vamos pré-visualizar. Usando um navegador de nossa escolha, eu vou para o arquivo e salvar. Agora, eu sei que se você guardá-lo pela primeira vez, que salvar e salvar, como é tecnicamente a mesma coisa, então eu vou comandar Asa. Sou sempre fã de atalhos. Eu tenho uma pasta chamada Animate Example, e eu vou chamar isso de um novo traço vermelho quadrado traço. Agora, note
que eu também usei isso é importante letras minúsculas e sem espaços. Isto acabará por se transformar no meu nome de ficheiro quando se trata de carregar o trabalho. O computador tanto PC e Mac não é que sensível, o que significa que você pode correr para ele é chamado de falso positivo. Significa que o computador não se importa se você tem letras maiúsculas ou minúsculas. A Web, especialmente os servidores Web. Onde vamos colocar esse trabalho é sensível ao K. Então eu tenho uma regra na minha sala de aula quando eu ensino que todos os nomes de arquivos são sempre minúsculas. Você notará algumas coisas no futuro. Vamos usar maiúsculas. Mas, na maior parte, todos os nomes de arquivos serão sempre minúsculas. E assim e você também não deve ter nenhum espaço. Então, e se você quiser obter super técnico, você também não deve ter qualquer Asterix é ou qualquer personagem especial. Então pense em letras, números e para tomar o lugar de espaços que você pode usar um traço ou em sublinhar essas regras de ferramenta
econômica que eu tenho onde eu vou dizer novo traço, Red Dash quadrado ou novo sublinhado Red Underscore Square. Então vamos salvar este arquivo. E agora que está salvo, vou pré-visualizar todo esse projeto. Esta é uma era de retrocesso, outra vez. Sou um comando e a tecla Enter. E quando eles fazem isso na tela do meu outro computador, eu movê-lo. Eu tenho um quadrado vermelho se movendo para frente e para trás. Isso é o que é chamado de host local, então ele está jogando no meu computador local, e pode ou não escala, o que não faz. Então, se você notar isso quando eu mover meu navegador, ele realmente não escala em tudo. Mas este é apenas o primeiro passo que eu quero salvar em pré-visualização. Ao longo do caminho, quanto mais tempo que pode pré-visualizar significa mais vezes eu posso corrigir rapidamente caso eu estrague algo. E quando você está construindo revestimento de design, você quase gasta 90% do seu tempo depurando e 10% projetando. Então, sempre que ,
como, para fazer coisas que exigem 567 passos, eu sempre verifico que pode funcionar rapidamente para ter certeza de que eu não estou perdendo um passo ou que as coisas não funcionam. No final. Ia certificar-me durante todo o processo que funcionasse, como podem ver isto a mover-se para frente e para trás. Então o que eu me pergunto a seguir é eu vou ajustar algumas configurações, e eu vou fazer isso responsivo porque agora não é responsivo. Não está se movendo. É apenas o jeito que é. E na Web, tudo deve ser responsivo. Não deve ser estática nesta nova era da Web, onde temos tablets, computadores e telefones celulares, que são quase tamanho tablet nos dias de hoje. Mas ainda assim, eu quero ter certeza que isso se move para frente e para trás em todas as plataformas diferentes, então vamos fazer isso a seguir
6. Tornando o projeto: Certo, vamos passar algum tempo nas configurações de publicação porque temos a animação funcionando. Voltarei para a linha do tempo, mas preciso fazer alguns ajustes que quero fazer para ter certeza de que isso é totalmente responsivo e exportando da melhor maneira possível. Vou dizer arquivo em configurações publicadas e alterar algumas coisas nas minhas
configurações publicadas . Vou passar para as configurações de imagem primeiro. Eu não quero exportar documento como textura porque eu quero que este para exportar a
forma baseada em vetor e não se transformar em imagens. Diz melhor desempenho, tamanho
maior. Eu entendo isso comum. Desmarque que quando eu desmarquei os documentos de textura, ele então me pediu para exportar imagens como ativos. E você poderia combinar as imagens apesar das fraudes? Vou desmarcar isso também. Eu só tenho uma forma baseada em vetores, mas e isso é um pouco mais avançado para entrar. Mas minha coisa é como ter o que é chamado de sistema passado, significa que eu não quero animar para ajustar ou alterar ou agrupar minhas imagens no que é chamado de folha de
sprite. Eu queria deixá-lo sozinho, então eu sempre me certifico de que eu desmarque O documento de exportação é textura, e eu exportar ativos de imagem também está desmarcada. Agora que tenho as configurações de imagem desmarcadas, vou rever o básico e isso é importante. O que eu quero fazer é tornar responsivo. Então, esta é na verdade uma ferramenta muito poderosa. Faça ambos responsivos e a escala para preencher a área visível se encaixam na exibição. O que isso significa é que, se eu ajustar o navegador com ou por altura, ele vai preencher para o lado que tocar primeiro. Então eu quero dizer, fazer responsivo ambos e escala para preencher a área visível caber na vista. Vou dizer, publique neste aqui. E agora publica o meu trabalho onde guardei o meu ficheiro. Vamos descobrir que eu vou entrar em uma tela diferente enquanto eu estou falando. E aí está ele. Agora, em um exemplo anterior, eu fiz para uma classe diferente. Eu tinha a Praça Vermelha, então eu vou me livrar da Praça Vermelha, Praça
Vermelha e da Praça Vermelha, e eu não preciso mais de imagens. Então, se eu clicar duas vezes no novo arquivo html Praça Vermelha, deixe-me fechar minha edição anterior Agora você pode ver movendo para frente e para trás. Mas aqui está algo importante. A nova versão agora é dimensionada com base em onde ela está no navegador. Agora, se você viu no primeiro vídeo, eu coloquei pequenos quadrados azuis e todos mostraram para você também. O que os pequenos quadrados azuis fizeram foi mostrar os cantos do meu design. Mas para isso para praticamente um Ok, eu só tenho um quadrado vermelho saltando para frente e para trás. E à medida que redimensiono o meu navegador com base no com ou na altura, ele fica à vista. Então, agora que eu não tenho animação e eu tenho escalável, vamos agora mover essas peças sobre o nosso arquivo WordPress e comprimento,
hum,para hum, cima.
7. Upload do seu projeto de Animação para seu site: Tudo bem. Agora, isso requer um pouco de trabalho de sua parte, porque cada site foi configurado um pouco diferente. Então o que eu estou usando como eu estou usando uma coisa chamada Pato Cibernético. É uma pequena ferramenta livre, tanto para Mac quanto para PC, mas em Cyber Duck eu tenho aqui você pode ver sobre pato cibernético. Lá está ele para manter o pato. Deixe-me mover o doutor, Cyber Duck pedir-lhe para entrar no seu site. E principalmente, se você estiver usando um wordpress auto-hospedado, você terá acesso a isso. Mas isso pode levar um pouco de trabalho para descobrir quais são suas configurações de FTP. FTP significa protocolo de transferência de arquivos e todos os servidores auto-hospedados básicos com WordPress deve ter isso, a menos que sua palavra ou você está hospedando empresa não bloqueá-lo. Portanto, esteja ciente nesta etapa, talvez seja necessário pausar o vídeo enquanto você descobre quais são suas configurações. Mas quase todas as ferramentas FTP. Então, no Cyber Doc, vai me perguntar três coisas. E se estiver usando sftp, você terá algumas configurações diferentes bem aqui. Também há coisas para janelas para as traseiras. Para a Amazon. Você tem algumas peças diferentes também aqui com Dropbox, Google Drive, Microsoft todas essas coisas boas. Mas estou usando FTP básico ou protocolo de transferência de arquivos. Eu já coloquei minhas informações de uma conta Nautilus Designs, e eu tenho meu ftp configurado e fecho essa janela. Eu posso ver isso na minha pasta pessoal, Minha pasta de nível base do WordPress. Eu tenho um par de pastas, então eu tenho uma coisa chamada WordPress cinco para apenas este propósito de demonstração. Mas este é o lugar onde o meu WordPress arquivado viver e respirar. É importante não tocar em nenhum desses arquivos ou WordPress pode falhar totalmente. E estou falando sério. Tudo bem. O que eu quero fazer é criar uma nova pasta, embora dentro da Cyber Ducati tem as mesmas teclas que o Mac. Então comando turno inimigo Macintosh, onde ele pode ser controlado no PC. Se eu estiver incorreto no PC, então por favor me avise. Vou criar isto. Mas também vou seguir minhas regras para nomes de arquivos. Vou dizer “animar “minúsculas porque esta é a foto. Todas as minhas animações do Adobe Animate estão indo para o fim. Eu vou dizer criar e up pops e nova pasta Note que isso não afetará nenhum projeto é longo. Você não tem um nome WordPress chamado Animate em Salonika Page ou um Post. Você também pode nomear esses arquivos de traço animado ou animar arquivos HTML cinco, apenas no caso de você ter algo chamado animar. Eu não sei. Então, posso nomeá-lo apenas animar. Vou trancar isso. Então eu tinha a foto chamada Animate, e eu vou clicar duas vezes e entrar nessa pasta. Como você pode ver aqui, ele diz sites cortar WordPress tracejado cinco barra animar sem espaços e sem
letras maiúsculas . O que eu queria a seguir é arrastar três coisas ou devo dizer duas coisas. Eles não têm uma pasta de imagens. Mas se você não tem a pasta de imagens que você estava usando ou se você trouxe um J peg ou um presente , essas seriam as duas únicas imagens talvez trazendo um arquivo PNG dependente do que você está trazendo em que você terá uma pasta de imagens. Então, se você tiver isso, selecione isso. Mas eu vou selecionar apenas o script Java e o arquivo HTML Eu não preciso do f l A. Se você quiser, você pode carregar totalmente o arquivo f l A se você quiser mantê-lo para manter seguro em seu servidor. Mas não vamos utilizar isso, então o F A é o seu arquivo de trabalho quatro. Adobe animar a extensão F L. A ainda está lá, mesmo que seja animada. F l um Flash. As coisas não mudam. Então, vou carregar este novo quadrado vermelho. Observe as letras minúsculas, o espaço não para que eu possa arrastar isso para o meu software FTP. Neste caso, o pato cibernético. Deixe as transferências. Ei, upload completo. Agora enviei novos vermelhos. Onde html em novo ponto quadrado vermelho Js para script Java. Vamos agora visualizar isso em um navegador da Web.
8. Prédio de projeto de HTML5 online: lembre-se que eu disse até testar as coisas muito rapidamente como um fazer as coisas passo a passo. Esta é uma dessas coisas. Então, no meu FTP para a
minha configuração, minha pasta é o meu nome de domínio dot com dot net info dot qualquer site barra barra barra WordPress traço cinco barra animar barra novos vermelhos onde essas barras indicam nomes de pastas . Então, neste caso, mentes Nautilus projeta eu vou dizer sites traço, Aiken tipo corretamente sites traço WordPress, traço cinco, traço, animar e, em seguida, não traço Todos aqueles vezes barra, neste caso, mentes vai ser novo traço vermelho traço quadrado que html e f uma pré-visualização ele ou vai dar-lhe uma resposta certa ou se eu propositadamente talvez soletrado com um capital s problemas, e ele diz, Oops, essa página não pôde ser encontrada usando seu ar para, 04 página. Então, note que é aqui que a sensibilidade K entra. Capital ass é diferente de um minúsculo S é longo que você pode ver o seu projeto se movendo para trás e para frente, você está no passo certo para agora colocar isso em um WordPress. O primeiro passo ist carregado o segundo passo é testá-lo. E agora nosso terceiro e quarto passo é escrever um pouco de código. Não se preocupe. Vai ficar tudo bem e incorporado à nossa configuração WordPress.
9. Como escrever CSS no WordPress: Tudo bem. Nosso próximo passo é agora fazer login no reboque. WordPress, e escrever um pouco de CSS para fazer este trabalho. Agora, só você sabe, onde eu estou. Estou usando nós olhamos para as atualizações. Estou em um WordPress 5.0 ponto três. No entanto, fiz uma coisa um pouco diferente. Tanto quanto eu amo a nova versão dos posts WordPress e páginas que é chamado de Gutenberg ? Eu tenho uma afinidade com os clássicos. E então eu instalei um plugue nesse design. Yosi para cima. Há novas versões. Você sabe o que? Estou na atualização. É sempre nervoso quando faço as coisas ao vivo na câmera e espero que resulte. Mas eu realmente instalei um plug in chamado Editor Clássico para este tutorial. Muitos de vocês estarão em uma versão mais antiga do WordPress, mas sei que você pode fazer isso tanto com a nova Virgem da Versão cinco, que tem uma nova configuração de pago está em posts, mas eu instalei essa coisa chamada Editor Clássico. Isso é só tudo. Eu coloquei mais uma peça em também de nota que eu estou usando o tema básico 2017. Então você pode ter um visual totalmente diferente do seu design se você tiver um tema diferente. Configuração diferente. Mas eu tenho um design bem básico estabelecido no WordPress. Então eu quero fazer é eu quero editar meu CSS agora CS esque vans para folhas de estilo em cascata. Alguns temas, dependendo do que você instalou, terão uma área CSS personalizada. Neste caso, estou usando a versão básica 2017 e, portanto, não tenho a capacidade de adicionar uma área
CSS personalizada dentro de um tema em algum lugar aqui. Então eu tenho que ir ao meu editor para fazer isso acontecer. Se você estiver fazendo isso pela primeira vez, você receberá uma mensagem de aviso dizendo: “
Ei, Ei, tenha
cuidado, você está tocando seus arquivos. Portanto, tenha cuidado Então você também pode editar o seu CSS Este puxado construído no editor CSS. Eu estou meio que indo um pouco velha escola com este design e apenas indo com o CSS básico. Mais uma vez, isso pode ir para algum lugar diferente em seu tema. Portanto, esteja ciente de que este pode não ser o mesmo lugar, mas para fins de demonstração. Estou usando uma versão muito despojada do WordPress do Onley usando a configuração padrão. Então, nesta versão 2017 na folha de estilo, eu fui para baixo como a linha 4332. É um monte de CSS. E aqui eu vou cair como a linha 43 34 monótipos, um, código. Eu vou digitar, ponto final e uau, não é assim
que você tem minhas chaves. Animar contêiner. Agora note que em versões anteriores de nomes de arquivos, eu disse para não usar letras maiúsculas. Isso é com você. Eu tenho um estilo antigo de programação onde eu tenho a primeira palavra quando se trata de CSS. Isso realmente vem de Flash
Way, muito atrás no início, na verdade, como meados dos anos noventa para os dois milhares onde foi considerado o que é chamado de caso de camelo em casos de
camelo. Primeira palavra minúscula. Segunda palavra, primeira letra maiúscula como uma corcunda de camelo. Então você vai me ver fazendo isso. Em todos os meus exemplos de CSS e CSS vai com HTML. Então esse período representa o que é chamado de classe. Como eu disse, um pouco de codificação. Mas isto é cerca de seis linhas. E não se preocupe mais com isso. Alguém para dizer período animar contêiner. Vou acertar o espaço e vou dizer abrir colchete, que é a chave direita para o seu peaky e shift colchete aberto e fecha. E o que eu apertei a tecla de retorno que em densa meu tipo e coloca o colchete próximo um nível abaixo. Eu vou dizer posição, parente do
cólon e semi-cólon, e eu vou mostrar-lhe por que isso está em mais algumas linhas de casaco. Eu não vou dar-lhe algum espaço por padrão, então eu vou dizer margem inferior 10 p x ponto e vírgula Isso só dá um pouco de espaço abaixo de sua animação para qualquer tipo, quaisquer parágrafos, quaisquer imagens para estar abaixo. Isto é opcional. Se você não quer ter um fundo de margem, você pode tirá-lo imediatamente. O importante é que temos posição relativa, então eu vou ter 10 pixels ou 10 p x e o semi cólon. Agora vá para baixo para mais algumas linhas e diga animar contêiner vai digitar a mesma palavra é construído acima, então certifique-se o que? Como se escreve aqui a sua palavra que se escreve a mesma coisa lá em baixo? Eu vou dizer que eu enquadrar e eu vou te mostrar por que no próximo vídeo eu vou dizer que eu enquadrar nenhum período maiúsculo Mantenha tudo em minúsculas você deve ter I quadros soletrados exatamente dessa maneira notado Virar verde Se eu fizer maiúsculas eu quadro realmente ficar verde que deveria não acontecer Mas por causa deste propósito, vamos mantê-lo mais baixo caso I frame e repetir o processo novamente Então eu vou dizer abrir
colchete encaracolado . Se eu digitar a chave certa Lá vamos nós. Tecla de retorno. Vou escrever algumas linhas de código. Eu vou dizer posição, Colon Absoluto se eu puder soletrar bem aí está. E semi, Colon que nessa linha, eu vou dizer top zero esquerda zero com se eu posso soletrar de novo com Colon. Uau, Mikey Taping Bem, eu estou falando que não é forte de repente. Tudo bem. Com 100% e altura 100% e semi-dois-pontos que é todo o CSS Você tem que digitar nesta tela. Há mais uma linha por tipo na próxima tela. Mas vamos acabar com isso. Então nós entendemos como isso funciona em CSS ou cascata este contêiner animado vai ficar fora ou ao redor da minha animação, que vai estar dentro do que é chamado de moldura de olho. A animação vai então mover com base no tamanho do recipiente animado, que diz preencher o espaço de com e altura. Ele parece um quadrado porque com um 100% e altura 100%. Mas estamos apenas dizendo para preencher a caixa de todos os lados e certificar-se de que a posição está no canto superior esquerdo e que não há espaço no topo ou no esquerdo. Então, é quase apenas redefinir as coisas na Web. Nós reiniciamos muito. Não gostamos das coisas no canto superior esquerdo. Você pode movê-los na estrada, mas este é o todo o código que você tem que colocar dentro de sua área CSS. Eu não coloquei no editor CSS, e você pode ter uma área CSS personalizada dentro do seu tema. Mas, mais uma vez, esta é a posição animar contêiner. margem relativa inferior animar a posição do quadro do recipiente I. Zero superior absoluto esquerda zero com 100% e altura 100%. Observe que você não se esqueça de clicar em Atualizar arquivo. Caso contrário, isso não salvará, e não há como visualizar as configurações ainda. Estamos chegando lá agora. Vamos seguir em frente e colocar em nosso design em HTML e referenciar esses mesmos números no próximo vídeo
10. Como escrever o HTML: Muito bem, nós escrevemos o nosso CSS. Agora vamos para a página deles ou um post e ligar este novo quadrado vermelho em direção a imprensa Quando as páginas que eu vou dizer adicionar novo e a partir daqui eu vou fazer é eu vou dizer novo
quadrado vermelho só porque porque não? Vamos nos divertir um pouco. Agora, mais
uma vez, estou no modo clássico e se você estiver aqui, certifique-se de mudar de visual para texto, pois isso realmente importa na área de texto. Isso é basicamente HTML que Aiken digita em. Se estiver usando a versão Gutenberg da nova versão do WordPress cinco, você pode simplesmente alterar sua configuração do parágrafo dois html. Mas neste caso, estou trabalhando com o editor clássico em visual e texto. Além disso, dependendo se você estiver usando um tema ou não, você pode ter diferentes opções para colocar HTML nesse design. Mas para o bem deste propósito, vou ficar com o editor clássico e o texto. Vou escrever o seguinte. Vou dizer menos do que assinar a aula de Div. Então lembre-se que tivemos esse período antes desse período no CSS denota a classe de palavra off. Eu digo classe é igual e estragar isso exatamente o mesmo recipiente animado Eu usei um C maiúsculo Eu vou dizer citação,
fim, fim, citação em grande estilo. Agora, um estilo é o que é chamado de CSS de Lyon, mas isso me permite determinar a proporção que eu tenho criar a caixa para. Eu vou dizer estilo é igual a citação, citação e volta dentro Essa citação eu vou dizer preenchimento traço baixo cólon uma certa porcentagem. Agora que percentagem de distância? Coloque isso vai círculo completo Se eu voltar para o Adobe Animate
maneira, caminho de volta quando o com na altura é uma proporção Então eu vou digitar minha calculadora, mostrar como eu consegui isso. Vamos puxar a calculadora. Lá vamos nós. E espero que lá ele apareça. Eu vou digitar 500 dividir isso por 1000 agora eu disse antes e como o segundo módulo que eu gosto de matemática fácil e é por isso que eu gosto de matemática fácil. A proporção é de 0,5 ou se multiplicarmos isso por 100 obtemos 50%. Então eu sei que se eu voltar agora para este código, esse percentual de preenchimento inferior é 50 porque eu usei matemática fácil. O começo em 1000 por 500. Faça nota. Você pode ter um certo número que não é perfeito. Então, se você tem, como um cálculo diferente que, digamos, é como 500 por 9 97 basta fazer o seu sacana ou manter 51% sabendo que você terá um pouco de espaço abaixo. Como não se encaixa perfeitamente, eu não posso apertar 50,1%. Eu tenho que digitar como 51 ou 50 e perder um espaço sempre que um conjunto coisas up. Penso no tamanho real com que estou a trabalhar. Então isso é uma pequena conversa para um cálculo simples. Estou ciente disso. Batendo no fundo 50% semi cólon que o tranca assim. CSS. Eu só escrevo aqui porque eu sempre quero ter certeza de que a proporção é da tela HTML cinco
específica que eu estou trabalhando com. Agora que escrevemos estão batendo cólon inferior, 50 semi cólon e citação. Vou terminar com um suporte fechado. Sempre que eu leio HTML, Eu tenho que ter um sinal menor e um símbolo maior que no início do final do meu casaco ele e na chave de retorno no tipo menos do que sinal I quadro. Agora note que ele tem que ser minúscula para coincidir com a minúscula dentro do meu CSS que eu escrevi anteriormente eu vou dizer que eu quadro e, em seguida, SRC isso significa fonte ou eu dedo essencialmente dizer o viciado em estilo fonics cirque SRC igual Sign, citar, citar e voltar a esta área e, em seguida, escrever o seguinte com Jesus, eu poderia soletrar corretamente com igual a 1000 que vai coincidir com o meu design aqui à
direita e fechar aspas é igual a 500 e, em seguida, fechar aspas. E mais uma coisa eu vou dizer, só porque eu provavelmente deveria ter colocado isso dentro do meu CSS e um monte de configurações padrão fazer isso. Mas desde que o meu não tem, desde que eu tenho um tema WordPress muito básico, Eu vou dizer estilo novamente. S t Y l e é igual a borda da citação, dois pontos e, em seguida, dizer zero semi dois-pontos aspas e maior que símbolo. E então eu tenho que escrever um quadro de olho perto dizendo barra I frame. Talvez lá vamos nós e fechá-lo com um símbolo maior que a fronteira significa por padrão. I frames tem uma borda. Na verdade, são muito irritantes e muitos temas. E o Wordpress tira-o para fora. Mas desde que eu estou usando um tema padrão, ele não faz. Assim, apenas para fins de exibição. Vou mantê-lo assim. E que mergulhou o topo. O que você tem que fazer em HTML é que você tem que abrir o que é chamado de tag e fechar a tag . Então, se for I frame no início, eu tenho que dizer barra I frame no final porque esta tag DIV abre esta parte superior, Eu tenho que dizer menos do que sinal barra div. Agora, tudo
isso parece bom, exceto por uma peça crítica, Cirque ou a fonte. Agora tenho uma conta deste carinha indo e voltando dos meus desenhos de Nautilus. Vou clicar dentro daqui neste Ural ou no Localizador de Recursos Uniformes. As pessoas pensam que é universo ou universal, mas é uniforme. Então eu vou copiar este seu URL Eu vou voltar para adicionar uma nova página. Vou colar este código dentro dele e depois dizer “publicar”. E isso é todo o html que você tem que escrever para fazer o arquivo animado funcionar dentro do WordPress
11. Funcionário?: Então a pergunta que você provavelmente está esperando para ver porque agora passamos por dois módulos, a dele não funciona. Sabemos se isso realmente conseguiu? Nós não éramos Dio agora, sim, eu realmente não poderia parar e visualizá-lo antes de agora. Mas aqui está o resultado. Dê uma olhada. Como você pode ver, este pequeno quadrado vermelho salta para frente e para trás, e parece muito bom. No entanto, agora
temos que ajustar o navegador para ver se ele de fato, escala e veja, que isso vai e vem em escalas maiores ou menores e mantém a proporção. Essa é a maior peça de tudo, que isso irá manter o tamanho do design geral em tamanho perfeito. Então, se eu quiser colocar dizendo abaixo Então, se nós fossemos mostrar exemplo de vamos dizer, editar página novamente dentro do WordPress e todos dizem sim, ele funciona onde se anos não funcionou Oh não, não
funcionou. Um dos dois resultados acontecerá. A melhor coisa sobre codificar é que vai ser um sim ou um não. Não há talvez então, se eu colocar algum texto abaixo deste quadro em uma pré-visualização, ele mais uma vez. Ok? Sim, funciona ou Oh,
não, não funciona que você admite, e que o tipo se mantém logo abaixo do espaço real. Ele não o move para cima ou para baixo. Essa magia veio mais uma vez quando colocamos a proporção de estofamento de estilo inferior 50% para a peça
WordPress. Então espero que o seu tenha funcionado e a magia tenha sido alcançada.
12. Testando em outros navegadores: Então eu estou correndo safári porque eu estou em um Macintosh. Mas eu também quero ver se ele funciona e outros navegadores porque nada é pior do que supor que ele vai funcionar em todas as plataformas, mas não realmente alcançar esse efeito. Então eu tenho Fox de fogo. Olá, não
pode Ásia Como você está? Então eu tenho um longo safári. Tenho Firefox e cromo porque estou em um Macintosh. Não posso verificar. Eu como. Essas são as coisas que eu tenho que assumir. Mas como o Chrome tem uma quota de mercado maioritária no mercado de PCs, sinto-me bastante seguro. Mas se eu testar o Firefox safari e o chrome, estou realizando e testando em várias plataformas. Então aqui vamos nós. Aqui é fogo Fox See Firefox trabalhando ao lado safari, ambos os caras pequenos se movendo, e agora é cromo teste e cromo é, mas isso não é o projeto certo no projeto certo. Então, o que funciona no cromo? Funciona no Firefox e funciona no safari. Eu sei agora que isso funciona em todas as plataformas, e se eu estou executando qualquer tese AM dispositivos cantados no celular porque eles têm crone e ou o iPhone, que tem safari, que estes vão funcionar em dispositivos móveis como bem, e é assim que você pode criar uma animação básica inanimate e colocá-lo em direção à imprensa e para criar uma tela HTML cinco totalmente responsivo que você pode usar em seios de ala.
13. Em conclusão: Muito obrigado por assistir o todo para este módulo. Siris de transformar e Dobie anime html cinco arquivos em novas saídas, totalmente responsivas para usar no WordPress. Estou curioso. Você realmente começou a trabalhar em seu site? Se assim for, envie-me o u R l Coloque-o na seção de comentários Leve-me uma captura de tela. Leve-me. Faça uma captura de tela ao vivo e falando por muito tempo. Aparentemente, quero saber se funcionou para você? Porque acho que o Adobe Animate é o joelho da abelha. É divertido. É tão legal de usar. Mas a questão final é que você pode exibi-lo em seu site? A resposta é sim. Agora você pode mostrar html totalmente responsivo cinco compatível. Não o Swift. Swift não funcionará em dispositivos móveis, especialmente na comunidade da Apple em tablets. Mas HD modificar totalmente responsivo técnicas de codificação realmente robusto em wordpress que você pode mostrar aos seus amigos e familiares. Estou curioso se você fez isso funcionar. Se você passou por todos os módulos, eu adoraria ouvir por você nos comentários. Por favor, publique um comentário sobre isso. Isso significaria muito para mim. Obrigado mais uma vez. Tanto para assistir a esses vídeos. Eu aprecio muito isso.
Haydn Adams, Creative Technical Educator
