View Full Version : Animated object drag

5 Sep 2012, 8:15 PM

Is it possible somehow to drag the object (forward and backward) along the animation in Sencha Animator?


6 Sep 2012, 2:22 AM
Hi Ken, and welcome to the forums.

Could you give us a little more information of what are you trying to make? The way I understand it, you want to have an object that you can drag, that would move the animation backward and forward in timeline...is this correct?

6 Sep 2012, 3:11 AM
I did an animation and wondering is it possible to drag the animated object so its basically goes upstairs or downstairs. So the person can control the movement.

http://www.mullmull.com/Lotte-test/ (http://www.mullmull.com/Lotte-test/)

Thanks, ken

6 Sep 2012, 7:50 AM
Hi Ken,

It would be possible to implement such behavior, but it would require some custom JS coding. You would need to record that you started dragging on mousedown (or touchstart), then update the position of the object on mousemove (or touchmove) and record end of dragging on mouseup (or touchend). The exact character position while dragging (I suppose you would want the character to slide only up and down the handrail), would have to be calculated from the position of the cursor to match the path that you want it to follow.

It's a challenging task :)

Good luck with your project - the graphics look really impressive! Great work!

7 Sep 2012, 5:13 AM
Thank you for a quick response again! I appreciate that.

I understand the logic behind it but wow, this is overkill concerning to my JS skill.
For a conclusion I'm really satisfied with the current result :)

The other question is about image load at scene change. The animation works on tablets but the movement between scenes makes white blocks to appear. I suspect it to be an previous image release and a new image load issue or smth like that. I tested with iPad2.

hint: click to the house on shore (touch start action)

(http://www.mullmull.com/Lotte-touch/)Regards, ken

7 Sep 2012, 5:26 AM
Hi Ken,

I will see to test the link a little later today on an iPad and then I will get back to you on this.

I'm really curious to see your project finished! Looks great!

10 Sep 2012, 4:17 AM
Hi Ken,

I tested your demo on an iPad2 and a retina iPad, and indeed, the white squares when loading background image are visible for 1-2 seconds, especially on the retina iPad. Unfortunately, this has to do with the size of the image being loaded and limitations of iPad's memory/GPU.

There is a workaround that might help you (and this time it doesn't require a lot of custom JS). The idea is to keep the background image the same across the scenes, so that iPad does not need to reload it. To do this, set the background of the body to the image as follows:

In properties -> project -> head HTML, enter following code:

<style type='text/css'>
body {
background-image: url('assets/Lotte_kaart_retina.jpg');
background-position: left-top;

Next, in all scenes that have this background, you need to set the background of the stage to be transparent:

Under properties->scene->background, select any color, but set alpha value to 0

This way, if you are using one large image as background in many scenes in your project, you will prevent iPad having to reload it all the time, so the white squares shouldn't be visible on scene switch.

A note: you will not be able to see the background when it is set this way inside Animator, but only after you export the project. Animator does not execute custom head code when project is loaded.

15 Sep 2012, 10:29 PM
Hi Miro,

Thank you for the suggestion!
It didn't really work on that particular case as I also wanted the background picture to be zoomable but I used that hint on other animations. And it works well.

We are about making an cartoon based e-book for kids and this format is screaming for interactivity. Sencha's Animator is a superb cross platform tool for making that happen. I like it!

I'm also really satisfied with Sencha's customer service. =D>

Regards, Ken

16 Sep 2012, 3:54 AM
Hi Ken,

Thank you, I'm glad to hear that you like the tool and our customer service :)

Good luck with the project!