Skip to main content

The Rebirth of Authoring? Making iPad apps with LiveCode

I recently was asked if I'd heard of an authoring tool for creating iPad apps called LiveCode.

I don't know if you know, but LiveCode is like the only living grandchild of a tool called HyperCard. And you might not also know, that like the post punk band, Killing Joke, HyperCard is one of those subjects that makes me want to sit you down and tell you stories from days of yore. For EVER.

You see, HyperCard was the tool that I first did any programming with, back in 1991. The Apple Macintosh was billed as "The Computer For The Rest Of Us"... and HyperCard, bundled free with every Macintosh was "Programming For The Rest Of Us".

But before I can regale you with tales of HyperCard's features, you need to understand the context from which HyperCard sprang. You have to do some homework.

Your Homework

You have to go back to 1945,  a the time when Vannevar Bush outlined how a conceptual HyperText machine called Memex would work, and how trails would be created through linked documents. Fascinating!

You have to go to 1960 and learn about Ted Nelson and what the word "Intertwingularity" means.

Then it's back to 1968, and to Doug Engelbart's Mother Of All Demos, in which he shows off the inventions of a Graphical User Interface ( GUI ) and a mouse and networking and collaboration. Watch this video ( it's a bit slow but edifying ). It astonishes me how many ideas we still haven't grasped yet in what he was working on.

It's now the 1970's when Randy Smith demo'ed the Alternate Reality Kit, and you start to see the importance of the direct manipulation of objects on screen.

It was the work going on at Xerox Parc ( Doug and Randy's amongst others ) that Steve Jobs saw, got inspired and went off to make the Macintosh.

And then here in 1984, here is HyperCard's maker, Bill Atkinson, demoing HyperCard. What I find fascinating about this video is how awkward the terminology they use for what's on screen. It is so new, they don't really know how to even talk about it.

With HyperCard you created stacks of cards, and on those cards you put buttons and text fields and graphics... and in those objects you put simple code that did wonderful interactive things.

People used HyperCard to make all sorts of stacks. From tools, to stories, to adventure games to learning materials to anything.

The Demise of HyperCard

And then it was no more, for all sorts of reasons. Steve Jobs closed down HyperCard ( I imagine mainly because people made some really ugly stacks ) and the web has just happened. The whole concept of authoring seemed to fade away. The hypertext of the web was very different from HyperCards stacks. 

The notion of authoring limped on awhile. There was a commercial (and colour) version of HyperCard called SuperCard. Oracle created a tool called Oracle Media Objects. Macromind made Director and then Flash. But none of these grabbed the collective imagination like HyperCard did.

A few years ago I heard of a HyperCard-like tool called Revolution from a company called RunRev. I tried it, liked it, but couldn't quite see the relevance of writing stacks anymore. And I think Revolution evolved into LiveCode ( correct me if I'm wrong ).


But now, with LiveCode, everything has changed. There's a Community version ( free ) and your LiveCode stacks can be saved as iOS or Android apps with HTML5 under-development. Your stacks can talk to your servers. Your stacks can embed browsers. Authoring is relevant again.

I ran LiveCode up and within minutes, had created a simple interactive map of the Museum Gardens in York, that presumably I can compile and run on an iPad tablet. It felt like the "old days", creating cards, adding buttons and adding code like this...

on mouseup
      go to card "Prairie"
end mouseup easy is that? 

The Project

The project we are hoping to use LiveCode for, involves Archaeology students exploring Paris, and creating interpretations of what they find ( textual, audio and images ) and then designing an app to share that work. The department has a number of iPads which will enable them to use their stacks in the location. It's likely that the stacks will be authored on a variety of devices ( Mac, Windows, Android ).

Ideally, I would have liked a tool that saved an app as HTML5 ( this feature is in production at LiveCode ). That way, there would be no need to work with Apple's App Store ( and its Ad Hoc licensing ) and the students' work would also work on the web and on an Android tablet ( should they have one ). 

The Alternatives

Whilst looking for HTML5 tools, it's worth mentioning a few that may be of use later.

Maqetta is a browser-based open source project to create HTML5 content. It looked promising but the interface beat me. I was unable to use states to change the scene.

Animatron uses a timeline metaphor, an again, looked promising but probably is more aimed at animation than simple stack creation. A great tool but not quite the right tool in this case.

Silex has a beautifully simple approach to creating HTML5 content ( to which you can add HTML that does the bits that it maybe doesn't do, for example, play audio or video ). I actually wanted a little more control than this tool gave me, but I did manage to make an interactive HTML5 piece with it in a very short time.

Apple's iBooks Author is worth a mention, in that you can create rich media documents with images and videos that can then be viewed on an iPad ( via the iBooks store ). It doesn't really suit creating interactive media though, being more based on creating a page by page stream of information. I must say I was put off by the whole "you can't publish anywhere else" licensing issue Apple have decided to give to iBooks Author content. Especially when compared to LiveCode's obvious "community" goodwill feelgood factor. 

I also considered Hype, the excellent HTML5 animation creator, but again, this tool's metaphor ( creating animations on a timeline ) could be pressed into creating hypermedia, but would be a bit of a stretch.

Both of these would have required Macs to author, which wouldn't have been ideal.


It's great fun to be playing with a distant relative of HyperCard again, it is so easy to create things and I look forward to working out how to compile and run stacks on iOS ( which means we'll have to get an Apple Developer account at $99 ... sigh... still ).


Popular posts from this blog

Inserting A Google Doc link into a Google Spreadsheet

This article looks at using Apps Script to add new features to a Google Spreadsheet.

At the University of York, various people have been using Google spreadsheets to collect together various project related information. We've found that when collecting lots of different collaborative information from lots of different people that a spreadsheet can work much better than a regular Google Form.

Spreadsheets can be better than Forms for data collection because:

The spreadsheet data saves as you are editing.If you want to fill in half the data and come back later, your data will still be there.The data in a spreadsheet is versioned, so you can see who added what and when and undo it if necessaryThe commenting features are brilliant - especially the "Resolve" button in comments.
One feature we needed was to be able to "attach" Google Docs to certain cells in a spreadsheet. It's easy to just paste in a URL into a spreadsheet cell, but they can often all look too si…

Writing a Simple QR Code Stock Control Spreadsheet

At Theatre, Film & TV they have lots of equipment they loan to students, cameras, microphone, tripod etc. Keeping track of what goes out and what comes back is a difficult job. I have seen a few other departments struggling with the similar "equipment inventory" problems.

A solution I have prototyped uses QR codes, a Google Spreadsheet and a small web application written in Apps Script. The idea is, that each piece of equipment ( or maybe collection of items ) has a QR code on it. Using a standard and free smartphone application to read QR codes, the technician swipes the item and is shown a screen that lets them either check the item out or return it.

The QR app looks like this.

The spreadsheet contains a list of cameras. It has links to images and uses Google Visualisation tools to generate its QR codes. The spreadsheet looks like this.

The Web Application The web application, which only checks items in or out and should be used on a phone in conjunction with a QR cod…

One-To-Many Relationship in a Google Spreadsheet

It's often the case that you want and need to be creating a database to store your data, but Google Spreadsheets are just so handy aren't they? But Google Spreadsheets are very good at relational data.

Here's an example where, you want to have one column for the name of your recipe and another for the ingredients ( comma separated ).

How you use this script is you click on the cell you want to be relational and choose the Admin > Show Relationship Editor. This opens up a dialog window showing you all the options included so far. You then alter the ingredients and it saves a comma separated list into the spreadsheet.

Here's the spreadsheet. Use File > Make a copy to see it work and rummage around in the code.

If anyone can help make the UI prettier I'd be grateful, thanks.