Best plan for project

Explorer ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

I just thought I would get advice for how best to setup a project before I get too deep in it (given my relative lack of experience with Animate).

There will be six sets of eight buttons on the stage, like these:

DavidacrossAmerica_0-1617373206856.png

I plan to make them button symbols because I want a little button behavior for each. Clicking one of them causes a unique "card" to open. So there are 48 of these. Clicking the card causes it to disappear.

DavidacrossAmerica_1-1617373367810.png

What's the easiest way to set this up? Each card on it's own layer and then create some behavior to animate them on their own timline? Or each card on one layer, and then using labels, mark each one's animation from small to large as it appears? 

 

I basically understand how to get the functions I want, but I think there is probably an easy way and a hard way to do this. Hoping for some direction to the easy way. Thanks.

 

 

 

TOPICS
How to

Views

1.1K

Likes

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 ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

as3 or html5?

 

for both, the setup would be the same but the code would be different.  for html5:

 

1. create and put the buttons on stage and name the buttons prudently, for example, btn_0,btn_1,...,btn_47

2. create your 48 cards in animate, do not put them on stage and prudently assign each a linkage id, for example, card_0,card_1,...,card_47 (where btn_n triggers the appearance of  card with id card_n).

3.  use the following js code:

 

for(var i=0;i<48;i++){
this["btn_"+i].name = "btn_"+i;
this["btn_"+i].addEventListener("click",f.bind(this))
}
function f(e){
var card = new lib["card_"+e.currentTarget.name.split("_")[1]]();
card.addEventListener("click",ff.bind(this));
this.addChild(card);
}
function ff(e){
this.removeChild(e.currentTarget);
}

Likes

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
Explorer ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

Thanks, and sorry. HTML5

 

I get the naming issue from the last challenge I had though this direction will take some time to absorb. 

 

In your #2, you say to NOT put the cards on stage? Why not? And I was thinking that creating the cards in Illustrator would be easier and allow greate creative control. Should I import them as ai files or as png or something?

Likes

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 ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

because the code adds them to the stage.  so no need to add them.  but if you want, you can, but then the code needs to be changed.  the code would not be more difficult or especially lengthy, but different.  let me know if that's what you want.

 

you can import ai graphics into movieclips to create your cards.  you can use ai or png, though if you use ai, you can edit the layers and more in animate.  if no editing is needed you can import a png but an svg would scale better than all bitmap file types.

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Just getting back to this. I've done as you suggested though with just five buttons and two cards to test it out. The test button instance is btn_0 and card instance is card_0, and the script is on that frame. Nothing happens. 

 

I created a test project to see if I could narrow down the problem, but it doesn't do anything either with just a single button and card instance. I made a second button and card to see if your code needs at least two for this to work, but that didnt' help. 

 

I keep getting this messge when trying to attach the file if you can suggest a way around this: "The attachment's cardtest.fla content type (application/octet-stream) does not match its file extension and has been removed."

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

what code did you use?

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

for(var i=0;i<48;i++){
this["btn_"+i].name = "btn_"+i;
this["btn_"+i].addEventListener("click",f.bind(this))
}
function f(e){
var card = new lib["card_"+e.currentTarget.name.split("_")[1]]();
card.addEventListener("click",ff.bind(this));
this.addChild(card);
}
function ff(e){
this.removeChild(e.currentTarget);
}

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

that's for 48 buttons and cards.  you need the same number of cards as buttons and you need to adjust the number if you're not using 48. eg,

 

var card_buttonNum = 2

for(var i=0;i<card_buttonNum;i++){
this["btn_"+i].name = "btn_"+i;
this["btn_"+i].addEventListener("click",f.bind(this))
}
function f(e){
var card = new lib["card_"+e.currentTarget.name.split("_")[1]]();
card.addEventListener("click",ff.bind(this));
this.addChild(card);
}
function ff(e){
this.removeChild(e.currentTarget);
}

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Still not working for me in the test file using the exact code you just provided I'm afraid. I also changed the 48 to a 2 in the previous code just to see if that would work. If I had the ability to share the test file with you, I imagine you would see the problem right away.

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

do you have two buttons on stage (btn_0 and btn_1) and do you have two cards in your library (with linkage names card_0 and card_1)?

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

I thought I did. Perhaps I don't understand what you mean by linkage id. That means the instance name, right? Attached are a couple of image files showing the objects and property of the first button. They are movie clips, so I thought that might be the issue. But changing them to buttons doesn't fix it. 

CardTest.png

  

CardTest2.png

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

no.  

 

there are no cards on stage.  you wanted them to "open" when the corresponding button is clicked.

 

the cards are in the library only and not on-stage and they have linkage names assigned.  ie, double click the linkage field in your library panel and assign linkage names.

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Linkage is new to me. So I need to readup on the difference between that and instance names. But I did as you directed, and still nothing.

 

The cards are not on the stage because you orginally said not to put them on the stage. I tried it both ways with no results.

CardTest3.png

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

that last screenshot shows a linkage id correctly set.  your previous screenshot did not.

 

now, do the two on stage buttons have instance names (in the properties panel).

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

I think so. 

CardTest4.png

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

and is the black rect btn_0 in prop panel?

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

Well it was at one point, but apparently I messed it up with my fiddling. I changed it, and it works.  Thank you. 

Now...how do I control the card placement? They appear in the upper left corner, and I want them in the center of the stage. 

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

just above or below this.addChild(card) use

 

card.x = stage.width/2;

 

etc

Likes

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
Explorer ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

I assume the "etc" means to add y. Did that, but it doesn't affect placement.

 

var card_buttonNum = 2

for(var i=0;i<card_buttonNum;i++){
this["btn_"+i].name = "btn_"+i;
this["btn_"+i].addEventListener("click",f.bind(this))
}
function f(e){
var card = new lib["card_"+e.currentTarget.name.split("_")[1]]();
card.addEventListener("click",ff.bind(this));
this.addChild(card);
card.x = stage.width/2;
card.y = stage.width/2;
}
function ff(e){
this.removeChild(e.currentTarget);
}

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

try stage.canvas.width and height

Likes

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 ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

LATEST

That's a lot of buttons. Good luck with that. 

Also, be sure to check out code snippets to help. 

 

Screen Shot 2021-05-06 at 10.18.17 PM.png

Likes

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