As novididades do Adobe Animate CC

O Adobe Animate é familiar a qualquer software de design, melhor ainda para quem já trabalhou com o Flash, já que sua interface é praticamente a mesma. <img src=”images/Leandro_Amano/01.jpg” alt=”” width=”402″ height=”214″ /> 
Outra vantagem é que ainda podemos abrir e criar documentos Flash, já que o mesmo é indispensável para criação de arquivos para P2P, chats e streaming com o Adobe Flash Media Server.
Claro que ainda podemos criar classes e arquivos AIR para aplicações desktop e dispositivos móveis Android e IOS.
Infelizmente não podemos mais abrir arquivos Adobe Edge Animate neste novo software, então nesse caso, não apague seu Edge Animate caso possua arquivos do tipo .an. <img src=”images/Leandro_Amano/02.jpg” alt=”” width=”405″ height=”251″ align=”left” /> 
 
 
 
 
 
 
 
 
 
Também existem mudanças caso escolha o alvo principal, HTML5 Canvas: exportação para a animação SVG; obs: SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada. suporte de vídeo 4k+: - vídeos de exportação com resoluções personalizadas para Ultra HD e Hi-DPI. - Exportação com resolução personalizada – Revitalizar conteúdo antigo redimensionando e otimizando-os para qualquer resolução, como Hi-DPI e Ultra HD. - vector art brushes; - onion skinning coloridos; - canvas rotativos 360º; - profunda integração com o Adobe Stock: <img src=”images/Leandro_Amano/2-a.jpg” alt=”” width=”407″ height=”246″ /> 
typekit e Google fonts; integração com bibliotecas compartilhadas.
A escolha do novo nome para o software também é fundamental para seu uso, já que agora o software exibe finalmente uma posição clara sobre sua finalidade. Os três tipos de animação (sem código) ainda estão disponíveis: Tween Motion, Classic Tween e Tweening Shape, basicamente as opções são as mesmas do antigo Adobe Flash: <img src=”images/Leandro_Amano/03.jpg” alt=”” width=”416″ height=”510″ /> 
Mas como programador, ainda aguardo uma documentação clara em relação aos códigos (atenção a opção Actions), já que em alguns momentos nem sempre é utilizado Javascritpt, e sim ActionScript, como é o caso da action gotoAndPlay:
 this.meuObjeto.addEventListener(“click”, clica.bind(this));
function clica(){                 this.gotoAndPlay(5); } Para quem não programa o painel Code Snippets é uma boa opção para não ter que memorizar ou digitar alguns códigos já que os mesmos já estão prontos: <img src=”images/Leandro_Amano/04.jpg” alt=”” /> 
Para os mais experientes também é possível brincar (programar),  como, por exemplo, criar um texto dinâmico e aplicar um mini contador (exemplo abaixo): var texto = new createjs.Text(); var num = 0;
this.addChild(texto);
function clica() {                 texto.text = “0”;                 texto.x = 200;                 texto.y = 100;                 texto.color = “#ff7700″;                 texto.font = “20px Arial”;
                setInterval(function(){                                texto.text = String(num++);                 }, 100); }
this.btn.addEventListener(“click”, clica.bind(this));
 Aplicar animação via código também é possível: this.btn1.addEventListener(“click”, clickH.bind(this)); this.btn2.addEventListener(“click”, clickH.bind(this)); this.btn3.addEventListener(“click”, clickH.bind(this)); this.btn4.addEventListener(“click”, clickH.bind(this));
function clickH(evento){                 if(e.currentTarget == this.btn1){                                createjs.Tween.get(this.conteudo).to({y:50}, 1000, createjs.Ease.elasticOut);                 }else if(e.currentTarget == this.btn2){                                createjs.Tween.get(this.conteudo).to({y:-50}, 1000, createjs.Ease.linear);                 }else if(e.currentTarget == this.btn3){                                createjs.Tween.get(this.conteudo).to({y:-150}, 1000, createjs.Ease.quadInOut);                 }else if(e.currentTarget == this.btn4){                                createjs.Tween.get(this.conteudo).to({y:-250}, 1000, createjs.Ease.quadOut);                 } } Mini Player de som: this.btn1.addEventListener(“click”, playSound.bind(this)); this.btn2.addEventListener(“click”, playSound.bind(this)); this.btn3.addEventListener(“click”, playSound.bind(this)); this.btn4.addEventListener(“click”, playSound.bind(this)); this.btnStop.addEventListener(“click”, playSound.bind(this)); this.field.text = “Selena Gomez”;
createjs.Sound.on(“fileload”, handleLoad); createjs.Sound.registerSound(“sounds/som.mp3”, “soundID”, 3);
var playing = false;
function playSound(e){                 playing = false;                 createjs.Sound.stop();                 if(!playing){                                if(e.currentTarget == this.btn1){                                                createjs.Sound.registerSound(“sounds/som.mp3”, “soundID”, 3);                                                this.field.text = “Selena Gomez”;                                }else if(e.currentTarget == this.btn2){                                                createjs.Sound.registerSound(“sounds/som2.mp3”, “soundID”, 3);                                                this.field.text = “Paula Fernandes”;                                }else if(e.currentTarget == this.btn3){                                                createjs.Sound.registerSound(“sounds/som3.mp3”, “soundID”, 3);                                                this.field.text = “Shakira”;                                }else if(e.currentTarget == this.btn4){                                                createjs.Sound.registerSound(“sounds/som4.mp3”, “soundID”, 3);                                                this.field.text = “Moony”;                                }else if(e.currentTarget == this.btnStop){                                                this.field.text = “Stopped”;                                                return;                                }
                               createjs.Sound.play(“soundID”);                                playing = true;                 } }
function handleLoad(e) {                 playing = true;                 createjs.Sound.play(“soundID”); }
 Acredito que o melhor de tudo isso no Adobe Animate seja a “não” dependência de um plugin para animar e exibir no Browser. Quanto às ferramentas, apenas um preview abaixo, a única não habilitada é a de 3D, mesmo bones é possível utilizar: <img src=”images/Leandro_Amano/05.jpg” alt=”” /> 
Ferramenta Bones: <img src=”images/Leandro_Amano/06.jpg” alt=”” width=”375″ height=”219″ />
 
Para os designers, fontes deixaram de ser problema, selecionando um texto dinâmico temos acesso a web fonts: <img src=”images/Leandro_Amano/07.jpg” alt=”” width=”398″ height=”312″ /> 
 
 
<img src=”images/Leandro_Amano/08.jpg” alt=”” width=”408″ height=”270″ />
 
 
 
<img src=”images/Leandro_Amano/09.jpg” alt=”” width=”414″ height=”146″ />
E para finalizar nossos tipos de arquivo final (o fonte continua como .fla): <img src=”images/Leandro_Amano/10.jpg” alt=”” width=”468″ height=”607″ />
 
O Arquivo de tipo .OAM (Adobe Edge Animate Widget File), Widget Animado criado pelo Adobe Edge Animate, um programa que usa HTML5, CSS e JavaScript, tecnologias utilizadas para criar conteúdo animado para Web; contém formas, imagens e outros conteúdos, bem como um cronograma para a execução da animação; pode ser criado através da publicação de um projeto Edge Animate (arquivo .an) também.
Adobe InDesign, Dreamweaver e Muse também abrem arquivos desse tipo que nada é, senão um .zip.
Finalizando o artigo, a melhor verdade de todas é que a Adobe conseguiu reviver um software que para os flasheiros  já estava morto. E que para a felicidade de muitos da certo alivio na alma, falando em particular que utilizo e nunca deixei de abrir e programar no Flash, desde a versão 4. Fiquem ligados, designers e desenvolvedores, parece que muita coisa boa vem por ai. 
<img src=”images/Leandro_Amano/logo_flash.jpg” alt=”” />
O   Arquivo de tipo .OAM (Adobe Edge Animate Widget File), Widget Animado criado pelo Adobe Edge Animate, um programa que usa HTML5, CSS e JavaScript, tecnologias utilizadas para criar conteúdo animado para Web; contém formas, imagens e outros conteúdos, bem como um cronograma para a execução da animação; pode ser criado através da publicação de um projeto Edge Animate (arquivo .an) também.
 Adobe InDesign, Dreamweaver e Muse também abrem arquivos desse tipo que nada é, senão um .zip. Finalizando o artigo, a melhor verdade de todas é que a Adobe conseguiu reviver um software que para os flasheiros  já estava morto. E que para a felicidade de muitos da certo alivio na alma, falando em particular que utilizo e nunca deixei de abrir e programar no Flash, desde a versão 4. Fiquem ligados, designers e desenvolvedores, parece que muita coisa boa vem por ai. Boa sorte para todos e que que esse software reformulado realmente venha para ficar! (*) Designer/desenvolvedor, instrutor do Centro de Capacitação da ENG. Iniciou sua carreira em 1999 e atualmente é Adobe Certified Expert, Adobe Certified Instructor, Adobe User Group Leader, Adobe Community Professional e Adobe Community Leader. <!–[if !supportLineBreakNewLine]–> <!–[endif]–>