Guia do Usuário Cancelar

Criação de componentes personalizados: exemplos

  1. Guia do Usuário do Adobe Animate
  2. Introdução ao Animate
    1. Novidades no Animate
    2. Glossário visual
    3. Requisitos de sistema do Animate
    4. Atalhos de teclado do Animate
    5. Trabalhar com vários tipos de arquivo no Animate
  3. Animação
    1. Noções básicas de animação no Animate
    2. Como usar quadros e quadros-chave no Animate
    3. Animação quadro a quadro no Animate
    4. Como trabalhar com animação de interpolação clássica no Animate
    5. Ferramenta Pincel
    6. Guia de movimento
    7. Interpolação de movimento e ActionScript 3.0
    8. Sobre a animação com interpolação de movimento
    9. Animações de interpolação de movimento
    10. Criação de uma animação de interpolação de movimento
    11. Utilização dos quadros-chave de propriedade
    12. Animação de posição com uma interpolação
    13. Editar interpolações de movimento usando o Motion Editor
    14. Edição do caminho de movimento de uma animação de interpolação
    15. Manipulação de interpolações de movimento
    16. Adição de atenuações personalizadas
    17. Criação e aplicação das predefinições de movimento
    18. Configuração de extensões de interpolação de animação
    19. Trabalhar com interpolações de movimento salvas como arquivos XML
    20. Interpolações de movimento e interpolações clássicas
    21. Interpolação de formas
    22. Uso da animação da ferramenta Bone no Animate
    23. Trabalhar com manipulação de caracteres no Animate
    24. Como usar camadas de máscara no Adobe Animate
    25. Como trabalhar com cenas no Animate
  4. Interatividade
    1. Como criar botões com o Animate
    2. Converter projetos do Animate em outros formatos de tipo de documento
    3. Criação e publicação de documentos HTML5 Canvas no Animate
    4. Adicionar interatividade com snippets de código no Animate
    5. Criar componentes HTML5 personalizados
    6. Uso de componentes do HTML5 Canvas
    7. Criação de componentes personalizados: exemplos
    8. Snippets de código para componentes personalizados
    9. Práticas recomendadas - Publicidade com o Animate
    10. Criação e publicação de Realidade virtual
  5. Fluxo de trabalho e espaço de trabalho
    1. Criação e gerenciamento de pincéis
    2. Uso de Google Fonts em documentos HTML5 Canvas
    3. Uso das Bibliotecas da Creative Cloud e do Adobe Animate
    4. Uso dos painéis Palco e Ferramentas do Animate
    5. Fluxo e espaço de trabalho do Animate
    6. Uso de fontes da Web em documentos HTML5 Canvas
    7. Linhas de tempo e ActionScript
    8. Trabalhar com múltiplas linhas de tempo
    9. Definir preferências
    10. Uso de painéis de criação do Animate
    11. Criar camadas na linha do tempo com o Animate
    12. Exportar animações para aplicativos móveis e mecanismos de jogo
    13. Mover e copiar objetos
    14. Modelos
    15. Localização e substituição no Animate
    16. Desfazer, refazer e o painel de Histórico
    17. Atalhos de teclado
    18. Como usar a linha do tempo no Animate
    19. Criação de extensões HTML
    20. Opções de otimização para imagens e GIFs animados
    21. Configurações de exportação para imagens e GIFs
    22. Painel Ativos no Animate
  6. Multimídia e vídeo
    1. Transformação e combinação de objetos gráficos no Animate
    2. Criar e trabalhar com instâncias do símbolo no Animate
    3. Traçado de imagem
    4. Como usar som no Adobe Animate
    5. Exportação de arquivos SVG
    6. Criação de arquivos de vídeo para uso no Animate
    7. Como adicionar vídeos no Animate
    8. Trabalhar com pontos de sinalização de vídeo
    9. Desenhar e criar objetos com o Animate
    10. Remodelação de linhas e formas
    11. Traçados, preenchimentos e gradientes com o Animate CC
    12. Trabalhar com o Adobe Premiere Pro e o After Effects
    13. Painéis de cor no Animate CC
    14. Abrir arquivos do Flash CS6 com o Animate
    15. Trabalho com texto clássico no Animate
    16. Aplicação de ilustração final no Animate
    17. Bitmaps importados no Animate
    18. Gráficos em 3D
    19. Trabalhar com símbolos no Animate
    20. Desenhar linhas e formas com o Adobe Animate
    21. Trabalho com bibliotecas no Animate
    22. Exportação de sons
    23. Seleção de objetos no Animate CC
    24. Trabalho com arquivos AI do Illustrator no Animate
    25. Aplicação de padrões com a ferramenta Pincel de borrifar
    26. Aplicação de modos de mesclagem
    27. Organização de objetos
    28. Automação de tarefas com o menu Comandos
    29. Texto multilíngue
    30. Uso de câmera no Animate
    31. Uso do Animate com o Adobe Scout
    32. Trabalhar com arquivos Fireworks
    33. Filtros gráficos
    34. Som e ActionScript
    35. Preferências de desenho
    36. Desenho com a ferramenta Caneta
  7. Plataformas
    1. Converter projetos do Animate em outros formatos de tipo de documento
    2. Suporte da plataforma personalizada
    3. Criação e publicação de documentos HTML5 Canvas no Animate
    4. Criação e publicação de um documento WebGL
    5. Compactação de aplicativos no AIR para iOS
    6. Publicação de AIR em aplicativos Android
    7. Publicação no Adobe AIR para desktop
    8. Configurações de publicação do ActionScript
    9. Práticas recomendadas - Organização do ActionScript em um aplicativo
    10. Como usar ActionScript com o Animate
    11. Práticas recomendadas - Diretrizes de acessibilidade
    12. Acessibilidade no espaço de trabalho do Animate
    13. Programação e gerenciamento de scripts
    14. Ativação do suporte para plataformas personalizadas
    15. Visão geral do suporte da plataforma personalizada
    16. Criação de conteúdo acessível
    17. Trabalhar com plug-ins personalizados de suporte da plataforma
    18. Depuração do ActionScript 3.0
    19. Ativação do suporte para plataformas personalizadas
  8. Publicação e exportação
    1. Exportação de arquivos do Animate CC
    2. Publicação OAM
    3. Exportação de arquivos SVG
    4. Exportar gráficos e vídeos com o Animate
    5. Publicação de documentos AS3
    6. Exportar animações para aplicativos móveis e mecanismos de jogo
    7. Exportação de sons
    8. Exportação de arquivos de vídeo QuickTime
    9. Controle de reprodução de vídeo externo com o ActionScript
    10. Práticas recomendadas - Dicas para a criação de conteúdo em dispositivos móveis
    11. Práticas recomendadas - Convenções de vídeo
    12. Práticas recomendadas - Diretrizes de criação de aplicativos SWF
    13. Práticas recomendadas - Estruturação de arquivos FLA
    14. Práticas recomendadas para otimizar arquivos FLA para o Animate
    15. Configurações de publicação do ActionScript
    16. Especificar configurações de publicação para o Animate
    17. Exportação de arquivos projetores
    18. Exportar imagens e GIFs animados
    19. Modelos de publicação HTML
    20. Trabalhar com o Adobe Premiere Pro e o After Effects
    21. Compartilhar e publicar animações rapidamente

Use esse artigo para entender um componente personalizado HTML5 de amostra.

Este artigo descreve como criar componentes personalizados. O primeiro exemplo descreve o componente de imagem (que também é fornecido com o Animate CC) e o processo para compreender a estrutura e as etapas envolvidas no desenvolvimento. O segundo exemplo mostra como empacotar qualquer componente existente de interface de usuário (como jQueryUI) e importá-lo no Animate CC.

  1. Criar um componente de imagem DOM

    Crie uma categoria chamada Meus componentes

    a. Crie uma pasta chamada meuscomponentes na pasta <ComponentesHTML5> na primeira execução.

    b. Baixe o arquivo myimage.zip em anexo e extraia o conteúdo na pasta

        mycomponents.

    Download

    c. Reinicie o Animate.

Estrutura do diretório dentro da pasta meuscomponentes
Estrutura do diretório dentro da pasta meuscomponentes

Você deverá ver uma nova categoria chamada “Meus componentes” na pasta de componentes e um novo componente chamado Minha imagem dentro dele. Você pode arrastar e soltar no palco, definir a propriedade de origem da imagem e publicar o filme para exibir o componente personalizado em ação. 

Metadados do componente - components.js

Código Components.js
Components.js

Observe que a categoria está definida como CATEGORY_MY_COMPONENTS. Os nomes de cada uma das propriedades também usam chaves similares. Esta é a chave da sequência de caracteres localizada para o nome da categoria. Se você abrir strings.json na pasta local, verá as entradas a seguir.

Observação:

O erro mais comum na edição destes arquivos é uma vírgula desnecessária após o último elemento do arranjo.

Detalhes da categoria
Detalhes da categoria

O valor do campo de ícone é definido como Sp_Image_Sm. Se você acessar a pasta de recursos, notará os dois pngs a seguir com o prefixo Sp_Image_Sm.

Valor do campo de ícone
Valor do campo de ícone

Estes são os ícones para as UIs escura e clara.

O valor do campo de origem em components.json é definido como “src/myimage.js”. 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget("my.Image", {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
  
_attrs: ["id", "src", "alt", "class", "border"],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate CC
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': "image" + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return "<img>";
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Siga os comentários no código para entendê-lo facilmente. 

Fique à vontade para ver a origem dos outros componentes que são fornecidos com o Animate. Na maioria dos casos, é possível usar um desses como ponto de partida e o configurar de acordo com os seus próprios requisitos.

Empacotar um componente jQuery-UI

Essa seção descreve como empacotar um widget jQuery-UI e usá-lo no Animate CC. Os mesmos conceitos podem ser usados para empacotar qualquer outro componente existente de qualquer outra estrutura de UI.

Vamos entender o componente empacotado DatePicker com o Animate CC, que é um widget jQuery-UI. Baixe e extraia os conteúdos do arquivo a seguir e use-os como referência.

Download

Estrutura do conteúdo extraído
Estrutura do conteúdo extraído

A pasta chamada jquery-ui-1.12.0 é a origem do framework de interface do jQuery, que contém o widget DatePicker original e seus recursos como imagens e css para empacotar e usar no Animate CC como qualquer outro componente HTML5. Isso é necessário apenas para visualização local; quando você usa “bibliotecas hospedadas” nas configurações de Publicação, tem a opção de usar o cdn para fazer download das origens dependentes. 

Código Components.js
Components.js

Há duas dependências padrão, jQuery e anwidget.js. Como anwidget.js não está no CDN, não temos nenhuma entrada de CDN para ele.

O próximo conjunto de entradas é para os outros recursos necessários para carregar o widget de seletor de data do jQueryUI. Se você estiver empacotando um widget de qualquer outra biblioteca, poderá especificar de modo semelhante o conjunto de dependências para ele. Essas dependências são baixadas antes de o componente ser inicializado.

Na seção de propriedades, nós expusemos apenas uma propriedade chamada de rótulo, que está vinculada à propriedade de rótulo do componente seletor de data. Da mesma forma, também podemos expor outras propriedades, qualquer propriedade que desejamos permitir ao usuário configurar no ambiente de criação do Animate. No tempo de execução, cada uma delas estará disponível como um par de chave e valor no arranjo options da instância. Podemos extrair o valor configurado e o aplicar no tempo de execução.

Arquivo de origem principal: src/datepicker.js.
Arquivo de origem principal: src/datepicker.js.

Seções diferentes do exemplo

  1. getCreateString:

    O widget de seletor de data do jQuery-UI pega um elemento de texto de entrada e o converte em um elemento de seletor de data no tempo de execução. Assim, nós inicializamos o DOM.

  2. attach:

    É preciso substituir esta função para este widget. Essa API é chamada sempre que o elemento é anexado ao DOM. No entanto, devido à maneira como o tempo de execução subjacente (nesse caso, createjs) funciona, essa API pode ser chamada várias vezes durante uma extensão do quadro.

    Nós lembramos o estado anexado do elemento subjacente e chamamos a classe de base para anexar a API (usando this._superApply(arguments)). Se esta for a primeira vez que o elemento é anexado ao DOM principal, usamos a chamada do widget subjacente jQuery-UI para converter o DOM do nosso componente em um seletor de data. Consulte - https://jqueryui.com/datepicker/

    A maioria dos widgets Javascript funcionam de modo semelhante. Você pode usar a mesma técnica para empacotar qualquer componente de sua escolha e os adicionar ao Animate CC da mesma forma.

  3. Atualização: substituímos a atualização e aplicamos as propriedades css ao contêiner div e os atributos ao elemento DOM real.

    Observação:

    Quando você substitui APIs, como attach, detach ou update, avalie a implementação padrão da classe de base e chame a implementação de base no momento apropriado, caso contrário, a inicialização do componente poderá falhar.

Logotipo da Adobe

Fazer logon em sua conta