Image(s) path change in realtime #190

Closed
gnatok opened this Issue May 8, 2013 · 12 comments

Comments

Projects
None yet
2 participants
@gnatok

gnatok commented May 8, 2013

Hello.

Can you look at my sample code
https://dl.dropboxusercontent.com/u/2086883/tits%202/index.html

All works like I want, but the main problem that I cant change image path without unreel/reel methods.
Question. Can i change path of the file in real time. Or can I move only horizontally in multi-row sprite and programmatically change number of row?

Thanks

@gnatok

This comment has been minimized.

Show comment
Hide comment
@gnatok

gnatok May 9, 2013

Ok. Now all works like I want. I use only one sprite for all images.
One problem left. How to with off vertical scroll in multi-row sprite?

gnatok commented May 9, 2013

Ok. Now all works like I want. I use only one sprite for all images.
One problem left. How to with off vertical scroll in multi-row sprite?

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 10, 2013

Owner

Fair points you have there.

  1. "Can i change path of the file in real time?": No, you can not change images of a running instance. It needs to be rebuilt by .reel() command every time. There's no work-around.
    Good news is that I find it very important to be able to load a different set of image(s) into an already running instance and have already implemented it for image option and will do the same for images and sequence too. Give me few days to add tests and I'll commit a branch where it currently is possible to load different image seamlessly without any flash or anything. This is definitely going into next patch release 1.2.2.
  2. You can not do a row lock either now. See #191 for solution.
Owner

pisi commented May 10, 2013

Fair points you have there.

  1. "Can i change path of the file in real time?": No, you can not change images of a running instance. It needs to be rebuilt by .reel() command every time. There's no work-around.
    Good news is that I find it very important to be able to load a different set of image(s) into an already running instance and have already implemented it for image option and will do the same for images and sequence too. Give me few days to add tests and I'll commit a branch where it currently is possible to load different image seamlessly without any flash or anything. This is definitely going into next patch release 1.2.2.
  2. You can not do a row lock either now. See #191 for solution.

pisi added a commit that referenced this issue May 10, 2013

pisi added a commit that referenced this issue May 10, 2013

pisi added a commit that referenced this issue May 10, 2013

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 10, 2013

Owner

Real-time image switching for sprites is implemented. Code currently resides in gh-190-image-change branch. Please give it a spin.

I took a liberty to use some of your images for an example. Would it be ok to include them in the release?

Owner

pisi commented May 10, 2013

Real-time image switching for sprites is implemented. Code currently resides in gh-190-image-change branch. Please give it a spin.

I took a liberty to use some of your images for an example. Would it be ok to include them in the release?

@ghost ghost assigned pisi May 10, 2013

@gnatok

This comment has been minimized.

Show comment
Hide comment
@gnatok

gnatok May 13, 2013

@pisi ok. No problems. You can include this images.
Actually I found how to easily switch off vertical scroll.

You can set a HUGE number of revolution.y param.
revolution: { x: 100, y: 10000 }

gnatok commented May 13, 2013

@pisi ok. No problems. You can include this images.
Actually I found how to easily switch off vertical scroll.

You can set a HUGE number of revolution.y param.
revolution: { x: 100, y: 10000 }

@gnatok

This comment has been minimized.

Show comment
Hide comment
@gnatok

gnatok May 15, 2013

@pisi real time image changing works GREAT!!. But i found couple things, that can be improved.

  1. When you switch images, timeout parameter is reset.
  2. This method works only for sprite image(image parameter), not for images parameter

You can see example here http://crisalix.com

gnatok commented May 15, 2013

@pisi real time image changing works GREAT!!. But i found couple things, that can be improved.

  1. When you switch images, timeout parameter is reset.
  2. This method works only for sprite image(image parameter), not for images parameter

You can see example here http://crisalix.com

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 16, 2013

Owner

Thanks for the feedback! And for the images as well. Appreciate it.

  1. Oh, and it does stop animation, OK. Will fix that ;)
  2. The new image is either fetched from local cache (if cached) or from a server, depending on your caching policies. Please check network tab in developer tools and don't mind the preloader bar much. It is designed to do a short "grow" animation even when there's no actual network request in order to clearly indicate full readiness of the Reel instance.
  3. True. Work on support for image sequences in progress.
Owner

pisi commented May 16, 2013

Thanks for the feedback! And for the images as well. Appreciate it.

  1. Oh, and it does stop animation, OK. Will fix that ;)
  2. The new image is either fetched from local cache (if cached) or from a server, depending on your caching policies. Please check network tab in developer tools and don't mind the preloader bar much. It is designed to do a short "grow" animation even when there's no actual network request in order to clearly indicate full readiness of the Reel instance.
  3. True. Work on support for image sequences in progress.
@gnatok

This comment has been minimized.

Show comment
Hide comment
@gnatok

gnatok May 17, 2013

HI @pisi.
About 2 point. Yes. It was my mistake. All works perfect!

Thanks

gnatok commented May 17, 2013

HI @pisi.
About 2 point. Yes. It was my mistake. All works perfect!

Thanks

pisi added a commit that referenced this issue May 17, 2013

pisi added a commit that referenced this issue May 17, 2013

pisi added a commit that referenced this issue May 17, 2013

Refactored image sequences utilizing the data normalization to conver…
…t sequence string into array. This allows for realtime image sequence string change. #190
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 17, 2013

Owner
  1. I made a little investigation and found out that neither timeout gets cleared nor animation stops as a result of image change. (I did found a problem of resuming running animation in correct direction and that I fixed, but that wasn't directly related.) I also enhanced the example with animation to showcase, that image change doesn't stop the animation. In your example you are not using images switching, but multi-row movie with that huge vertical revolution setting. Changing row or frame (and tier and fraction for that matter) always makes the instance unidle - that is it starts the timeout and becomes idle again when the timer runs out. When instance is idle, it resumes animation automatically. And that is why it stops your animation. Instead of the multi-row technique, I would recommend to use the new image switching enabled code as there are no such issues. If you'd like to keep multi-row (in that case move the discussion to #191), as an alternative, you can always .trigger('play') right after you change the row.
  2. OK! :)
  3. Image sequences are now supported too.
Owner

pisi commented May 17, 2013

  1. I made a little investigation and found out that neither timeout gets cleared nor animation stops as a result of image change. (I did found a problem of resuming running animation in correct direction and that I fixed, but that wasn't directly related.) I also enhanced the example with animation to showcase, that image change doesn't stop the animation. In your example you are not using images switching, but multi-row movie with that huge vertical revolution setting. Changing row or frame (and tier and fraction for that matter) always makes the instance unidle - that is it starts the timeout and becomes idle again when the timer runs out. When instance is idle, it resumes animation automatically. And that is why it stops your animation. Instead of the multi-row technique, I would recommend to use the new image switching enabled code as there are no such issues. If you'd like to keep multi-row (in that case move the discussion to #191), as an alternative, you can always .trigger('play') right after you change the row.
  2. OK! :)
  3. Image sequences are now supported too.

pisi added a commit that referenced this issue May 20, 2013

And just like image's `data-images` can accept an array string, so do…
…es `data-x` and `data-y` attributes of annotations. With an addition of number conversion. #190
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 20, 2013

Owner

For the record, the above commit (3a1b2c2) obviously doesn't belong here, but to #193 instead.

Owner

pisi commented May 20, 2013

For the record, the above commit (3a1b2c2) obviously doesn't belong here, but to #193 instead.

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 20, 2013

Owner

Ready for release :)

Owner

pisi commented May 20, 2013

Ready for release :)

@pisi pisi closed this May 20, 2013

@gnatok

This comment has been minimized.

Show comment
Hide comment
@gnatok

gnatok May 21, 2013

@pisi thanks! I will give a try today. This functionality can improve my animation a LOT!!

gnatok commented May 21, 2013

@pisi thanks! I will give a try today. This functionality can improve my animation a LOT!!

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 5, 2013

Owner

Released today as part of v1.3.0

Owner

pisi commented Nov 5, 2013

Released today as part of v1.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment