Ajuda do Flash Professional | Criao e publica...

http://helpx.adobe.com/br/ash/using/creating-p...

Ajuda do Flash Professional/ Criao e publicao de um documento HTML5 Canvas

O que HTML5 Canvas? O novo tipo de documento HTML5 Canvas Exemplo de animao HTML5 Canvas Criar um documento HTML5 Canvas Adicionar interatividade em documento HTML5 Canvas Publicar animaes em HTML5 Compreender a sada HTML5 Canvas
Mostrar tudo

O que HTML5 Canvas?

O Canvas um novo elemento no HTML5, que fornece APIs que permitem gerar e renderizar dinamicamente grficos, imagens e animao. A presena da API Canvas para HTML5 fortalece a plataforma HTML5 ao fornecer recursos de desenho bidimensional. Esses recursos so suportados na maioria dos sistemas operacionais e navegadores modernos. Basicamente, o Canvas um mecanismo de renderizao de bitmap e os desenhos so finais e no podem ser 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 <Canvas>. Esses elementos podem ser aprimorados usando JavaScript para criar interatividade. Para obter mais informaes, consulte este link.

Para o topo

O novo tipo de documento HTML5 Canvas

O Flash Professional CC permite que voc crie um documento HTML5 Canvas com artes finais, grficos animaes, etc. Um novo tipo de documento (HTML5 Canvas) foi adicionado ao Flash Pro e oferece suporte nativo para criar contedos HTML5 ricos e criativos. Isso significa que voc pode usar a linha do tempo, o espao de trabalho e as ferramentas tradicionais do Flash Professional, mas produzir uma sada HTML5. Com alguns cliques simples, voc est pronto para criar um documento HTML5 Canvas e gerar uma sada totalmente funcional. Para esse fim, no Flash Pro, as opes de documento e publicao so predefinidas para gerar uma sada HTML5. O Flash Professional CC est integrado ao CreateJS, o que permite contedos interativos ricos em tecnologias de rede aberta pelo HTML5. O Flash Pro CC gera HTML e JavaScript para contedos (inclui bitmaps, vetores, formas, sons, interpolaes e assim por diante) criados no palco. A sada pode ser executada em qualquer dispositivo ou navegador com suporte para HTML5 Canvas.

Para o topo

Flash Professional e API Canvas

O Flash Pro publica no HTML5 aproveitando a API Canvas. O Flash Pro traduz sem problemas objetos criados no palco para seus correspondentes Canvas. Ao fornecer um mapeamento um a um de recursos Flash com as APIs no Canvas, o Flash Pro permite que voc publique contedos complexos em HTML5.

Exemplo de animao HTML5 Canvas

Abaixo est um exemplo de animao HTML5 criada usando o tipo de documento HTML5 Canvas no Flash Professional. Um anncio uma coleo de ilustraes, efeitos de filtro e interpolaes.

Para o topo

1 de 5

20-04-2014 22:16

Ajuda do Flash Professional | Criao e publica...

http://helpx.adobe.com/br/ash/using/creating-p...

Criar um documento HTML5 Canvas

Para criar um documento HTML5 Canvas, faa o seguinte: 1. Inicie o Flash Professional CC. 2. Na tela de boas-vindas, clique na opo HTML5 Canvas. Isso abre um novo FLA com as Configuraes de publicao modificadas para produzir a sada HTML5. 3. Como alternativa, selecione Arquivo > Novo para exibir o dilogo Novo documento. Clique na opo HTML5 Canvas.

Para o topo

Agora voc pode comear a criar contedos HTML5 usando as ferramentas no Flash Pro. Quando comear a trabalhar com o documento HTML5 Canvas, voc perceber que alguns recursos e ferramentas no so suportados e esto desativados. Isso acontece porque o Flash Professional suporta apenas as ferramentas que tambm so suportadas pelo elemento Canvas em HTML5. Por exemplo, transformaes 3D, linhas pontilhadas, gradientes radiais e efeitos de chanfro no so suportados.

Adicionar interatividade ao documento HTML5 Canvas

O Flash Professional CC publica contedos HTML5 usando as bibliotecas CreateJS.O CreateJS um conjunto de ferramentas e bibliotecas modulares que possibilitam contedos interativos ricos em tecnologias de rede aberta pelo HTML5. O conjunto CreateJS inclui: EaselJS, TweenJS, SoundJS, PreloadJS e Zo. O CreateJS converte os contedos criados no palco em HTML5 usando essas bibliotecas individuais para produzir arquivos de sada HTML e JavaScript. Tambm possvel manipular este arquivo JavaScript para aprimorar seu contedo. Contudo, o Flash Professional CC permite que voc adicione interatividade a objetos no palco criados para HTML5 Canvas de dentro. Isso significa que voc pode de fato adicionar cdigo JavaScript a objetos individuais no palco de dentro do Flash Pro e visualizar no tempo por autor. Por sua vez, o Flash Pro fornece suporte nativo para JavaScript com recursos teis no editor de cdigo para ajudar a aprimorar a eficincia do fluxo de trabalho dos programadores. Voc pode escolher quadros individuais e quadros-chave na Linha do tempo para adicionar interatividade a seu 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 seguintes recursos ao gravar o cdigo JavaScript: Preenchimento de cdigo Permite que voc insira e edite rapidamente o cdigo JavaScript e sem erros. Conforme voc digita os caracteres no painel de Aes, voc pode ver uma lista de candidatos que possivelmente completam a sua entrada. Alm disso, o Flash Professional tambm suporta alguns recursos inerentes ao painel de Aes ao trabalhar com HTML5 Canvas. Esses recursos ajudam a aprimorar a eficincia de fluxo de trabalho ao adicionar interatividade aos objetos no palco. So os seguintes: Destaque de sintaxe Exibe cdigos em fontes ou cores diferentes de acordo com a sintaxe. Este recurso permite que voc grave cdigo de uma maneira estruturada, ajudando a diferenciar visualmente cdigos corretos e erros de sintaxe. Atribuio de cores a cdigos Exibe cdigos em cores diferentes de acordo com a sintaxe. Isso

Para o topo

2 de 5

20-04-2014 22:16

Ajuda do Flash Professional | Criao e publica...

permite que voc diferencie visualmente vrias partes de uma sintaxe.

http://helpx.adobe.com/br/ash/using/creating-p...

Colchete Adiciona automaticamente colchetes e parnteses de fechamento para abrir ao gravar cdigo JavaScript.

(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 adicionar JavaScript 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.

Usar snippets de cdigo JavaScript

Voc pode adicionar interatividade usando snippets de cdigo JavaScript disponveis no Flash Professional CC. Para acessar e usar Snippets de cdigo, selecione Janelas > Snippets de cdigo. Para obter mais informaes sobre como adicionar snippets de cdigo JavaScript, consulte este artigo.

Referncias documentao CreateJS

EaselJS TweenJS SoundJS PreloadJS

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 configuraes para seu contedo: Sada O diretrio em que o FLA publicado. Isso tem como padro o mesmo diretrio que o FLA, mas pode ser alterado ao clicar no boto de navegao "...". Repetir linha de tempo Se estiver marcado, a linha do tempo se repete, se no, ela para quando chegar ao final. Publicar HTML Se estiver desmarcado, o arquivo HTML no gerado.

Para o topo

Caminhos de ativo As URLs relativas s quais exportar imagens, sons e bibliotecas CreateJS JavaScript de suporte. Se a caixa de seleo direita no estiver marcada, esses ativos no sero exportados do FLA, mas o caminho especificado ainda usado para montar as URLS. Isso agiliza a publicao de um FLA com muitos ativos de mdia, ou impede de substituir bibliotecas JavaScript modificadas.

3 de 5

20-04-2014 22:16

Ajuda do Flash Professional | Criao e publica...

http://helpx.adobe.com/br/ash/using/creating-p...

Namespaces do JavaScript O espao para nomes em que smbolos, imagens e as bibliotecas CreateJS so colocados e de onde so mencionados.

Bibliotecas hospedadas Se estiver marcado, isso usa cpias das bibliotecas hospedadas no CreateJS CDN em code.createjs.com. Isso permite que as bibliotecas sejam colocadas em cache e compartilhadas entre vrios sites. Incluir camadas ocultas Se estiver desmarcado, as camadas ocultas no so includas na sada. Formas compactas 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). Limites de multiquadro Se estiver marcado, os smbolos da linha do tempo incluem uma propriedade frameBounds que contm uma matriz de Retngulos que corresponde aos limites de cada quadro na linha do tempo. Limites de multiquadro aumentos significativamente o tempo de publicao.

3. Clique em Publicar para publicar seu contedo no local especificado. Observao: Uma animao projetada por linhas de tempo aninhadas, contendo somente um quadro, no pode ter um loop executado.

Compreender a sada HTML5 Canvas

A sada HTML5 publicada contm os seguintes arquivos: Arquivo HTML Contm definies de todas as formas, objetos e ilustraes no elemento Canvas. Isso tambm chama o espao para nomes CreateJS para converter Flash em HTML5 e o arquivo JavaScript correspondente que contm elementos interativos. Arquivo JavaScript Contm definies dedicadas e cdigo para todos os elementos interativos da animao. 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 o caminho de sada na caixa de dilogo Configuraes de publicao (Arquivo > Configuraes de publicao).

Para o topo

Migrar contedo existente a HTML5 Canvas

Voc pode migrar contedo existente no Flash Pro para gerar uma sada HTML5. At o fim, o, Flash Pro permite que voc migre contedos copiando manualmente ou importando camadas individuais, smbolos e outros itens da biblioteca. Como alternativa, voc pode executar o Convert AS3 ao comando do documento HTML5 Canvas para direcionar automaticamente o contedo ActionScript existente para um novo documento HTML5 Canvas. Para mais informaes, acesse este link. Contudo, ao trabalhar o tipo de documento HTML5 no Flash Professional CC, voc pode notar que alguns recursos do Flash no so suportados. Isso acontece porque os recursos no Flash no tm recursos correspondentes na API Canvas. Portanto, esses recursos no podem ser usados no tipo de

Para o topo

4 de 5

20-04-2014 22:16

Ajuda do Flash Professional | Criao e publica...

http://helpx.adobe.com/br/ash/using/creating-p...

documento HTML5 Canvas. Isso pode afet-lo durante a migrao de contedo, quando voc tentar: Copiar contedo (camadas ou smbolos da biblioteca) de um tipo de documento Flash tradicional (como ActionScript 3.0, AIR para Android, AIR para desktop, e assim por diante) em um documento HTML5. 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. Importar um arquivo PSD ou AI que contenha contedo no suportado. Neste caso, o contedo removido ou convertido para padres suportados. Por exemplo, importe um arquivo PSD com efeitos de desfoque Gradient Bevel aplicados. O Flash Pro remove o efeito. Trabalhar 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 Flash Pro CC indica visualmente que o recurso no suportado. Por exemplo, voc criou uma linha pontilhada em um documento ActionScript 3.0 e alterna para HTML5 Canvas com a ferramenta Linha ainda selecionada. Observe o ponteiro e o Inspetor de propriedades, eles exibem cones para indicar que a linha pontilhada no suportada em HTML5 Canvas. Scripts Os componente do ActionScript so removidos e o o cdigo comentado. E, alm disso,se voc tem JavaScript gravado no bloco de comentrios (para kit de ferramentas para CreateJS com Flash Professional CC 13.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 documento HTML5 Canvas. O contedo removido Os tipos de contedo que no so suportados em HTML5 Canvas so removidos. Por exemplo: As transformaes 3D so removidas O cdigo ActionScript comentado Os vdeos so removidos O contedo modificado para um valor padro O tipo de contedo ou recurso suportado, mas uma propriedade 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 suportados e seus valores de emergncia durante a migrao, consulte este artigo.

Converter ActionScript 3 para documento HTML5 Canvas usando script JSFL

O Flash Professional CC fornece um script JSFL para converter um documento AS3 para um documento HTML5 Canvas. 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 HTML5 Canvas. Aplica os padres aos recursos no suportados, sub-recursos ou propriedades de recurso. Cria arquivos FLA separados para cada cena, pois o documento HTML5 no suporta cenas mltiplas. Para converter um documento AS3 em um documento HTML5 Canvas, faa o seguinte: 1. Abra o documento ActionScript 3 no Flash Professional CC. 2. SelecioneComandos > Converter AS3 em documento HTML5 Canvas. Observao: Leia todos os Avisos no painel de Sada. Esses avisos fornecem informaes sobra as alteraes que foram aplicadas ao contedo durante a converso.

Para o topo

As publicaes no Twitter e Facebook no esto licenciadas nos termos da Creative Commons. Aviso Legal | Poltica de Privacidade On-line

5 de 5

20-04-2014 22:16