Olá, seja bem-vindo ao procedimento que irá te auxiliar a respeito das boas práticas no momento de desenvolver Gadgets.


Na construção de Gadgets é necessário ter em conta alguns parâmetros para evitar perdas de performance ou mesmo até que o player fique bloqueado/travado. 


Requisitos Técnicos



  • Conhecimentos de AS3 (ActionScript 3) para Gadgets em Flash;


  • Conhecimentos de Javascript para Gadgets em Javascript (base em HTML5);


  • Estudar biblioteca CreateJS e principalmente EaselJS (que é parte fundamental dela);


  • Conhecimentos básicos de Programação Orientada a Objetos;


  • Conhecimentos de Adobe Animate (antigo Adobe Flash Professional).



Ampliando conhecimentos



Caso precise ampliar seus conhecimentos base no desenvolvimento de Gadgets em Flash, clique aqui para baixar o PDF oficial de instruções dos próprios desenvolvedores (Amplitude.net). Algumas questões mais atualizadas e avançadas estão presentes na programação dos Gadgets do Projeto Editorial de Cortesia (Default), em nosso servidor em:


Z:\01 - B2 Mídia\Criação\16 - Gadgets Programados\04 - Editorial Padrão CORTESIA\# Finalizados



Caso precise ampliar seus conhecimentos no desenvolvimento de Gadgets em Javascript (base HTML5), clique aqui para acessar o procedimento. Algumas questões mais atualizadas e avançadas estão presentes na programação dos Gadgets do Projeto Editorial de Cortesia (Default) mais atualizados, em nosso GitLab em:


https://gitlab.com/b2midia-tvs/templates-html5




Boas práticas



Programação dentro do Adobe Animate


  • Sempre que possível, utilize Tempo Dinâmico.

Porém, junto utilize também o tempo determinado pelo Template, que é ditado pelos atributos do GDATA retornado pelo Template. Assim conseguimos controlar melhor o encerramento do Template e definimos o tempo de reprodução do Template para o Tempo determinado pelo cliente para ele. Podemos também utilizar o Tempo determinado pelo cliente para o tempo de uma "tela" entre diversas de, por exemplo, paginação de vários aniversariantes por "tela".


  • Para programar dentro da Timeline, use uma camada (Layer) separada para os Scripts nos Keyframes, no topo (Layer no topo).


  • (Javascript) Todas as variáveis que precisarem ser utilizadas a qualquer momento ou em qualquer Keyframe do Template, precisam ser declaradas no script de escopo Global.


  • Ao final de toda Timeline de um MovieClip que tenha mais que 1 frame, SEMPRE use um Keyframe com o script com o comando this.stop() para evitar que o Template rode esta Timeline em looping eterno e consuma memória desnecessariamente. Considerando a instrução anterior, caso precise de uma animação que fique em looping eterno, é necessário que você programe a remoção deste MovieClip ao final da execução do Template.


  • Todo Objeto que for alterado de alguma forma (como a cor do texto, por exemplo) pela programação, ele precisa se encontrar organizado da seguinte forma:


>-Cena
>----MovieClip Avô (Pode ser animado)
>--------MovieClip Pai (É opcional, pode ser animado)
>------------MovieClip Filho, nosso alvo no código (Não pode ser animado, obrigatório ter apenas 1 frame)
>----------------Objeto a tratar (Shape, Texto, outros)


  • É recomendado que, antes de encerrar o Tempo Dinâmico na Cena, seja requisitado o método "gotoAndStop()" (sem aspas) e que nesse último Keyframe da Timeline da Cena não tenha nada além do Script em si.

Neste último Script do último Keyframe deverão ter apenas as instruções para a finalização do Template por completo.


  • Quando finalizar a execução Template, no código, sempre remova todas as Collections e todos os eventListeners.


  • (Javascript) Ao final da execução do Template (geralmente ao finalizar o Tempo Dinâmico), utilize a função "removeAllChildren()" (sem aspas) para a Cena (dependendo do caso pode ser o "this", sem aspas). Isto irá garantir que todos os objetos em cena sejam removidos e não deixem possíveis "leftovers" na memória.




MovieClips, Shapes e Animações:


  • Procurar não utilizar imagens/bitmaps dentro do Template.


  • Evite ao máximo usar objetos/elementos que fiquem fora do Canvas (área do Template) ou que sejam animados de forma que saiam muito dos limites do Canvas.

Isso acarretará na utilização de muita memória RAM e processamento gráfico do Player, pois para o Processador (CPU e/ou GPU) o Template estaria com uma área gráfica maior, ou seja, como se ele estivesse com uma resolução maior que os limites estabelecidos (mesmo com o uso de Mask para o Canvas todo, isto ocorre "atrás das cortinas").


  • Evite animar objetos (Shapes/figuras, textos, MovieClips) muito grandes ou complexos.

Eles podem utilizar muita memória RAM e processamento gráfico do Player.


  • Para fazer efeitos de sombra, use uma Shape com gradiente com transparência. Procure sempre substituir o uso de um Bitmap por imagens vetorizadas (tal como aquelas de Illustrator) sem muitos pontos ou curves. Quanto mais detalhado forem os vetores utilizados, mais memória RAM e processamento gráfico o Template irá requisitar do Player.


  • Se um MovieClip precisará ser requisitado no primeiro Keyframe da Cena, mas ele entrará somente depois com uma animação própria e no momento não deve estar visível, marque a propriedade de VISIBLE dele como DESLIGADA. Apenas quando for necessário de fato animar este MovieClip, utilize a propriedade VISIBLE como LIGADA no próprio painel de propriedades de objeto do Adobe Animate. Isto economizará memória de RAM e processamento gráfico.


  • Evitar uso de transparência em itens que serão animados, tais como gradientes ou Shapes (figuras) com transparência (opacidade inferior a 100%). Use somente caso realmente for necessário.


  • Evitar uso de transparências nas animações. Sempre que possível deve-se usar objetos opacos de modo a evitar processamento de transparências.


  • Para animações que precisem de suavidade, procure utilizar o recurso de Ease-In e Ease-out já presentes no Adobe Animate para os Tweens de animação.


  • Procurar não usar mais do que 3 animações simultâneas e evitar animações muito complexas.


  • Não é recomendado usar efeitos de rotação ou distorção de imagem, pois consome bastante processamento gráfico dos Players e certamente causará lentidão na exibição do mesmo. No máximo, utilizar ou só movimento da imagem de um ponto para outro, ou só um zoom contínuo.