That's my cue. Welcome, everybody. Thanks for coming. It must have been the LLVM session before us that really brought you into the room, and you're just hanging out for this. Hopefully, you're here for building iAds with iAd Producer. My name is Mark Malone, and I'm part of the iAd team.

And I've got some pretty exciting stuff to show you today. I'm really proud to be the one up here on stage to be showing you this tool. There's a lot of power within iAd Producer, and it does a lot of things for you. And it was released in December of last year, and this is the first opportunity that we've been able to be on stage at WWDC to actually show off the product. And so, brief agenda of what I'm going to go through. First, I've got a couple different videos that I took of a couple ads that are out there just to give you a feel for the iAd experience.

And then we're going to dive into the tool and talk about sort of the code-free design techniques that the tool really affords you. The ability to get in and use high-level objects to build a lot of functionality, a lot of creativity without a lot of work. And then, of course, there's programmers in the room, hopefully, going beyond that, going beyond sort of the drag and drop and instantiation of objects that are created for you.

How to take it the next step is something that's a big part of iAd Producer as well. It's not just templates. It's also going beyond that. And then finally, how to share your ad with other folks. Once you create an ad, you want to stick it on a device or send it to your customers. There's ways that you can share them using the tool and outside of the tool that I'm going to walk you through as well. So let's get going with just a quick overview of the iAd experience.

This one's pretty clever. It's one of the earlier ones that was created with iAd Producer, and it's for Guinness. And it uses a nice chalkboard background like you'd find in a pub. And it's got four different options that you can go in and navigate. And the first one is the ability to go and download the Pub Finder app from Guinness right within the ad. And so that's pretty sweet, not having to exit out of the ad in order to download this particular application on your devices. Like one of those great features.

It also has this challenge game in that you can question and answer sort of if you do the questions right, then you get a surprise at the end. And it's got this pour capability within it as well, which is sort of you swipe through the various steps of pouring your Guinness beer, which is extremely important.

To get it right, you've got to have the right glass. You have to have the glass at the right tilt. And you need to pull the tap with just the right velocity so that you can get that beer with the foamy head that you love at the end. And that's what this ad is here.

And the way that you go between these steps is by swiping your fingers across. And there's also some arrows that they put up there to give you a visual way to say, "Ah, okay, if I go and tap on these arrows, that's another way that I can go and navigate it." It's got another cool feature that you'll see in a lot of iAds, especially ones with rich content above and beyond just sort of the brand itself. A lot of folks have imagery that they want to offer up to the customers, people that are viewing these ads and have them set their home screen and those types of things.

And so, this is a great way to go and get the brand front and center on the device for the home screen and the lock screen. And again, setting that as staying within the ad, staying within the developer application as well. And so, that's an example of an iPhone ad.

And here's one that just released this week. This is for Falling Skies. And it's a series that's going to start up in June. And this is an iPad ad. And the nice thing about it is it's really taking advantage of the large landscape afforded on an iPad. And so, they've got these data or image wells lined up there.

And you can tap on each one of the wells and watch a preview of the upcoming season. And so, they've really put in a lot of exciting content. And this is showing video in line, which is sweet. It's not going full screen and taking over the entire page. And so, that's sort of making use of some really nice HTML5 whizziness to create a really great experience.

And they also have some stills in here as well. So, some stills from some of the scenes. When they were shooting, they've captured those through them in here. And so, you can resize them in the same sort of thing. Save them as backdrops or lock screens, those types of things. So, those are a couple examples.

I'll talk through sort of the features and how you can go and add that within an iAd for sort of the rest of the progression. Sort of the killer feature that's remaining in this particular ad is the fact that this particular movie series has a release date associated with it. And we've exposed the calendar APIs to folks who have gone and built iAds so that they can go and add an event directly to the user's calendar from within the ad.

So, that's particularly sweet in this particular circumstance because this season has a start date. And if the user wants to add it to their calendar, they can do it right from within the ad. And boom, it's on their calendar. It's going to get synced wherever their calendar events go. So, that's pretty nice as well.

So this is an iAd Producer project and the typical way that you'll go through and create one of these projects, create your iAd, is basically beginning from some sort of design effort where you're comping up what you think should be the creative vision for your particular customer. And then there's typically a development stage where you hand it off to somebody to add some nuance perhaps to go sort of beyond sort of what's built in.

And then there's this deploy capability where, okay, now let's go put it on a device, put it out there where other people can find it, put it where our customers can review it, and that sort of stuff. And so that's the way I'm going to divide the rest of this presentation up into these three buckets.

And I'll start with design. So at the get-go, if you haven't seen iAd Producer, this is what it looks like, especially when you first launch it. It provides a widescreen bird's-eye view of the overall ad. And it shows proxies for all of the pages from the band. It shows the banner all the way to the leaf pages that you've created for your ad. And it does it for iPad as well as iPhone, any iOS device you could create in iAd with this tool within it.

And don't let sort of the orientation of the objects on the screen fool you. I mean, you're always going to have a banner and some sort of splash while your ad loads. But how you arrange the leaf pages over on the right-hand side, whether you have a menu with a bunch of leafs, sort of the hub-and-spoke model, or you decide to go right to one page, and then sort of sequentially go through those pages, you can really design your ad any way you want.

This is sort of the template that we use for most ads that you'll see out there on the wall. But the reality is you can arrange the pages in any sort of fashion and navigate them the way you wish. So let's go ahead and start with the ad.

As a designer, when you're in design mode, you're choosing objects from a palette of built-in objects. The fact that I'm in the context of a particular page here will drive the objects that are there for me. And there's things like text fields and labels, as you would expect, but there's really a lot of high-level functionality that's in this object palette as well.

So you can throw a scroll view on there, sure, that's pretty straightforward, but you can also put a carousel on your page. And dropping the carousel on there instantiates one, and it also adds all the functionality to it as well. So you get the visual capability of a carousel as well as all that interactivity. And that's all hooked up just by using these various objects, and I'll demo that in just a second. And when you're in design mode, it's all about not writing code.

So you go and you grab from your object's palettes, you lay these items out on a screen, and then the way that you go and you style them is through a property inspector. For a selected item, you can go and twiddle some items. Over on the right-hand side, use rotators or a slider, maybe type a little text into a particular field. But it's all about at this stage when you're in design mode, not writing any code.

Just selecting objects, setting various properties, and then moving on to the next step. And the same thing is true for animation as well. We've got built-in animation, so you can select an item and say, "Okay, for this particular item, I want it to move on the screen in this sort of way." And we'll take care of generating all the required actions in order to make that animation happen when the ad is done. So again, the goal is to make it code-free at this step.

You're in design mode, and it's pretty straightforward to go and add a lot of functionality just by setting bits and not writing any code. We also keep all of the assets associated with an ad there within the project over on the right-hand side. So if you've got images that you've brought in, you just drag, drop them onto the canvas, light them up however you want, style them. All of the assets are kept over on the right-hand side. They're delivered with the project.

But they're also small. And they're smart enough to know that they might have come from a folder on a server, for example. And so when they change, perhaps, out on the server from FPOR to the real deal, there'll be an indication over on the right-hand side that, "Oh, there's a new version of that image available." And then you can re-import it. So it's really nice. It creates a self-contained unit that contains all of the assets associated with it.

And then finally, the way to go and experience on the device is there's the ability to share. And so as long as I have an iPhone that's on the same Wi-Fi network with the laptop, or the workstation that I'm building this ad, I can launch the iAdTester on my iPhone and experience the ad as it is built and running within the iAdProducer application. And so I'll show that in a second as well. You launch iAdTester, you'll see the machine that's got it, and you can choose from the various banners. You launch it, and you can really experience it on the device.

This is great because it means you can go back and do some subtle tweaks over in the interface, go back to iAdTester, pull it up, look at it, it's like, "Ah, yeah, that's the way I wanted it to look." So that's sort of a killer feature from an experience and refinement perspective.

So with that, what I figured I'd do is get out of slides and have some fun with a demo. So right now I'm in the iOS simulator, and I've got iAdTester launched. iAdTester is installed automatically by iAdProducer when you first launch one of the ads that you're building within iAdProducer.

And you can see that I've got this one particular ad that I've embedded within the tester so that I can show you what we're going to go and create. And so this is the Hudson Telegraph demo. You'll see this in the next rev of the tool that'll be included in the extras directory when you download the image.

And it's sort of this steampunk sort of ad that tells you that, you know, sending a telegraph is really the most modern way to go and send a message across the USA. So it's clearly got some convincing to do. But you saw that when it loaded, it had this nice little animation in of the text at the bottom.

That letter flew in. And if I go into it, you'll see this drop-down animation that's provided there and then three buttons. There's this image here. If I hit history and rotate the device, then here's an ad that's got a bunch of different little sort of pieces of content in there. Sort of tells the story of the Hudson Telegraph over time. And I can interact with this just by moving across the screen. And then it has a locations and a try it capability.

The locations allows you to basically find where the local telegraphs are in your area. So you can go and send out that great telegraph that you want to send to get your message across the USA. And there's this little try it bucket here where I can go and type some text and have it converted to Morse code, which is incredibly useful as well.

So at the get-go, the first thing it asks you is what kind of ad you want to create. Do you want to create one for iPod Touch or iPhone, or do you want to create one for an iPad? And we're going to recreate that Hudson one, so we're going with the iPhone.

And right away, you get that bird's-eye view. And we haven't done anything here yet. We haven't laid out any content or anything. And so it's got basically the standard hub-and-spoke template, as I said. But, of course, you can go and change it. But it's sort of laid out with these placeholders. It says, "Hey, let's go build an ad.

Here's some places where you can drop some things." If I double-tap into one of these pages or double-click to go into them, you'll see that the first thing you see is a series of templates that can be the starting points for the banner. I double-clicked on a banner, so it's bringing up banner templates. If I double-click within one of the other leaf pages, then it'll provide templates for that as well. And so there's things like image text or dynamic text. It's got a text widget that does some cool animation automatically.

There's one that's just a pure image. And of course, you can create one that's blank as well, and that's the one that I'm going to choose. You don't have to pick a template. It's just blank. And once you choose a template or a placeholder for this particular page that I'm on, here's the banner, it'll create this little proxy of what it looks like.

And it's a blank banner. It doesn't have any content on it, so naturally, it's going to look fairly uninteresting and blank. But now, the next time I double-pump to go in and take a look at this banner, it pulls me into sort of the drill-down view. Once I'm in this view, I can start dragging elements on. And I can start building my banner.

You'll notice over here on the left-hand side, there's this gutter. The gutter allows me to go and create multiple banners. You're going to have multiple banners any time that you create an ad. And typically have a banner that's specific to sort of the targeting model that you might be using.

You might have one banner that targets one kind of individual that draws them into the ad. Well, you're going to go and create a banner for each one of those. And they'll show up along the left-hand side, but the sample, I'm just going to run through and create one quickly. And so you can hide this, get a little more real estate.

There's this view option up here where I can go to 100% and see 100% of the pixels. Really give me a lot more real estate to play around with. And there's some buttons along the right-hand bottom side that I can go and take a look at. And one of the things, since I've got the banner selected here, is it tells me that, you know, I'm on this particular banner. It's got a name of blank, and I can change it, give it some name that will show up in the rest of the UI. Maybe I'll call it the right thing. banner.

And I can do something to the banner right here without dragging any assets and mainly it's going and setting the background properties of this particular banner. And so we've built in the ability to go and set gradients as a background so you can go and choose a color, drop it in, and drag the sliders around, right? Get simple gradients going in there.

I can create one that's linear just by swapping it, change where the light source is or where the gradient comes from. I can actually go and add multiple points as well and create something that's relatively hideous or attractive. But, you know, this is how easy it is to go and set a gradient as a background.

Gradients are key backgrounds especially because they're very lightweight. It's not using images and we do all the work of actually applying the gradient at runtime. There are other options in here. I can go and have an image as a background. I can choose a standard color from a color picker as the background. You get what I'm talking about. Pretty straightforward. I can even have something with none.

Now I'm going to go and pull some assets in to go and build this ad. And so what I'll do is I'll click on the assets button over on the lower right hand side. And as you can see I don't have any assets associated with this ad, but we're assuming that you've got some production capability within your organization that has either already created some web assets or somebody's cutting things out of Photoshop files. Once you get those, they're ready to go and drop into iAd Producer and use them to go and build out the ad experience. So I just went and dragged that folder there.

Again, if I had a server volume mounted, I could point to it and just import through the import assets menu as well and point to it. And you'll see that we pull in all of the assets that are sitting within this directory and organize them alphabetically. You can go in and type things like, let me pull back all the files that start with J. Or I can actually do it by type as well by using the little gear here. Just show me those images that are in here.

Very selectors here in order to go and pull back things that I've already created. Very selectors here in order to go and pull back things that I've already created. Once you get those, you can go and drag them into your iAd Producer. And you can go and drag them into your iAd Producer. in order to go in and pull back things that I want.

and filter it however I want. Make it go show all. And you'll also notice that up here at the top it's got the name of the image that I've selected as I scroll around here. But it also has these two size indicators. What we expect when you drag assets into iEdProducer is that you're giving us the retina display artwork. So we're expecting the full size display. And then what we'll do if you haven't provided the half resolution or the standard display is actually take your high res art and convert it to the standard display. And so with one image we'll automatically generate that lower resolution display.

Now that doesn't mean that you're stuck with the one that we created. Maybe it's a fine line that when we go and compress it in order to get the other resolution it sort of loses its fidelity. You can always right mouse click on the file and be able to go and swap out that one X rendition that we created and pull in your own one. And this is how you would go and swap out different files as well.

And then I'm going to go and drop a couple more objects. And I showed you in the slides the objects menu has a series of things that are just grabbable right out of the palette and droppable right onto the page. Depending on the context that you're in, I'm in a banner context, then this list is going to be filtered down to things that are appropriate for a banner. And so one of them is a label. And so I'm going to recreate that Hudson Telegraph fly-in text using a couple labels here.

I've got a label selected. If I go back to the inspector, you'll see that it's changed based on the fact that I've got a label selected, and I can go and change the name of that label. I can play around with its sizing using the metrics inspector. I also have style capability.

I can play around with the text as well. And so that's pretty hard to see there, so I'm going to select it and actually choose some white text so that it's the color that shows up best here. Great, that's my label. I can also change the font here. I've got a font picker.

The fonts that are here in the dropdown are the ones that are guaranteed to be on the device. You might have a slew of fonts on your workstation, but these will only show up the ones that you either imported into the project as SVG fonts for custom fonts or that are guaranteed to be on the device. So it's filtered down for you.

And the Cochin font is the one that the sample uses, so I'll go and use that font. I'm going to want to add a little bit of shadow so that that text sticks out a little bit. And it said the Hudson. And to the graph. Go ahead and give it a little style there.

"Judge it out so I can see the thing, maybe do a little left alignment, shrinky dink down a little bit." Pretty straightforward. It had another piece that flew in from the right-hand side, so I'm just going to go and copy and paste. Another because I want to preserve that same style for this one and that was the fastest way to Send... Send a message across the USA. Fonts preserved. Let's go and shrink that down a little bit.

Field down so I don't have to select it. Sort of line it up. You'll see that we've got the alignment line showing up so I can get everything perfectly aligned. But I can also go into the metrics and do accurate pixel alignment as well. So those are my two little pieces of text that I want to have in this banner.

I also had this letter that flew in as part of the animation when the banner showed up on the device and so I've got this little letter PNG here. I'm just gonna go and drop it right on there. So that's great. I've went and I've built up this banner. I can say whatever I want.

I can pull in whatever images I want. I can set the background. You get the story. It's pretty straightforward and easy to go. Now these items were animated in when the banner was first shown within the tester. And so next we want to go and add the animation and we do that within the animation properties panel.

And you just basically go and choose the various, choose from the palette of various built-in animations that we've got. There's an ability to set timing functions for them as well as duration, how long a particular animation should last and when another one should begin. This little flag or the little letter flew in and rotated.

I think I'm gonna want it to come in last so I'm gonna bump it up to be a second from a time perspective. And then these two guys I want to have fly in from the left hand side, that one, and have it fly in right away. And then maybe have this one come in from the right hand side and have it come in just a wee bit later. And you can see there's different timing functions that are built in that you're probably used to if you're using animation in any sort of web technology field.

So that's it, simple banner, straightforward to go and create. I can hit the simulator here, bring it up. It'll go and export the ad as a file, hand it off to iAd tester, and it should show up, unless the demo gods are not with me. Create ad. Make sure you're using the right version. Hit simulate.

Great. So there's our little animation and the little fly-in. Awesome. So piece of cake. Easy to create banner. But you'll notice when I go and I rotate the device, It needs to support the rotated model as well. When you build in a banner for iAd, it's really just one banner. It needs to support both orientations and of course the tool supports that as well. So let me put this back where I found it.

go back into the tool and this little arrow that you see up at the top right hand side shows you what that rotated orientation would look like, so stretch things out a little bit, now I can go and look at it in landscape mode, go and resize things, move them around a little bit so they look right for this particular screen, maybe I'll put this here and center that there, and this is a little bit too big so I'm going to go and change the size so it can fit right there where I want it, and you'll see that it preserves the changes between the two different banner orientations, and now when I go and simulate it, "It brings it in, go and rotate the device, it does the right thing for the banner as well.

So that's great. So it's code-free creation of banners." Great, that's the banner. Let me go ahead and create a couple more pages real quick just to lay out a little bit more of the ad. We're not going to have a splash page in this, but we are going to have a menu and a couple children pages. So when I double-click on the menu page, it again brings me down the template choice.

I've got a series of templates that I can go and pick from, one that's blank, of course. You can always start from scratch and just drag objects on. There's this wipe clear one from the Klondike and the Campbell Soup ad. If you've seen those, then we've built that into a template that you can use.

A couple button ones, and I'm going to use this little button ones here to go and add the rest of the functionality. It goes, creates a proxy for that menu page. When I double-click, it brings it up, and you'll see it's got all these placeholders basically ready for me to go and do something interesting with.

Now, anytime you see this little mountain with sun there, that's an image well. It means you can drag and drop an image there. As you saw within the banner, I was able to just grab an image and drop it anywhere on a page. You can still always do that, but this is just a nicety to indicate that, hey, this is a place that you can go and drop images. So I'm going to go and grab my teletype and throw it there in my telegraph. I can do a line. You see the little alignments.

And I've got this little grouping of buttons that you'll see here. This is the grouping that's sort of attached. They move together. It's because this grouping has some smarts associated with it. This button collection is actually connected programmatically to those other child buttons. And it's connected to those other child pages that I have over on the right-hand side. And so as I go and add more child pages, this particular grouping will automatically update to have a button for each subsequent page that I add.

So it's just a real nicety for making things easy to go and go the next step with. And so if I double-click to go into this particular container, that's when I can select a button. And if I go over to the inspector, you can see that buttons already have some default functionality. I can tell it to go to any particular page that I want.

What I wanted to do though is go and style this to look like it should for the demo that I showed you earlier. So I'm going to use this Seminary font. The Seminary font is an SVG font that was part of the project that I imported. So it's a custom font associated with this brand. And maybe I'll make it a little bit bigger.

And because this is in a collection, it means that like items can be treated sort of the same within this grouping. And so you'll see that there's this apply style to all buttons option that's there. This container is smart. It knows that there's multiple buttons in here. And so if I go and hit apply style to all buttons, boom, my font is changed across all of the buttons that are there.

There's another way that I can remember styles as well and use them in other places, not just within a container. I've got this little style drop-down here, and I can go and define this button style that I have here as something that's custom. Give it a name, maybe call it button.

Going back to the overview, it's updated the proxy so it looks right. Let's go and create this page. Now, this page was that history page. It was a landscape page and it had this flow view within it, a bunch of images that move side to side. So that's the one I'm going to pick here. Go ahead and hit choose.

And it's created the proxy here. Of course, it has no content because it was really just a blank landscape view. But you'll see it created that little back button for me automatically. That's built into even the blank template as well so that you don't have to worry about that.

Now, something else that I can do here, I'm still out at the project level, is without anything selected, I can go and I can set the background properties of all of the pages. And actually, all of the subsequent pages are set automatically if I go and set the background at sort of this project level. And so this particular page has an image background and I'm going to go and choose the background landscape for it.

Hi, I'm Mark Malone, the founder of iAd Producer, and I'm going to show you how to create a dashboard for your iAd Producer. create that little history component. So first thing I've got is this button here and I want it to look like the rest of my buttons so I created that style over the other page. So I'm going to go choose button and voila it's got the right font. If I had a shadow or other styles associated with it I would have gotten that right away.

If I go and update that style, that button style any time within any of the pages I can effectively make that style get applied to all of the elements that use it as well just by resaving the style. So all the elements that use that style with that name will automatically have it applied. Now that I'm on a full screen page versus the banner you'll see that the objects that are available to me have changed.

I've got more options available to me and things like high level scroll views and carousels and gallery views and flip views all sorts of things in here. A shake view there's that wipe clear thing I can also have on any child pages I want. I can go and drop a video element. What I'm going to use here is the gallery view.

The gallery view is one of the sort of standard iOS device user experience elements that you've probably seen where you just basically swipe and page through content. The Guinness ad actually used that for swiping through the various steps of going and pouring your beer. So you can go and sort of resize it so that it looks good on here.

Sort of move things around, position them where you want. You'll see that it's got a built in reflection. I'm not too into that reflection so I'm going to go ahead and look at the reflection inspector and turn it on. I don't need a background on it. Let me go and select it.

Go ahead and turn off the reflection. It's got the little built in page dots as well for doing navigation as you would expect in iOS. Those are completely impossible to see so I'm going to go and change that to a color that's something a little bit easier to see. Good I've done that.

And now this is an image well right. It's got the little mountain and the moon or the sun. It means I can go and drop images in here. And the object itself will do some really interesting things with it. And it's also as you'll notice if you double click on it it'll just click on it.

It's this container view much like that button was. And so it's got a lot of smarts that are associated with it. It's got this concept of multiple cells that I can navigate through. The user navigates through these when they swipe but as a designer I can navigate through here using the right and left arrows and I can place individual elements within these cells when the user swipes.

It's not just moving one thing across and repeating it multiple times. It's actually giving me this bucket that I can drop in different content for each one of these views. And it's got the little gear here. I can add and delete, move things around. So that's the view. Let's go and throw our content in there real quick.

I've got these history images. Boom. Just going to go and drag and drop them on there. And then this object is smart enough that it says oh you went and you dropped five items on. This particular flow view only had four cells when it was first created. And so it went and created one for that final one. And like I said if you don't like it you can go ahead and go and delete it. But it went and spread those images across the various cells.

So now if I don't like the placement I can go and arrange them here. But what's really most interesting is the fact that I can do other things within this container. So once I'm drilled in within one of these cells well then I can go and grab objects and do other things as well. So I've got my image here and I want some text about it. I believe that was smoke signals.

"Stretch it out, right, so I've got complete editing capability within here. Copy and paste it. And it had some other text in here.

Resize things how I like, lay it out, spell it correctly. "Spell it correctly, resize it to fit, and then you'll see when I navigate through these cells that the content goes with it. And I can go through and do the same thing to all of the cells. And I can drag other things. It doesn't just have to be labels and images into these cells. I can drag carousel views or video elements. This could be a swipe through various trailers for a movie perhaps. So it's got a lot of high-level functionality.

And if we go and we simulate it now, You'll notice when I tap on the banner, it takes me right into that page that I was last editing. I don't have to go all the way through the menu structure. And now it's got that capability. And if I was previewing it on the device, I would be able to swipe with my finger there. It's all built for you. Menu takes me back, and boom, I'm good to go.

Now one quick thing to show you is the fact that Back here, these pages, I said, these buttons, each one that you see here is actually hooked up to a button here, even though these are proxies. And there's some intelligence that you'll see that this particular page was named blank, but if I go and I call it history, for example, it should update the button to say the right thing.

And now this particular button is history. And as I go and add the other templates, it's going to do the same thing. So they can stay synchronized in that sort of way really easily. Now, if I go and I rename the button, give it something completely different, it will preserve whatever name I associated with it.

But the page name will stay the same. So it's helping you out, but it's not getting in your way. Let me just quickly go and build out this other page. This page was a map. So I'm going to choose the map template. It's in portrait mode. And you'll see that it went and grabbed the default background that I selected earlier at the project level.

So that's great. If I double-click in to view the details, well, this isn't the kind of font I want in order to stay in line with my demo. I want to use CoachIn there. I've got my little button. I want to make sure that it's It's my button style.

That's great. And this map plugin's got a lot of smarts. It already has all the mapping tile capability. All I really need to do from a customization perspective is give it a pin. I don't want the default red pin that gets dropped. I want my brand or whatever to be the pin.

And so I've got this little telegraph pin that we've created. And you can see that it's sort of off-center from the center of the bullseye there where the point's actually going to be. And that's because images, we don't necessarily know where the center of your image is. And so it's up to you to go and align it.

And you do it through twizzling these little selectors here and setting the offset position to exactly just, you know, where it looks right on the screen. And so that looks about right. So now my pin is centered. I can go and drag some other assets in here to make it look A little closer to what the demo here looked like. I can go and change the order.

I can send the text or the layers back and front just by selecting the various objects and the right mouse clicking on it allows you to play with the Z index. My button's all hooked up because it was given to me by default. And let me go ahead and simulate. Take a look here.

It'll go and load my banner. Again, I'm working on a page that's further in, so you see I get the automatic map experience. There's that button asking me for permission. The ad name is automatically there. It'll drill in. It'll use the default pin locations that are built in, which are basically locations of Apple retail stores, but you can go and provide a list of lat/longs to the tool as well, and we'll drop pins in the right places for you. Mark Malone The menu's all hooked up. Takes you right back. So, it's pretty sweet. A lot of functionality without a lot of work.

What do you think?

and you can embed a map as you saw in that particular demo. And this is what the code looks like. So like I said, you can go into iAd Producer, you can use our buttons and our widgets to go and do this, but you can also call these things programmatically. And so here's an example of what it takes to go and save something in the calendar. It's incredibly straightforward.

Basically, you go and you define the event information associated with the event, the various details, begin, end date, some descriptive information, and then you call present composer. And then the operating system will take it from there. It'll show the standard calendar event creation widget. The user is very familiar with that. So they'll go in and they'll say, "Oh, yeah, I do want this thing on my calendar." They'll choose their particular calendar and take it the next step.

And there's a callback there. So within your ad, you'll also know whether they hit the done button and actually went through the process or if they hit cancel and jumped out. And so if that's something that you're keeping track of within your ad, you can do that as well.

So it's device integration, but the key point is it's never exiting back out, out of the developer's application or out of the ad. These sheets to either send an SMS or send a mail or get something on the calendar, they come up on top of the ad. When the sheet goes away, they've added it to their calendar. They're still right there within the application. They haven't gone anywhere.

So these are the core technologies that you're going to use whenever you're doing any sort of development. And the way that you basically add custom code to your project is in a couple different ways that I'll go through real quick. First and foremost, if you've got existing JavaScript files or JavaScript files you've created as subclasses of our objects, you can just go and import those as assets. The same way I drag that folder of images and such into the project, you can drag in your JS files. You can drag in your CSS files. You can also combine your own custom JavaScript and CSS files into an incredibly powerful thing called an IAD Producer plugin.

And the Producer plugin allows you to go and basically take a component that you've written as a developer and drop it into IAD Producer and expose to a designer that doesn't really want to see your code and that's a lot of high-level functionality. So maybe you've subclassed the carousel view to make it tilted and make it spin in a different sort of way.

If you wrap that within the plugin, it means the designer can go, "Oh, let me drag in this horizontal carousel." They'll drop it in and through the plugin API, you can also expose over on the right-hand side all of the inspectors to go and set the various properties that you expose. They don't have to go and look at any of the code. They can play with the tilt or whatever you've exposed as the properties on those objects.

So these are incredibly powerful and a great way to go and extend it. You can also do some inline programming. All of the elements that are controls within the ad that you're building out, if you right mouse click on them like a button for example, there are events that are fired when a user taps on those. If you've got some JavaScript that you want to fire at that particular point when the user taps on a button, you can go ahead and throw it inline.

All you do is choose a particular event that you want to hook into, paste your code in there, maybe you call to an external function that's in a JS file that you imported, that's another way to go and add your own functionality. And of course I mentioned earlier on there's a debugger that's there and so as you're writing your custom code, if there's an issue that happens while you're running through it within the simulator, boom, it's going to stop on a break point or it's going to stop where the error was and give you quite a bit of feedback.

So I've got a quick demo for going and doing the custom code. So what I'll do next was that last page that we saw in the Hudson Telegraph demo, and that was the adding a field where a user could go and type in some text, and then they shook the phone in order to go and convert that text to Morse code. And so when I imported all of these demo assets, you might notice over on the right-hand side there's this morseconverter.js file that I imported in there as well.

And if I open it up and I look at the contents of this file, it's got a lot of comments at the top. But if I get down into the real meat of it, you'll see it's got basically an array of characters and then the equivalent in Morse code of those characters in dots and dashes. And the most interesting thing of this function of this particular code that I've pulled in is this convert text field function that's here down below. So when the user clicks on the text field, it's going to be able to see the text field that's here down below.

So when the user shakes the phone, it converts the field that's being passed to this particular function into the Morse equivalent, basically looking at the characters and converting it. So that's what we're going to go and call. And so let's go and build up this page really quick. I'm just going to choose a blank page.

In portrait mode, get the default background, get my button there, go to the inspector, "Make my button pretty like the rest of the buttons." Boom. Piece of cake. Got a couple assets here to go and drag on. Little background for the canvas.

I'm just going to go and type some text in here just so I don't have to type it on the simulator. Hello iAd. Great, I've got that there, all nicely aligned, looks good. Oh, that's not aligned.

I can go and save that modified one as a new style or I can say, "No, I want all my buttons to have that shadow, but I'm not going to do that now." So this is a button control and if I go and I right mouse click on it, then you see that I've got various events that are fired when this is tapped on.

The one I'm going to plug into is the touch-up inside. This means the user tapped their finger down within the button and then they lifted the finger while it was still over the button versus dragged out and then lifted, which is sort of a cancel. So I'm going to go and use the control touch-up inside and you'll see it brings up a code window.

And so I'm in a JavaScript editor and I can do really interesting things here like have this conversion happen. You'll see what's really interesting here is that the comments are actually valuable and placed here for you at the get-go. You'll see that it basically shows you how to go and create local variables, how to access a global variable if you've got one defined somewhere else. You can look at the center of the various events.

If you want to get a reference to the page, this is how you go and do it. For my particular example, what I want to do is I want to go and create a global variable. I want to go and get the content out of that text field and pass it off to that convert method. So I'm just going to go and copy that text that's there, paste it in.

So this basically says, "Okay, for this particular page or for this button that I'm on, go and ask for its view controller." And the view controller has this outlets array. So the outlet is basically the name of the object that I went and changed for the page name or for any element on a page. So the button is an outlet, the field is an outlet. Anything that's sitting there on a page is an outlet. And this particular array holds a reference to everything that's on a page.

And so that text field is called text field. If I go over and click on it here and look over in the inspector, yes, it's called text field. That's great. So I'm getting the right one. And I'm just pulling it out of that particular array by name. And so what I'm going to do next is then I'm going to go and call my code convert.

I'm going to go ahead and add a new text field and it's a function. And I'm just going to pass in that text field call there. iAd Producer: I've added code to this button, if I right-click on the button the event is selected, so there's an event associated with this control. When the user touches up inside of it, it should call the JavaScript function and convert the text.

Mark Malone iAd Producer: There's other places that you can hook into events as well, not just the controls that you go and drop onto a page, but there's events associated with the ad loading and the ad being paused, transitions between pages. Mark Malone iAd Producer: You can hook into an event of a page coming onto the stage and have an event that's fired as it goes off.

You can have all sorts of things laid out there in code. Mark Malone iAd Producer: The way you see those is you go up to the code menu, and here's the object events for my selected object, but the page events are here as well. Mark Malone iAd Producer: Maybe I want to do some some wizzy layout. Mark Malone iAd Producer: Before the page appears, I'd go into this particular code editor and do it there.

Mark Malone iAd Producer: The global events are here as well, and this is where the shake event actually occurs. Mark Malone iAd Producer: Shake is a global event, and if I wanted to hook this up to the shake functionality, that's where I go and do that. Mark Malone iAd Producer: Alright, so with everything fingers crossed, well typed, hopefully no typers, I've got my code in here. Mark Malone iAd Producer: If we go and hit simulate, it's going to go and regenerate the ad, load it within the simulator.

So I've got some custom JS that I've got in here. I've also got some custom CSS. And if you take a look at this file, it basically has a very simple keyframe animation set within here. It looks for a page that's called Try It. This is the selector up here.

And it looks using that same sort of outlet mechanism for a particular element on the page called Phone Image. And then it applies this WebKit animation to that. So a couple things that I have to do here. First and foremost is I need to make sure that my page is named Try It in order to make sure that's going to get called. So right now it's called blank. I'm going to call it Try It.

Great. Try it to the page. Phone images the object. Looks like the selector's right here, so this is the way it's going to go and find the element on the page, apply this particular style, simple keyframe animation. Let's go ahead and load it again in the simulator.

Loads the banner. Boom. Take me to the page, and voila. That little CSS style is applied. So whatever CSS you might have in an external file, this is the way that you go and apply it as well. You might have multiple files, all sorts of different keyframes that you want to apply to objects.

This is a great way to say, "You know what? I don't want to use that drop-down selector for the animation that's built in. I really want to apply my own." You just basically find the element on the page and apply the appropriate animation that you've created out in CSS.