Ok I'm putting it out there... There is no clear information on the internets about iBooks 1.5, ePUB3 and CSS3 animation being used to create interactive eBooks.
Apple recently featured "The Beatles - Yellow Submarine" ebook and this has some very basic animation, audio and video. I have some great ides for this space however I can't find anywhere how I can create this myself.
I can create a basic eBook with images and video and using tools like "calibre" or "pages" can get them into iBooks but I'm stumped on anything harder using javascript (can I use Jquery etc) and CSS3 animation...
Any ideas where I can find this information????
A lot of the information you are looking for is in the iBookstore Asset Guide, which is available from Apple once you have an iTunes Connect account. For example, Apple recommend using JavaScript to trigger interaction and CSS for the actual animations and transitions. I have heard about someone using jQuery but do not have an example I can point you too.
Liza Daly has a good example (http://blog.threepress.org/2010/06/24/javascript-and-interactivity-in-ibooks/) but be aware that her post is well over a year old and was written with a much earlier version of iBooks in mind.
Please let us know of any good resources you come across.
Some (basic) information about scripting can be found here, here and here. Hope it helps
Related
I was wondering if anyone could offer any advice. I'm an expert HTML / CSS coder...but I have little experience with HTML 5. I have read about the great things it can do and I want to learn it, but im not 100% sure of what I can do with it. I have read a lot of articles regarding HTML 5 but none of them go into enough detail about it to answer my questions.
Aside from making layout easier, can it do things like create a rotating banner? I need to take the banner on the main page of this site
www.newmarklearning.com
and make it ipad / iphone compatible. I know I could use Javascript and a host of other coding options, but i fugued this is a great place I could start messing with HTML 5.
Problem is in not really sure if thats the right technology to use. Can HTML 5 / CSS 3 handle such things or am i limited to Javascript / Ajax etc???
Any help pointing me in the right direction would be great.
Thanks
Craig
Regarding animations, CSS3 offers you a lot of options. See e.g. here for more information on 2D Transforms. There exist 3D Transformations, too. However, only Webkit-based browsers support it right now. This site also offers a list of CSS3's new features.
In your case, to have the banner animated, you would have to combine a transform with a transition property (the transition let's it animate, the transform only describes the targeted rotation/scale/skew). If you want a constant animation (not just once), there might be some Javascript necessary.
Well, apart from that, HTML5 offers you a lot more new features, like offline storage or other things. The only problem is that the user has to have a relatively new browser in order to support everything, which sadly isn't the case right now (I know several companies that still run Windows XP with some IE6 or 7 or something like that - any updates disabled :-/)
Edit: Oh, OK, I just took a look at your site. For such a "slideshow", at least a little bit of Javascript will be necessary, to store the current slide etc.. But every smartphone browser should support it without a problem
do you mean the banner on the right? That changes on a timer, or when a number or arrow is clicked?
It would be easiest to recreate that with JavaScript.
Check out:
http://www.dhteumeuleu.com/
If you want some cool ideas
With apple browsers not supporting flash or silverlight, there is a real incentive to avoid flash / silverlight to avoid losing that audience when building a web site. That being said there is certain functionality that it seems like you can only really do in flash / silverlight
for example alot of simple games where you can move things on the screen like this site all seem to be built in flash. also, a lot of drag and drop functionality where you can drag one object onto another like these game sites.
After lots of searching I can't find any that are not either flash or silverlight based.
In particular i am looking for drag and drop support of one element onto another
my question is if you need this type of functionality is javascript / html 5 able to do this type of stuff (so you can support iphone / ipad) or are you out of luck.
is there any resource that highlight examples or suggestions of trying to do this type of interactive functionality and how / if you can do this type of stuff without silverlight / flash. also, if anyone has any good examples of existing site who are doing that today that would be great as well.
This is going to be a long discussion about the ability of html5 to compete with flash.
In my opinion jquery is not any close to performance flash or silverlight animation give.
if the comparison is in terms of drag-and-drop, menu dropdowns, fadeIn.fadeOut - jQuery is competitive.
If i will see the jQuery cartoons with lot of layers and objects moving simultaneously - i will probably agree that jQuery has competitive performance.
the things are compare to see the difference:
magnifying glass over the raster picture
smoke/water/fire emulation
compound 3D objects like fractals with deep branches
when HTML5 will have it - then i will agree that it has competitive performance. All that i see today is picture slideshows and couple of games that work on html5.
You can check Easel.js by Grant Skinner, used in Pirates Love Daisies.
Also, other frameworks are:
enchant
limeJS
akihabara
JQuery UI has that for long time, works in all modern browsers, not just HTML5
JQuery UI Demos
You should checkout canvasdemos.com. It has a lot of good examples of what can be done. You can take a look at the source code behind these - some even help you in that regard. e.g. the pool game
Other good examples include the doom like "game" (you can walk around in 3D dungeons).
The Frog Log game was the winner in the 10KB coding challange
Also this was the first result for a search of html5 animation demo in google. It has links to 48 demos. Some of them are really cool. Unfortunately the code for a lot of these have been minified, but they still might give you a few ideas about what you can achieve.
So it's fine for making simple dressup type games. However, if you are looking to make anything that's CPU intensive, you should look into some performance benchmarks like this. HTML5/Canvas based animation is still quite far behind flash in terms of performance. Getting consistent behaviour across the various browsers will also be an issue.
HTML5 and related technologies (WebSockets, WebGL, web storage, File API, media capture, etc) are quickly moving towards parity with (and in some cases exceeding) what can be done in Flash/Silverlight.
The HTML5 Rocks slides are a reasonable starting point to see what is possible (you need an HTML5 capable browser). In particular, the Canvas example demonstrates image manipulation (drag, rotate, resize) which is the core functionality needed to implement dress-up games.
Flash was designed for animation. The tweens were meant to be used for animating drawings. Because it was marketed to every Tom, Dick and Harry, people started using it to animate hideous menus and flying content text. And Adobe complied to this new use, building an abode of total chaos.
Flash is still the best animation engine for the web, it should never have catered to full flash websites.
Many HTML5 fans out there, but it needs to be said: Canvas is a decade behind Flash. But for everything other than animation, Flash is an abomination.
In old browsers, you can emulate drag'n'drop of elemnts from the DOM but in new browsers, you can also drag'n'drop files (like images) and there are events for it: https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
For flash-like animations, it's been possible with JavaScript for a long time but doing some bug ones was really hard and often slowing down the page.
Now, there is canvas and WebGL that allow you to do it in a more convinient way (for the complex ones).
And with canvas, WebGL, CSS animations (if you use the tric to make the browser think it's 3D), you get CPU accelerated so it's way faster.
There is also requestAnimationFrame that allows to optimise the reflows and therefore the script.
The best example I know on what can be done is the Quake II port to the Web :
Video: http://www.youtube.com/watch?v=XhMN0wlITLk&feature=player_embedded
Project's site: http://code.google.com/p/quake2-gwt-port/
as said in soe of the answers above, I'm pretty sure jquery's draggable/droppable plugin will do the job for you if you just need a basic drag and drop dress me up type of game. Basic premise is this:
in the default example, your avatar to wear the clothes would be a div with a png/gif.jpg background image of a girl/boy whatever(instead of an orange drop here background)
the clothes will be the "drag me to my target" objects in the example. you can create them as divs or even image tags that have the draggable class in them so you can drag them around and drop them in the orange boxes/avatars.
you can save the data using ajax, which is also covered in the examples there(or other tutorials in the net, it's easy)
???
PROFIT
Just try it out and see for yourself. If you need any help you can just ask here again, but I do think that the jquery UI answers are valid answers to your problem.
I don't have an example site to show you, but I'm pretty sure given some images and stuff I can whip out something...if I had the time lol.
You can definitely do these "flash-like" things now in HTML5 web browsers. Check out the examples at http://www.chromeexperiments.com/
In fact HTML5/CSS3/JS can do anything flash can do. But there are some drawback :
It is not yet mature. Lot of bugs, lot of difference in implementation depending of browsers and many people simply don't have yet browsers that support it.
Adobe has a really nice set of tools that help making complex flash applications. This doesn't exist (yet ?) at the same level for HTML5.
On a side note, neither flash, neither HTML5 will really shine on mobiles phone. People prefer native applications anyway. You might need to provide a web version, but you'll need too a app version (one per big phone player).
We can speculate how HTML5 will rule the word in the next few years, but as of now, impact are limited outside of nice looking demo that consume 100% of CPU (really, really bad for mobile device).
For drag and drop support, anybody can do that - in HTML4 and in any browser with a few lines of javascript - inside one page, or can think to do it on between 2 browser windows of the same website. Doing drag & drop between browser and any native desktop application is another thing.
For a great example of what you can do with HTML5 in terms of drag and drop, I suggest you take a look at this article and in particular the short demo at the beginning. The article also highlights a few other goodies that come with HTML5, such as localStorage and the HTML5 Canvas.
For a more detailed tutorial on the HTML5 drag-n-drop API specifically (really it is a Javascript API), take a look at this other article. It is dated from December 2009 but still valid.
Lastly, this video gives you a good insight on some of the cool visual effects that you'll be able to do with HTML5 (SVG, Canvas, CSS3, WebGL, ...). More of a marketing video I'll admit but a good illustration of some of the more powerful HTML5 features (at least from a visual stand point) and of what we'll start seeing in our browsers in a not so distant future...
Disclaimer: I don't work for Mozilla. I just happen to have researched this topic in the past and found that the material produced by Mozilla, and in particular the demos from Paul Rouget, to be the most instructive.
jQuery UI is an amazing library...
Drag: http://jqueryui.com/demos/draggable/#default
Drop: http://jqueryui.com/demos/droppable/
I belive that the droppable examples will answer your question of "In particular i am looking for drag and drop support of one element onto another"
http://chrome.angrybirds.com/
The browser based app is said to be done using Canvas 2D or Web GL.
I tried to view source using chrome by using "Inspect Element" button, but my chrome crashes each time.
I am just trying to find out how one can begin to develop such awesome games. Looking for pointers to online resources,books, and specific tips for beginners.
If you want a book, Foundation HTML5 Canvas: For Games and Entertainment just came out. It is fairly basic but will be useful to you if you are completely new to JavaScript and Canvas.
A faster-paced introduction would be the Mozilla Canvas tutorial, which is very clear.
To get a grasp on going from drawing things to being able to interact with them, I'd suggest my own tutorials on the matter, here.
For a general book on Javascript (regardless of your prior experience), it is probably worth reading Javascript: The Good Parts
As for general advice, I give you the words of Ira Glass:
Nobody tells this to people who are
beginners, I wish someone told me. All
of us who do creative work, we get
into it because we have good taste.
But there is this gap. For the first
couple years you make stuff, it’s just
not that good. It’s trying to be good,
it has potential, but it’s not. But
your taste, the thing that got you
into the game, is still killer. And
your taste is why your work
disappoints you. A lot of people never
get past this phase, they quit. Most
people I know who do interesting,
creative work went through years of
this. We know our work doesn’t have
this special thing that we want it to
have. We all go through this. And if
you are just starting out or you are
still in this phase, you gotta know
its normal and the most important
thing you can do is do a lot of work.
Put yourself on a deadline so that
every week you will finish one story.
It is only by going through a volume
of work that you will close that gap,
and your work will be as good as your
ambitions. And I took longer to figure
out how to do this than anyone I’ve
ever met. It’s gonna take awhile. It’s
normal to take awhile. You’ve just
gotta fight your way through.
When you "view source" (as opposed to using "Inspect Element"), the first meta tag says
name="gwt:property" content="html.renderer=webgl"
So I would conclude that WebGL is indeed being used. (WebGL in fact uses the canvas element, so the answer is technically "Canvas and Web GL" rather than "Canvas or Web GL". But I'm guessing it doesn't use the javascript canvas 2D API.)
When I use Ctrl+Shift+I and click 'Elements', the DOM tree shows that the <div> whose id is "forplay-root" has a child <canvas> element. But I don't know how to verify if it is being used for WebGL or more conventional canvas 2D calls.
A very nice site for learning WebGL is Learning WebGL. In particular, take a look at The Lessons.
I don't know why the page crashes your Chrome page. Are you using a brand-new version of Chrome? The release version didn't support WebGL till fairly recently. (But that wouldn't explain the crash... you just wouldn't see the action.) You may need to submit a bug report for Chrome.
The Angry Birds port was done using the GWT ForPlay library http://code.google.com/p/forplay/
The fancy thing about it is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. Which is pretty awesome. Check out the Google I/O 2011 presentation on ForPlay for more details http://www.youtube.com/watch?v=F_sbusEUz5w
For a game like that, I would start looking at how to have the same physics, so Box2D is the best starting point.
http://box2d.org/
There are various javascript ports to look at.
The port might be done using the popular libgdx cross-platform library. Its coded in java, but allows you to debug and play the game in your desktop. You basically write the code once in a core-project and it gets linked to four other projects-dektop, Html5, android and iOS. The Html5 version is done with the help of gwt, while the iOS one is done with robovm. You can have a look at it here: libgdx.badlogicgames.com.
Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5's canvas tag?
Are there any frameworks or JQuery plug-ins that do this type of effect?
The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.
I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.
Example page flip in flash
You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/
It's really nice and it's implemented as a jQuery plugin.
You can try jFlip, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.
This one is a jquery plugin and pretty nifty
http://www.turnjs.com/#home
see this http://www.20thingsilearned.com/home
Here is an HTML5 Page flip App that I built using HTML5's Canvas Element & jQuery. It's called RectoVerso.
I also ran across this one: http://romancortes.com/ficheros/page-flip.html
Which is done with only CSS3.
There is a clear and informative case study about creating your own page flip effect based on the one in the 20 Things I Learned About Browsers and the Web book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.
http://js1k.com/2010-first/demo/441
As compact as possible :D
http://www.romancortes.com/blog/pure-css3-page-flip-effect/
This is better done with SVG's <foreignObject> element and SVG transforms. This blog post by Mark Finkle has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.
I keep reading about how great this new Canvas element for HTML5 is and I see amazing demos done with just javascript and no flash. Where can I find some good information on how to some of these things myself?
The specification defines the API and behaviour.
This tutorial should help you get started.
There's the original Apple tutorial
Also the draft html5 spec
And of course you can (as people have) ask questions about specific features, etc on SO :D
I've been using this HTML5 Canvas Cheat Sheet, it is thorough and easy to read.
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
This page is a 14 part series that shows you how to create a simple platform game using the canvas element.
Ajaxian has a great collection of articles / posts regarding new Canvas innovations and developments. This can show you what others are already doing.
This isn't super deep, but it is easy to read and gives great examples:
https://developer.mozilla.org/en/canvas_tutorial
It is where I got my start (I now have a couple iOS apps out there using js + canvas)