Best plan for project

[DavidacrossAmerica]

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:

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.

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.

[kglad]

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);
}

[DavidacrossAmerica]

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?

[kglad]

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.

[DavidacrossAmerica]

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."

[kglad]

what code did you use?

[DavidacrossAmerica]

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);
}

[kglad]

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);
}

[DavidacrossAmerica]

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.

[kglad]

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)?

[DavidacrossAmerica]

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. 

  

[kglad]

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.

[DavidacrossAmerica]

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.

 

[kglad]

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).

[DavidacrossAmerica]

I think so. 

 

[kglad]

and is the black rect btn_0 in prop panel?

[DavidacrossAmerica]

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. 

[kglad]

just above or below this.addChild(card) use

card.x = stage.width/2;

etc

[DavidacrossAmerica]

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);
}

[kglad]

try stage.canvas.width and height

[DavidacrossAmerica]

In this project, I ended up using a card the size of the stage, so placement turned out not to be a big issue. But I have used the same code in a different project with much smaller image cards, and placement is very important. I tried first the earlier suggestion of:

card.x = stage.width/2;
card.y = stage.width/2;

And as before, it had no effect. I am not sure what exactly you were suggesting last with stage.canvas.width and height

for(var i=0;i<3;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);
}

[kglad]

again, use stage.canvas.width etc:

var card_buttonNum = 2

for (var i = 1; 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.x = stage.canvas.width/2;
card.y = stage.canvas.height/2;
card.addEventListener("click", ff.bind(this));
this.addChild(card);
}
function ff(e) {
this.removeChild(e.currentTarget);
}

[DavidacrossAmerica]

Thanks. That doesn't work. When I use that code, the cards don't appear at all. I had tried a number of variations of that after looking at other js specifications for placing objects to no avail. 

I have managed to get it working on desktop by just specifying the position as follows though this makes no sense to me since the canvas is 1280X720. If it works on mobile devices, this will work. 

card.x = 515;
card.y = 180;

[kglad]

it works for me, card (kglad.com) but your card's reg point should be its center

[Nicktendo28]

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

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