« MSN Messenger engages… | Home | Where one library fai… »

How to go from Quartz Composer to a standalone app.

05 06 07 - 12:08 Suppose you had a brilliant quartz composition that you wanted to make into a standalone player app. Give someone the .qtz file... but they don't have quartz composer. They can play it in Quicktime Player with some limitations... but that has it's own set of issues (30 seconds playback etc). Anyway... here's how to make it into a standalone app.

Install the Xcode tools from http://developer.apple.com/tools/download/. (You do have to sign up for an account, but it's free, unlike Microsoft who don't have anything this cool, and want you to pay for their tools :) )

Anyway, take a look at the /Developer folder in the root of your hard disk. Open up Extras, and look in Palettes.



Double click the QuartzComposer.palette file. A program called "Interface Builder" should open, and you should see it start up with one window that looks like this:



You just installed the Quartz Composer palette into Interface Builder, so it can now be used in your apps.

Now look in /Developer/Applications/Graphics Tools. Open up Quartz Composer itself.



I'm not going to go over how to actually use Quartz Composer here (that will be a future article). If you don't know how to use it, you can wait, or go elsewhere to find out.

Anyway, make your composition. Here's one I prepared earlier.



Save it to your Desktop (or anywhere else).



You can now quit Quartz Composer. That step is done.

Open up /Developer/Applications, and fire up the app named Xcode in that folder. If it is the first time you have launched Xcode, you will have it ask you about preferences. You can normally just click next all the way through that.

Go to File -> New Project.

Choose Cocoa Application under Application for the project type.



Don't be alarmed at reading the description if you don't know what Objective-C is. You won't actually be writing any code here, thanks to the magic of Cocoa.

Give your project a name, and save it somewhere.

You should then see a window like this:



There are some things you see in the right hand column.

The Framework files are libraries that the app is linked to. A framework is basically a set of functions that allow an app to do something. These four frameworks provide essential things to the app.

Info.plist and Info.plist.strings provide info about the app. We won't bother editing them, but if we were making a "real" app, we probably would.

Note how Info.plist.strings has "(english)" after it? Info.plist.strings stores information about the app, but can have multiple copies of it for different languages. This is called localization.

main.m contains the main code for the app. It very rarely needs to be touched, even in large Cocoa apps. You'll see it contains a few lines of code. This is what the program does when it very first starts up. The function named main() is called, and this piece of code then executes NSApplicationMain, which drops the app into it's Cocoa stuff. You don't need to know this, and if you don't understand this, just continue. It's not important at all.

MainMenu.nib is the nib file for the app. Essentially it contains the user interface of the app, and it is the one file we will edit. It too has an "(english)" after it, meaning that it can have multiple copies of itself for different languages.

The next file down on the list, test composition.app is highlighted in red. This means that the file is missing. Don't panic - this is meant to be missing. It is the end result of our process and has not been created yet.

Below this is test composition prefix.pch. Don't worry about this one, it's not important at all.

Double-click on MainMenu.nib and it comes up in Interface Builder.



If the top right palette isn't showing the Quartz Composer set, select it with the buttons in it's toolbar.

Hit command-shift-I and you should see a new window pop up. This window is the inspector, and allows you to set the parameters of the currently selected object.. It should come up for the window here.



What you have to do here is very simple. See the big blue "Quartz Composer" view in the pallete? Drag one into the window, and it puts a black square in the window. Drag it to the top left, and it should snap into place. Then use the resize handles to resize it to fill the window. When you're done, it should look like this.



Ok, so the sizing is good. But what happens when someone resizes the window? We need to tell Interface Builder that we want this to stay the exact size of the window.

This is simple - choose "Sizing" in the pop-up menu of the inspector. In the "autosizing" part, click the horizontal and vertical lines inside the centre box. Note how they turn to springs? It should look exactly like this.



Now choose the "Attributes" view in the inspector. You should see something like this.



Click "Load..." and find the .qtz file you created earlier. Load it in. The view will stay black, but it's loaded.

Hit command-R to test the interface. All the Interface Builder windows should hide bar the one are working on. Your Quartz composition should now start playing. This is what your app will look like when you are done.



To get out of this, hit Command-Q. Don't worry, this won't quit Interface Builder (unless you hit it a second time).

Save, and quit Interface Builder.

Now, for the final step in Xcode. Remember before when I mentioned about what frameworks do? We need to add the Quartz framework so that our app has access to all the Quartz functions.

Control-click on one of the items in the list. Choose Add -> Existing Frameworks...



Now navigate to /System/Library/Frameworks/ and select Quartz.framework from the list. Hit "Add".



In the dialog box that comes up after that, just click add again.

In the Xcode toolbar, hit "Build and Go". Your app should fire up, and it should do the same thing it did in Interface Builder's test mode.



And now for the grand finish. Quit your app, and go back to Xcode. In the "Run Log" window, change Build Configuration from Debug to Release.



Easy. Now hit the "Build" button in the Xcode main window.

Now look in the build/Release subdirectory of the folder you created the Xcode project in. In this is the end result.



Coming next time: How to add interactivity to your Quartz Composer application including text fields, sliders and other fun.