Results 1 to 2 of 2

Thread: Sencha Animator and iBooks Author (there MUST be an easier answer)

  1. #1
    Sencha User
    Join Date
    Mar 2012

    Default Sencha Animator and iBooks Author (there MUST be an easier answer)

    I've looked into Sencha Animator for some time now. I really just want a quick way to add interactive illustrations to my iBooks.

    Literally...all I want to do is make a circle that you can drag.

    Why is there no way listed to do this?

    I went through the Rocking The Boat example posted. I read and completed the How to Embed Interactive CSS3 Animations in an iBook. In the video posted there, the user taps on the sky and it changes color. Nowhere in either tutorial does it mention how this is done. What settings do you change to the sky so that when you touch it, it changes color? I'm looking for ANY information on touch-enacted animations.

    I want to create very simple, drag and drop illustrations in an iBook. That's the goal. I mean, it seems it should be a very easy task. At first, I felt as if Sencha Animator was the perfect solution. But I have researched everywhere today, on almost every blog and forum post available having to to with Sencha and touchmove functions, and there is literally nothing on the topic. I've looked for 6 hours.

    I thought maybe Sencha Touch was the answer, but here I am installing some web application on my server??? It's taking over an hour and I don't understand how a web app could help me create an ibook illustration.

    So, there is literally nothing posted on this. I've searched all afternoon and I still don't even know if it's possible to drag a circle with HTML5 using Sencha Animator.

    Am I barking up the wrong tree with Sencha? Should I try out Adobe Edge?

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010


    Good question. So Sencha Animator currently exports CSS3 Animations, which are by definition static. If you want interactive features, you will have to use the action handlers and attach JavaScript actions. We are planning to expose more action handlers in the upcoming releases, but since since Animator exports HTML/CSS/JS you can also add your own JS script to the exported page to add interactive features.

    For the Boat animation, I have added a click handler that changes the background color of an element that is over the normal background with the CSS ID of "back". There are some more code examples of similar things spread around on this forum.

    var r = Math.round(Math.random() * 255);
    var g = Math.round(Math.random() * 255);
    var b = Math.round(Math.random() * 255);
    document.querySelector('#back').style.backgroundColor = 'rgba('+r+','+g+','+b+',0.3)'
    Sencha touch is a mobile framework that in particular is targeted towards developing apps on mobile devices. If you have Touch questions, I suggest you take a look in the Sencha Touch forums.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts