This post is already quite old. As such its contents may be outdated, obsolete or outright wrong. Please handle its content with care and question any recommendations it might give you.

Also, if you find any dead links please let me know, I'll try to replace them with links to an archived version .

Getting started with Okapi – Part 1

Ever since I’ve heard Branden Hall talk about Okapi at this years Flash on the Beach Conference I’ve been eager to get my hands on it and start playing around. Here you can see what I have come up with by now.

So I thought a lot of other people might like to try that out as well, so why not write a simple Tutorial. So here we go.

At least for me it’s always way more fun to use your own unique assets than messing with the ones that come with the examples. So what you’ll learn in this tutorial is getting your artwork from Illustrator into a format that you can use with Okapi.

Preparation

First of course we need to setup everything we need.

Download Okapi from Okapi@GitHub.

Download Ai->Canvas for Adobe Illustrator from http://www.visitmix.com/labs/ai2canvas/

If you want you can also download this example and all assets used: example.zipSorry, this file somehow got lost over all the migrations of this site.

Exporting Artwork

After you have installed Ai->Canvas

  • open up Illustrator
  • create a new blank document and create some simple asset
  • Choose File/Export/<canvas>

You now have a html-file with your artwork as a canvas looking like this:

function init() {

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      draw(ctx);
    }

    function draw(ctx) {

      // ebene1/Pfad
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(22.8, 21.9);
      ctx.bezierCurveTo(22.8, 21.9, 3.0, 24.0, 0.9, 42.7);
      ctx.bezierCurveTo(-1.1, 61.5, 4.1, 71.9, 16.6, 74.0);
      ctx.bezierCurveTo(29.1, 76.1, 35.3, 66.7, 28.0, 54.2);
      ctx.bezierCurveTo(20.7, 41.7, 25.9, 27.1, 38.4, 34.4);
      ctx.bezierCurveTo(50.9, 41.7, 58.2, 65.2, 49.9, 74.3);
      ctx.bezierCurveTo(41.6, 83.4, 24.9, 80.2, 27.0, 96.9);
      ctx.bezierCurveTo(29.1, 113.6, 50.9, 130.2, 61.4, 108.4);
      ctx.bezierCurveTo(71.8, 86.5, 58.2, 67.7, 75.9, 52.1);
      ctx.bezierCurveTo(93.7, 36.5, 86.4, 27.1, 75.9, 10.5);
      ctx.bezierCurveTo(65.5, -6.2, 49.8, 1.1, 43.6, 10.5);
      ctx.bezierCurveTo(43.6, 10.5, 35.9, 16.6, 22.8, 21.9);
      ctx.closePath();
      ctx.fillStyle = "rgb(198, 211, 60)";
      ctx.fill();
      ctx.strokeStyle = "rgb(57, 51, 45)";
      ctx.lineJoin = "miter";
      ctx.miterLimit = 4.0;
      ctx.stroke();
      ctx.restore();
    }

If you’re familiar with the Flash drawing API this will look quite familiar. Even if you’re not, what it basically means is setup a Canvas, enter the 2D Context and then draw a couple of paths.

Just one quick note for Flash-Coders as this looks quite weird at the first glance – you first draw your paths and then assign parameters like line width afterwards.

Asset Library

Next step is to copy simple04.html and rename it to yourartwork.html as well as copy geo04.js and rename it to yourasset.js.

Then you open yourasset.js and change the following line:

library.geo04 = function() {

to

library.yourasset = function() {

Then you copy everything inside the draw function from your earlier exported asset and use it to replace everything between

var ctx = canvas.getContext("2d");

and

return canvas;

Next you need to adapt those two lines to represent the proper dimensions:

canvas.setAttribute("width", 52);
canvas.setAttribute("height", 52);

The easiest way is to just do this by trial and error.
In case you are using my example asset I can tell you that what you need is:

canvas.setAttribute("width", 88);
canvas.setAttribute("height", 120);

Last Step – Engine Setup

Finally open up your yourartwork.html and replace the following lines:

<script type="text/javascript" src="geo04.js"></script>

with

<script type="text/javascript" src="yourasset.js"></script>

and

var geoSymbol = library.geo04();

with

var geoSymbol = library.yourasset ();

Enjoy

Now open up yourartwork.html in the Browser of your choice and enjoy!

One last tip: Event though Firefox might not be the fastest browser to use Okapi with, it has one great advantage over all the other ones: You can easily save a snapshot by just right-clicking on the canvas and save just as if it was a normal graphic.

So far for now. The next tutorial will focus on how to change the behaviour of your asset using the various capabilities of Okapi.

Oh and please spread the word about Okapi and this tutorial as well as upload a lot of pictures to Flickr!