All right. So my name is Scott Stevenson. I'm a software engineer on iAd Producer. And I'm -- we've been working really hard to do some really great stuff, and I'm thrilled to show it to you today. So let's get right into it. So when we start out today, I want to talk about a story. And this story is about you. And maybe right now you're working on a mobile website or a desktop website or maybe mobile advertising.

And you might be working with jQuery or Prototype or maybe some Flash content. And you're going along every day kind of building up your skills. And one day your boss comes into your office and says, hey, I've got some great news. We've just started this new project that I want you to start on right away. And we're going to be building an iAd.

So two things might go through your mind at this point. First, you're thinking, wow, this is really cool. I've seen these iAds, and they're highly interactive, very animated, really using cutting-edge WebKit technology. But the other thing that might occur to you is, you know, maybe I don't know how to build an iAd.

So you might be thinking, well, you know, am I going to have time to figure out how to build an iAd? I might have to read some documentation, and you might be a little concerned. Am I going to have time to learn it and then also make the ad I need to make? So what I want to tell you is that by the end of the talk, two things. One, you're going to realize that you absolutely can do this.

And the reason is that iAd is built on concepts and standards that you're already familiar with, such as HTML5 and CSS. And the other thing is that iAd Producer, I'm going to have convinced you that not only is it really easy to use, but you're going to be eager to go download it and give it a try because it's a lot of fun to use. And we're going to show you how it works. by looking at what an IAD is.

And as I mentioned before, iAds are rich, interactive ads. And this is maybe a little bit different than what you might see on a website, for example. If you see sort of a static banner image on a website and you tap on it, you're sort of tossed out to the advertiser's website. And iAds are different.

So really what we're trying to do here is we're trying to apply the same level of quality that we have for iPhones and iPads, which are best-of-class devices, and we want to apply that to advertising. So we really want to make the best possible experience for the user for ads.

And here on the screen, you can see an example of this. This is one of our sample ads called Space Tours to Mars. And it really pushes the edges of what you can do with WebKit and what you can do with iAds and iAd Producer. And as I say, it's all built on WebKit technologies. And really, iAds are like mini-websites.

So again, where many advertisements on websites, you might tap on them and you're sort of tossed out, and that's the end of your experience with the ad, iAds are really immersive. And you're in them for a while, and as you can see on the screen, you're looking through, playing games, looking at different images. looking at different images. So it's really, it's a comprehensive experience.

And the other thing that's really important about iAds and sort of a differentiating factor is that when you tap, when the user taps on an iAd at the bottom of the app, they're not taken out of their app. They're not, you know, tossed out of context. Whenever they're done with the iAd, they hit the close button and they're dropped right back into where they were. So it's a really great, fluid user experience.

And just to, let's take a quick look at what an iAd is. At the bottom, of course, we have WebKit, which is powering this whole engine. And on top of that, we have this framework called iAd JS. And iAd JS is a really, really fantastic JavaScript framework. It's built on some of the concepts in UIKit, which is the framework used to build native iPhone apps. And a lot of those concepts have been sort of applied to JavaScript.

And on top of iAd JS, we have iAd Producer. So iAd Producer, a couple things that you should know just right off the bat about iAd Producer, it's designed to be an expert ad creator, iAd creator. And we've invested a lot of time in sort of adding all the functionality that you'll need to make a really great iAd and performance tuning the ads that we generate. And we think you'll really be pleased with the results. And we've also gone above and beyond and tried to make the experience such that you're, realizing there's a lot of really built-in, fantastic features, built-in magic. And we refer to this as magic for magicians.

So, When you start playing around with the app, you realize, wow, there's some really fantastic animation features, some really mind-blowing results. But the thing I want to emphasize here is that you're not locked into the features that we've provided. And that's what I mean by magic for magicians. If you're an expert, if you know CSS, if you know WebKit, you can just extend what we've provided and sort of make it even better. And the last thing I want to emphasize here is that iAd Producer is really designed to be a full-cycle development tool.

So what that means is it can help you through the entire process of the initial concepts, the prototyping, getting things onto the screen, adding animations, customizing some of that stuff, and then performance tuning and ultimately deployment. So it's really designed to help you through the entire process from start to finish. So that's a look at what iAd Producer is providing. Let's look at what some of the features are that deliver this.

So the first thing you'll notice when you launch iAd Producer is that it feels very familiar. And the reason is we've based it on a lot of the same concepts of other Apple apps that you're familiar with. So you're going to sit right down and start a new project, and you're going to kind of instinctively know what to do.

In addition to being really easy to use, we've made it really easy to get really fantastic results. So it's not just sort of the essentials are easy, it's that the really great stuff is easy as well. And we realized that once you've added some of the objects from the object library and you've added animations, you may want to go a bit beyond and add some custom animations or custom logic, and we make that really easy as well.

So here's a screenshot of iAd Producer. It's showing again our sample space tours to Mars ad, which you can open for yourself and look at. And here's a screenshot of the animation feature, which I personally think is one of the best features of the application. It's really fantastic. If you've worked with WebKit animations before, the results are great, but you really have to know JavaScript really well. And if you're using iAd Producer, we just sort of do the hard work for you.

There's also an event system that we'll be talking about and Chi Wa will be demoing for you. We have a comprehensive object library, so a lot of the things that you would need, we just sort of have ready right out of the box. Some other handy things, an object list which shows you all the objects on your page.

And finally, we have an analytics editor, the screenshot you see here. And this is important because it allows you to easily add the required analytics to your ad so that advertisers can understand how the ad is performing on the network. So that's a bit about the built-in features. And as I said, we realize that you will want to customize ads very often. To do that, you would use the iAd JS framework sort of as your basis. That's the way that you can easily add new behavior and new content to your ad programmatically.

You can also add custom CSS styles and custom CSS keyframes. So again, we have a fantastic animation system that is really super easy to use, but if you're one of those magicians, you're able to add your own animations just by importing a CSS file. And we provide a code editor built into iAd Producer so that you can just sort of jump right in and edit the stuff in line. However, if you have an editor you really like, you are more than welcome to use that one, and we'll just bring the content back in when you're done editing it.

In addition to the main iAd Producer app on the Mac, we also have a companion iOS app called iAd Tester. And the most important role that iAd Tester is fulfilling is that it's allowing you to test the ad live on an actual iOS device. And this is really important because as you're testing the ad, as you're working on it on your high-end laptop, high-end desktop, obviously the performance characteristics are a little bit different with a machine like that compared to a mobile device. Mobile devices have more constrained resources because they're handheld.

In addition to testing the ad on the iOS device, you can also use iAd Tester in the simulator, which is really great if you're making a bunch of sort of quick changes and you don't necessarily want to go back to your iOS device every single time. And in both cases, whether you're using iAdTester on an iOS device or on a simulator, you can use our built-in remote web inspector.

And this is great because it helps you understand sort of how the ad is performing in real-world circumstances. So that's sort of a high-level overview of the features. Let's choose one particular set of features here that's really interesting. It's the animation system and the built-in object library. Let's look a little bit closer at that.

And what we're aiming for here is that you're going to start, you're going to sit down at iAd Producer and you're going to start adding images and animate, excuse me, objects and animations to your page. And we want you to walk away with the impression that you can make world-class rich media ads without having to write code. It doesn't mean you're not allowed to write code. It doesn't mean that you would never write code. It's that you don't need that to see really great results. If you have something custom you want to add, you're welcome to write code.

So let's start by looking at actions, and when I talk about animations, really I'm talking about actions and actions are broken into two separate categories. First category, our visual animation effects. As you see on the screen here, this is the spaceship flying around and spinning out. So a lot of these things would be like rotations and fades, drop effects, that kind of thing.

And then we have a second category of actions that we think of as functional actions. And on the screen here, you can see we've used an action to set to allow the user to set the current image as their iOS device wallpaper. And the great thing about this is that you're basically adding interaction to your ad, again, without having to write any code. We've done all the hard work for you. This is really, really great.

In addition to one-off actions, sort of animations and functional actions, we also have a concept called action lists. And the way to think of action lists is they're precisely timed groups of actions. So a really good example of this is if you want to do a page build-in or a page build-out, you would create an action list that has all those individual animations and you can time them all together so they look really smooth when you're transitioning from one page to another.

And just to sort of put your mind at ease if you're looking at this and saying, ooh, what if this isn't doing exactly what I need? If you create an action list, you actually have the capability using iAd JS to control the action list in JavaScript. So again, we allow plenty of room for customization.

Now you might be thinking, okay, this animation system is great, these actions are great, but how do I launch these things? What do I have to do to actually get these things running? Well, we thought of that, and we added a convention in here in iProducer called Events.

If you're familiar with JavaScript events, the concept is very similar. We added a few things on top just to make it more convenient and make it integrate better with iProducer. But essentially the system that we're offering here is like code-free coding. So remember before when I showed the wallpaper and the user tapping the button and set the user's wallpaper? Well, that's what's going on here with the event system.

So in this particular screenshot, I have an example of when this user event touch up inside, which is the UIKit parlance for the user's tap the button. I've decided on touch up inside, I want to play a video, and you're off and running. And you can also start individual actions or you can start entire action lists based on user events.

And if for some reason you don't see the exact action you want or you don't have an action list sort of situation that you want to use, you also can use an event to just launch arbitrary JavaScript. So at that point, the doors are just kind of blown off in this feature, and you can do whatever you need to do based on a user event.

So, of course, actions and animations wouldn't be really useful if you didn't have anything on a page. So we have a built-in object library that has a lot of content that you would need right out of the box. And it works really, really well. And we've divided conceptually the object library up into four major categories. The first, of course, is the essentials. And these would be like buttons and text fields and sliders, all those things that you just know you're going to need just sort of as a foundation.

In addition to that, we have a whole set of media views. So, if you're playing back video and audio, this is great because you don't have to worry about which version of Safari the user is running. We handle all those details for you and make sure everything's buffered and all that kind of stuff.

So it's really, really easy to use. We also have a set of views that are collection views. So a really good example of this is if you have a series of movie posters that you want to show to the user, perhaps to let them set their background image for one of them.

The collection view will allow you to see the background image of the user. So you can see the background image of the user. And then you can also use the collection view to just sort of dump in a bunch of images and swipe through them and very easy to display a large amount of content. The fourth category is this category we kind of think of as specialized views. And a really great example of this is our WebGL view. If you haven't seen WebGL before, the results are fantastic. It's a 3D model inside of a web view.

And it's really, really impressive. But the catch is that typically, if you're using WebGL content, you have to be an OpenGL programmer and you have to know JavaScript. So typically, it's really, really easy to use. So if you're using WebGL content, you have to be an OpenGL programmer and you have to know JavaScript. So typically, it's really, really easy to use. It's pretty hard to get up and running with this stuff, but we've made it really easy.

All you have to do is open the object library and drag in WebGL view, then add your 3D model and it will just work. It's fantastic. So this is the email I got this morning. So this gives you a preview of the app that I'm going to build here.

And I already have iProducer installed. You can download it from developer.apple.com. Let me double click to launch. So on the welcome screen, you'll be asked to choose either. iPhone or iPad. I'm going to choose an iPad for this project. But the technique I'm going to show you is going to work as well on an iPhone project.

So what you're seeing here is an overview of an iAd. On this side, you see a banner placeholder. When a user clicks on a banner, they will be lead to a splash page where they will see a quick introduction. And then after that, they will be automatically guided to the menu page. From there, they could explore one of the pages here. So like what Scott mentioned earlier, an iAd is kind of like a mini website.

So before I get started, let me go to the Inspector panel and set the minimum required iOS version to be 5.0, so that I can show you one other cool feature later on. And let's get started with the banner. Let me double click on the placeholder. And what you're seeing now is the template chooser. On the top here is a template for the standard banner. The bottom is for the full screen banner. I'm going to choose a blank standard banner.

This has been created for me and let me double click to edit it. Right now it doesn't have anything on it. So what I'm going to do is to import some image asset. To do so, I could go to your top menu bar. Under file, there's an import asset option. So my asset is already there. I'm going to choose this folder.

So the asset library just opened up and it showed me the list of assets I just imported. So I'm going-- like this is a banner logo. I could just drag it to the banner. So as I position this image, like the alignment guide is show up to help me position the image precisely. And I can also do a multi-selection and then drag it to the banner and it will just work.

So I added all my image assets. Let me go set the background so that it matches more the branding. I could do that by going to the inspector panel. And there's a background inspector here. So I don't want color field anymore. I want to change it to gradient. And I don't want linear either. I want radio.

Let me change the color to white on this one and coffee on this one. Thank you. So at this point, we have a banner pretty much ready. Let's take this further by adding some animation. To add animation, let me highlight the object that I would like to animate. And let's see.

You can add animation by going to the action panel. And there's a plus button here. Clicking here will show you the list of action that you can apply to the highlighted object. I'm going to add a pop-in animation. And it just shows you a preview of the animation. You can look at the animation again by dragging the yellow two-tip here. Or you can, there's a play button here, you can also click on it and look at the whole sequence again.

As you may notice, right now the animation is happening one after the other. I could make them happen at the same time by highlighting the action and drag them on top to the other. And let me do a preview. So all actions are starting at the same time now. So that's it for my banner. Let me go back to Overview. And I'm going to build the content page. I'm going to choose a blank template.

So the very first thing I want to do is to set the image background to this page. Let me go to the Inspector panel. And right now, it doesn't have anything. I'm going to choose Image. And the background should be this one. Cool. So let me go back to my asset library. Among the assets I import earlier, there's a 3D model that represents Cupcake International's signature cupcake. And I could just-- like an image asset, I could just drag it to the page. It's so kind of small. Let me resize it.

And the 3D model just magically got rendered using WebGL. And you don't have to write a single line of code to do the rendering. At this point, let me simulate it and show you how it works. Before I do that, let me change this to iPad so that we can look at the whole thing.

So here's our beautiful banner. If I tap on it, it will show me the content page. I could drag it around to look at the cupcake at a different angle. I could go up and down. And if I do a pinch, I could zoom it in and out. So at this point, we have an interactive object, and you don't have to write a single line of code. You don't have to know anything about WebGL, and you have an interactive object at your fingertip. That's pretty cool.

Thank you. So we have a really cool object. Now let me add a tweet button so that people can spread the word about it. To do that, I'm going to the object library. You can do that by clicking the object button here. I'm going to choose a button. And I'm going to move it to the bottom.

To make it a tweet button, I will go to the Inspector panel. And under the Event Inspector, I see that there's no action currently associated with TouchUp Inside. If I click on the drop-down menu, it will view the list of actions that I could associate with it. For this purpose, I'm going to add a Compose Tweet action.

It showed me a list of options for this particular action. I'm going to set a default message. Cupcake is coming to town. So that should be our tree button. And let me work on the aesthetic of the button by changing the background. So I already have a sprite image for this button. Oh, let me first remove the default text.

And now we can set the image background. And that's our normal style. We also want to set the highlighted style. We can do that by clicking on this drop-down menu and select Highlighted. And we also wanted to show us an image. Since this is a sprite image, we change our background position by double-clicking on it. And we can just drag it and get the right background position. So our tweet button should be ready. Let me simulate and show you how it worked.

The tab and hole will show me the highlighted state. And it will launch the tweet sheet. And I could type in some message here. And if I click send, the tweet will be on its way. So that's it for my demo. I just showed you how to build an interactive page and animate a background, all without writing a single line of code. I'm going to bring Scott back, and he's going to show you more about iAd Producer.

So that was awesome. Thank you, Chi Waai. By the way, when you later on go down, download iAd Producer, definitely try out the WebGL stuff. It's really, really awesome. And the thing, we don't have time to demo today, but is particularly impressive is you can actually animate those things using the animation system. So it's tons of fun to play around with.

So let's move on. So what we've looked at so far is sort of adding your basic object library items to the page and adding some animations to those things and just tweaking the styles, the things to get the basics up and running, the essential things you'll need. And we realize, though, that you're going to probably want to customize some of the things that we have built in and add custom behavior. So how do we go about doing that? You're thinking, hey, this stuff's great. I want to add custom control. Or, excuse me, add customization. And one of the ways you'll do that is by using JavaScript, of course. All of iAd is built on JavaScript.

And iAd View, there are sort of two high-level responsibilities it has. First is to control the presentation of the content on the page, and the other is to intercept user events and dispatch them appropriately. So again, remember when I talked about the event inspector and when Chi Wa showed you the event inspector, that entire machinery is handled by iAd View.

And when you want to go above and beyond the presentation and the event handling that's built into iAd View, we also offer a property on iAd View called layer. And potentially this is a little confusing because obviously there are a lot of things called layers. You know, there's Photoshop layers and there's core animation layers.

But in this case, specifically what we're talking about with iAd View is the layer property is the DOM element on the page. So if you're a web developer and you're used to, you know, interacting directly with DOM elements and you want that level of control, all you need to do is get a reference to the iAd View and the layer property will be that DOM element.

So it's really, really handy. And something to keep in mind, too, is that we've set up a really handy syntax to get a reference to all the views on your page. So what you can do is you add a button or you add an image view to your Canvas page, select it in a Canvas, and if you open the inspector, you see a text field at the very top called outlet.

When you set that outlet, you automatically have access to that outlet in code using the syntax on the screen. This, that view controller, that outlet, and then the name of the view. And just as an extra convenience, when you open one of the code files we generate, you'll see in the comments of that code file the entire list of outlets that are available to you.

So that's really easy to do. And just as a side note, this isn't just a convenience, but it's also potentially much faster than sort of crawling your way through the DOM using, you know, looking for a particular ID or class. This is really the way to do it. So in addition to JavaScript, you have a lot of customization options using CSS.

and and The way you do this is you can bring in just a regular CSS file. It doesn't have to be special in any particular way. Drag a CSS file into the asset library as shown here on the screen. And the CSS file can contain one of two types of content. The first can just be custom styles. So, you know, you could create a custom class that has some custom CSS styles that you want.

And the message here is not that, you know, we offer a lot of editing opportunities in the inspector. So you can change the font, you can change fonts and colors and images. Chi Wai showed you some of that. He'll show you more. But we don't expose every single CSS property in inspectors, obviously, because there's so many. So if you have something really custom you want to do, again, if you're a magician, you can do that. You can add that to your CSS file and bring it in.

And in addition to styles, you can also, as I mentioned before, add custom keyframe animations. So here in the screenshot, you can see we brought in a CSS file and we've said, I'd like to use the keyframe set particle shift. And that does some really super fancy spaceship animation.

And the other major point here is that in addition to sort of bringing in a static file and setting a class on one of the objects on the page, you can also just update CSS properties live in JavaScript the same way you would do if you were doing kind of lower level JavaScript.

And again, you would use the, when you had a view reference, you just get access to the layer property that I mentioned before, which is the DOM element, and you would just set those CSS properties the way you would on any other DOM element. So it's really, really handy, really easy to use.

With that, I'm going to bring up our demo person extraordinaire, Chi Waileau, and he's going to show you how to customize your project. Hello again. I'm back to show you how to customize your iAd with your own JavaScript and CSS code. As you may notice, when Scott took the stage, I added a few pages to our project, and there are two new pages here. So there's a teaser page.

It's a promotion page Cupcake International want to show before the shop is open. The other page is called Launch. It's a buy a dozen get a dozen free page and we only want to show it after the shop is open. Back to this page we worked together. I added this new button called Gap Promotion.

Depending on the view date, we want to route the user to either the teaser page or the launch page. And we're going to write a little bit of JavaScript code to take care of that logic. To get started with coding, there's a Code button here. If I click on it, it will launch the code editor Scott showed you earlier.

On the left here, on this side, you will see the list of possible files you can edit. Under banner is the file that scope under banner that only apply to banner. Under ad unit is the one that apply to other content pages. Global.css is the CSS style sheet that got applied to all content pages.

Global.javascript is basically the same idea but applied just to JavaScript. We have a couple lines of code here. Open date here basically defined the open date of the cupcake shop. Right now it's set to be 2013. And current date basically defined the current view date of the ad.

Now that we have the valuable setup, let me go back to the application. And we want to set up the buttons such that on TouchUp Inside we could route to either the launch page or the teaser page. To do that, let me go to the event inspector. On TouchUp Inside, we want to choose X. to choose to execute some JavaScript.

And if I click on this arrow button here, it will take me back to the code editor. And on TouchUp Insight, we would like to execute this line of JavaScript code. The first part is basically-- the first part is the function that handled the page transition. And the second part basically handled the logic that switches between launch page or teaser page. That should get us set up already. And let me simulate and see how it works.

Since the open date is set to be sometime in 2013, clicking on the Get Promotion button should take me to the teaser page. And here it is. And let me test the other use case by setting the date to be maybe 2010, so that it's in the past. So it will guarantee to show the other page. Let me simulate it again.

So clicking here to show me the launch. So here's our launch page. So here's our JavaScript customization. Now I'm going to move on to show you how to customize your CSS. And again, so what we want to do here is to apply image texture to this title. First, let me go to the inspector. And under the property, we want to set something for the CSS costume so that we could use it in our CSS selector later.

And I'm going to just say cupcake title. And now I can go back to my co-editor. We can open up global.css. And this will be the CSS style we want to apply to the title. And it used to do the background image texture for me. And let me simulate and make sure it works.

And here it is. So that's it for my CSS customization. I'm going to bring Scott back, and he's going to talk about performance and optimization. Thank you. Okay, that was awesome. Thank you, Chi Waai. So as we're sort of advancing through our project, we're working on our iAd, so far we've got some of the basic concepts on the page, we've got some objects and some of the animations up and running, and then we've customized by adding some custom code, as Chi Waai showed you, to show a different page based on the current date, and then also customizing some of the CSS using a special CSS property.

And now we're at the point where we've got sort of the basic parts of the ad running, and we've got customization, and now we want to start looking at tuning performance and ultimately deploying the ad on the network. So the thing that you want the user to think when they're using the ad, and really subconsciously, is that you want them to feel like it's a very fluid user experience, that it's very fast, and it's a gratifying experience because they're not waiting for anything to draw on the screen or download.

And in order to do that, there are three main things to keep in mind. The first thing is memory consumption. You really want to minimize memory consumption. And we're going to talk about some of the ways that you can do that, but ultimately it comes down to how many views you have on the page and what their content is.

The second tier is drawing performance. So you really want to be conscious of the drawing performance. Again, because they're mobile devices, they don't have the same caliber of performance as a dedicated laptop or desktop device. So there's different performance characteristics. And in particular with drawing, what you really want to do is think about, what can I do to not draw? What can you do to avoid drawing altogether? Because the fastest drawing, of course, is the drawing you never do.

And then the third thing, in addition to memory and drawing performance, is fetching. And again, because iAds are network-connected content, and as the user proceeds through the ad, they're downloading more and more content, you want to keep in mind that every time you load new content onto a page, every time you arrive onto a page, there's an HTTP connection that goes out to the iAd server to download that content. And the more times you have to go back to the server and get something, the slower the performance is. We're going to look at some of the details of how to mitigate that.

But that might sound kind of intimidating. There's a lot of things to keep in mind. Those are potentially some pretty intimidating problems. But I have some really good news for you. We've worked really, really hard to solve the big problems for you. So out of the box, there are three things we handle for you that you don't have to worry about at all.

The first is that we minimize and concatenate all the scripts in the project. And the really awesome thing about this is that it's not just the stuff that we generate as part of making the project, as part of generating that code. But it's also anything you've brought in. So if you've added your own JavaScript code, you've brought in a custom game or something like that, we will concatenate and minimize all the scripts for you. You don't have to worry about it.

It's just completely off the table. The other thing we work really hard to do is make sure that all the images are preloaded appropriately by default for every page. So a really good example of this is, again, going back to the image gallery control, we make sure by the time the user arrives on the page that the first image is loaded.

The first image in that image gallery is already visible to avoid any kind of flicker or anything popping in. So we're really smart about realizing which things we need to preload appropriately if you're using the built-in object library. The third thing we do is we monitor which views are on the page. And we're really careful to set the display property to none for any view that is no longer needed. So this is great because it, again, reduces memory usage. And it also avoids redrawing that view when it's really not needed anymore.

So that dovetails nicely into your part of the equation. What do you have to think about in terms of performance tuning? Well, one really easy one is to keep in mind that when you're bringing in assets into a project, you've got assets from an artist or maybe you're working on assets, one of the things you should really keep in mind is that there's a hard limit on pixel size of an image.

And in this case, it's 2,000 pixels in either dimension. So 2,000 pixels high, 2,000 pixels wide. If it's bigger than that, you're actually going to exceed the limitations of OpenGL. And you'll get a tiling effect. It's not a very pleasant user experience. You want to work really, really hard to make sure you don't exceed this limit.

The other thing that's important to think about is, in this, you can see on the screenshot, we've got 24 cupcakes on the screen. And initially, it might seem, wow, it would be really flexible if each one of these is a separate image, each one of these is a separate cupcake, because then you don't have to worry about, you can manipulate them in animation, that sort of thing. But the thing you want to keep in mind is that if there are 24 cupcakes, you have to download 24 cupcakes.

And that, again, goes back to that fetch consideration, where you don't want to be grabbing a whole bunch of little images. So when you have an opportunity, such as in the screenshot, to combine them, that may be a really good decision. Now, there might be a little bit of a contradiction here between, well, don't make a really big image and don't have a bunch of little images, but it really is, there's a balancing act, and you want to do some performance tuning to figure out what's right for each particular page in your project.

And finally, remember how I mentioned that we're really careful to remove views from the page using display none when we're, you know, in the built-in object library when they're not needed anymore? If you're adding custom views to your page, you want to make sure to do the same thing. Again, the great thing about this is if you know a view is no longer needed and you can just kind of toss it off the page, it's not going to take any memory and there won't be any drawing implications for that view.

So at this point, we've, again, put together the essential parts of our project, added objects and animations. We've customized the JavaScript and added some custom CSS properties. And we've sort of moved into the performance tuning part of our project and addressed some of those performance concerns. And Chi Waai is going to show you a demo about that so you can get kind of a better grasp on it.

But following that, we're ready to launch our ad on the network. You know, this is really exciting because we get to see the payoff of the thing we've been working on. We get to push it out to millions and millions of iOS users. And it's really the exciting part of the, one of the most exciting parts of the project. exciting parts of the project.

But what do you have to do at this phase? Because we want to be really conscious of the user experience, we want to make sure that we follow all the steps to get a really great result on the server. So the six steps to keep in mind, they're pretty simple. The first is just to double check as a really rough cut.

In iAd Producer, you want to check the validations window to make sure there weren't any oversights such as maybe you accidentally added an image that's just a little too big or you're missing an object. We'll help you visualize those particular issues really easily. You just go to the window menu and choose project validation. And you can see if there are any sort of rough cut validations you want to take a look at.

And I cannot possibly overemphasize how important the second step is. This is the single most important item on this slide. As you're working on your project continually, but particularly right at the end when you're ready to deploy, you really, really want to do a ton of testing on an iOS device.

And again, I cannot understand how important it is to keep in mind that the performance characteristics are different, not just on the device itself, the memory and the drawing performance, but also you really want to make sure that the performance is great over 3G or 4G as well as Wi-Fi because you can have a much different experience depending on network latency and the availability of cell towers and that sort of thing. So this is really, really important. The third thing, just to sort of state the obvious probably, you need to have an IAD account so that you can upload your content to the IAD test server.

And once you've established that account and you've tested locally and you've checked all the validations, you can go ahead and upload the ad to the iAd Test Server. And you can do that right from within iAd Producer. Again, it's a full-cycle development tool, so we handle that right in the app.

And once you've done that, you've completed uploading the ad, we'll send you an email. And the email will contain a link to that ad on the test server. All you need to do is open that email on your mobile device, tap it, and just, again, make sure you have iAd Tester installed on that device.

Tap that URL, and we'll just load that ad up live right on your iOS device. So it will be the exact same experience as the user will have when they view the ad on the network. So, again, you're just testing to make sure this is going to be a really fluid user experience.

And I just want to quadruple emphasize here that not only are you testing the iOS device, you know, maybe on your Wi-Fi connection, but go out into the wild and make sure that out on a 3G connection or a 4G connection, you're getting the performance you expect because that's, again, really important for the user experience.

So to sort of give you the specifics and show you how this works in the final stages of your ad, I'm going to bring Chi Waai Lau back up. And he is going to show you performance and deployment. Right there. I'm back to show you how to benchmark your iAd and get ready for deployment. So at this point, our ad looked pretty solid. And it's time to measure how much memory is using and monitor the network traffic and make sure it's not like-- make sure it's optimized. To do that, let me simulate my IF first.

To measure the memory usage of this iAd, I could go to the Activity Monitor, which comes with all Mac OS X. And the process we would like to listen to is Ask Sheet. So under this column, with memory, it will give you an estimation how much memory the iAd is consuming. So right now it's around 67, which is good. So we want to keep it under 100 megabytes. Now I want to show you how to monitor the network traffic. Now let me go back to the app. Under Windows, there's a debugger option.

So it launched WebKit Inspector. It's the same inspector you see from Safari or WebKit Nightly. So for those who have done a lot of web development, this should be really familiar to you. And there's a network tab here. And it shows me the list of things you have downloaded for my iAd. But it only applied to the first page. Let me clear it.

and start recording by clicking here and if I go back to my ad, I will click the promotion button and it will open up the promotion page and I could see all the network traffic on that page. There's a lot of things being shown up here. Let me just filter it by images.

And currently there's 12 different images being downloaded for this particular page. And as Scott mentioned earlier, it spawned a lot of network requests, which could potentially be really bad for people willing to add over a mobile network. We can optimize it by compositing all these mini cupcakes into just one image. Let me go ahead and do that. First, I'm going to remove the individual images. And I already have the composite image ready. I'll just drag it in. So it used to look identical. Let me go back and simulate.

We don't want to look at that. Let me clear that and start recording. And go to the promotion page. Filter by image. And we reduce the number of network requests by compositing all the images into just one image. And we only have one request. So that means there's less overhead coming from downloading images. That's pretty good.

And now it's time for us to share the ad so that the campaign manager could take a look at it and we could test it over 3G or other environment, different devices. To do that, we can go to the export option. And there's a upload to iAd test server option. And it will ask you for your iAd account. And once you type that in, it will basically send you the ad. And then the iAd to Apple-owned test server. And it will send you an email in response. And the email looks like this.

It contains the link to your iAd. And if you open the link on your iPhone or iPad, it will basically show you the ad just as people look at the ad live. So that's it for deployment. I'm going to bring Scott back, and he's going to sum up our presentation. Thank you.

So here we are at the end of our little journey. We've moved through the entire process of creating our ad. We've added the content that we want to the ad, added animations to them, so all those results are really fantastic. Customized it with custom JavaScript and custom CSS. You saw how easy that was to do. Tuned the performance and ultimately uploaded the ad to the test service that we can test on an iOS device live.

So that's great. And I think you can probably see at this point that it really is very easy to use, very easy to use. It's very easy to just jump in there and try things out. And I bet all of you will want to go to developer.apple.com today and give it a try yourself.

So just a few last thoughts to leave you with. Like I said, just go ahead and download iAd Producer. If you have an iOS developer account, super easy, developer.apple.com. And built into the iAd Producer disk image are a bunch of sample projects. And it's pretty much the ones you saw here today, the Space Tours to Mars ad and a variant of the Cupcake ad. And those are really helpful because we've worked hard to hit a bunch of different areas of iAds. You can download those, see how they work, and apply those same concepts to your own ads.

And after you've had a chance to download iAd Producer and try it out, let us know what you think. You know, we're really interested in what is working well for you, what we should improve on, what we should, you know, work towards. And to do that, you can email our friend and colleague, Mark Malone. He's the iTechnologies Evangelist, mgm at apple.com. There's a whole bunch of documentation.

I've just highlighted one of them here. It's the iAd Producer help at help.apple.com slash iAd Producer. And there are iAd Forms and iAd Producer topics on the Apple Developer Forms. And that is it. Thank you very much for coming. I really appreciate it. And I hope you enjoy iAd Producer.