6 Mar 2012 3:47 PM #1
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?
7 Mar 2012 6:55 AM #2
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)'