There are many occasions when I have multiple buttons that need to do the same thing but call different elements I have for example in a array.
There are 2 ways this can be done. One uses jquery and the other not. So if you are using the latest version of animate and are creating banners that are best without jquery, you still will have a good way to do this.
Let's say that you have a map with several buttons that show a different information you have in a screen that slides in and out when you click the buttons. You could have text and images in a symbol. $each() is the easiest what to accomplish this without writing the same code over and over for each button.
1st you need to group your buttons in a div and give a name to the group. I usually call the grou 'buttons' which speaks for itself. The bottom element in the group will have number 0 and the number will continue 1,2,3,...
I create an array for my images and text information and each element will be called according to the button the user presses.
Creating a array is not hard. Just follow the style shown below. This array has 3 topics: the image name, the caption text and the body information. These will be placed into the respective parts of a symbol: 2 text field and an image (see more info for the image below).
var myInfo = [
{
"image":"france",
"caption":"Eiffel Tower",
"info":"France is situated at the western tip of Europe surrounded with three bodies of waters: the North Sea, the Atlantic ocean, and the Mediterranean Sea."
},
{
"image":"uk",
"caption":"Big Ben, London",
"info":"The United Kingdom uncludes several countries: England, Wales, Scotland, and Northern Ireland."
}
];
Note: if you have different types of images, add the extension in your image array and change the code accordingly.
The elements of the array will be called in a click event.
Let us first create the symbol named 'information' so we have the elements we need. Place a background on the stage either with an image, a rectangle, or a rounded rectangle. You can also use an elipse if you want. Then, place your first image, one text field for the caption and one text field for the body text.
Name the image 'slide', the caption field 'caption', and the body text 'info' or anything else you like.
The are several ways to place images in Animate beside adding html tags in a text field.
If you have images that are all the same size, the easiest way is to place the first image in you symbol and changing the element from div to img. You will notice that the path for the image contains a call to the array we created. myInfo is the name, i is the index, and image is the sub element of the array.
sym.getSymbol('information').$('slide').attr('src','images/'+myInfo[i].image+'.png');
sym.getSymbol('information').$('slide').css({
"background-image" : "url('images/"+ myInfo[i].image +"').jpg"),
"background-repeat": "no-repeat"
});
Now add the code for the text fields.
sym.getSymbol('information').$("caption").html(myInfo[i].caption);
sym.getSymbol('information').$("info").html(myInfo[i].info);
Finally, we have the code for the whole composition using jquery each(); — See below for the code that allows on/off on the click event using the variable 'active'.
var active = 0;
// using jquery each()
var buttons = sym.$('buttons').children();
$.each(buttons,function(i){
// click event
$(this).on("click", function(){
if(active==0){
sym.getSymbol("information").play();
sym.getSymbol('information').$("image").attr('src','images/'+ myInfo[i].image + '.jpg');
sym.getSymbol('information').$("caption").html(myInfo[i].caption);
sym.getSymbol('information').$("info").html(myInfo[i].info);
active = 1; // reset the variable
}else{
sym.getSymbol("information").playReverse();
active = 0; // reset the variable
}
});
})
If you have images that have different sizes, then it is better to add a transparent div in your symbol where the images will be loaded as background. use background-repeat with no-repeat so that only one instance of the image will show in the div. The buttons do not need to be put in a group div like in the jquery examples. It is your choice on how you want to structure your composition. I use groups when I can so that it is easier to manage elements in the elements panel.
function useButtons(element,i) {
sym.$(element).bind("click",function() {
console.log(element);
sym.getSymbol("information").play();
sym.getSymbol('information').$("image").attr('src','images/'+ myInfo[i].image + '.jpg');
sym.getSymbol('information').$("caption").html(myInfo[i].caption);
sym.getSymbol('information').$("info").html(myInfo[i].info);
});
}
In order to allow the buttons to be clicked to slide the symbol in or out I added a variable that is checked to see that state of the image. I called the variable 'active' but you can call it anything that is mininful to you.
below is the whole code for foreach.
// initialize the variable
var active = 0;
function useButtons(element,i) {
sym.$(element).bind("click",function() {
console.log(element);
if(active==0){
sym.getSymbol("information").play();
sym.getSymbol('information').$("image").attr('src','images/'+ myInfo[i].image + '.jpg');
sym.getSymbol('information').$("caption").html(myInfo[i].caption);
sym.getSymbol('information').$("info").html(myInfo[i].info);
active = 1; // reset the variable
}else{
sym.getSymbol("information").playReverse();
active = 0; // reset the variable
}
});
}
// add button names here
['france', 'uk'].forEach(useButtons);
I am providing you with a file created with Animate 2014.1 which will also work in version 2015. The file contains the code for both each() and foreach. foreach is commented out and jquery is added in the script loading panel. To use foreach, comment out (or delete) each() and un-comment foreach. jquery.js can also be deleted from the script panel.