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 iAdProducer 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 PubFinder 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. For advertisers this is awesome because it's 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 'cause 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 gonna get synced wherever their calendar events go. So that's pretty nice as well.

So both of those ads were created with iAd Producer and many more. And so what I'm going to talk through is basically the feature set that's available within the product in order to go and give you these great-looking ads that you've seen me example right here. A lot of folks ask sort of who is iAd Producer designed for, and it's really designed for sort of both sides of a creative organization.

Some people see themselves as sort of the creative folks. They don't want to get their hands dirty in code. And other people see themselves as sort of the guys wearing the propeller hats, and they want to get down and dirty and get out of tools, write code in there, and their favorite text editor are important. And we really see the tool as supporting both of these working models. And there's features associated with each one of these models, depending on whether you're wearing the hat or the glasses that you'll really look forward to. And so from the design perspective, the fact that you can sort of quickly and interactively put together these iAds and do it interactively with other folks and see it on the screen and really feel the experience on the device without having to build something out and then go over and look at it is great. Designers also like to at least start with templates when they're doing their rapid prototype and just getting something laid out. And iHead Producer has a slew of templates that basically create the map widget or the scroll views or all sorts of different other widgets and they can just sort of drop them on, drop their own image assets in there and really just sort of light them up and give them life. Demoing on the device, as I said, is sort of a killer feature, especially when you're in design mode because you want to see it on the phone, but you also want your customers to see it on the phone and show them that maybe that idea that they came up with doesn't look so great, it doesn't interact quite so well. And then you can sit there and iterate it as well. And finally, just because you're in design mode doesn't mean that you sort of throw all that away. You're not creating this animatic that you then have to hand over to an engineer and say, okay, make this real. You've got a project file with your assets in it, with a lot of smarts in it, a lot of functionality that you can just hand over to engineer required in order to take it the next step. And so from a feature set for the engineers perspective there's things that an engineer is really looking for. Things like you know don't make me work too hard in order to get compatibility across devices. It's web technology and you don't want to have to add your own browser sniffing for example or testing versions of the IAD engine that you're running and so if you use the components to go and lay out your ad that we've provided we actually do a lot of detection of not only the device but the version of the operating system that you're using and there'll be controls that we actually change the functionality how they work under the covers but from a programmers perspective they instantiate one object and its lifespan is the entire set of iOS devices for them. Extendable with built in objects, plenty of built in things but you can always go and extend them, sort of make them yours either with style or with your own custom code. The ability to go and import your own code, maybe you're exporting out of another tool some web content or keyframes for an animation or styles. Perhaps you've got assets that you've used on a given web property that you've got out there now. You can pull those into the tool. Debugging, of course, is always there because programmers were all about writing buggy code. There's a debugger that's there so you can step through your code and I'll go through that sort of ad nauseum in a little bit. And then finally, packaging and publishing in one step is built into the tool. So within the tool, you can basically push the ad that you've created that you've refined up to a test server and give it a whirl. So those are sort of the two buckets. We realize that the tool is really only one tool and we think that it sort of fits the needs of all of those folks within an organization.

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 iEd 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 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 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.

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 and 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 delivered. 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 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 will be an indication over on the right hand side that oh, there's a new version of that image available and then you can reimport 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 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 iAd Producer when you first launch one of the ads that you're building within iAd Producer. 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 gonna go and create. And so this is the Hudson Telegraph demo. You'll see this in the next rev of the tool. It'll be included in the extras directory when you download the dimmage. And it's sort of this steampunk sort of ad that tells you that 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 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. Now it also 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 convert it to Morse code, which is incredibly useful as well.

And then if I go and shake, boom, it converts it to Morse code. So what we're gonna do is basically go and recreate this ad using IAD Producer and use it as sort of a way to go and discover capabilities of the tool. So let's hide this and launch IAD Producer.

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 that 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 the sort of the drill down view. Once I'm in this view, I can start dragging elements on and 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 anytime 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. We'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 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 with 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 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 into, 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 in and pull back things that I want.

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.

Pretty straightforward. So I'm going to go back to the inspector and go and, now that I've got some images imported into the assets, I'm going to go and say, "Okay, I want an image background "for this particular banner." And I've got a banner background, JPEG sitting right there, piece of cake, it's applied, that looks pretty good.

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.

Now 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 telegraph. Go ahead and give it a little style there.

Touch 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 'cause I wanna preserve that same style for this one and that was the fastest way to get there. Send, dot, dot, dot, 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 could 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 the ability to set timing functions for them 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 going to want it to come in last, so I'm going to 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 inside 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 iAdTester. And it should show up, unless the demo gods are not with me. Create it. Make sure we'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 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 in the two different banner orientations, and now when I go and simulate 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 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 align, you see the little alignments. And I've got this little grouping of buttons that you'll see here. This is the grouping, they're 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 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 want 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. Button. And now I've got that same style available, and I can apply that style to other objects and further pages within my ad. So that's my menu. I'm going to go ahead and save.

Going back to the overview, it's updated the proxy so it looks right, and 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 go and do 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 gonna go and choose the background landscape for it.

And you'll see that it went and applied it to all the various pages. Well, this isn't a landscape. This menu one isn't a landscape page. So actually what I'm going to do is go and choose the portrait background for all of these. And then for this particular one, I'm going to go and set its background to be that one that's for landscape. And so it's smart in that it will apply it to all of the pages that you go and subsequently add. But you can also go and tailor each page specifically. So let's go into this blank page and move things around and sort of create that little history component. So the 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 on 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 gonna 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. And 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 off. 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'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 a 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 gonna 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.

Right, it's just a label and so I can go and style it the way I want. It was that Cochin font. Bump it down a little bit. 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, bring it up, there's our banner. 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 the button, 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 Coach In there. I've got my little button, I wanna make sure that 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 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 'cause 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. menu's all hooked up, takes you right back. So that's pretty sweet. A lot of functionality without a lot of work. What do you think?

All right, so let's go back over to the slides. All right, so that was a demo of designing an IAD. So that's design, and you saw you got a lot of functionality without a lot of work. The tool has a capability to go and put the ad that you've created as a result of that experience right onto a device or even add it to the IAD network, upload it to our test server for other people to try and submit for the network itself. So if you're satisfied with that sort of step and the way it looks, the way it performs, then you can sort of skip that whole develop process. You're really ready to deploy. There's no code that was used in creating that particular demo, but the reality is that we know people probably want to go beyond the templates. They want to add some custom functionality. Maybe they've got their own timing functions that they want to use for their animations or those kinds of things. Maybe they've got their own code that they want to bring in for an experience beyond what we've provided. And that's sort of where the development phase comes into the IAD Producer tool. And so just a quick overview on development capabilities. It really all begins with the fact that iAd is a client of web technologies.

I mean, the iAd sheet, the thing that's actually playing back your ad as well as the banner, is basically the same thing as the browser that you'd find on our desktop or the browser, the mobile version of Safari that you'd see on our portable devices. It's running that same WebKit engine underneath it.

And so from a development perspective, at the get-go, you've got access to all of the HTML5 goodness that you can go and extend and add to the ad. So if you're a web developer and you're already familiar with HTML5 technologies, then that's the first place to start if you want to go and add your own canvas element or other items, styling, those types of things. And we actually do the same thing within IAD Producer. Unbeknownst to the designer, what we're actually doing when you're styling an element is really just generating the CSS style appropriate for that particular element. We do that with animation as well. When you choose an animation from the drop-down menu, we're going and basically generating a CSS animation, all the appropriate keyframes associated with that particular animation and putting it into the ad as well. So even though you're in design mode and you're doing a lot of high-level dragging around, we're generating a lot of standards-based web content underneath the covers. And that's the place that a lot of developers, especially web developers, are really interested in sort of taking things the next step. Maybe there's an element, a sort of a DOM element that you're used to using on your web ads that you'd like to implement within an iAd. Well, it's there. All of HTML5 is there for you to take advantage of. Maybe you want to implement a canvas and do some custom rendering within the canvas perhaps. Well, go and initialize a Canvas element and go ahead and add it to the project. Piece of cake. There's a lot of other technologies that are just sort of standard web technologies that you can take advantage of either within the tool at a high level by using the templates or just via code as well. So things like the inline audio and video. That's the HTML media element implementation.

So if you want to go and create your own widget, go ahead and take advantage of that. Hooking into the orientation events. If you want a callback associated with that, you can use a high-level one that's built into IR Producer, or you can use the one that you've created within your own code. Add your own callbacks. WebGL is there as well. If you've got WebGL content that you want to go and use and add to your experience. Geolocation, that's standard browser web kit goodness as well, as well as touch events as well. So you can hook into all of these things using templates, using the buttons that are provided, but you can also do it all in code as well and do it in line. So it's HTML5 at the get-go, but there's also a lot of functionality that we bring to bear when you're running an IAD, and that's IAD.js. IAD.js is a full-class JavaScript library, and it gives you a lot of functionality. It gives you quite a few features that you wouldn't find typically in a JavaScript library, or maybe you're used to using in some of the other ones. You'll find it here as well. It's got features such as subclassing, the ability to sort of mix functionality from multiple classes together with mixins. synthesize properties and the ability to sit there and watch those properties have callbacks for when those properties change. It's all built on a model view controller paradigm, so if you're used to building iOS applications, then you can immediately get your arms around this thing. And it's got a view hierarchy, so things can be subclassed and embedded within each other. Subviews, that same sort of methodology that you might use in a native application. There's event handling and finally system bindings as well for getting to some of the native features of the device, getting out of web technology and calling into the calendar like we saw in the falling skies. And so IAD.js gives you all of those language features, but it also gives you all of that high level visual capability that you saw when we were in the tool. All of those objects that were in the object palette, those things that you drag and drop onto a page as you're designing are really just instantiations of high level JavaScript classes that are created by IAD.js. So the FlowView, the Carousel, Those are all just instantiations of these particular JavaScript classes. And so that's what IAD Producer is doing when you're putting those elements on. It's actually instantiating these classes, laying them out for you without you having to worry about any of the code. But the class library is there. It's there for you to do something with if you want to go and extend it. So you can take any of these classes and subclass them. Give them your own look and feel. Give them your own interactivity. They're all pre-hooked up and ready to go, so you shouldn't have to do much. but if you want a very specific experience out of some of these, then go to town. They're there for you to go and subclass. The device integration is particularly interesting, not only because you can do it from within the iEd Producer tool itself, but there's also code that you can write that can get to a lot of the underlying resources as well. Maybe you don't want to use the button that we provided that can save an image to the wallpaper or to the photo library. Maybe you want to have it happen at some other type or within some other interaction within your ad. Well, you've got the capability to go and do that. You can send an SMS. You can send an email, so messaging capability. Standard sheets will be brought up within the ad in order to do that, and all you need to do is provide some simple JavaScript code to go and do that if that's how you want to do it in code and not use the templates. You can download applications. You can download iTunes content. You can set the wallpapers and save to the photo library as you saw. You can take a picture with iOS 5 now. You can incorporate the camera into your ads.

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 dates, 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's 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 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 plug-in, it means the designer can go, oh, let me drag in this horizontal carousel. They'll drop it in, and through the plug-in 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 breakpoint 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 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 gonna 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 need to put that field on that the user's gonna go and type in that's gonna bring in the keyboard. So choose from the objects palette, text field, go ahead and drop it in there, resize it so that it looks good. And 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, boom.

Now I'm gonna go, rather than shaking the phone, I'm gonna go and have a button, just so I can explore how controls actually work here with you. So I'm gonna add a button when the user taps the button, it does the convert. So I'm gonna call this button convert.

Remember I've got my button style around, so I'm gonna choose that as well so it looks the same. Maybe I'll throw a drop shadow on that button. Now I've gone and converted. You'll see that the button style has been modified. 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 gonna 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 gonna 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 gonna 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 to find 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 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. Okay.

and it's a function and I'm just going to pass in that text field call there. And then go ahead and save it. Great, so I've added code to this particular button. If I go and I right mouse click on the button, you'll see that it's got the event selected. See, it's got the little white circle there. That means that there's an event associated with this particular control. So when the user touches up inside of it, it should call that JavaScript function and convert this text. 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.

So 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 sort of laid out there in code. And 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.

And so maybe I want to do some whizzy layout before the page appears. I'd go into this particular code editor and do it there. The global events are here as well. And this is where the shake event actually occurs. The shake is a global event, and if I wanted to hook this up to the Shake functionality, that's where I'd go and do that. All right, so with everything fingers crossed, well typed, hopefully no typers, I've got my code in here. If we go and hit simulate, it's gonna go and regenerate the ad, load it within the simulator.

Pull in my banners, I see the animation, go ahead and tap, bring it up. There's my page, takes me right to it. I've got my nice button with the shadow behind it. And if I hit the convert button, boom, it'll go and do the conversion. So this was hooking up events to external code. There's a mechanism for hooking up external CSS as well. Maybe I want to go and indicate to the user, for example, that they need to shake the phone in order to have this conversion take place. So let me do that real quick just before I run out of time.

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 of 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 gonna get called. So right now it's called blank and I call it try it.

and it's looking for an image called or a file or an outlet on the page called phone image and I've got a little image of a phone that I'm going to go and drag on here, boom maybe shrink this up and now I need to make sure that this thing is actually called phone image Great, try it to the page, phone image is the object, looks like the selector's right here, so this is the way it's gonna 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.

Adding custom code. So that's development. The last little piece to talk about before I run out of time is deployment capability. So you can view, as I said earlier, you can view ads as you're creating them on any device that's on the same Wi-Fi network just by running the IAD tester application. You'll see that all of the machines in the room that are running iAd Producer will show up with an iAd tester, and you can select the one that you're working on, grab the particular banner, and view it and really experience on the device. That's one way to go and do it. Another way is to go and sideload it through iTunes.

Maybe you want to go and crunch up your ad and put it on a phone and give it to somebody to go and preview to a customer. Maybe they want to view it in a subway where there is no wireless network or any sort of cellular network whatsoever.

All you need to do is export your ad out of iAd Producer and compress it within the finder. Just right mouse click on it, save it as a compressed file, basically get a zip file and then go into iTunes, select the iAd Tester application and it supports the document folder. So you can go and just drag that zip file within the iAd Tester document folder. And then when you launch iAd Tester again, it'll show up in the on my device section. So you could load a series of different banners, a series of different experiences in there and it's all packaged on the device and ready for going and demoing, even without any sort of wire connection.

The final one is to upload to the iAd test server. We've got a test server, basically a sandbox environment that we provide that you can upload to right out of the tool. And it really gives you the best way to go and test over the air how your ad's going to really perform. So upload it through the iAd producer tool, throw it into the test server. We'll send you back an email that's got basically links to all the different banners that you've got within that ad.

and you can share these emails with your customers so that they can experience the ad as well. As long as they have iAdTester, when they're either in mail or on a browser page, if they tap on the link associated with these particular URLs, it'll launch iAdTester and take them right into the experience as well. And so this is a great way to go and try an ad in your favorite dead spot as well, really over the air, much like it would be experienced by your customers.

So that's design, develop, and deploy. Just a quick wrap-up. Hopefully you've seen that there's, get a lot of bang for your buck just by dragging elements onto a page using the pre-built objects and templates that we've provided. There's a lot of functionality that these guys have worked really hard to go and add to the tool. So you get some pretty incredible experiences without a lot of work, with the objects that are pre-built, animation that's there, all that styling capability without any effort. But there's always that side door as well. And so from a developer perspective, you can customize, tell your heart's content, bring in your own code files, your debugging within it as well and really have sort of that whole other side of the implementation. And then finally as part of deployment, deployment and testing, it's all about being able to test in the iAd Sandbox. Sandbox is the best way to do it. Experiencing on the device ensures that people have a great experience before you've actually gone and shipped the ad. And finally a lot of the templates that we've created are really mobilized for the or optimized for the mobile experience.

And so they're good at generating the smallest possible assets associated with an ad for a potentially slow network. So using them as a real boon to creating a great ad experience. So that's the presentation. I'm Mark Malone. If you have any questions, go ahead and send me an email, [email protected].

You can download the tool. All you need is an iOS developer account. There's an extras directory in there that's got some project templates that are really useful. Shows you how to do custom animation and all sorts of other things as well. to make your propellers spin. There was an IAD implementation best practices session, which was the session just previewed to this. You should take a look at it if you're interested in how banners work, if you're embedding within your native application. There's also an understanding and optimizing web graphics presentation, which should be really interesting, talking about Canvas and SVG. Again, if you wanna go and look at HTML5, WYSI stuff, and think about adding that to your ad, this would be a great session to check out as well. So thank you very, very much for coming.