-
1. Re: How to apply one animation to play 30 different images?
resdesign Mar 11, 2014 12:57 PM (in response to Aubrey Scarza)There is a number of ways you could do that.
1- Do you have a symbol with all the images
2- Do you have a symbol with only one image
3- are you working from the main timeline or symbols are indicated above.
4- Are your images big?
-
2. Re: How to apply one animation to play 30 different images?
Aubrey Scarza Mar 11, 2014 1:09 PM (in response to resdesign)I selected all the images and converted to a symbol. Then I undid that thinking it wasn't right and now they are all grouped into one div as individual images.
I was working from the main timeline.
The images are big, yep.
-
3. Re: How to apply one animation to play 30 different images?
resdesign Mar 11, 2014 1:42 PM (in response to Aubrey Scarza)Here is how I would do it but this is just me! Smarter people do other things.
- do no use the main timeline
- make one symbol with an out transition and an in transition of an empty div the size of your image or put the image in.
- add labels in and out
- if your images are all the same size you can load them in the same div as a background image or change your image to img instead of div a load the images
- load your images on a click event and play the symbol's labels
var images = ['cat','dog','mouse','chicken','rabbit'];
i=0;
click event
i++;
sym.getSymbol('SymbolName').play('in');
// as a background image of a div
sym.getSymbol('SymbolName').$('imageContainerName').css({'background-image':'url("images/' +images[i]+'.jpg")';
// as an img (you need to change the div to img by selecting the image and changing div to img (top left of the left panel)
sym.getSymbol('SymbolName').$('imageContainerName').attr('src','images/' + images[i]+'.jpg');
You can also write the click event in composition ready:
sym.$('button').click(function(){
i++;
sym.getSymbol('SymbolName').play('in');
// as a background image of a div
sym.getSymbol('SymbolName').$('imageContainerName').css({'background-image':'url("images/' +images[i]+'.jpg")';
// as an img (you need to change the div to img by selecting the image and changing div to img (top left of the left panel)
sym.getSymbol('SymbolName').$('imageContainerName').attr('src','images/' + images[i]+'.jpg');
});
You could also do that with a json file to load your images into your symbol:
see rudimentary example i made a long time ago for a history course sample here: https://app.box.com/s/nadfi5pjmida4jplci6i
Hope this makes sense.
-
4. Re: How to apply one animation to play 30 different images?
resdesign Mar 11, 2014 1:59 PM (in response to resdesign) -
5. Re: How to apply one animation to play 30 different images?
Aubrey Scarza Mar 11, 2014 2:22 PM (in response to resdesign)Thank you so much for your help and examples! I will try this out tomorrow morning and let you know how I get on.



