ajuda e tutoriais - adobe help center · para obter mais informações sobre este novo recurso,...

Ajuda e tutoriaisADOBE FLASH PROFESSIONAL

Fevereiro de 2016

ndiceNovidades 1

Resumo dos novos recursos 2Plataformas 15

Use o Conversor de tipo de documentos para converter projetos do Animate CC em outros formatos de documentos 16Suporte da plataforma personalizada 18Criao e publicao de documentos HTML5 Canvas no Animate CC 21Criao e publicao de um documento WebGL 37Compactao de aplicativos no AIR para iOS 43Publicao de AIR em aplicativos Android 49Publicao no Adobe AIR para desktop 55Configuraes de publicao do ActionScript 63Prticas recomendadas - Organizao do ActionScript em um aplicativo 71Como usar o ActionScript com o Animate CC 73Prticas recomendadas - Diretrizes de acessibilidade 81Acessibilidade no espao de trabalho do Animate 86Programao e gerenciamento de scripts 90Ativao do suporte para plataformas personalizadas 104Ativao do suporte para plataformas personalizadas 109Referncia da API de suporte da plataforma personalizada 115Criao de contedo acessvel 116Ativao do suporte para plataformas personalizadas 130Trabalhar com plug-ins personalizados de suporte da plataforma 135Depurao do ActionScript 3.0 138

Fluxo de trabalho e espao de trabalho 143Uso das Bibliotecas da Creative Cloud e do Adobe Animate CC 144Uso dos painis Palco e Ferramentas do Animate 150Fluxo e espao de trabalho do Animate 158Uso das fontes da Web do Typekit em documentos HTML5 Canvas 167Linhas de tempo e ActionScript 171Trabalhar com mltiplas linhas de tempo 175Definio de preferncias 176Uso de painis de criao do Animate CC 182Criar camadas na linha do tempo com o Animate CC 188Criar uma planilha de entidades grficas 196Mover e copiar objetos 198

Preferncias de sincronizao do Animate com a Creative Cloud 201Como trabalhar com o painel Adobe Color 206Modelos 208Localizao e substituio no Animate 210Desfazer, refazer e o painel de Histrico 215Atalhos de teclado 218Como usar a linha do tempo no Animate 220Criao de extenses HTML 224

Animao e interatividade 227Uso da animao da ferramenta Bone no Animate CC 228Guia de animao 240Trabalhar com uma animao de interpolao clssica no Animate CC 244Como criar uma animao de interpolao de movimento 255Editar interpolaes de movimento usando o Motion Editor 277Interpolao de formas 286Como usar quadros e quadros-chave no Animate CC 292Animao quadro a quadro no Animate CC 296Use o Conversor de tipo de documentos para converter projetos do Animate CC em outros formatos de documentos 301Prticas recomendadas - Publicidade com o Animate CC 303Noes bsicas de animao no Animate CC 306Adicionar interatividade com snippets de cdigo no Animate CC 312Criao e publicao de documentos HTML5 Canvas no Animate CC 315Pincis personalizados 331Criar botes com o Animate CC 335Trabalhar com mltiplas linhas de tempo 339Como trabalhar com cenas no Animate 340Criao e publicao de um documento WebGL 342Usar camadas de mscara no Adobe Animate CC 348

Multimdia e vdeo 351Exportao de arquivos SVG 352Como usar som no Adobe Animate 355Criao de arquivos de vdeo para o Animate CC 363Como adicionar um vdeo a um documento do Animate 369Trabalhar com pontos de sinalizao de vdeo 377Transformao e combinao de objetos grficos no Animate CC 379Manipulao e criao de ocorrncias de smbolo no Animate CC 385Desenhar e criar objetos com o Animate CC 392

Cor 399Verificar ortografiaTraados, preenchimentos e gradientes com o Animate CC 407Desenhar linhas e formas com o Adobe Animate 415Organizao de objetos 431Automao de tarefas com o menu Comandos 434Aplicao de padres com a ferramenta Pincel de borrifar 436Aplicao de modos de mesclagem 438Grficos em 3D 442Exportao de sons 450Trabalho com bibliotecas no Animate CC 454Como incorporar fontes para proporcionar uma aparncia uniforme ao texto

460Preferncias de desenho 462Dimensionamento e cache de smbolos 464Filtros grficos 468Compartilhamento de recursos da biblioteca entre arquivos 478Remodelao de linhas e formas 483Como trabalhar com o painel Adobe Color 487Trabalhar com arquivos Fireworks 489Uso do Animate CC com o Adobe Scout 493Como trabalhar com texto TLF (Text Layout Framework) 495Trabalhar com arquivos AI do Illustrator no Animate CC 511Trabalhar com arquivos do InDesign no Animate 526Trabalho com smbolos no Animate CC 527

Publicao e exportao 533Exportao de arquivos do Animate CC 534Exportao de arquivos SVG 537Exporte grficos e vdeos com o Animate CC 540Publicao de documentos AS3 546Criar uma planilha de entidades grficas 552Exportao de sons 554Exportao de arquivos de vdeo QuickTime 558Controle de reproduo de vdeo externo com o ActionScript 559Prticas recomendadas - Dicas para a criao de contedo em dispositivos mveis 565Prticas recomendadas - Convenes de vdeo 573Prticas recomendadas - Diretrizes de criao de aplicativos SWF 575

Prticas recomendadas - Estruturao de arquivos FLA 580Prticas recomendadas para otimizar arquivos FLA no Animate CC 583Prticas recomendadas - Convenes de comportamento 594Configuraes de publicao do ActionScript 597Especificao das configuraes de publicao para o Animate 605Trabalhar com o Adobe Premiere Pro e o After Effects 627Trabalhar com o Animate e o FlashBuilder 630Exportao de arquivos projetores 634Exportao de vdeos com o Animate CC 636Modelos de publicao HTML 639

Novidades

1

Resumo dos novos recursosVerso 2015.2 do Adobe Animate CC (junho de 2016)

O Adobe Flash Professional CC agora se chama Adobe Animate CC.

O Adobe Animate CC permite criar animaes vetoriais, propagandas,contedo multimdia, experincias envolventes, aplicativos, jogos e muito mais,tudo em um ambiente de criao baseado em uma linha do tempo. OAnimate oferece suporte nativo para vrias sadas, como HTML5 Canvas eWebGL, alm de oferecer suporte a formatos personalizados, como oSnapSVG.

A flexibilidade do Animate com os formatos de sada garante que o contedoseja exibido em qualquer lugar, sem a necessidade de plug-ins.

O Animate tambm oferece as melhores ferramentas de desenho e ilustraodo mercado e uma integrao eficiente com o Adobe CreativeSync. Como oAnimate CC parte da Adobe Creative Cloud, voc tem acesso a todas asatualizaes mais recentes e lanamentos futuros no momento em que elesforem disponibilizados. Saiba mais sobre a Creative Cloud.

Continue lendo esse material para obter uma introduo rpida aos novos recursos disponveis com aatualizao mais recente do Animate CC e links para outros recursos que fornecem mais informaes.

Novidades e melhoriasVerso 2015.2 do Adobe Animate CC | Junho 2016Pincis padroSeletor de quadrosTransparncia de camadaOpes aprimoradas de publicao na Web

Mesclagem do cdigo de JSON/JSIncorporao de Javascript no HTMLSuporte para fundo transparente de telasSada HTML5 Canvas compatvel com HiDPIDimensionamento adaptativoOAMs transparentes e adaptativasEncaixe de bitmap durante a criaoPr-carregador no HTML5 CanvasMelhorias no modelo de publicao do HTML5 CanvasCompatibilidade com JSAPI, que permite a importao e a exportao dos modelosHTML para documentos CanvasPublicao dos ativos de tela na pasta raizCentro do palco

Outras melhoriasOnion skinning em cores, definido pelo usurioPinScriptOpes avanadas de importao de PSDOpes avanadas de importao de AIDesempenho nico na plataforma do WindowsInteraes aprimoradas do pincel de tinta

2

http://www.adobe.com/br/creativecloud.html

Para o incio

Pincis padroSeletor de quadrosTransparncia de camadaOpes aprimoradas de publicao na Web

Mesclagem do cdigo de JSON/JSIncorporao de Javascript no HTMLSuporte para fundo transparente de telasSada HTML5 Canvas compatvel comHiDPIDimensionamento adaptativoOAMs transparentes e adaptativasEncaixe de bitmap durante a criaoPr-carregadorMelhorias no modelo de publicao doHTML5 CanvasCompatibilidade com JSAPI, que permite aimportao e a exportao dos modelosHTML para documentos CanvasPublicao dos ativos de tela na pasta raizCentro do palco

Outras melhoriasOnion skinning em cores, definido pelousurioPinScriptOpes avanadas de importao PSDOpes avanadas de importao AIDesempenho nico na plataforma doWindowsInteraes aprimoradas do pincelFlash Player mais recente e integrao como AIR SDK

Para o incio

Flash Player mais recente e integrao com o AIR SDK

Verso 2015.2 do Adobe Animate CC | Junho 2016

A verso 2015.2 possui novos recursos incrveis, como:

Pincis padro

Novidades no Animate CC 2015.2 | Junho de 2016

Aprenda a usar os Pincis padro para pintar um padro de vetor ao longo do caminho ou esticar todo ocomprimento. Use a biblioteca global integrada com o Animate para usar pincis padro e artsticos. Almdas predefinies de pincis padro, voc pode usar as Bibliotecas da CC e importar novos Pincispadro para seu documento do Animate.

3

Para o incio

Pincis padro

Para obter mais informaes sobre esse recurso, consulte os Pincis padro.

Seletor de quadros


Use o seletor de fama para visualizar e selecionar o primeiro quadro de um smbolo grfico. Nas versesanteriores, no era possvel visualizar os quadros de dentro do smbolo. Esse recurso aumenta a experinciado usurio para fluxos de trabalho de animao, como a sincronizao de lbios.

4

Seletor de quadros

Para o incio

Para o incio

Para obter mais informaes sobre este recurso, consulte Seletor de quadros.

Transparncia de camada


O Animate apresenta a possibilidade de ajustar a visibilidade da camada como transparente. Para fazerisso, pressione Shift e clique na coluna Olho na Linha do tempo. Essa ao permitir ajustar a visibilidadepara transparente.

Transparncia de camada

Para obter mais informaes, consulte Transparncia da camada.

Opes aprimoradas de publicao na Web

Mesclagem do cdigo de JSON/JS

5


Agora, o Animate incorpora o arquivo JSON em JS. Quando voc cria uma planilha de entidades grficasdurante uma publicao de tela, nenhum arquivo externo Json criado; ele includo, por padro, com oJS.

Com esta alterao, voc ainda pode visualizar os arquivos publicados localmente sem hosped-los em umservidor (como antes).

Para obter mais informaes sobre este novo recurso, consulte Mesclagem do cdigo JSON/JS.

Incorporao de Javascript no HTML


O Animate apresenta a possibilidade de incluir o arquivo JS dentro do arquivo HTML durante a publicao detelas.


Para obter mais informaes sobre este novo recurso, consulte Incorporao de Javascript no HTML.

Suporte para fundo transparente de telas


Deseja criar uma tela transparente durante a publicao para ver o contedo HTML subjacente? Agora vocpode definir o fundo da tela como transparente. Para fazer isso, use Alpha% para ajustar o nvel detransparncia e a opo de amostra Sem cor para ajustar completamente o palco da tela comotransparente.

6

Transparncia da tela

Para obter mais informaes sobre este novo recurso, consulte Suporte para plano de fundo transparente.

Sada HTML5 Canvas compatvel com HiDPI


A partir de agora, a sada gerada pelo Animate compatvel com HiDPI e gera uma sada mais ntida emtelas de alta resoluo.

Para obter mais informaes sobre este novo recurso, consulte Sada HTML5 Canvas compatvel comHiDPI.

Dimensionamento adaptativo


Deseja criar uma animao gil? Saiba como o Animate redimensiona a sada publicada com base emvrios fatores para fornecer uma sada gil, ntida e compatvel com HiDPI.

7

Dimensionamento adaptativo

Para obter mais informaes sobre este recurso, consulte Dimensionamento adaptativo.

OAMs transparentes e adaptativas

Agora voc pode gerar OAMs transparentes e geis no Animate e incorpor-las ao Muse, Captivate eDreamweaver.

Para obter mais informaes, consulte Publicao OAM.

Encaixe de bitmap durante a criao


Aprenda a ajustar os bitmaps para os pixels mais prximos durante o tempo de criao, de modo que elesfiquem mais ntidos na tela. Em verses anteriores, os bitmaps ficavam pouco ntidos no Canvas e noforneciam uma boa experincia para o usurio. Desta verso em diante, o Animate garante que os bitmapsda publicao de um documento HTML Canvas sejam ajustados aos pixels mais prximos para que fiquemmais ntidos na tela.

Para obter mais informaes sobre este novo recurso, consulte Ajuste de bitmap no tempo de criao.

Pr-carregador no HTML5 Canvas


8

O pr-carregador um GIF animado que exibido quando os scripts e os ativos necessrios pararenderizar uma animao esto sendo carregados. Depois que os ativos so carregados, o pr-carregadorfica oculto e a animao exibida.

GIF animado

Para obter mais informaes sobre este novo recurso, consulte Pr-carregador no HTML5 Canvas.

Melhorias no modelo de publicao do HTML5 Canvas


Veja como o Animate modulariza o modelo HTML5 Canvas para obter melhores personalizaes e fornecermais controle sobre as sadas publicadas.

Para obter mais informaes sobre este novo recurso, consulte Melhorias no modelo HTML5 Canvas.

Compatibilidade com JSAPI, que permite a importao e a exportao dosmodelos HTML para documentos Canvas


Use os JSAPIs novos que so compatveis com a importao e a exportao dos modelos HTML paradocumentos Canvas.

Para obter mais informaes sobre este recurso, consulte Suporte para JSAPI.

Publicao dos ativos de tela na pasta raiz


Use este recurso para publicar ativos de tela na pasta raiz e no em subpastas.

9

Ativos de tela publicados

Para obter mais informaes sobre este novo recurso, consulte Publicar ativos de tela na pasta raiz.

Centro do palco


Aperfeioe a experincia do seu usurio usando as vrias opes de alinhamento para exibir a tela no centrodo navegador. Selecione opes para centralizar o palco horizontalmente, verticalmente ou ambos.

Centro do palco

10

Para o incio

Personalizao das opes de transparncia

Para obter mais informaes sobre este recurso, consulte Palco central.

Outras melhorias

Onion skinning em cores, definido pelo usurio

Adobe Animate CC 2015.2 aprimorado | Junho de 2016

Use a codificao por cores personalizada do recurso onion skinning para diferenciar entre os quadros dopassado, do presente e do futuro. Os quadros de onion skin que se movem para longe do quadro ativo soexibidos com uma transparncia cada vez menor.

Para obter mais informaes sobre esse recurso aprimorado, consulte Onion Skinning com coloraodefinida pelo usurio.

PinScript


Use o recurso Fixar script para fixar guias dos scripts individuais no painel Actionscript e mov-los comoquiser. Esse recurso til se voc ainda no organizou o cdigo em seu arquivo FLA em um local central ouse voc est usando vrios scripts. Voc pode fixar um script para manter o local do cdigo no painel Aese alternar entre scripts abertos.

11

Fixar script

Para obter mais informaes sobre esse recurso aprimorado, consulte Fixar script.

Opes avanadas de importao de PSD


O Animate pode importar imagens estticas em diversos formatos, mas geralmente usado o formato nativodo Photoshop, o PSD, para importar imagens estticas do Photoshop para o Animate. Ao importar umarquivo PSD, o Animate preserva muitos dos atributos aplicados no Photoshop e fornece opes paramanter a fidelidade visual da imagem.

Importador avanado de PSD

Para obter mais informaes sobre esse recurso aprimorado, consulte Opes avanadas de importaode PSD.

Opes avanadas de importao de AI


O Animate permite importar arquivos Al do Adobe Illustrator e preserva grande parte da capacidade deedio e fidelidade visual da ilustrao. O Importador do AI aprimorado tambm fornece um grande grau de

12

controle para determinar como a ilustrao do Illustrator importada para o Animate, alm de permitir quevoc especifique como importar objetos especficos em um arquivo do AI.

Opes avanadas de importao de AI

Para obter mais informaes sobre esse recurso aprimorado, consulte Opes avanadas de importaode AI.

Desempenho nico na plataforma do Windows


Experimente melhorias no desempenho nos seus fluxos dirios de trabalho, como a reproduo e adepurao da linha do tempo, aes como desenhar, inclinar, dar zoom e transformar, e veja suasanimaes ganharem vida.

Interaes aprimoradas do pincel de tinta

Aprimoramentos do Adobe Animate CC 2015.2 | Junho de 2016

O Animate agora conta com aprimoramentos de desempenho e experincia na utilizao de pinceladas. Asmelhorias no desempenho do pincel so aplicveis para operaes de transformao em traados de pincel,como dimensionar/traduzir/girar alm do zoom/inclinao do palco.

Flash Player mais recente e integrao com o AIR SDK

13

As publicaes do Twitter e do Facebook no so cobertas pelos termos do Creative Commons.

Avisos legais | Poltica de privacidade online


O Animate oferece suporte para a verso mais recente do Flash Player (verso 21) e integra a verso do21.0 AI SDK.

14

http://creativecommons.org/licenses/by-nc-sa/3.0/http://help.adobe.com/pt_BR/legalnotices/index.htmlhttps://www.adobe.com/go/gffooter_online_privacy_policy_br

Plataformas

15

Use o Conversor de tipo de documentos para converter projetos doAnimate CC em outros formatos de documentos

Para o incio

Converta seu documento do Animate em outro formato de documentoConverso de seu documento do Animate usando o conversor de tipo de documento

Converta seu documento do Animate em outro formato dedocumento

O conversor de tipo de documento universal permite a converso dos seus projetos FLA atuais (de qualquertipo) em qualquer outro tipo de documento, como HTML5 Canvas, ActionScript/AIR, WebGL ou outro tipo dedocumento personalizado. Ao converter em um formato, voc aproveita os recursos de autoria que oAnimate oferece para esse tipo de documento.

Converso de seu documento do Animate usando o conversor de tipo dedocumento

Para converter seu documento do Animate em outro tipo de documento:

1. Abra o documento que voc quer converter e clique em Comandos > Converter emoutros formatos de documento. A caixa de dilogo Conversor de tipo de documento aberta.

2. No menu suspenso Converter seu documento, selecione o tipo de documento para oqual deseja converter.

3. Clique em Procurar para selecionar o diretrio no qual voc deseja salvar o arquivoconvertido e clique em OK.

Caixa de dilogo Conversor de tipo de documento

Observao: ao tentar converter qualquer documento de vrias cenas em um tipo de documento HTML5Canvas, todas as cenas sero salvas como arquivos separados, pois o tipo de documento HTML5 Canvasno aceita vrias cenas. Insira todas as suas cenas em smbolos separados se quiser us-las em um nicodocumento.

possvel converter seus projetos do Animate existentes em outro formato ou reutilizar ativos em umprojeto. Basta copiar e colar smbolos de biblioteca e camadas.

16



17


Suporte da plataforma personalizada

Para o incio

Observao:

O Animate permite a criao de grficos e animaes ricas usando tipos de documentos como ActionScript,HTML5 eWebGL. O recurso de Suporte da plataforma personalizada ajuda a ampliar a eficincia do AnimateCC para plataformas que no so originais do Animate.

O Suporte da plataforma pode ser adicionado ao Animate ao implementar um plug-in usando um conjunto deInterfaces de programao do aplicativo (APIs) que so oferecidas como parte do Kit de desenvolvimento dosuporte da plataforma personalizada. Os desenvolvedores podem criar plug-ins de suporte da plataformapersonalizada para Animate usando essas interfaces e consultando o cdigo de amostra. Ao instalar o plug-in de suporte da plataforma para um novo tipo de documento, os usurios podem criar suas obras de arteusando o rico conjunto de recursos do Animate e public-las no formato de sada da plataformapersonalizada.

Fluxos de trabalho

O recurso de Suporte de plataforma personalizada inclui duas partes: uma para o desenvolvedor que criaplug-ins de suporte da plataforma personalizada e outra para o usurio que instala e usa o plug-in.

Desenvolvedor

Se voc um desenvolvedor que cria complementos para o Animate, possvel usar o seguinte fluxo detrabalho para desenvolver e distribuir seus plug-ins:

Para obter mais instrues sobre como criar plug-ins de Suporte da plataforma personalizada

18

Palavras-chave : suporte personalizado de plataforma, flash profissional, cc 2014, suporte estendido paraplataformas personalizadas, utilizao do flash para editar formatos de documentos no nativos, novos

usando o kit de desenvolvimento, consulte Ativao do suporte para plataformas personalizadas.

Para ver a documentao detalhada das APIs no kit de desenvolvimento, consulte a Referncia da API desuporte da plataforma personalizada.

Usurio

Se voc um usurio Animate, possvel adquirir um plug-in para plataforma personalizada usando um dosseguintes mtodos:

Faa o download do plug-in para suporte da plataforma personalizada na pgina AdobeAdd-ons. A pgina Adobe Add-on permite que voc adquira um plug-in e instale- usandoo aplicativo Adobe Creative Cloud. Obtenha um arquivo .zxp de um desenvolvedor de plug-in e instale-o no aplicativoGerenciador de extenses da Adobe.

O fluxo de trabalho a seguir demonstra como possvel instalar um plug-in para suporte da plataformapersonalizada e criar seu documento de plataforma personalizada.

Documentao relacionadaAtivao do suporte da plataforma personalizadaReferncia da API de suporte da plataforma personalizadaComo trabalhar com os plug-ins para suporte da plataforma personalizada

19

https://creative.adobe.com/addonshttps://creative.adobe.com/addons

formatos de documentos em flash



20


Crie e publique documentos HTML5 Canvas no Animate CC

Para o incio

Para o incio

O que HTML5 Canvas?O novo tipo de documento HTML5 Canvas

Animate e a API CanvasCriar um documento HTML5 CanvasAdio de interatividade ao documento HTML5 Canvas

Uso de snippets de cdigo JavaScriptReferncias documentao CreateJS

Publicar animaes em HTML5Configuraes bsicasConfiguraes avanadas

Variveis de modelo HTMLCompatibilidade com JSAPI, que permite a importao e a exportao dos modelosHTML para documentos CanvasIncorporao de Javascript no HTMLMesclagem de dados JSON em JSOtimizao da sada do HTML5 Canvas

Definio de um plano de fundo transparente de telaExportao de bitmaps como planilha de entidades grficas

Como trabalhar com texto em documentos HTML5 CanvasTexto estticoTexto dinmico

Compreender a sada HTML5 CanvasMigrar contedo existente a HTML5 Canvas

Alteraes aplicadas ao contedo aps a migraoConverso de outros tipos de documento para HTML5 Canvas

O que HTML5 Canvas?

O Canvas um novo elemento no HTML5, que fornece APIs que permitem gerar e renderizardinamicamente grficos, imagens e animao. A presena da API Canvas para HTML5 fortalece a plataformaHTML5 ao fornecer recursos de desenho bidimensional. Esses recursos so suportados na maioria dossistemas operacionais e navegadores modernos.

Basicamente, o Canvas um mecanismo de renderizao de bitmap e os desenhos so finais e no podemser redimensionados. Alm disso, objetos desenhados no Canvas no so parte do DOM da pgina da Web.

Em uma pgina da Web, possvel adicionar elementos Canvas usando a tag . Esses elementospodem ser aprimorados usando JavaScript para criar interatividade. Para obter mais informaes, consulteeste link.

O novo tipo de documento HTML5 Canvas

O Animate CC permite que voc crie um documento HTML5 Canvas com artes finais, grficos, animaes

21

http://www.w3schools.com/html/html5_canvas.asp

Para o incio

Para o incio

Preenchimento de cdigo

etc. Um novo tipo de documento (HTML5 Canvas) foi adicionado ao Animate e oferece suporte nativo paracriar contedos HTML5 ricos e criativos. Isso significa que voc pode usar a linha do tempo, a rea detrabalho e as ferramentas tradicionais do Animate para criar contedo, mas produzir uma sada HTML5. Comalguns cliques simples, voc est pronto para criar um documento HTML5 Canvas e gerar uma sadatotalmente funcional. Para esse fim, as opes de documento e publicao so predefinidas no Animate paragerar uma sada HTML5.

O Animate CC est integrado ao CreateJS, o que permite contedos interativos ricos em tecnologias de redeaberta pelo HTML5. O Animate CC gera HTML e JavaScript para contedos (inclui bitmaps, vetores, formas,sons, interpolaes etc.) criados no palco. A sada pode ser executada em qualquer dispositivo ounavegador com suporte para HTML5 Canvas.

Animate e a API Canvas

O Animate publica no HTML5 aproveitando a API Canvas. O Animate Pro converte sem problemas objetoscriados no palco para seus correspondentes no Canvas. Ao fornecer um mapeamento um a um de recursosAnimate com as APIs no Canvas, o Animate permite que voc publique contedos complexos em HTML5.

Criar um documento HTML5 Canvas

Para criar um documento HTML5 Canvas, faa o seguinte:

1. Na tela de boas-vindas do Animate CC, clique na opo HTML5 Canvas. Isso abre umnovo FLA com as Configuraes de publicao modificadas para produzir a sadaHTML5.

2. Como alternativa, selecione Arquivo > Novo para exibir a caixa de dilogo Novodocumento. Clique na opo HTML5 Canvas.

Agora, voc pode comear a criar contedos HTML5 usando as ferramentas no Animate. Quando comear atrabalhar com o documento HTML5 Canvas, voc perceber que alguns recursos e ferramentas no sosuportados e esto desativados. Isso acontece porque o Animate permite apenas as ferramentas quetambm so compatveis com o elemento Canvas em HTML5. Por exemplo, transformaes 3D, linhaspontilhadas, gradientes radiais e efeitos de chanfro no so suportados.

Adio de interatividade ao documento HTML5 Canvas

O Animate CC publica contedo HTML5 usando as bibliotecas CreateJS. O CreateJS um conjunto deferramentas e bibliotecas modulares que possibilitam contedos interativos ricos em tecnologias de redeaberta pelo HTML5. O conjunto CreateJS inclui: EaselJS, TweenJS, SoundJS e PreloadJS. O CreateJSconverte os contedos criados no palco em HTML5 usando essas bibliotecas individuais para produzirarquivos de sada HTML e JavaScript. Tambm possvel manipular este arquivo JavaScript para aprimorarseu contedo.

Contudo, o Animate CC permite que voc adicione interatividade a objetos no palco criados para HTML5Canvas de dentro. Isso significa que voc pode adicionar cdigo JavaScript a objetos individuais no palco dedentro do Animate e visualizar no tempo por autor. Por sua vez, o Animate fornece suporte nativo paraJavaScript com recursos teis no editor de cdigo para ajudar a melhorar a eficincia do fluxo de trabalhodos programadores.

Voc pode escolher quadros individuais e quadros-chave na Linha do tempo para adicionar interatividade aseu contedo. Para um documento HTML5 Canvas, voc pode adicionar interatividade usando o JavaScript.Para obter mais informaes sobre como gravar o cdigo JavaScript, consulte este link.

O cdigo JavaScript pode ser gravado diretamente no painel de Aes e oferece suporte aos seguintesrecursos ao gravar o cdigo JavaScript:

Permite que voc insira e edite rapidamente o cdigo JavaScript e sem erros.

22

http://www.w3schools.com/js/js_intro.asp

Destaque de sintaxe

Atribuio de cores a cdigos

Colchete

Conforme voc digita os caracteres no painel de Aes, voc pode ver uma lista de candidatos quepossivelmente completam a sua entrada.

Alm disso, o Animate tambm permite alguns recursos inerentes ao painel de Aes ao trabalhar comHTML5 Canvas. Esses recursos ajudam a aprimorar a eficincia de fluxo de trabalho ao adicionarinteratividade aos objetos no palco. So os seguintes:

Exibe cdigos em fontes ou cores diferentes de acordo com a sintaxe. Este recursopermite que voc grave cdigo de uma maneira estruturada, ajudando a diferenciar visualmente cdigoscorretos e erros de sintaxe.

Exibe cdigos em cores diferentes de acordo com a sintaxe. Isso permiteque voc diferencie visualmente vrias partes de uma sintaxe.

Adiciona automaticamente colchetes e parnteses de fechamento para abrir ao gravar cdigoJavaScript.

(A) Destaque de sintaxe (B) Atribuio de cores a cdigos (C) Colchetes

Voc pode adicionar interatividade a formas ou objetos no palco usando JavaScript. Voc pode adicionarJavaScript a quadros individuais e quadros-chave.

1. Selecione o quadro ao qual deseja adicionar JavaScript.2. Selecione Janela > Aes para abrir o painel de Aes.

Uso de snippets de cdigo JavaScript

Voc pode adicionar interatividade usando snippets de cdigo JavaScript disponveis no Animate CC. Paraacessar e usar Snippets de cdigo, selecione Janelas > Snippets de cdigo. Para obter mais informaessobre como adicionar snippets de cdigo JavaScript, consulte este artigo.

Referncias documentao CreateJS

Bibliotecade

CreateJSDocumentao de API Exemplos de cdigo em G

EaselJS http://createjs.com/Docs/EaselJS/modules/EaselJS.html https://github.com/createjs/e

23

http://createjs.com/Docs/EaselJS/modules/EaselJS.htmlhttps://github.com/createjs/easeljs/

Para o incio

Sada

Repetir linha do tempo

Incluir camadas ocultas

Centro do palco

Permitir adequao

TweenJS http://createjs.com/Docs/TweenJS/modules/TweenJS.html https://github.com/createjs/t

SoundJS http://createjs.com/Docs/SoundJS/modules/SoundJS.html https://github.com/createjs/s

PreloadJS http://createjs.com/Docs/PreloadJS/modules/PreloadJS.html https://github.com/createjs/p

EaselJSTweenJSSoundJSPreloadJS

Publicar animaes em HTML5

Para publicar o contedo no palco em HTML5, faa o seguinte:

1. Selecione Arquivo > Configuraes de publicao.2. Na caixa de dilogo Configuraes de publicao, especifique as seguintes

configuraes:

Configuraes bsicas

O diretrio em que o FLA publicado. Isso tem como padro o mesmo diretrio que o FLA, mas podeser alterado ao clicar no boto de navegao "...".

Se estiver marcado, a linha do tempo se repete, se no, ela para quando chegarao final.

Se estiver desmarcado, as camadas ocultas no so includas na sada.

Permite que os usurios escolham se o palco ficar centralizado horizontalmente,verticalmente ou ambos. Por padro, o palco HTML/HTML exibido no meio da janela do navegador.

Permite que os usurios definam se a animao ser adequada em relao largura,

24

http://createjs.com/Docs/TweenJS/modules/TweenJS.htmlhttps://github.com/createjs/tweenjs/http://createjs.com/Docs/SoundJS/modules/SoundJS.htmlhttps://github.com/createjs/soundjs/http://createjs.com/Docs/PreloadJS/modules/PreloadJS.htmlhttps://github.com/createjs/preloadjs/http://createjs.com/Docs/EaselJS/modules/EaselJS.htmlhttp://createjs.com/Docs/TweenJS/modules/TweenJS.htmlhttp://createjs.com/Docs/SoundJS/modules/SoundJS.htmlhttp://createjs.com/Docs/PreloadJS/modules/PreloadJS.html

Ativar a opo Dimensionar para preencher a rea visvel

Incluir pr-carregador:

altura ou ambas e redimensiona a sada publicada com base em vrios fatores de formulrios. O resultado uma sada gil, precisa e ntida, compatvel com HiDPI.A sada tambm ser ampliada para cobrir a toda a rea da tela sem bordas e manter a proporo original,embora seja possvel que alguma parte da tela no caiba na exibio.

As opes largura, altura ou ambas garantem que todo o contedo sejaproporcionalmente reduzido ao tamanho da tela e que ele fique visvel mesmo quandovoc o visualiza em uma tela pequena (como dispositivos mveis ou tablets). Se otamanho da tela for maior que o tamanho do palco de criao, a tela ser exibida notamanho original.

Permite que os usurios definam se aanimao se ajustar visualizao da sada no modo de tela cheia ou se ela dever ser ampliada. Porpadro, esta opo fica desativada.Ajustar para visualizao: indica a sada no modo de tela cheia com o espao de tela inteira e mantm aproporo.Esticar para ajustar: estica de tal forma que no h espao para bordas na sada.

Permite que os usurios definam se querem o Pr-carregador padro ou sedesejam selecionar um Pr-carregador de sua preferncia na biblioteca de documentos.O Pr-carregador um indicador visual na forma de GIF animado, que exibido quando os scripts e ativosnecessrios para renderizar uma animao esto sendo carregados. Depois que os ativos so carregados, opr-carregador fica oculto e a animao exibida.Por padro, a opo Pr-carregador no est selecionada.

A opo Padro para usar o pr-carregador padro ou aopo Navegar para usar a o GIF pr-carregador de sua preferncia. O GIF pr-carregador copiado para a pasta de imagens configurada em Exportar ativos daimagem.Use a opo Visualizar para pr-visualizar o GIF selecionado.

Configuraes de publicao

Use as opes de alternncia para optar por publicar na raiz ou no nvel da subpasta. Este boto ficaATIVADO por padro. A opo DESATIVAR desabilita o campo da pasta e exporta os ativos para a mesmapasta do arquivo de sada.

25

Exportar ativos de imagem

Exportar ativos de som

Exportao de ativos do CreateJS

Observao:

Opes de exportao de recurso

Publicao dos ativos de tela na pasta raiz

A pasta na qual os ativos de imagens so colocados e de onde soreferenciados.Combinar em planilhas de entidades grficas: selecione essa opo para combinar todos os ativos deimagem em uma planilha. Para mais opes de planilhas de entidades grficas, consulte Exportao debitmaps como planilhas de entidades grficas

A pasta na qual os ativos de som do documento so colocados e de onde soreferenciados.

A pasta na qual as bibliotecas do CreateJS so colocadas e de ondeso referenciadas.

A configurao padro continua a publicar os arquivos segregados em subpastas lgicas.

Configuraes avanadas

As URLs relativas s quais exportar imagens, sons e bibliotecasCreateJS JavaScript de suporte. Se a caixa de seleo direita no estiver marcada, esses ativos nosero exportados do FLA, mas o caminho especificado ainda usado para montar as URLS. Isso agiliza apublicao de um FLA com muitos ativos de mdia, ou impede de substituir bibliotecas JavaScriptmodificadas.A opo Exportar todos os bitmaps como Planilhas de entidades grficas permite que voc compacte todosos bitmaps no documento de canvas em uma planilha de entidades grficas, que reduz o nmero desolicitaes de servidor e melhora o desempenho. Voc pode especificar o tamanho mximo planilha deentidades grficas fornecendo valores de altura e largura.

26

Modelo de publicao do HTML:

Bibliotecas hospedadas:

Incluir camadas ocultas:

Usar padro: publique a sada HTML5 com o modelo padro.Importar novo: importe um modelo novo para o documento HTML5.Exportar: exporte o documento HTML5 como um modelo.

Se estiver marcado, isso usa cpias das bibliotecas hospedadas no CreateJSCDN em code.createjs.com. Isso permite que as bibliotecas sejam colocadas em cache e compartilhadasentre vrios sites.

Se estiver desmarcado, as camadas ocultas no so includas na sada.

27

Formas compactas:

Limites de multiquadro:

Substituir arquivo HTML na publicao e incluir Javascript no HTML:

Observao:

Para o incio

Se estiver marcado, as instrues de vetor so direcionadas em uma forma compacta.Desmarque para exportar instrues legveis e detalhadas (teis para fins de aprendizagem).

Se estiver marcado, os smbolos da linha do tempo incluem uma propriedadeframeBounds que contm uma matriz de Retngulos que corresponde aos limites de cada quadro na linhado tempo. Limites de multiquadro aumentos significativamente o tempo de publicao.

Se a opo Incluir Javascript noHTML estiver selecionada, a caixa de seleo Substituir arquivo HTML na publicao ficar marcada edesativada. Se voc desmarcar a caixa de seleo Substituir arquivo HTML na publicao, a caixa deseleo Incluir Javascript no HTML ficar desmarcada e desativada.

3. Clique em Publicar para publicar seu contedo no local especificado.

Uma animao projetada por linhas de tempo aninhadas, contendo somente um quadro, nopode ter um loop executado.

Variveis de modelo HTML

Quando voc importa um novo modelo do HTML personalizado, as variveis padro so substitudas durantea publicao por snippets de cdigo personalizados baseados nos componentes do seu arquivo FLA.

A tabela abaixo lista as variveis de modelo atuais que so reconhecidas e substitudas pelo Animate:

Parmetro do atributo Varivel de modelo

Ttulo do documento HTML $TITLE

Espao reservado para a incluso de scripts doCreateJS $CREATEJS_LIBRARY_SCRIPTS

Espao reservado para incluso dos scripts gerados(inclusive scripts de fontes da Web) $ANIMATE_CC_SCRIPTS

Tag HTML para iniciar um script do cliente

$SCRIPT_START

Espao reservado para o cdigo que cria ocarregador (CreateJS LoadQueue) $CREATE_LOADER

Espao reservado para o cdigo que carrega osativos presentes no manifesto $LOAD_MANIFEST

Espao reservado para o cdigo que define o mtodode carregamento dos arquivos $HANDLE_FILE_LOAD_START

Espao reservado para o cdigo que lida com oevento de carregamento dos arquivos $HANDLE_FILE_LOAD_BODY

Espao reservado para o cdigo que finaliza omtodo de carregamento dos arquivos $HANDLE_FILE_LOAD_END

Espao reservado para o cdigo que define o mtodode resoluo concluda, chamado aps os ativosserem carregados

$HANDLE_COMPLETE_START

Espao reservado para o cdigo que cria o palco $CREATE_STAGE

Espao reservado para o cdigo que registra umevento tick, aps o qual a animao iniciada $START_ANIMATION

Espao reservado para que o cdigo seja compatvelcom dimensionamentos e exibies hidpi geis $RESP_HIDPI

28

Observao:

Para o incio

Espao reservado para o cdigo que finaliza omtodo de resoluo Concludo $HANDLE_COMPLETE_END

Espao reservado para uma funo que lida comcontedos que possuem udio

$PLAYSOUND

Espao reservado para estilizar a seo e oferecersuporte centralizao de tela $CENTER_STYLE

Espao reservado para a propriedade de estilo deexibio da tela e para oferecer suporte ao Pr-carregador

$CANVAS_DISP

Espao reservado para o cdigo que exibe o Pr-carregador $PRELOADER_DIV

Tag HTML para o final do script do cliente

$SCRIPT_END

ID do elemento de tela

$CANVAS_ID

Largura do palco ou do elemento de tela

$WT

Altura do palco ou do elemento de tela

$HT

Cor do fundo do palco ou do elemento de tela $BG

Verso do Animate CC usada para gerar contedo $VERSO

Os tokens a seguir, provenientes de verses anteriores, foram descontinuados na verso atual:

Parmetro do atributo Varivel de modelo

Espao reservado para incluir scripts (CreateJS e Javascriptgerado) $CREATEJS_SCRIPTS

Espao reservado para o cdigo que inicializar as bibliotecasCreateJS, carregar mdias, criar e atualizar o palco $CJS_INIT*

Estes tokens foram modularizados e substitudos por outros tokens.

Compatibilidade com JSAPI, que permite a importao e aexportao dos modelos HTML para documentos Canvas

Os JSAPIs so compatveis com a importao e a exportao dos modelos HTML para documentos Canvas:

Exporta o modelo de publicao HTML5 Canvas para um determinado documento, nolocal especificado:

bool document::exportCanvasPublishTemplate(pathURI)

Exemplo:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

29

Para o incio

Observao:

if(!exportFlag)

fl.trace(Template could not be exported);

Importa e define o modelo de publicao de HTML5 Canvas para um determinadodocumento, no URI do caminho do local especificado:

bool document::importCanvasPublishTemplate(pathURI)

Exemplo:

var pathURI= file:///C|/Users/username/desktop/CanvasTemplate.html;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

fl.trace(Template could not be imported);


O Animate apresenta a possibilidade de incluir o arquivo JS dentro do arquivo HTML durante a publicao detelas.

1. No menu Configuraes de publicao, mude para a guia Avanado eselecione Incluir JavaScript no HTML.

2. Selecione OK na caixa de dilogo Incluir JavaScript em HTML na publicao parapublicar novamente o contedo e substituir o HTML.

3. Essa ao desativa a caixa de dilogo Substituir o arquivo HTML na publicao e,durante eventos de publicao, o HTML ser gerado, mas substitudo.

4. Em Selecionar pausa incluindo JavaScript no HTML, selecione OK para excluir oJavaScript e publicar novamente o arquivo HTML.

5. Quando a opo Substituir arquivo HTML na publicao no estiver selecionada, aopo Incluir JavaScript no HTML fica desativada automaticamente.

Se no quiser que o HTML seja substitudo, as opes Substituir arquivo HTML napublicao e Embutir JS no HTML no podero existir ao mesmo tempo.

30

Para o incio

Para o incio

Mesclagem do Js com HTML

Mesclagem de dados JSON em JS

Com base nos feedbacks de clientes e nos arquivos JSON que so essencialmente perigosos, ns reunimosdados relevantes com o arquivo JS para que um arquivo JSON no seja criado.

Otimizao da sada do HTML5 Canvas

O Animate otimiza o tamanho de sada e o desempenho do HTML5 Canvas ao:

Exportar bitmaps como planilha de entidades grficas usando as opes na guia Planilhade entidades grficas, presente nas Configuraes de publicao.Excluir camadas ocultas (ao desmarcar a caixa de seleo Incluir camadas ocultas) dasada publicada.Excluir todos os recursos no utilizados como sons e bitmaps, bem como todos osrecursos em quadros no utilizados (padro).Especificar no exportar os recursos de FLA ao desmarcar as opes de exportao derecurso para imagens, sons e suporte das bibliotecas CreateJS JavaScript e utilizar osURLs relativos para exportao.Sada HiDPI compatvel com HTML5 Canvas: o Animate dimensiona a sada com basena proporo de pixels do dispositivo no qual voc v o contedo. Essa compatibilidadegera uma imagem mais ntida com zoom e tambm corrige problemas de pixelao paradocumentos Canvas quando voc visualiza a sada HTML Canvas em uma mquina comalto nvel de DPI.

Definio de um plano de fundo transparente de tela

Voc pode personalizar a tela usando vrias cores, alm de alterar a transparncia da exibio. Quandovoc cria uma tela transparente, possvel ver o contedo HTML subjacente durante a publicao.

Observao: essa configurao tambm torna o fundo transparente durante a publicao de OAM.

1. Selecione a tela que voc deseja modificar.2. No painel Propriedades, selecione Palco.3. No palco, defina os valores de porcentagem para Alfa.

Suporte para amostra Sem cor

Voc tambm pode usar a opo Amostra sem cor para tornar o fundo da tela transparente:

1. Selecione Modificar>Documento>Cor do palco ou, na opoInspetor depropriedade, selecione Configuraes avanadas.

2. Na amostra Cor do palco, selecione Sem cor.

31

Transparncia da tela

Transparncia da tela: Configuraes avanadas

Exportao de bitmaps como planilha de entidades grficas

A exportao de vrios bitmaps utilizados no documento do HTML5 Canvas como uma nica planilha deentidades grficas reduz o nmero de solicitaes de servidor, reduz o tamanho da sada e melhora odesempenho. Voc pode exportar planilhas de entidades grficas como PNG (padro), JPEG ou ambos.

1. Na guia Planilha de entidades grficas , marque a caixa de seleo Combinarimagens e ativos em planilhas de entidades grficas.

2. Selecione Formato como PNG, JPEG ou Ambos.3. Se voc selecionou PNG ou Ambos, especifique as seguintes opes em

Configuraes de PNG:Qualidade: defina a qualidade das planilhas de entidades grficas como 8 bits(padro), 24 bits ou 32 bits.Tamanho mximo: especifique o tamanho e a largura mxima da planilha deentidades grficas em pixels.Fundo: clique e defina a cor do fundo da planilha de entidades grficas.

4. Se voc selecionou JPEG ou Ambos, especifique as seguintes opes emConfiguraes de JPEG:

32

Para o incio

Qualidade: defina a qualidade da planilha de entidades grficas.Tamanho mximo: especifique o tamanho e a largura mxima da planilha deentidades grficas em pixels.Fundo: clique e defina a cor do fundo da planilha de entidades grficas.

Como trabalhar com texto em documentos HTML5 Canvas

O HTML Canvas compatvel com textos estticos e dinmicos.

Texto esttico

O texto esttico uma opo mais abrangente, na qual todos os ativos so convertidos em contornosdurante a publicao e fornecem uma excelente experincia de usurio WSYWIG. Como o texto publicadocomo contornos de vetor, possvel edit-los durante a execuo.

Observao: o uso excessivo de texto esttico pode aumentar o tamanho do arquivo.

Texto dinmico

33

Para o incio

Arquivo HTML

Arquivo JavaScript

Para o incio

O texto dinmico permite modificaes no texto durante a execuo e no aumenta muito o tamanho doarquivo. Ele oferece suporte para menos opes do que o texto esttico. Alm disso, tambm compatvelcom fontes da Web pelo Typekit.

Se voc est usando textos dinmicos com as fontes indisponveis em mquinas de usurios finais, a sadausar a fonte padro para a exibio e distorcer a experincia do usurio. Esses problemas so resolvidoscom as fontes da Web.

Adio de fontes da Web do Typekit ao documento HTML5 Canvas

O Animate CC oferece fontes da Web do Typekit para tipos de Texto dinmico em documentos HTML5Canvas. O Typekit oferece acesso direto a milhares de fontes de alta qualidade de parceiros estratgicos.Voc pode acessar e usar fontes do Typekit sem interrupes na sada do HTML5 para navegadoresmodernos e dispositivos mveis usando a associao Creative Cloud.

Para obter mais informaes sobre como usar fontes do Typekit no Animate CC, consulte Uso de fontes daWeb do Typekit em documentos HTML5 Canvas

A verso 2015.2 do Animate aumenta a experincia visual para o texto dinmico em um documento de tela,de modo que o palco e as aparncias publicadas ficam sincronizadas.

Observao: as fontes da Web do Typekit no esto disponveis para o tipo de texto esttico.

Vdeo: Text improvements in Animate CC

Por Train Simple (www.trainsimple.com)

Compreender a sada HTML5 Canvas

A sada HTML5 publicada contm os seguintes arquivos:

Contm definies de todas as formas, objetos e ilustraes no elemento Canvas. Tambmchama o espao para nomes CreateJS a fim de converter o Animate em HTML5 e o arquivo JavaScriptcorrespondente que contm elementos interativos.

Contm definies dedicadas e cdigo para todos os elementos interativos daanimao. Cdigos para todos os tipos de interpolaes tambm esto definidos no arquivo JavaScript.

Esses arquivos so copiados no mesmo local do FLA por padro. Voc pode alterar i local fornecendo ocaminho de sada na caixa de dilogo Configuraes de publicao (Arquivo > Configuraes depublicao).

Migrar contedo existente a HTML5 Canvas

Voc pode migrar o contedo existente no Animate para gerar uma sada HTML 5. At o fim, o Animatepermite que voc migre contedos copiando ou importando manualmente camadas individuais, smbolos eoutros itens da biblioteca. Como alternativa, voc pode executar o Convert AS3 ao comando do documentoHTML5 Canvas para direcionar automaticamente o contedo ActionScript existente para um novo documentoHTML5 Canvas. Para obter mais informaes, consulte este link.

Entretanto, ao trabalhar com o tipo de documento HTML5 no Animate CC, voc pode notar que algunsrecursos do Animate no so compatveis. Isso acontece porque os recursos no Animate no tmcorrespondentes na API Canvas. Portanto, esses recursos no podem ser usados no tipo de documento

34

Copiar

Importar

Ao trabalhar

Scripts

O contedo removido

O contedo modificado para um valor padro

Para o incio

HTML5 Canvas. Isso pode o afetar durante a migrao de contedo, ao tentar:

contedo (camadas ou smbolos da biblioteca) de um tipo de documento Animate tradicional (comoActionScript 3.0, AIR para Android, AIR para desktop e assim por diante) em um documento HTML5. Nestecaso, um tipo de contedo no suportado removido ou convertido para padres suportados.Por exemplo, copiar animao 3D remover todas as transformaes 3D aplicadas a objetos no palco.

um arquivo PSD ou AI que contenha contedo no suportado. Neste caso, o contedo removidoou convertido para padres suportados.Por exemplo, importe um arquivo PSD com efeitos de desfoque Gradient Bevel aplicados. O Animate removeo efeito.

com vrios tipos de documento (por exemplo, ActionScript 3.0 e HTML5 Canvas)simultaneamente, voc alterna documentos com uma ferramenta ou opo no suportada selecionada.Neste caso, o Animate CC indica visualmente que o recurso no compatvel.Por exemplo, voc criou uma linha pontilhada em um documento ActionScript 3.0 e alterna para HTML5Canvas com a ferramenta Linha ainda selecionada. Observe o ponteiro e o Inspetor de propriedades, elesexibem cones para indicar que a linha pontilhada no suportada em HTML5 Canvas.

Os componentes do ActionScript so removidos e o cdigo comentado. E, alm disso, se voctem JavaScript gravado no bloco de comentrios (para kit de ferramentas para CreateJS com Animate CC13.0), lembre-se de excluir os comentrios manualmente do cdigo.Por exemplo, se voc copiar camadas que contm botes, eles so removidos.

Alteraes aplicadas ao contedo aps a migrao

Estes so os tipos de alteraes que so aplicadas quando voc migra contedo de legado a um documentoHTML5 Canvas.

Os tipos de contedo que no so suportados em HTML5 Canvas so removidos.Por exemplo:

As transformaes 3D so removidasO cdigo ActionScript comentadoOs vdeos so removidos

O tipo de contedo ou recurso suportado, mas umapropriedade do recurso, no. Por exemplo:

Blendmode de superposio mo suportado; modificado para Normal.Linha pontilhada no suportada; modificada para Slida.

Para obter a lista completa de recursos que no so compatveis e seus valores de emergncia durante amigrao, consulte este artigo.

Converso de outros tipos de documento para HTML5 Canvas

O conversor de tipo de documento universal permite a converso dos seus projetos FLA atuais (de qualquertipo) em qualquer outro tipo de documento, como HTML5 Canvas, ActionScript/AIR, WebGL ou outro tipo dedocumento personalizado. Ao converter em um formato, voc aproveita os recursos de autoria que oAnimate oferece para esse tipo de documento.

Para obter mais informaes, consulte Converter em outros formatos de documentos

35



Converter ActionScript 3 para documento HTML5 Canvas usando script JSFL

O Animate CC fornece um script JSFL para converter um documento AS3 em um documento HTML5Canvas. Ao ser executado, o script JSFL faz o seguinte:

Cria um novo documento HTML5 Canvas.Copia todas as camadas, smbolos e itens da biblioteca no novo documento HTML5Canvas.Aplica os padres aos recursos no suportados, sub-recursos ou propriedades derecurso.Cria arquivos FLA separados para cada cena, pois o documento HTML5 no suportacenas mltiplas.

Para converter um documento AS3 em um documento HTML5 Canvas, faa o seguinte:1. Abra o documento ActionScript 3 no Animate CC.2. Selecione Comandos > Converter AS3 em documento HTML5 Canvas.

36


Criao e publicao de um documento WebGL

Observao:

Para o incio

Observao:

Para o incio

O suporte para WebGL s est disponvel como visualizao. Esta atualizao do Animateinclui suporte para animaes bsicas com som e scripts, alm de um grande conjunto de recursos deinteratividade. Com os lanamentos futuros do Animate, voc ver mais recursos sendo ativados para o tipode documento WebGL. Para obter a lista completa com os recursos do Animate compatveis com WebGL,consulte este artigo da KB.

O que WebGL?O tipo de documento WebGLCriao de um documento WebGLVisualizao de contedo WebGL em navegadoresPublicao de contedo no formato WebGLCompreenso da sada WebGLAdio de udio ao documento WebGLMigrao de contedo existente para um documento WebGLMelhoria da renderizao com a cache de bitmap

O que WebGL?

O WebGL um padro de rede aberta para renderizar grficos em qualquer navegador compatvel, sem anecessidade de plug-ins adicionais. O WebGL integrado completamente em todos os padres da Web donavegado, permitindo o uso acelerado de processamento de imagens e efeitos do GPU como parte da telada pgina da web. Os elementos do WebGL podem ser incorporados a outros elementos HTML e compostoscom outras partes da pgina.

Apesar de a maioria dos navegadores atuais suportarem o WebGL, acesse este link para saber maisdetalhes sobre as outras verses que so suportadas.

Alguns navegadores no tm WebGL ativado por padro. Para ativar o WebGL em seu navegador, consulteeste artigo.

Certifique-se de ativar WebGL em seu navegador, pois alguns navegadores desativamWebGL por padro.

O tipo de documento WebGL

O Animate CC permite que voc crie e publique contedos interativos ricos no formato Web Graphics Library(WebGL). Por ser totalmente integrado aos navegadores, o WebGL permite que o Animate utilize o usoacelerado do GPU de processamento e renderizao de grficos, como parte da tela da pgina da Web.

No Animate CC, um novo tipo de documento foi adicionado para WebGL. Isso permite que voc criecontedo e publique rapidamente em uma sada WebGL. Voc pode utilizar ferramentas eficientes noAnimate para criar contedos ricos, exceto renderizar a sada WebGL que pode ser executada em qualquernavegador compatvel. Isso significa que voc pode usar a linha do tempo, a rea de trabalho e asferramentas de desenho tradicionais do Animate para criar e produzir nativamente contedo WebGL. Osnavegadores mais usados suportam WebGL, desta forma permitindo que o Animate renderize o contedo namaioria das plataformas da Web.

37

http://helpx.adobe.com/br/flash/kb/unsupported-features-html5-canvas-webgl.htmlhttp://caniuse.com/#search=WebGLhttp://www.khronos.org/webgl/wiki_1_15/index.php/Getting_a_WebGL_Implementation

Para o incio

Para o incio

Para o incio

Arquivo de sada

Substituir HTML

Incluir camadas ocultas

Repetir linha do tempo

Criao de um documento WebGL

No Animate CC, o documento WebGL permite que voc crie e publique rapidamente contedo para oformato WebGL. Para criar um documento WebGL:

1. Inicializao do Animate CC.2. Na tela de boas vindas, clique na opo WebGL(Pr-visualizao) . Como alternativa,

selecione a opo no menu Arquivo > Novopara exibir a caixa de dilogo Novodocumento. Clique na opo WebGL(Pr-visualizao) .

Visualizao de contedo WebGL em navegadores

Voc pode usar o recurso Testar filme no Animate para visualizar o resto de seu contedo. Para visualizar,faa o seguinte:

1. No Animate CC, pressione Ctrl+Enter no Windows e CMD+ Enter em MAC. Isso iniciaseu navegador padro e renderiza o contedo WebGL.

O Animate CC requer um servidor da Web que execute o contedo WebGL. O Animate CC tem um servidorda Web incorporado que est configurado para executar contedo WebGL na Porta n 8090. Se um servidorj estiver usando esta porta, o Animate automaticamente detecta e resolve o conflito.

Publicao de contedo no formato WebGL

O Animate permite que voc crie e publique contedo WebGL nativamente de dentro do sistema.

Para publicar seu documento WebGL, faa o seguinte:

1. Selecione Arquivo > Configuraes de publicao para exibir a caixa de dilogo deConfiguraes de publicao. Como alternativa, selecione Arquivo > Publicar. se voc jespecificou as Configuraes de publicao para WebGL.

2. Na caixa de dilogo Configuraes de publicao, especifique os valores de:

Fornea um nome significativo para a sada. Alm disso, navegue at ou insira o local emque voc deseja publicar a sada WebGL.

Permite que voc especifique se deve substituir o HTML Wrapper todas as vezes quepublicar seu projeto WebGL.Voc pode desmarcar esta opo caso tenha feito alteraes externas ao seuarquivo HTML publicado e deseja ret-lo enquanto atualiza todas as alteraes feitas animao ou aosrecursos no Flash Pro.

Inclui todas as camadas ocultas na sada WebGL. Desmarcar Incluir camadasocultas impede que todas as camadas (inclusive as aninhadas em clipes de filmes) marcadas como ocultassejam exportadas para o WebGL resultante. Isso permite que voc teste facilmente diferentes verses dedocumentos WebGL tornando as camadas invisveis.

Repete o contedo ao atingir o ltimo quadro. Desmarque esta opo de forma aparar o contedo quando o ltimo quadro for atingido.

38

Observao:

Para o incio

Arquivo de invlucro HTML

Arquivo JavaScript (WebGL Runtime)

Atlas de textura

Para o incio

Para o incio

3. Clique em Publicar para publicar seu contedo WebGL no local especificado.

60FPS o maior FPS que pode ser especificado para um contedo WebGl compatvel comos navegadores.

Compreenso da sada WebGL

A sada WebGL publicada contm os seguintes arquivos:

Inclui o runtime, chamadas de ativos e tambm inicializa o renderizador deWebGL. O nome do arquivo .html por padro. Voc pode fornecer um nome diferente aoarquivo HTML na caixa de dilogo Configuraes de publicao (Arquivo > Configuraes de publicao).O arquivo HTML colocado no mesmo diretrio que o FLA por padro. Voc pode fornecer um localdiferente na caixa de dilogo Configuraes de publicao.

Renderiza o contedo publicado em WebGL. publicado nabiblioteca/pasta do documento WebGL. O nome do arquivo : flwebgl-.min.jsO invlucro HTML utiliza este arquivo JS para renderizar o contedo WebGL.

Armazena todo o valor de cor ( de formas ), incluindo as ocorrncias de bitmap no palco.

Adio de udio ao documento WebGL

Voc pode importar e embutir udios no documento WebGL, controlar a reproduo usando asconfiguraes de sincronizao (evento, iniciar e pausar) e reproduzir udio da linha do tempo de execuo.O WebGL atualmente s compatvel com os formatos .wav e .mp3.

Para obter mais informaes sobre como trabalhar com udio, consulte Uso de sons no Animate.

Migrao de contedo existente para um documento WebGL

Voc pode migrar contedos existentes no Animate para um documento WebGL. At o fim, oAnimate permite que voc migre copiando ou importando o contedo manualmente. Alm disso, ao trabalharcom vrios documentos no Animate, uma prtica comum copiar o contedo em documentos comoCamadas ou ativos na Biblioteca. Apesar de a maioria dos recursos do Animate serem compatveis, algunstipos de contedo so modificados para acomodar melhor o formato WebGL.

O Animate contm vrios recursos poderosos que ajudam a produzir contedos visualmente ricos. Contudo,considerando que alguns desses recursos so nativos do Animate, eles no sero suportados em umdocumento WebGL. O Animate foi projetado para modificar esse contedo para um formato suportado eindicar visualmente quando uma ferramenta ou um recurso no for suportado.

39

Copiar

Importar

Ao trabalhar

Scripts

O contedo removido

Filtros

contedo (camadas ou smbolos da biblioteca) de um tipo de documento do Animate tradicional(como ActionScript 3.0, AIR para Android, AIR para desktop, e assim por diante) em um documento WebGL.Neste caso, um tipo de contedo no suportado removido ou convertido para padres suportados.Por exemplo, copiar animao 3D remover todas as transformaes 3D aplicadas a objetos no palco.

um arquivo PSD ou AI que contenha contedo no suportado. Neste caso, o contedo removidoou convertido para padres suportados.Por exemplo, importe um arquivo PSD com efeitos de desfoque aplicados. O Animate remove o efeito.

com vrios tipos de documento (por exemplo, ActionScript 3.0 e WebGL) simultaneamente,voc alterna documentos com uma ferramenta ou opo no suportada selecionada. Neste caso, o AnimateCC indica visualmente que o recurso no compatvel.Por exemplo, voc criou uma linha pontilhada em um documento ActionScript 3.0 e alterna para WebGL coma ferramenta Linha ainda selecionada. Observe o ponteiro e o Inspetor de propriedades, pois elesindicam visualmente que a linha pontilhada no suportada dentro da WebGL.

Voc pode escrever um cdigo Javascript no painel de Aes, o qual ser executado depois que osparticipantes entrarem no quadro. A varivel "this" no contexto dos scripts de quadro refere-se instncia doMovieClip qual ela pertence. Alm disso, scripts de quadro podem acessar as funes do Javascript e asvariveis declaradas no arquivo recipiente HTML. Ao copiar um quadro ou camada de um documentoActionScript e col-lo em um documento WebGL, os scripts, caso haja algum, recebero comentrios.

Alteraes aplicadas ao contedo aps a migrao

Estes so os tipos de alteraes que so aplicadas quando voc migra contedo de legado a um documentoWebGL.

Os tipos de contedo que no so suportados em HTML5 Canvas so removidos.Por exemplo:

no so suportados. O efeito ser removido e a forma passar a ter um preenchimentoslido.

40

O contedo modificado para um valor padro

O Gradiente radial

Para o incio

O efeito de filtro de Desfoque removido e substitudo pelo Preenchimento slido.

O tipo de contedo ou recurso suportado, mas umapropriedade do recurso, no. Por exemplo:

modificado para ter preenchimento slido usando a cor principal.

O Gradiente radial modificado para ter preenchimento slido usando a cor principal.

Para obter a lista completa de recursos que no so suportados e seus valores de emergncia durante amigrao, consulte este artigo.

Melhoria da renderizao com a cache de bitmap

O cache de bitmap em tempo de execuo permite otimizar o desempenho da interpretao, especificandose o clipe do filme esttico (por exemplo, uma imagem de plano de fundo) ou smbolo de boto deve serarmazenado em cache como um bitmap em tempo de execuo. Por padro, itens de vetor soredesenhados em cada quadro. Armazenar em cache um clipe de filme ou um smbolo de boto como umbitmap impede que o navegador precise redesenhar o item continuamente, pois a imagem ser um bitmap esua posio no mudar. Isso oferece uma melhora significativa no desempenho da interpretao docontedo WebGL.

Por exemplo, quando voc criar uma animao com um fundo complexo, crie um clipe filme que contenhatodos os itens que fazem parte do fundo. Ento, selecione "Cache como bitmap" para o clipe de filme defundo no inspetor de Propriedade. Durante a reproduo, o plano de fundo renderizado como um bitmaparmazenado na profundidade de tela atual. O navegador desenha o bitmap no Palco rapidamente e somenteuma vez, permitindo que a animao seja reproduzida com maior velocidade e com mais fluidez.

41



O cache de bitmap permite utilizar um clipe de filme e congelar automaticamente em um certo local. Se umaregio for alterada, o cache do bitmap ser atualizado vetorialmente. Este processo minimiza o nmero dedesenhos que o navegador precisa fazer vrias fazer e oferece um desempenho de interpretao maisrpido e sem problemas.

Para habilitar Cache como Bitmap da forma adequada, selecione a instncia do clipe de filme e selecioneCache como Bitmap da lista suspensa Interpretao no Inspetor de propriedades (Janela > Propriedades).

Consideraes ao usar o Cache como Bitmap

Ao usar a propriedade Cache como Bitmap no contedo WebGL, leve em considerao:

O tamanho mximo do smbolo do clipe de filme limitado a 2048x2048. Observe que oslimites reais da instncia do clipe de filme que podem ser armazenados so menores doque 2048x2048, o WebGL utiliza alguns pixels.Se existir mais espao do que uma instncia no mesmo clipe de vdeo, o Animate gera ocache com o tamanho da primeira instncia encontrada. No entanto, o cache no gerado novamente e a propriedade Cache como Bitmap no ignorada, mesmo que atransformao do clipe de filme mude para uma extenso maior. E, consequentemente,se um smbolo do clipe de filme escalado durante o curso da animao, ela poderficar granulada.

42


Compactao de aplicativos no AIR para iOS

Observao:

Para o incio

Para o incio

Suporte para AIR 17.0 e Flash Player 17.0Implantar aplicativos AIR diretamente e dispositivos iOSTeste e depurao de aplicativos AIR usando o simulador do iOS nativoPublicao de aplicativos AIR para dispositivos com suporte a Retina Display de altaresoluoTeste e depurao usando o Modo intrprete.Teste e depurao no iOS via USBConectividade de vrios dispositivos via USBAdio de cones xxhdpi (144x144)Soluo de problemas

O Animate CC inclui suporte publicao de aplicativos do AIR for iOS. Os aplicativos AIR for iOS podemexecutar no iPhone e no iPad da Apple. Quando voc publica para iOS, o Animate converte seus arquivosFLA em aplicativos nativos do iPhone.

Para obter informaes sobre requisitos de software e hardware para aplicativos AIR mveis e paradesktops, consulte Requisitos de sistema AIR.

Para obter instrues detalhadas sobre como compactar aplicativos do para o iPhone, consulte Criandoaplicativos Adobe AIR com o Packager for iPhone.

O Animate permite que voc adicione o caminho ao SDK do iOS apenas quando o aplicativoAIR incluir um arquivo ANE. V para Arquivo > Configuraes do ActionScript > Caminho da biblioteca paraincluir um arquivo ANE.

Suporte para AIR 17.0 e Flash Player 17.0

O AIR 17.0 para iOS permite gerar binrios de 64 bits em conjunto com binrios padro de 32 bits dos seusaplicativos, de modo a cumprir com as exigncias da Apple para aplicativos iOS. Com a atualizao do AIR17.0 para iOS, a opo Ativar empacotamento mais rpido , localizada na guia Implantao da caixa dedilogo Configuraes do AIR para iOS, ativada por padro.

Implantar aplicativos AIR diretamente e dispositivos iOS

Uma importante alterao no fluxo de trabalho de implantao do aplicativo AIR permite que voc implanteaplicativos AIR diretamente em dispositivos iOS. Antes, para implantar aplicativos em dispositivos iOS, eranecessrio invocar aplicativos AIR do iTunes.

Entretanto, com a atualizao do Animate, voc pode implantar aplicativos AIR diretamente no iOS,ignorando o uso do iTunes. Esse recurso reduz o tempo necessrio para publicar um aplicativo AIR for iOS emelhora a produtividade e o desempenho de maneira significativa.

Observao: necessrio instalar o iTunes na mquina na qual o Animate est instalado.

Para permitir a implantao direta em um dispositivo iOS, faa o seguinte:

1. Certifique-se de que o iTunes esteja instalado na mquina em que o Animate estinstalado.

43

http://www.adobe.com/br/products/air/systemreqs/http://www.adobe.com/go/learn_cs5_iPhone_brhttp://www.adobe.com/go/learn_cs5_iPhone_br

Para o incio

Observao:

2. No painel Propriedades do Animate, clique no boto ao lado do menu suspensoDestino para selecionar a caixa de dilogo AIR para Configuraes do iOS.

3. Na guia Implantao, selecione a opo Instalar aplicativo no dispositivo iOS conectado.

4. Clique em Publicar.

Teste e depurao de aplicativos AIR usando o simulador do iOSnativo

O Animate pode ser integrado ao Apple Xcode para permitir que o simulador do iOS nativo teste e depureaplicativos AIR criados para iOS. O simulador do iOS extremamente til quando voc no tem acesso aosdispositivos em si (iPhone ou iPad). Com o simulador do iOS nativo, tambm possvel testar e depuraraplicativos AIR em diversos dispositivos (iPhone e iPad). Entretanto, o simulador do iOS pode ser integradoao Flash CS6 executado somente em sistemas Macintosh.

Para usar o simulador do iOS, o Animate exige que voc baixe e instale o Xcode. Para obter maisinformaes, consulte Configurao do Xcode para suporte ao simulador do iOS.

Fazer o download e instalar a verso mais recente do AIR para utilizar osimulador iOS.Desde o SDK verso 16 (atualizao do CC 2014.2), o Animate CC instala e inicia oaplicativo iOS no simulador IOS.

Configurao do Xcode para suporte ao simulador do iOS

1. Baixe e instale o Xcode de http://developer.apple.com ou faa o download pela AppStore da Mac.

2. Inicie o Animate.3. Crie ou abra um documento AIR for iOS existente.4. No painel Propriedades, configure o Reprodutor de destino para a verso mais recente

do AIR.

5. Clique no boto ao lado do menu suspenso Destino para abrir a caixa dilogoConfiguraes do AIR para iOS.

44

http://developer.apple.com/

6. Na guia Geral, fornea o caminho totalmente qualificado do SDK do simulador do iOSmanualmente ou navegue at o local. Por exemplo:

Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimula

7. Na aba Implantao, fornea o Certificado e a Senha. Como opo, fornea o Perfil deprovisionamento do aplicativo AIR.

8. Clique em OK para concluir.

Agora, voc pode usar o simulador do iOS para testar ou depurar seu aplicativo. Para obter maisinformaes, consulte Teste de aplicativos AIR usando o simulador do iOS nativo e Depurao de aplicativosAIR usando o simulador do iOS nativo.

Teste de aplicativos AIR usando o simulador do iOS nativo

Certifique-se de configurar o Xcod e definir o caminho para o SDK do iPhone antes de testar seu aplicativo.

1. No Animate, selecione Controlar > Testar filme > no simulador do iOS para exibir osimulador do iOS. Entretanto, se voc no configurou o caminho do SDK do simuladordo iOS na caixa de dilogo AIR para Configuraes do iOS, ser exibido um erroindicando esse fato.

2. Navegue at seu aplicativo no simulador do iOS e clique para inici-lo.

Depurar aplicativos AIR usando o simulador do iOS nativo

Certifique-se de configurar o Xcod e definir o caminho para o SDK do iPhone antes de depurar seuaplicativo.

1. No Animate, selecione Depurar > Depurar filme > no simulador do iOS para exibir osimulador do iOS. Entretanto, se voc no configurou o caminho do SDK do simulador

45

Para o incio

Para o incio

do iOS na caixa de dilogo AIR para Configuraes do iOS, ser exibido um erroindicando esse fato.

2. No Animate, escolha Depurar > Iniciar sesso de depurao remota > ActionScript 3.0.3. Navegue at seu aplicativo no simulador do iOS e clique para inici-lo.

Publicao de aplicativos AIR para dispositivos com suporte aRetina Display de alta resoluo

O Animate permite que voc crie aplicativos AIR avanados para iOS com um suporte estendido para oRetina Display de alta resoluo. Voc pode optar por selecionar o Retina Display de alta resoluo aopublicar aplicativos AIR.

1. No Animate, crie ou abra um documento existente do AIR para iOS.

2. No painel Propriedades, clique no boto ao lado do menu suspenso Destino paraselecionar a caixa de dilogo Configuraes do AIR for iOS.

3. Na guia Geral, defina a Resoluo como Alta.


Teste e depurao usando o Modo intrprete.

O Modo intrprete permite que voc depure ou teste rapidamente seus aplicativos AIR criados para iOS.Quando o Modo intrprete selecionado, os aplicativos AIR so instalados sem converso para o cdigoARM.

Para ativar o Modo intrprete, faa o seguinte:


2. Na guia Implantao, selecione Teste de dispositivo no Modo intrprete ou Depuraode dispositivo no Modo intrprete na opo do tipo de implantao do iOS.

3. Clique em OK para concluir.

46

Observao:

Observao:

Para o incio

Para o incio

Para o incio

Para o incio

possvel empacotar e carregar vrios SWF que contenham cdigo de bytes do ActionScript,usando os modos Intrprete e AOT (Ahead of Time). Para obter mais informaes, consulte este blog.

O Modo intrprete deve ser utilizado somente para testes ou depurao. Os arquivos deinstalao do AIR produzidos pelo Modo intrprete podem ser enviados para a Mac App Store.

Teste e depurao no iOS via USB

Voc pode testar e depurar aplicativos em dispositivos iOS conectados atravs de USB. Isso adiciona afuncionalidade de teste e depurao remota via wi-fi disponvel no Animate CC. No entanto, ao conectardispositivos via USB os fluxos de trabalho de teste e depurao so simplificados pela reduo do nmerode etapas manuais e, de fato, acelerando os processos de teste e depurao.

Para permitir o teste ou a depurao via USB, siga uma das etapas a seguir:

(Para depurar) Selecione Depurar > Depurar filme > no Dispositivo via USB.(Para testar) Selecione Controle >Testar filme > no Dispositivo via USB.

Conectividade de vrios dispositivos via USB

Agora, o Animate suporta testes de aplicativos em vrios dispositivos simultaneamente. Voc pode seconectar e testar vrios dispositivos atravs do USB.

Voc pode aproveitar esse recurso para testar implantando em vrios dispositivos com vrios tamanhos detela, verses de sistema operacional e configuraes de hardware simultaneamente. Isso permite que vocanalise o desempenho de seu aplicativo no espectro de dispositivos de uma s vez.


2. Na aba Implantao, uma lista de todos os dispositivos conectados exibida. Selecioneos dispositivos nos quais voc deseja publicar o aplicativo.


Adio de cones xxhdpi (144x144)

Voc pode adicionar manualmente cones xxhdpi para um aplicativo AIR. Basta usar o arquivo app-descriptor.xml. O Animate CC permite adicionar cones xhdpi (96 x 96) com a caixa de dilogo do ManageAIR SDK. Porm, se desejar adicionar cones com melhor resoluo, possvel adicion-los manualmenteno arquivo app-descriptor.xml para o seu aplicativo AIR. Basta usar a seguinte tag:

{Location of png}/[icon_name-144x144].png

Para obter mais informaes sobre o arquivo app-descriptor.xml, consulte este artigo de ajuda.

Soluo de problemas

A publicao de um aplicativo AIR for iOS falha, se o nome do arquivo especificado forFLA ou o SWF contenha caracteres de bytes duplos.Ao publicar um aplicativo AIR for iOS, o Animate trava se o dispositivo estiver desligado.

47

http://blogs.adobe.com/airodynamics/2012/11/09/packaging-and-loading-multiple-swfs-in-air-apps-on-ios/http://help.adobe.com/pt_BR/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff1.html



48


Publicao de AIR em aplicativos Android

Observao:

Para o incio

Criar um arquivo Adobe AIR para AndroidVisualizar ou publicar um aplicativo AIR para AndroidCriao de aplicativos do AIR for AndroidConfiguraes de idiomas

O Animate CC permite que voc publique contedo para o Adobe AIR para Android.

Este artigo descreve como configurar as definies de publicao do AIR for Android no Animate. Para obterinformaes completas sobre o desenvolvimento de aplicativos do Adobe AIR, consulte Criao deaplicativos do Adobe AIR.

Para obter informaes sobre requisitos de software e hardware para aplicativos AIR mveis e paradesktops, consulte Requisitos do sistema AIR.

Para ver a documentao completa do desenvolvedor do AIR, consulte a Referncia do Adobe AIR.

Vdeos e tutoriais

Os tutoriais em vdeo a seguir descrevem como criar aplicativos do AIR for Android no Animate:

Vdeo: AIR for Android - Parte 1: Configurao do ambiente de desenvolvimento(GotoAndLearn.com, 18:49)

Vdeo: AIR for Android - Parte 2: Acesso cmara em um dispositivo Android(GotoAndLearn.com, 13:35)

Vdeo: Acelerao de GPU no AIR for Android (GotoAndLearn.com, 15:55)

Blog/Vdeo: One Application, Five Screens (Christian Cantrell, Adobe blogs)

Artigo: Developing a Mobile Application with Animate (John Hattan, gamedev.net)

(Apenas para AIR 3.7) Empacotamento de aplicativos com apenas um runtime cativo(Android)

Com o AIR 3.7, o empacotamento dos aplicativos AIR para Android em qualquer destino incorporar oruntime do AIR. Isto dever aprimorar a experincia de usurio, pois no haveria necessidade de fazer odownload do runtime do AIR separadamente. No entanto, uma consequncia disso seria que haveria umaumento no tamanho do aplicativo de aproximadamente 9MB.

O Animate avisa se um aplicativo do AIR for Android foi empacotado usando a opo Tempo de execuocompartilhado.

Criar um arquivo Adobe AIR para Android

No Animate, voc pode criar documentos do Adobe AIR for Android, usando Arquivo > Novo comando.Tambm possvel criar um arquivo FLA do ActionScript 3.0 e convert-lo em um arquivo do AIR forAndroid usando a caixa de dilogo Configuraes de Publicao.

Para criar um arquivo AIR for Android, execute um dos procedimentos a seguir:

49

http://help.adobe.com/pt_BR/air/build/index.htmlhttp://help.adobe.com/pt_BR/air/build/index.htmlhttp://www.adobe.com/br/products/air/systemreqs/http://help.adobe.com/pt_BR/air/build/index.htmlhttp://www.gotoandlearn.com/play.php?id=123http://www.gotoandlearn.com/play.php?id=124http://www.gotoandlearn.com/play.php?id=132http://blogs.adobe.com/cantrell/archives/2010/04/one_application_five_screens.htmlhttp://www.gamedev.net/page/resources/_/reference/programming/game-programming/300/developing-a-mobile-application-with-flash-r2797

Para o incio

Para o incio

Escolha AIR para Android na tela de boas-vindas ou na caixa de dilogo NovoDocumento (Arquivo > Novo).

Abra um arquivo FLA existente e converta-o num arquivo do AIR for Android. SelecioneAIR for Android no menu Destino, na caixa de dilogo Configuraes de publicao(Arquivo > Configuraes de publicao).

Visualizar ou publicar um aplicativo AIR para Android

Voc pode visualizar um arquivo SWF AIR for Android do Animate quando ele for exibido na janela doaplicativo do AIR. A visualizao til quando voc quiser ver quais so os aspectos visveis da aparnciado aplicativo sem compact-lo e instal-lo.

1. Verifique se voc definiu a configurao do Destino na caixa de dilogo Configuraesde publicao para o AIR para o Android.

2. Selecione Controlar > Testar filme > Testar ou pressione Ctrl + Enter.

Se voc no tiver definido as configuraes do aplicativo usando a caixa de dilogo Configuraes doAplicativo e do Instalador, o Animate ir gerar um arquivo descritor de aplicativo padro (swfname-app.xml)para voc. O Animate cria o arquivo na mesma pasta em que o arquivo SWF foi gravado. Se voc definir asconfiguraes de aplicativo utilizando a caixa de dilogo Configuraes do aplicativo e do instalador, oarquivo de descrio do aplicativo ir refleti-las.

Para publicar um arquivo AIR para Android, execute um dos procedimentos a seguir:

Clique no boto Publicar na caixa de dilogo Configuraes de publicao.

Clique no boto Publicar na caixa de dilogo Configuraes do AIR for Android.

Selecione Arquivo > Publicar.

Selecione Arquivo > Publicar visualizao.

Ao publicar um arquivo do AIR, o Animate cria um arquivo SWF e um arquivo descritor de aplicativo XML.Em seguida, o Animate cria pacotes com cpias de ambos, juntamente com outros arquivos que vocadicionou no seu aplicativo, para um arquivo de instalador do AIR (swfname.apk).

Criao de aplicativos do AIR for Android

Aps concluir o desenvolvimento de seu aplicativo, especifique as configuraes dos arquivos de descrio edo instalador do aplicativo do AIR for Android necessrios para implant-lo. O Animate cria os arquivos dedescrio e do instalador juntamente com o arquivo SWF quando um arquivo AIR para Android publicado.

Especifique as configuraes desses arquivos na caixa de dilogo AIR para Android - Configuraes doaplicativo e do instalador. Depois de criar um arquivo do AIR for Android, essa caixa de dilogo pode seraberta do Inspetor de Propriedades do documento. Tambm possvel acess-la no menu Player,pressionando o boto Configuraes na aba do Animate da caixa de dilogo Configuraes de Publicao.

Ciar arquivo do aplicativo Adobe AIR

1. No Animate, abra o arquivo FLA ou o conjunto de arquivos que compe seu aplicativo doAdobe AIR.

2. Salve o arquivo FLA do AIR para Android antes de abrir a caixa de dilogoConfiguraes do aplicativo e do instalador do AIR.

3. Selecione Arquivo > Configuraes do AIR for Android.

50

Observao:

Arquivo de sada

Nome do aplicativo

ID do aplicativo

Verso

Rtulo da verso

Propores

Tela cheia

Orientao automtica

Modo de renderizao

4. Preencha a caixa de dilogo Configuraes do aplicativo e do instalador do AIR paraAndroid e clique em Publicar.

Ao clicar no boto Publicar, os seguintes arquivos so empacotados:

O arquivo SWF

O arquivo descritor do aplicativo

Os arquivos de cones do aplicativo

Os arquivos listados na caixa de texto Arquivos Includos

A publicao de um aplicativo AIR for Android falha, se o nome doarquivo especificado para o FLA ou o SWF contenha caracteres de byte duplo.

A caixa de dilogo Configuraes do Aplicativo e do Instalador do AIR for Android dividida em trs abas:Geral, Implantao e cones e Permisses.

Configuraes gerais

A aba Geral da caixa de dilogo Configuraes do aplicativo e do instalador do AIR para Android contm asseguintes opes:

O nome e o local do arquivo AIR a serem criados ao usar o comando Publicar. Aextenso do nome do arquivo gerado APK.

O nome usado pelo instalador do aplicativo do AIR para gerar o nome de arquivo e apasta do aplicativo. O nome deve conter apenas caracteres vlidos para nomes de arquivos ou de pastas. Opadro o nome do arquivo SWF.

Identifica o aplicativo com uma ID exclusiva. Voc pode alterar a ID padro se preferir. Nouse espaos nem caracteres especiais na ID. Os nicos caracteres vlidos so 0-9, a-z, A-Z, e . (ponto),com o comprimento de 1 a 212 caracteres. O padro com.adobe.example.applicationName.

Opcional. Especifica o nmero da verso do aplicativo. O padro 1.0.

Opcional. Uma sequncia de caracteres para descrever a verso.

Permite selecionar a orientao Retrato, Paisagem ou Automtica para o aplicativo. QuandoAutomtica selecionado com a orientao Automtica, o aplicativo ativado no dispositivo emconformidade com a orientao atual.

Define o aplicativo para ser executado no modo de tela cheia. Por padro, essa configuraono selecionada.

Permite que o aplicativo alterne entre modo retrato para paisagem, dependendo daorientao atual do dispositivo. Por padro, essa configurao no selecionada.

Permite que voc especifique qual mtodo o tempo de execuo do AIR usa pararenderizar o contedo grfico. As opes incluem:

Automtico - detecta automaticamente e usa o mtodo de renderizao mais rpidodisponvel no dispositivo.CPU - Usa o CPU.GPU - Usa o GPU. Se no houver GPU disponvel, o CPU usado.

51

Arquivos inclusos

Certificado

Direto - Renderiza utilizando Stage3D. Este o mtodo de renderizao mais rpidodisponvel.

Para uma lista de processadores que no suportam o modo Direto, acesse chipsets e drivers que nosuportam Stage3D | Flash Player 11, AIR 3.

Processador: permite que voc selecione o tipo de dispositivos para o qual voc est publicando oaplicativo. Os tipos de processador compatveis so ARM e Intel x86. Compatvel com processadores x86desde a verso Animate CC 2014.1.

Especifica os arquivos e as pastas adicionais a incluir no pacote do seu aplicativo.Clique no boto de adio (+) para adicionar arquivos e no boto de pasta para adicionar pastas. Paraexcluir um arquivo ou pasta da lista, selecione o arquivo ou a pasta e clique no boto de subtrao (-).Por padro, o arquivo de descrio do aplicativo e o arquivo SWF principal so adicionados automaticamente lista de pacotes. A lista de pacotes mostra esses arquivos mesmo se voc ainda no tiver publicado oarquivo FLA do Adobe AIR. A lista de pacotes exibe os arquivos e pastas em uma estrutura simples. Osarquivos em uma pasta no so listados, e os caminhos completos para os arquivos so exibidos, mastruncados se necessrio.Se voc adicionou qualquer arquivo de extenso nativa do AIR ao caminhos a biblioteca ActionScript, estesarquivos tambm aparecem nessa lista.Os arquivos de cone no so includos na lista. Quando o Animate compacta os arquivos, ele copia osarquivos de cone para uma pasta temporria que relativa ao local do arquivo SWF. O Animate exclui apasta depois que a compactao for concluda.

Configuraes de implantao

A aba Implantao da caixa de dilogo Configuraes do Aplicativo e do Instalador do AIR for Androidpermite especificar as seguintes configuraes.

O certificado digital do aplicativo. possvel navegar at um certificado ou criar um novo. Parainformaes sobre a criao de um certificado digital, consulte Assinando seu aplicativo. Observe que oscertificados para os aplicativos Android devem ter um perodo de validade definido para ao menos 25 anos.

52

http://kb2.adobe.com/br/cps/921/cpsid_92103.htmlhttp://kb2.adobe.com/br/cps/921/cpsid_92103.html

Senha

Tipo de implantao

T

ajuda e tutoriais - adobe help center · para obter mais informações sobre este novo recurso,...

Documents