Flash Commands for Exporting Jpg. in Adobe Animate CC

Question

I made a game that would allow users to dress up my company's logo. The problem is that I am a total coding novice and I'm stuck on a task that is pretty difficult for me.

I want to export just the logo and the items that the user places on it. Each item is tied to a specific frame. Every item is in a separate page that moves when the user clicks a tab on page 1. Each keyframe in which an item is on the logo also has a separate named layer for easy cataloging and retrieval.

The following is the general code:

var myWindowArray = [neckWindow1, eyesWindow1, hatsWindow1, hatsWindow2, accessoriesWindow1, accessoriesWindow2, colorsWindow1, faceWindow1];
function hideAllWindows(){
	for each (var window in myWindowArray){
		window.x=950
	}
}
neckButton1.addEventListener(MouseEvent.CLICK, showneckWindow1);
eyesButton1.addEventListener(MouseEvent.CLICK, showeyesWindow1);
hatsButton1.addEventListener(MouseEvent.CLICK, showhatsWindow1);
accessoriesButton1.addEventListener(MouseEvent.CLICK, showaccessoriesWindow1);
colorButton1.addEventListener(MouseEvent.CLICK, showcolorsWindow1);
faceButton1.addEventListener(MouseEvent.CLICK, showfaceWindow1);
accessoriesButton2.addEventListener(MouseEvent.CLICK, showaccessoriesWindow2);
hatsButton2.addEventListener(MouseEvent.CLICK, showhatsWindow2);

function showneckWindow1 (event:MouseEvent):void{
	hideAllWindows();
	neckWindow1.x=387.95
}
function showeyesWindow1 (event:MouseEvent):void{
	hideAllWindows();
	eyesWindow1.x=387.95
}
function showhatsWindow1 (event:MouseEvent):void{
	hideAllWindows();
	hatsWindow1.x=387.95
}
function showaccessoriesWindow1 (event:MouseEvent):void{
	hideAllWindows();
	accessoriesWindow1.x=387.95
}
function showaccessoriesWindow2 (event:MouseEvent):void{
	hideAllWindows();
	accessoriesWindow2.x=387.95
	accessoriesWindow2.y=121.10
}
function showcolorsWindow1 (event:MouseEvent):void{
	hideAllWindows();
	colorsWindow1.x=387.95
}
function showfaceWindow1 (event:MouseEvent):void{
	hideAllWindows();
	faceWindow1.x=387.95
}
function showhatsWindow2 (event:MouseEvent):void{
	hideAllWindows();
	hatsWindow2.x=387.95
	hatsWindow2.y=121.10
}

Then that code links to the individual window code as follows:

import flash.events.MouseEvent;

var myNeckArray = [glasses1, glasses2, glasses3, glasses4, glasses5, glasses6, glasses7, glasses8, glasses9, glasses10, glasses11, glasses12];
for each (var neck in myNeckArray) {
	neck.addEventListener (MouseEvent.CLICK, onNeckClick);
}
function onNeckClick (event:MouseEvent):void {
	MovieClip(parent).eyes_MC.gotoAndStop(event.target.name);
}

How can I access the tagged keyframes and export the image? Also, is this process and code similar in case I wanted to allow users to post to Facebook automatically when exporting?

Answer 1

You can "draw" any MovieClip/Sprite to a BitmapData object like this:

var bitmapData:BitmapData = new BitmapData(myMovieClip.width,myMovieClip.height);
bitmapData.draw(myMovieClip);

And encode the data to a format like JPG, PNG using as3corelib like this:

import com.adobe.images.JPGEncoder;
var jpgEncoder:JPGEncoder = new JPGEncoder(quality);
var byteArray:ByteArray = jpgEncoder.encode(bitmapData);

Then if you want to save the image locally just do this:

var fileReference:FileReference=new FileReference();
fileReference.save(byteArray, ".jpg");

If you want to share the file on Facebook you will need to post the ByteArray to a server side script and then write it to a file on your server, then pass the file URL back to your application and use that to link to the image in the Facebook post.

So draw the top most parent of your finished "user customized logo" to a bitmap and follow the steps above.