Seja bem vindo!

O software de nome Adobe Flash^® está oficialmente morto, assim como o software Adobe Edge Animate^®. Agora temos o novíssimo Adobe Animate CC^®, software rebatizado sobre o antigo Flash, algo que simula Flash + Edge Animate + JavaScript ao mesmo tempo.

A Apple acabou com o Flash Player tempos atrás (literalmente), restringindo o acesso a objetos Apple, como celulares e tablets (iPhone, iPad), porém, o novo software da Adobe permite a criação de praticamente 90% do antigo Adobe Flash visualmente sem utilizar nenhum código, e o melhor: exportando em HTML5 e com novidades!

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.

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.

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:

• 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:

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:

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:

Ferramenta Bones:

Para os designers, fontes deixaram de ser problema. Selecionando um texto dinâmico, temos acesso a web fonts:

E para finalizar, nossos tipos de arquivo final (o fonte continua como .fla):

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, dá certo alivio na alma. Eu 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 aí.

Boa sorte para todos e que esse software reformulado realmente venha para ficar!