Introduction to iBooks Author Widget and iAd Rich Media Ad Development with iAd Producer 4 

Session 609 WWDC 2013

iAd Producer’s drag-and-drop interface makes it easy to deliver highly interactive iAd rich media ads, iBooks Author HTML5 widgets, and more. Discover how the refined environment for actions and objects, an expanded library of customizable interactive objects, integration of iAd Blueprints, and widget templates increase your efficiencies and creative possibilities.

[ Silence ]

Good morning.

Welcome. This is our introduction session to using iAd Producer to create content for iBooks Author Widgets and iAd rich media ads.

My name is Justin Voss.

I’m an engineer on the iAd Producer team.

And joining me later to give you some really great demos will be my co-worker Chris Shull who’s also an engineer on the iAd Producer team.

So here’s what we’re going to talk about.

Like any good super hero, iAd Producer has an origin story and we’ll share that with you first.

Then we’ll give you a quick tour of the features of the app so you can get an idea of what’s available to you.

Then we’ll dive deeper and we’ll show you how you can create interactive content without having to write a single line of code.

Then we’ll talk specifically about some features that are just for creating iBooks Author Widgets.

And finally, we’ll wrap up by talking about some features that are just for those of you who are creating iAd ads.

So let’s get started.

The first thing I want to talk about is where iAd Producer came from.

And I think some of you, especially those of you here that want to hear about iBooks, are probably asking yourselves, “Why am I going to talk about this thing called iAd Producer, what do iAds have to do with iBooks?”

It’s a really good question.

And to answer that question, we’ll go back to 2010 when iAd Producer was first released.

Now, iAd Producer was designed to be a great app for creating interactive rich media ads for iAd.

And the interesting thing about these ads is that they’re actually implemented with web-based tools.

So under the hood, these ads are actually bundles of HTML, JavaScript, and CSS.

And so by virtue of being a really great app for creating these ads, iAd Producer is actually a really great app for producing content for WebKit.

So we’ve got this app, it’s really great at producing content for WebKit.

And we looked around Apple and asked, “Are there any other platforms that could really benefit from having this kind of an app?”

And it turns out, the answer is yes.

So iBooks Author has a feature that allows you to embed custom, interactive widgets into your books and those widgets are built with web-based tools and they run inside WebKit.

You also might be familiar with iTunes LP and Extras.

These are interactive album liner notes and movie extras and they’re great way to experience your music and movies.

They’re built with web-based tools and they also run inside WebKit.

So we realized that if we could take iAd Producer and tweak it just a little bit, we could have one app that can produce content for all three of these platforms.

And with our latest release of iAd Producer, that’s exactly what we did.

So now, we can use iAd Producer to create these really great interactive widgets for iBooks.

You can see in the screenshot here on the left, I’ve got a widget that I’m working on iAd Producer and then on the right, I’m embedding that widget into my book using iBooks Author.

I can create iTunes LP and Extras.

You can see here in the screenshot on the left, I’m developing an Extra in iAd producer and then I’m running the Extra in iTunes on the right.

And of course, you can create ads for iAd.

You can see here, I’m designing a banner in iAd Producer there on the left, and then on the right, that banner is actually appearing on iOS device.

So we’ve got one app that can produce content for all three of these platforms.

Yeah, thanks, yeah.

Let’s get some applause.

It’s pretty cool, right[applause]?

Thank you.

OK, so that’s the back story behind iAd Producer.

Now, I’d like to give you a quick tour of the features so that you get an idea of, you know, what’s all in this app.

So when you first launch iAd Producer, you’ll see our project picker and this is where you can choose what kind of project you’re going to be working on and you can choose from one of our templates.

You can see at the top of the window, I’ve got this tab bar and that’s where I choose what kind of project I want to create, whether I want to create something for iAd, iTunes LP, iTunes Extras, or iBooks Author Widgets.

And below that, you can see some of our templates.

Our templates are starter projects that have a little bit of structure already in them so that your project will really get off on the right foot.

We’ve got templates for iAd like you can see here.

Here are some of our templates for iTunes LPs, some templates for Extras, and some templates for our widgets.

When you go to create your content in iAd Producer, you’ll turn to the Object Library to find a lot of really great prebuilt views and controls that you can bring right into your project, and we’ll talk a lot more about this in just a minute.

Also, while you’re creating your project, you’re going to bring in a lot of your own images and your own video files and audio files.

And to import and manage all those resources, you’ll use the Asset Library.

As you get more objects on your page, the Layer List can be a really helpful tool to help manage all of that.

You can quickly navigate to the object you’re looking for and you can rearrange how they’re stacked visually on the page.

This is a lot like the layer list you might find in an image editor like Photoshop.

When you add custom interactivity to your project, the Action List is where you can find all the actions that are applicable to the currently selected object.

And then to customize the objects you already have on your page, the Inspectors are where you can adjust all kinds of things like giving those objects names.

You can fine-tune their position on the page, and you could adjust a lot of their visual properties as well along with a lot of other things.

And finally, we have a powerful but easy to use animation system and this Action List sidebar is where you can control all of those.

You can create precisely timed groups of actions and animations and organize all of that here.

OK, so that’s a pretty brief tour of the major features of iAd Producer.

Let’s dive deeper and talk about how you can actually create the interactive content you’re looking for without having to write any custom code.

And it all starts with objects.

So this is the Object Library that I just showed you a few minutes ago.

It’s full of a lot of prebuilt views and controls that you can bring into your project, and they breakdown to a couple categories.

There’s a general category.

This includes all of the standard controls you might expect.

Those things like buttons and image views, labels, scroll views.

There’s a media category.

This is where you’ll find audio players and video players.

If we scroll down a little bit, we’ll see the other categories like the multi-cell category.

This category has objects that are collections of other views.

So we’ve got things like a cover flow view, we’ve got a carousel, panoramas, image galleries, a lot of really cool stuff in here.

And finally, there’s a dynamic category and these are objects that can be populated with content at runtime.

So to give you an example, there’s a drawing object in here where when the user is actually running your project, they can use their fingertip to draw something on the screen.

It’s pretty neat.

So now that you got your objects in your page, you want to start hooking some action or some, you know, interactivity up to those objects, and that will start with events.

Events are user interaction.

So an event might be the user tapping on a button or dragging a slider.

And by listening for and responding to these events, you can get a lot of the benefits of custom code without actually having to write any.

So let me give you a more concrete example of that.

You can see in my screenshot here, I’ve a got a button selected.

And I’ve got a zoomed in screenshot of our Inspector.

And specifically, we’re looking at the Events Inspector.

And this part that says, Activated.

Activated is the name of the event that we’re interested in here.

Activated is the event that happens when the user taps on or clicks on a button.

And in this particular case, I’ve set it up so that when this button is activated, we’re going to run the Go to Page action which will take the user to another page in the project.

And specifically, we want to go to a page called Lander Game.

And so that’s how easy it is to configure a custom action to be associated with this event.

You’re not limited to just one action.

If you want, you can also trigger an entire action list so you have multiple animations or multiple actions.

And if you wish, you can also provide some custom JavaScript code and when the event is triggered, we’ll run that code for you.

We’ve got a lot of great actions that you can choose from.

I want to highlight some of the interesting ones for you.

We already talked about the action that allows you to navigate between different pages within your project.

You can also control other objects that are on the page.

So this is really great if you have an image gallery and you want to control which image is the front most one in your gallery.

We can play or pause audio or video.

We can open URLs and we can prompt the user to compose content like writing a tweet or composing an email.

So there are a lot of things to choose from.

There’s a lot more than what we talked about just now.

We also have a powerful but easy to use animation system.

So this is how you can create all those fluid animations that your users expect from iOS and there’s a lot of different things that you can animate about all of the objects you have on your page.

So for example, you can animate its position, the opacity, the rotation, and the scale.

And those are just a few of the things you can animate.

There’s a lot more.

So as you create these animations or you want to have more than one action that starts as, you know, triggered by an event, you use action lists.

And these are precisely-timed groups of actions and animations and you can group them together so that some happen together or these happen in sequence.

You can mix actions and animations.

You’ve got a lot of really great options here.

So to give you an example, you can see the spaceship has this complex sequence of animations it does.

One really great use for these are page builds.

So the same way that in this Keynote presentation, all of these objects are animating on to the slide as it appears.

You can do basically the same thing in iAd Producer.

So you can have animations that happen as soon as the user visits the page.

And to give you a demo of how all these objects, actions, and animations come together, I’d like to invite Chris to give you a demo.


[ Applause ]

Thank you, Justin.

For my first demo today, I want to show you how you can build some really great, rich interactive content with iAd Producer.

Let’s say that you’re writing a book about animals and in your book, you want to have an interactive widget that has a cover flow of those animals.

Well, I have built just such a widget for today.

And let’s take a quick look at it and then together we’re going to build it.

I’ll use iAd Producer’s built-in previewing functionality.

And the first thing that you’re going to see is animating in that big cover flow filling up almost the entire widget and it has the interaction that you would expect from a widget.

The ability to swipe it, tap it to jump to a particular image.

And there’s also these two buttons in the bottom left and right hand corners to let me simply cycle through which image is focused in this cover flow one at a time, forward and backwards.

So this is where we’re heading.

I’m going to close this now and we’re going to build it from scratch.

I’m going to build this widget in four stages.

In the first stage, I’m going to add that cover flow to my widget and I’m going to populate it with images.

In the second stage, I’m going to provide some styling to my page.

I’m also going to add some buttons and style them as well.

In the third stage, I’m going to connect some actions to those buttons to make it so that the cover flow will cycle through like we just saw.

And in the fourth stage, I’m going to add a little bit of animation to my project.

So let’s get started.

This is what you see when you first launch iAd Producer.

We have those four categories up at the top, which project type we’re going to choose.

And today, we’re going to choose iBooks Author Widget.

Everything I’m about to show applies to all of these different kinds of projects but because we’re writing a book today, I’m going to go with a widget project.

We also have all these templates to choose from.

But I want to show just how easy it is to use iAd Producer to build content from scratch.

So I’m going to choose a blank template.

It’s already selected so I’m just going to down to the bottom right and choose Select.

This loads in a new iAd Producer project, completely blank, save for one page.

So I’m going to open up that page to start editing it just by double-clicking on it.

I want to get that cover flow onto my page and to do that, I’m going to open up my Object Library.

There’s a toolbar button for that on the left-hand side of the toolbar in the bottom.

Here, we see all those objects that Justin was talking about earlier.

We have our general objects, our media objects, our multi-cell objects, and our dynamic content objects.

Today, because my cover my widget features a cover flow, I’m going to add a cover flow to my page simply by dragging and dropping it where I want it.

This isn’t quite the size I want so what I’m going to do is I’m going resize it by dragging on one of the blue resizing handles.

You might be familiar with if you’ve used Keynote before, many other Mac apps.

Now, pay close attention here because we also have these great snapping guides.

Yellow one you see there in the center of the screen, it’s helping me make sure I get my content just the way I want it.

Extremely useful.

So now, I have it the size I want.

It’s time to get images into this cover flow.

Before I can do that though, I need to get the images into my project.

I’m going to open up our Asset Library panel by clicking on the Assets button on the toolbar and I’m then going to click Import in that panel.

I’m going to navigate to my photos.

And before I bring these photos in, I want to point out something.

For every image I have, for example, this butterfly image, I have a pair of assets.

I have my standard resolution JPEG and I have my retina resolution @2x JPEG.

It’s very important to have a naming scheme like this.

This is what iAd Producer is expecting.

And if you’ve done Cocoa development before for retina displays, this should be familiar to you.

So I’m going to select all these images that I’ve pre-created and choose to import them.

And at this point, you’ll notice that that pair of images is now a single listing in our Asset Library.

This is because from here on out, iAd Producer is going to take care of the retina versus standard resolution displays and images for you.

It’s going to make sure the right image ends up on the right display.

If you’ve done traditional web development before where you’ve had to deal with this yourself, this is going to be a huge time saver.

If you really want to make sure you have both resolution images, you can look up at the top of that Asset Library and you can see I have both my 1x and 2x versions of my image.

OK, enough about retina versus standard resolution.

Let’s get these images in my cover flow.

So I’m going to select all my images and drag and drop onto my cover flow.

Just like that, populated cover flow with all my images.

At this point, let’s take a second and see where we are in our project.

I’m going to use iAd Producer’s built-in Quick Preview functionality to get an interactive preview of my widget.

We do this with the Preview button in the center of the toolbar.

Here, I can interact with my widget and you’ll notice that that cover flow has not only the images we added to it but has all the interactivity that we would expect from a cover flow, the ability to swipe and tap.

Comes for free with the cover flow, you don’t have to do anything extra to get that.

All right, so I’ve added my cover flow to my page, that’s the first stage.

Let’s go on to the second stage and style my page, add some buttons, and style them as well.

I’m going to close Quick Preview by hitting the Close button in the top left.

And I’m going to deselect my cover flow so that I can style my page itself because I want to change its background to black.

So I’m just going to click away from my cover flow by clicking on the background of my page and open up the Inspector in the by using the toolbar button in the bottom right.

Here is where we can set all the settings about a particular object or because right now, we have nothing selected, the page itself.

So what I’m going do is I’m going to change the background of this page to black.

I’m going to open up the Background Inspector, switch from None to Color.

I’m just going to click on this color well and choose black.

There we go.

I think this is looking a lot better.

Let’s get those buttons on the page.

Just like I did before with my cover flow, I’m going to open up my Objects Library, scroll up to the top and drag a button onto the page.

This one is going to be my next button.

This button doesn’t quite fit in with the color scheme I’m going for with this page, so let’s change some of its styles.

You notice now that I have the button selected, the Inspector is the Buttons Inspector and I have all the options that I can change about that button.

So just going to go through and the first thing I’m going to do is I’m going to change the text to white and I’m also going to change the background, again to a color, and black.

I’m also going to tweak the border of this button.

I’m going to make the width of the border a little bit stronger.

I’m going to get rid of the radius and I’m also going to make its border white as well.

So here is how our button is going to look like when the user is just looking at this page normally, but as some of you may know, buttons have more than just one state.

They have multiple states.

So for example, when a user is actively tapping on a button and pressing down on it, we often see a visual feedback for that button so that user knows that they are correctly tapping on that button.

We call this the highlighted state.

So what I’m going to do now is I’m also going to change my highlighted state.

To do that, I’m going to switch from Normal to Highlighted in the Inspector.

We can see what that button is going to look like in the highlighted state.

And so I’m just going to quickly change the styles for that state to be something that’s going to give good visual feedback to my user.

So I’m going to switch to this from Gradient to Color again.

This time, I’m just going to make it blue instead of black.

And I’m also going to make sure that in the highlighted state, the border of my button is still white.

OK, now my button is still labeled Button and so the last thing I’m going to do to give this button the correct visual appearance is to relabel it.

I’m just going to double-click on the text and now that I’m in text editing mode, I can simply type Next, just like that.

So my button happens to be this next button, happens to be nearly identical to my previous button.

It just has a different label.

So I’m going to actually duplicate this button so that I don’t have to do all that work all over again to get those styles.

With the button selected, I’m just going to go up to Edit, duplicate, and there I have my duplicated button.

Move it over to where I want my previous button to be and just like I did before, to label my other button next, I’m going to double-click on the text and change it to Previous.

So this is at my second my stage.

I’ve gotten these buttons down and I’ve styled them.

We’ll take another moment and check in with Quick Preview to make sure everything is just working the way I want it to.

You can see my cover flow is now in that black background.

And while the buttons aren’t doing anything yet, they do have that visual feedback when I’m tapping on them.

So the user knows that they are actually tapping on the button.

OK, so at this point, I’m halfway through.

I’ve added my cover flow.

I’ve added my styles.

It’s time to actually have some custom interaction inside this widget so I’m going to add some actions to these buttons.

Close Quick Preview.

I’m going to select my previous button and now what I’m going to do is I’m going to open up the Actions Library in iAd Producer by using the button in the toolbar on the left.

Here, I see all of the actions that this button can trigger when someone taps on it or clicks on it.

What I’m going to use today is the Focus Cell action because this is the action that’s going to let me, when someone taps on this button, cycle through the cells of that cover flow.

With this selected, I have this plus button and I’m just going to click this and before I click it, I want you to be looking at the Inspector for the button because at the bottom of that Inspector when I click it, iAd Producer adds in that Events Inspector that Focus Cell action.

It’s automatically connected to my flow view and it’s, by default, set up to go on to the next cell.

I’m actually going to change this because this is my previous button.

So instead of going to the next cell, I’m going to the previous cell.

I’m just going to repeat that process with my next button so it also has that action associated with it.

So I’m going to select it.

Once again, I’m going to click on the plus button under focus cell.

iAd Producer adds that to Events and this time, I do have my next button here.

I do want it to go on to the next cell so there’s nothing else to do.

Let’s check in with Quick Preview again and make sure that I’ve correctly rigged those buttons to be just the way I want them.

Here, we have it and not only are we getting that visual feedback when I’m tapping on the buttons but just as we wanted, that cover flow is cycling through those cells one by one, forwards and backwards.

So that was the third stage.

For the fourth and final stage of building this widget, I’m going to add a little bit of animation.

Closing Quick Preview and what I want to do if you recall back to that widget I showed you earlier, I want that cover flow to animate in from the top into place.

So I’m going to select this cover flow.

I’m going to open up my Action Lists panel.

It’s done by clicking on the Action Lists button in the right-hand side of the toolbar.

You’ll notice two things here.

In the Actions Library, we now have a lot more options to choose from.

We have a bunch of animations and other actions that are, will change the visual appearance of things on the page.

Now on the other side, we have our blank page Appear Action List.

And when we populate this, this is going to be the series of animations and actions that get played back when the user first opens this page in their widget.

So in this case, because I want to have a slide in animation, I’m going to choose the slide animation.

I’m going to click that plus sign and that’s going to add it to my Page Appear Actions List.

You’re also going to see that iAd Producer is going to give you a little on-canvas preview of what that animation looks like.

I want this to be animating in from the top instead of the left as we just saw it have.

So I’m going to choose instead of in from the left in that slide Inspector, I’m going to switch it over to in from the top.

And even though we can see that on the canvas, I’m going to go one last time into Quick Preview just so that we can be dead certain that this is exactly the way we want our widget.

There we have it.

It’s sliding in from the top just like we saw in that original widget.

And to recap, I have all that great interaction that came for free with that cover flow, the swiping and the tapping.

And we also have those actions hooked up to those buttons to make it so that we can cycle through which image of the cover flow is focused one by one, forward and backwards.

Now, everything I’ve shown you up to this point has been applicable to all four project types we support, iAd projects, iTunes LPs, iTunes Extras, and of course, iBooks Author Widgets.

But because today, I am working on an iBooks Author Widget, I’d like to take just another moment and show you how to actually get this widget into your book.

So to do that, it’s very easy.

I’m just going to close Quick Preview.

I’m going to choose File, Export to Disk.

You can also choose Export to Disk Optimized when you’re doing your final production export, it gives you a slightly more compressed version of your widget.

But today, I’m just going to choose Export to Disk.

I’m going to call it Animals.wdgt, and I’m going to save it to my desktop and export it.

At this point, I can hide iAd Producer and I’m going to open up my book in iBooks Author.

[ Pause ]

I already have a place set out where I want to have this widget right here in the beginning of this section.

So all I’m going to do is with my exported widget on my desktop, simply going to drag and drop it into iBooks Author and just like that, I have added a custom interactive widget to my iBooks Author book.

Under the hood, it’s using HTML and JavaScript and CSS but you didn’t have to do anything to get these great features.

You don’t have to do any coding.

All you have to do is use the great objects, actions and animations in iAd Producer.

[ Applause ]

Thank you and with that, I’m going to hand it back to Justin.

Thanks, Chris, that was an awesome demo.

So there’s two things that Chris mentioned about that demo that I want to repeat because I think they are so cool.

The first thing is, is that all the functionality you just saw is all in HTML, JavaScript, and CSS.

That flow view that you saw is all HTML and CSS and 3D transforms.

It’s pretty cool.

I get to work on those stuff all day and I still get blown away by the stuff WebKit can do.

I think this is really neat.

The other thing that he pointed out is that all the things you just saw, all those objects, those events, our animation system, you can use all of that in all four of our project types.

So you can use that when you’re creating rich media ads, when you’re creating you’re iTunes LPs, your iTunes Extras, or your iBooks Author Widgets.

So it’s some really great stuff.

So, now let’s talk specifically about some things just for iBooks.

While you’re creating your widget, you’re going to want to preview it not only in the Quick Preview that we have in iAd Producer, but you’ll want to try it out on an actual iPad.

And to make that really easy for you, we’ve created an iPad app to help you with that.

It’s called iBooks Author Widget Tester and with just one click, it will install right on your iPad from iAd Producer and will upload your widget into the app and you can start playing around with your widget right on your iOS device.

So you can run on your actual iOS device.

But we also support the iOS Simulator.

So if you don’t have an iPad handy or you want to try it out on a version of iOS that’s not installed on your iPad, you can do that too.

And for those of you who are writing custom JavaScript or custom CSS in your projects, we also support the Web Inspector.

And this works both on your device and in a simulator so that you can debug your code and measure the performance of your project.

If this is something that you’re interested in, we actually have an advanced session about iAd Producer later today and we’ll go into this a lot more depth, and we’ll mention that at the end too.

So it’s a really great new iBook specific feature that we’ve got.

So now, I want to change gears again and tell you about some iAd specific features that we have.

We’ve got some objects that are just for iAds.

One of them is this WebGL object.

So you can actually take a real 3D model and you can embed it right in your ad and we’ve got a lot of interactivity built-in for you.

So you can swipe through it.

You can pinch and spread to zoom in and out.

This is really great especially if you’ve tried to do WebGL by scratch yourself, you know that you kind of need to be an OpenGL expert.

You don’t have to be with this.

We also support embedded maps.

And these are the same maps that you’ll find in the Maps app on iOS.

This is really great in your ad when you want to show the locations of a business for example.

We also have a lot of actions that are just for iAds.

So these are the things like you can prompt the user to compose a tweet using the standard Twitter compose view.

You can change the wallpaper on the device.

You can save a ring tone to their phone.

There’s a lot of really great things you can do in here.

There’s a lot and I don’t have time to mention them all.

But one of the really big features that we have just for iAd is this feature called iAd Blueprints.

iAd Blueprints are a new kind of iAd Producer project.

We’ve seen a lot of ads and, you know, there are some that are more successful than others and we’ve tried to learn about what kind of layouts and what kind of events and actions make for a really successful ad and apply those principles to these starter projects we have for you.

There’s hundreds of project to choose from.

We’ve got a picker here where you can narrow it down by just what you’re looking for.

When we open it up, it’s already prebuilt.

So we already have a lot of pages.

We’ve got objects on those pages with events and actions.

And when you’re ready to upload your ad to the iAd network, we can put you on a fast track to certification because we already know that these blueprints work really great.

All you have to do is fill out a streamlined version of our Inspector interface and bring in all of your own assets.

Every blueprint comes with a spec sheet that describes what kind of assets you’ll need, what file names they need to have, what sizes they need to be, what formats they need to be, and all of that.

And to show you just how easy blueprints are to use, I’d like to have Chris give you a demo.


Thanks again, Justin.

So for my last demo today, I’m going to show you how you can accelerate your ad development process with iAd Blueprints.

So again, when you launch iAd Producer, you get our Project Picker.

And if you choose iAd, that first option for the project type you’re going to choose, you have those four templates to choose from that are great jumping off points if you’re creating a an ad more from scratch.

But if you want to use an iAd Blueprint, you can open iAd Blueprints with this toolbar button down on the bottom left.

I’m going to click that now.

And this is going to show you the hundreds of iAd Blueprints that we have precreated for you to use.

Now today, I’m going to be making an ad for a fictional car company and I happen to already know what features I want to have in that ad.

So I’m going to filter this list of blueprints down to just those with the features I’m looking for.

I can do that simply by going through this filter section and ticking off the things I want.

So in my ad, I know I want to have some maps.

I also want to have a product page.

I know I’m going to have multiple videos in my ad.

So I’m going to tick that checkbox as well.

And I’m also going to have a calendar and a form.

This leaves me with two options to choose from and I know I’m going to have three videos so I’m going to choose that second option.

Just going to click on the image for that one, and this is going to let me see a little bit more information about this blueprint.

I can also see screenshots, sample pages filled with placeholder content so I can get a better feel for what this blueprint is going to be like.

It does seem to have all the things I’m looking for.

So at this point, I’m going to click on this blue button up in the top right, to let me use this iAd Blueprint.

[ Pause ]

When this loads in, you’re going to see the streamlined view of iAd Producer for blueprints.

You’re going to see that familiar on the left-hand side, Assets Library, and this is where we have those spec sheets that Justin was talking about earlier.

I can look at these spec sheets by selecting one and pressing the space bar to Quick Look it.

And I can also share it or save it to the desktop just by selecting them and dragging them out.

You also see underneath those spec sheets all the placeholder assets that I’m going to need to replace with my own for my car company.

In the middle, you see with all that placeholder content, all those pages already built up, already connected with actions and events under the hood and animations.

They’re going to make your ad look great but we still are going to have to get that the assets in there.

We’re going to get back to that.

And on the right-hand side, our streamlined Inspector for iAd Blueprints.

Here, I can put in the specific settings for my ad, project title, banner transition color, and I also see the setting for those features that I chose earlier when I was picking out the blueprint that I wanted to use.

I have my map settings, my form submission settings, and I also have my calendar event settings.

I’m going to fill this one out real quick with because I’m doing a car company, a test drive event and it’s going to be at 1 Infinite Loop.

And, of course, I’d fill out the Start Date and End Date with the correct dates for my test drive event.

But like I said, the key to an iAd Blueprint is creating that custom look and feel with your own assets.

So at this point, I’m going to use the Import button in the toolbar to bring in my own assets that I’ve already built per the spec sheet that I showed you earlier.

Just going to navigate to my assets.

I’m going to select them all and choose to import them.

And at this point, iAd Producer is going to re-render all those snapshots so you can see your pages with your new look and feel.

Let’s take a moment now that I have all those custom look and feel snapshots in my project to use Quick Preview.

Just like in my iBooks Author Widget from before, I can have a Quick Preview interactive of my ad.

And there I have, we have the option to choose play those three videos and I can also go to the other pages in my ad.

Here I can see information about my car.

It’s looking pretty good.

So I’m going to close Quick Preview.

But before I upload this to the iAd Test Server for certification, there’s one more step I need to take.

If you look in our Inspector, after I added those assets, I got this validation warning.

I’m getting one warning right now and to learn a little bit more about it, I’m just going to click on the error the warning badge there.

And if I take a look at these warnings, it looks like my product.png doesn’t have quite the right dimensions.

I’m going to have to recreate this in the correct dimensions.

It just so happens I’ve already done this so I’m going to import that corrected asset just by going back to Import.

I have my corrected product.png.

I’m going to import it and at this point, you’re going to notice that under Validation, I have no issues found.

So, we’re looking good.

The ad has that custom look and feel that we were going for.

We have no validation issues.

Let’s upload it to the iAd Test Server.

To do that, I’m just going to use that third button in the toolbar, the Upload button.

And at this point, you’d fill in the credentials that your account manager gave you.

Your ad would be uploaded to the iAd Test Server where it could be certified and then eventually reach the network.

And just like that, in only a couple of steps, I’ve created a rich, interactive ad that’s really going to get my brand across and get people to my test event.

And all I had to really do was plop in a couple of custom assets.

Thank you and I’m going to hand it back to Justin.

[ Applause ]

Thanks again, Chris.

All right, so you can see how streamlined the process is for using blueprints to create a really great ad.

We’ve done most of the work for you.

We’ve got these great prebuilt layouts but while you’re developing your blueprint, you might find that the blueprint is 99 percent of what you want but to get that last 1 percent, you really need to reorder those buttons or you need to move that label to different spot on the page.

Well to do that, you can do something called Enable Unrestricted Editing.

This is an option that you can choose up from the Menu Bar.

You just go to File, Enable Unrestricted Editing, and this will convert your blueprint project into a normal iAd Producer project where you can edit all the objects to your heart’s content and get exactly the layout you want.

So these are really great.

Another feature we have for those of you who were working on ads is an app called iAd Tester.

This is an iOS app that runs in your iPhone or iPad and allows you to test out ads right on your device.

So with one click, you can upload your ad to your device and you can try it out right inside of iOS.

This is also really great for testing the performance of your ad as it downloads over the cellular network which is an important consideration.

It also runs in the iOS Simulator so that if you don’t have a device handy or if you want to try some other versions of iOS, that’s really easy to do.

And it also supports the Web Inspector.

So that as you are measuring the performance of your ad or trying to debug issues with any of your custom code, you can do that easily with the Web Inspector.

And that works both on your iOS device and in the simulator.

So to recap the things we talked about today, iAd Producer isn’t just for creating ads anymore.

We’ve got one app that can produce great content for three platforms, rich media ads for iAd, interactive widgets for iBooks Author, and great interactive iTunes LPs and Extras.

Our events, actions, and animations make it really easy to do custom interactivity without needing to write a single line of custom code.

And our iAd Blueprints feature makes it even easier than before to create a really great ad.

So for more information about iAd Producer, you can email Mark Malone and his job title says iAd Technologies Evangelist, but he’d be happy to take your questions about iAd Producer and any of our project types.

If you have not already, you should download iAd Producer.

It’s a free download for any registered developer and the URL is here on screen from and I encourage you to download it, create a project, put a button on a page, and then preview it on a device.

And as you go through that work flow, I think that you’ll see just how easy it is to use and how many cool things you can do with it.

If you have any questions, we have a section on the Apple Developer Forums.

There’s an iAd Producer specific section where you can ask questions about all of our project types and that URL is on the slide here.

There’s some other really great sessions at WWDC that you might be interested in.

If you want to learn more about writing custom code in your projects or to get some really great tips and tricks on debugging and optimization, later this afternoon in this room, there’s going to be an advanced session about iAd Producer.

We will show you all of that.

And then on the other side of the process for iAd, if you’re an iOS developer and you’d like to put iAd banners into your app, there’s an iAd integration session that’s going to be tomorrow.

Thank you.


[ Silence ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US