Tuesday, April 15, 2008 @ 12:27 PM
Animation on the iPhone, You know you missed me.
With the iPhone SDK out, and iPhone applications moving away from the web, I never thought I'd post here again. Lucky for you, we received an awesome question from Dan in the UK about Animation on the iPhone. Yay Dan!
Well Dan, That's an excellent question! Since we'll never truly know when Flash will become available on the iPhone, I'm very glad you asked. We've all seen ways to animate a web page through the use of AJAX [cough]dhtml[/cough], including my post on creating a Basic AJAX Scroll Animation w/ YUI that was featured on the YUI developers blog.
As of right now, AJAX is the way to go for animation on the web. Here's a few of my favorites...
What I suggest is that you sketch out your idea, step by step, then determine from the libraries listed above which would work best for you. JavaScript is relatively simple, and with your ActionScript experience it should be a quick run-through for you. Try to stick to one library to reduce load times. While the iPhone is an amazing device, the technology it runs on (EDGE) isn't completely up to speed for large applications.
I hope this helps you out Dan, I look forward to answering more questions like this. If you have a question about iPhone development, hit us up at ask [at] iphoneminds.com.
// Jay, aka W3prodigy
Hey iPhonemind.com guys,
I was wondering if you could help me with a quick question I have pondering about in my mind relating to the wonderful invention called iPhone. I'm a multimedia student at Stafford College in the UK and having learnt the "designer" side of computing fancied turning to the dark side and have a go at programming. I've done bits of programming here and there before and know Action-script pretty well etc, but since the iPhone currently doesn't support flash yet here is where my question lies.
I want to create an interactive application where the user taps the screen and random squiggles or images will pop up to create a sort of abstract image animation, I've been looking on Apple's Developer website and had a look through most content on their but to no avail I'm still not sure on what the right sort of API's or frameworks to use. The UIKit would be a major player in the making of it but I'm not sure what else to read up on, just hoping someone out there might be able to point out roughly what I should be looking for?
The application is going to include shapes, colours, images, video maybe, sound hopefully, vector graphics and maybe a bit of text, the whole thing is going to be totally random for a college project and have no real purpose other than being one of them cool things you show your mates.
Your website is great by the way, loads of useful tips and tricks that I will be having a tinker with after I've figured all this out.
Many Thanks,
Dan
Well Dan, That's an excellent question! Since we'll never truly know when Flash will become available on the iPhone, I'm very glad you asked. We've all seen ways to animate a web page through the use of AJAX [cough]dhtml[/cough], including my post on creating a Basic AJAX Scroll Animation w/ YUI that was featured on the YUI developers blog.
As of right now, AJAX is the way to go for animation on the web. Here's a few of my favorites...
- Yahoo! UI Library: Animation - A little more advanced, but one of my favorites.
- Script.Aculo.Us - Simple to implement, a little more restricted.
- jQuery - Takes time to learn, but definitely worth the effort.
- MooTools - This one seems to be a popular one, maybe not the best for the iPhone, but definitely fun to work with.
What I suggest is that you sketch out your idea, step by step, then determine from the libraries listed above which would work best for you. JavaScript is relatively simple, and with your ActionScript experience it should be a quick run-through for you. Try to stick to one library to reduce load times. While the iPhone is an amazing device, the technology it runs on (EDGE) isn't completely up to speed for large applications.
I hope this helps you out Dan, I look forward to answering more questions like this. If you have a question about iPhone development, hit us up at ask [at] iphoneminds.com.
// Jay, aka W3prodigy
Labels: actionscript, ajax, animation, flash, iphone development, uikit, yui
MindComet at 12:27 PM - View Post
|
1 comments
Monday, January 7, 2008 @ 11:28 PM
Draw vector art using the canvas
We all know that the iPhone is incapable of displaying Flash content. But there are still two Flash-like benefits that we can take advantage of on the iPhone: vector art and animation. When Mac OS X 10.4 was released, Safari supported a new feature called the canvas. Safari, Firefox, Dashboard, and any Web Kit-based application (including the iPhone) can do arbitrary drawing of content using the canvas tag. This extension lets you reserve an area of your web page or widget and use rendering calls like those found in Quartz to paint complex paths and shapes in that area. The canvas tag was heavily utilized by the initial offering of Dashboard widgets released by Apple. Now you can use it to draw shapes to your iPhone webpages.
Don't get me wrong, this technique is not for amateurs. But if you're already familiar with using the Flash MX Drawing API, drawing using the canvas should be pretty easy. Additionally you can then use Javascript to continually redraw the canvas and animate your art.
Following is a silly example of what the canvas can do. Not very practicle, but go ahead and give it a whirl to see what it produces.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<script type="application/x-javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i = 0; i < 6; i++) {
for (j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas"></canvas>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<script type="application/x-javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i = 0; i < 6; i++) {
for (j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas"></canvas>
</body>
</html>
For more information on how to use the canvas, check out Mozilla's canvas tutorial. It's filled with static and animated examples. Enjoy!
http://developer.mozilla.org/en/docs/Canvas_tutorial
// Ryan Jennings
Labels: animation, canvas, flash, iphone development, javascript
MindComet at 11:28 PM - View Post
|
0 comments