hi all,I am just working on showing a download state. So when the user hits download the icon changes state to indicate its downloading. I have done that simply by using .states.next when the event is clicked. But I want to be able to show a download complete icon to replace the downloading icon if the download isn't cancelled. Does anyone have a way of doing this? I am sure its simple! but just not sure of the best route to go down. thanks!

8 Comments

Stephen Crowley

Hi Matthew, you could have your "downloading" layer overlap and on click have it display and include another animated property on that layer that has a delay to hide it after a certain amount of time?

Matthew McGriskin

Yer that sounds about right! So when I set a delay to hide the downloading icon, i am assuming i would include a delay to introduce the download complete icon? Any idea what that code is?

Ian McClure

I think better than a delay, you can create an "on AnimationEnd" event for the download status animation.

Matthew McGriskin

I have never used an "on AnimationEnd". I think i might need to only have the animation start once an event has been clicked. its looking a little something like this:

Can you share your project, so we can see that you are doing better?The other thing is that I was assuming you had a download progress bar and that the AnimationEnd event would fire off that.

Matthew McGriskin

I can't i am afraid, it is a potential prototype to showcase an interaction to a client. Sorry a pain i know.

Ian McClure

So based on the snippet there, when you are making the active layers visible and the inactive layers hidden and you are fading in a download complete.How you have things right now, I do think that adding a delay to your animation would do what you need. I say that because from what I can see none of the four layers that change states have any animation to them.Delay is a property of an animation block. It makes the animation fire one second later. Looks like this:

animation = new Animation layer: layers["download_complete_1"] properties: opacity: 1 delay: 1 Do any of your state changed have an animation to them?

Matthew McGriskin

yer that works well. I think i just need to figure out how to call that animation only when the download icon has been selected.