Using Templates in Animate

New Here ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

I create a lot of animated banner ads that are matchup based. For example a 300x250 showing Team A vs Team B for a Friday night game and then I will have to create the same banne but it is showing Team C vs Team D for a Saturday night game. All that is changed is a player images, team logos and maybe the tune-in time. I am novice when it comes to code so I just import the different team assets in to the FLA and save it out under different file name. In my research I have found that there may be a less time consuming way to do this by creating a template and asset library containing all the necessary assets I would need to swap. So instead of having to go into and import and swap the assets in my FLA I would just have to update the template that is linked to my library and then save out under the correct file name.  Again when it comes to code I am inexperienced at writing it but I can pick it apart and understand it. Any help and or examples would be greatly appreciated. I can also provide examples if needed.

TOPICS
Code, How to, Import and export, Other, Publish package

Views

74

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

i'd use an xml file similar to:

 

<?xml version="1.0" encoding="utf-8" standalone="no" ?>

<specs>

<hometeam>team a</hometeam>

<visitingteam>team b</visitingteam>

<tunein_time>8am pst</tunein_time>

</specs>

 

if knowing the team names determines the player images and team logos, that's all you would need to edit for each banner.  if you need to specify those things, just add those elements and edit them for each banner.

 

then use dynamic textfields to display the team names and use code to load the xml data and images:

 

to load xml:

 

var r = new XMLHttpRequest();
r.open("GET", "teams.xml", true);
r.addEventListener("load", rF);
r.send();

function rF(e) {
parser = new DOMParser();
var xml = parser.parseFromString(e.target.response, "text/xml");
home_tf.text = xml.getElementsByTagName("hometeam")[0].childNodes[0].nodeValue;
visiters_tf.text = xml.getElementsByTagName("visitingteam")[0].childNodes[0].nodeValue;
time_tf.text = home_tf.text = xml.getElementsByTagName("tunein_time")[0].childNodes[0].nodeValue;


// if logo image names can be derived from team names:


var homelogo = new Image();
homelogo.onload = onLoad_homelogoF;
homelogo.src=home_tf.text+"_logo.png";

 

var visitorlogo = new Image();
visitorlogo.onload = onLoad_visitorlogoF;
visitorlogo.src=visitor_tf.text+"_logo.png";
}

 

function onLoad_homelogoF(e){

var img = new createjs.Bitmap(e.target)

stage.addChild(img);

img.x = homelogo_x;  // define these x&y

img.y = homelogo_y;

}

function onLoad_visitorlogoF(e){

var img = new createjs.Bitmap(e.target)

stage.addChild(img);

img.x = visitorlogo_x;  // define these x&y

img.y = visitorlogo_y;

}

 

// likewise for the other images.

 

 

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 27, 2020 Aug 27, 2020

Copy link to clipboard

Copied

Thank you for answering my question I posted to the Adobe Support Community. I have always just done timeline animation. I do believe your response is what I am looking for I just do not know how to use it and set up the proper file structure. Is there one folder that would hold all the images and logos? Can the logos be SVG's and not images?  I can not write code but I can edit it.  I am looking to increase productivity as I often turn out hundreds of banners a month and my animate production hacks get the job done but I want to be more efficient. A lot of the banner have small changes, imagery, tune in time, broadcaster etc. Is it possible we could discuss further? I could provide examples of what I am trying to accomplish. 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 27, 2020 Aug 27, 2020

Copy link to clipboard

Copied

frame_1.pngframe_2.png

attached are examples of the opening and closing frame. Thank you.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 28, 2020 Aug 28, 2020

Copy link to clipboard

Copied

yes, the code i supplied would work with svg logo files.  the files can be in any referenceable folder.  i would use a project folder with two subfolders, an xml folder and a logo folder but you can use anything you want.

 

there's no code to write.  you just edit the xml file supplying the correct team names and the correct time for the current match.  that's one of the purposes of using an xml file.  it's readable by humans.  can you see how to edit this (hint, change team a, team b and 8am pst) for one of your real matches:

 

<?xml version="1.0" encoding="utf-8" standalone="no" ?>

<specs>

<hometeam>team a</hometeam>

<visitingteam>team b</visitingteam>

<tunein_time>8am pst</tunein_time>

</specs>

 

 

 

and i'll continue answer your questions and help you with problems in this forum, but if you want me to set this up and do it for you, you'll need to hire me.  i think this would cost between $100 and $500.  if that interests you and you want a more accurate estimate, send me a private message.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines