609.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:00.506 --> 00:00:09.596 A:middle
[ Silence ]

00:00:10.096 --> 00:00:10.786 A:middle
>> Good morning.

00:00:11.526 --> 00:00:15.086 A:middle
Welcome. This is our
introduction session

00:00:15.266 --> 00:00:17.966 A:middle
to using iAd Producer
to create content

00:00:18.016 --> 00:00:21.276 A:middle
for iBooks Author Widgets
and iAd rich media ads.

00:00:22.536 --> 00:00:23.666 A:middle
My name is Justin Voss.

00:00:23.666 --> 00:00:25.506 A:middle
I'm an engineer on
the iAd Producer team.

00:00:26.156 --> 00:00:28.546 A:middle
And joining me later to give you
some really great demos will be

00:00:28.546 --> 00:00:30.756 A:middle
my co-worker Chris Shull
who's also an engineer

00:00:30.756 --> 00:00:31.626 A:middle
on the iAd Producer team.

00:00:32.206 --> 00:00:35.126 A:middle
So here's what we're
going to talk about.

00:00:35.126 --> 00:00:39.856 A:middle
Like any good super hero, iAd
Producer has an origin story

00:00:40.136 --> 00:00:41.386 A:middle
and we'll share that
with you first.

00:00:43.196 --> 00:00:45.766 A:middle
Then we'll give you a quick
tour of the features of the app

00:00:45.916 --> 00:00:49.066 A:middle
so you can get an idea of
what's available to you.

00:00:50.276 --> 00:00:52.936 A:middle
Then we'll dive deeper and we'll
show you how you can create

00:00:52.936 --> 00:00:54.816 A:middle
interactive content
without having

00:00:54.816 --> 00:00:56.706 A:middle
to write a single line of code.

00:00:58.116 --> 00:01:00.376 A:middle
Then we'll talk specifically
about some features

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:58.116 --> 00:01:00.376 A:middle
Then we'll talk specifically
about some features

00:01:00.376 --> 00:01:02.126 A:middle
that are just for creating
iBooks Author Widgets.

00:01:03.586 --> 00:01:05.926 A:middle
And finally, we'll wrap up by
talking about some features

00:01:05.926 --> 00:01:08.776 A:middle
that are just for those of
you who are creating iAd ads.

00:01:09.156 --> 00:01:11.466 A:middle
So let's get started.

00:01:11.776 --> 00:01:13.886 A:middle
The first thing I
want to talk about is

00:01:13.886 --> 00:01:15.216 A:middle
where iAd Producer came from.

00:01:15.816 --> 00:01:18.476 A:middle
And I think some of you,
especially those of you here

00:01:18.476 --> 00:01:21.626 A:middle
that want to hear about iBooks,
are probably asking yourselves,

00:01:21.626 --> 00:01:24.476 A:middle
"Why am I going to talk about
this thing called iAd Producer,

00:01:24.846 --> 00:01:27.016 A:middle
what do iAds have
to do with iBooks?"

00:01:27.316 --> 00:01:28.096 A:middle
It's a really good question.

00:01:28.426 --> 00:01:32.236 A:middle
And to answer that question,
we'll go back to 2010

00:01:32.236 --> 00:01:33.946 A:middle
when iAd Producer
was first released.

00:01:34.316 --> 00:01:37.866 A:middle
Now, iAd Producer was
designed to be a great app

00:01:38.276 --> 00:01:41.336 A:middle
for creating interactive
rich media ads for iAd.

00:01:41.886 --> 00:01:44.916 A:middle
And the interesting
thing about these ads is

00:01:44.916 --> 00:01:46.426 A:middle
that they're actually
implemented

00:01:46.526 --> 00:01:47.606 A:middle
with web-based tools.

00:01:47.976 --> 00:01:50.626 A:middle
So under the hood, these
ads are actually bundles

00:01:50.626 --> 00:01:53.376 A:middle
of HTML, JavaScript, and CSS.

00:01:55.056 --> 00:01:57.066 A:middle
And so by virtue of
being a really great app

00:01:57.156 --> 00:01:58.856 A:middle
for creating these ads,

00:01:59.006 --> 00:02:01.866 A:middle
iAd Producer is actually
a really great app

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:01:59.006 --> 00:02:01.866 A:middle
iAd Producer is actually
a really great app

00:02:02.176 --> 00:02:03.646 A:middle
for producing content
for WebKit.

00:02:04.146 --> 00:02:07.496 A:middle
So we've got this
app, it's really great

00:02:07.496 --> 00:02:08.705 A:middle
at producing content for WebKit.

00:02:09.485 --> 00:02:11.086 A:middle
And we looked around
Apple and asked,

00:02:11.326 --> 00:02:13.486 A:middle
"Are there any other platforms
that could really benefit

00:02:13.776 --> 00:02:15.646 A:middle
from having this
kind of an app?"

00:02:15.786 --> 00:02:17.316 A:middle
And it turns out,
the answer is yes.

00:02:17.926 --> 00:02:22.986 A:middle
So iBooks Author has a feature
that allows you to embed custom,

00:02:22.986 --> 00:02:24.706 A:middle
interactive widgets
into your books

00:02:25.286 --> 00:02:27.696 A:middle
and those widgets are
built with web-based tools

00:02:28.156 --> 00:02:29.886 A:middle
and they run inside WebKit.

00:02:30.916 --> 00:02:33.976 A:middle
You also might be familiar
with iTunes LP and Extras.

00:02:34.326 --> 00:02:37.676 A:middle
These are interactive album
liner notes and movie extras

00:02:37.866 --> 00:02:38.566 A:middle
and they're great way

00:02:38.566 --> 00:02:40.466 A:middle
to experience your
music and movies.

00:02:40.866 --> 00:02:42.446 A:middle
They're built with
web-based tools

00:02:42.666 --> 00:02:44.626 A:middle
and they also run inside WebKit.

00:02:45.316 --> 00:02:47.776 A:middle
So we realized that if we
could take iAd Producer

00:02:48.036 --> 00:02:50.976 A:middle
and tweak it just a little
bit, we could have one app

00:02:50.976 --> 00:02:53.646 A:middle
that can produce content for
all three of these platforms.

00:02:54.486 --> 00:02:56.186 A:middle
And with our latest
release of iAd Producer,

00:02:56.476 --> 00:02:59.136 A:middle
that's exactly what we did.

00:02:59.356 --> 00:03:00.806 A:middle
So now, we can use iAd Producer

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:59.356 --> 00:03:00.806 A:middle
So now, we can use iAd Producer

00:03:00.806 --> 00:03:03.356 A:middle
to create these really great
interactive widgets for iBooks.

00:03:03.866 --> 00:03:05.526 A:middle
You can see in the
screenshot here on the left,

00:03:05.526 --> 00:03:09.306 A:middle
I've got a widget that I'm
working on iAd Producer and then

00:03:09.306 --> 00:03:11.196 A:middle
on the right, I'm
embedding that widget

00:03:11.296 --> 00:03:12.936 A:middle
into my book using
iBooks Author.

00:03:13.486 --> 00:03:17.396 A:middle
I can create iTunes
LP and Extras.

00:03:17.396 --> 00:03:19.696 A:middle
You can see here in the
screenshot on the left,

00:03:19.696 --> 00:03:21.696 A:middle
I'm developing an
Extra in iAd producer

00:03:21.696 --> 00:03:24.146 A:middle
and then I'm running the
Extra in iTunes on the right.

00:03:24.146 --> 00:03:29.226 A:middle
And of course, you can
create ads for iAd.

00:03:29.226 --> 00:03:32.086 A:middle
You can see here, I'm designing
a banner in iAd Producer there

00:03:32.086 --> 00:03:33.686 A:middle
on the left, and
then on the right,

00:03:33.686 --> 00:03:35.986 A:middle
that banner is actually
appearing on iOS device.

00:03:36.496 --> 00:03:39.226 A:middle
So we've got one app
that can produce content

00:03:39.386 --> 00:03:40.586 A:middle
for all three of
these platforms.

00:03:40.826 --> 00:03:43.146 A:middle
Yeah, thanks, yeah.

00:03:43.146 --> 00:03:44.726 A:middle
Let's get some applause.

00:03:44.726 --> 00:03:45.586 A:middle
It's pretty cool,
right[applause]?

00:03:47.476 --> 00:03:47.846 A:middle
Thank you.

00:03:48.936 --> 00:03:51.826 A:middle
OK, so that's the back
story behind iAd Producer.

00:03:53.006 --> 00:03:54.876 A:middle
Now, I'd like to give you a
quick tour of the features

00:03:55.006 --> 00:03:58.986 A:middle
so that you get an idea of, you
know, what's all in this app.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:00.716 --> 00:04:02.556 A:middle
So when you first
launch iAd Producer,

00:04:02.966 --> 00:04:05.366 A:middle
you'll see our project
picker and this is

00:04:05.366 --> 00:04:07.336 A:middle
where you can choose what
kind of project you're going

00:04:07.336 --> 00:04:08.936 A:middle
to be working on
and you can choose

00:04:08.936 --> 00:04:10.606 A:middle
from one of our templates.

00:04:10.686 --> 00:04:12.786 A:middle
You can see at the top of the
window, I've got this tab bar

00:04:12.786 --> 00:04:15.026 A:middle
and that's where I choose
what kind of project I want

00:04:15.026 --> 00:04:17.706 A:middle
to create, whether I want
to create something for iAd,

00:04:17.976 --> 00:04:21.266 A:middle
iTunes LP, iTunes Extras,
or iBooks Author Widgets.

00:04:21.935 --> 00:04:25.226 A:middle
And below that, you can
see some of our templates.

00:04:26.216 --> 00:04:28.586 A:middle
Our templates are starter
projects that have a little bit

00:04:28.586 --> 00:04:29.796 A:middle
of structure already in them

00:04:29.976 --> 00:04:32.186 A:middle
so that your project will really
get off on the right foot.

00:04:32.856 --> 00:04:34.986 A:middle
We've got templates for
iAd like you can see here.

00:04:34.986 --> 00:04:39.456 A:middle
Here are some of our templates
for iTunes LPs, some templates

00:04:39.456 --> 00:04:46.006 A:middle
for Extras, and some
templates for our widgets.

00:04:46.006 --> 00:04:47.936 A:middle
When you go to create your
content in iAd Producer,

00:04:48.916 --> 00:04:50.576 A:middle
you'll turn to the Object
Library to find a lot

00:04:50.576 --> 00:04:53.026 A:middle
of really great prebuilt
views and controls

00:04:53.026 --> 00:04:54.906 A:middle
that you can bring
right into your project,

00:04:55.126 --> 00:05:00.106 A:middle
and we'll talk a lot more
about this in just a minute.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:55.126 --> 00:05:00.106 A:middle
and we'll talk a lot more
about this in just a minute.

00:05:00.196 --> 00:05:01.996 A:middle
Also, while you're creating your
project, you're going to bring

00:05:01.996 --> 00:05:02.996 A:middle
in a lot of your own images

00:05:02.996 --> 00:05:05.376 A:middle
and your own video
files and audio files.

00:05:05.766 --> 00:05:08.056 A:middle
And to import and manage
all those resources,

00:05:08.246 --> 00:05:09.326 A:middle
you'll use the Asset Library.

00:05:09.826 --> 00:05:14.266 A:middle
As you get more objects
on your page,

00:05:14.656 --> 00:05:16.336 A:middle
the Layer List can be
a really helpful tool

00:05:16.336 --> 00:05:17.606 A:middle
to help manage all of that.

00:05:18.126 --> 00:05:20.306 A:middle
You can quickly navigate to
the object you're looking for

00:05:20.546 --> 00:05:22.466 A:middle
and you can rearrange how
they're stacked visually

00:05:22.466 --> 00:05:23.106 A:middle
on the page.

00:05:23.546 --> 00:05:25.036 A:middle
This is a lot like the
layer list you might find

00:05:25.036 --> 00:05:26.466 A:middle
in an image editor
like Photoshop.

00:05:26.466 --> 00:05:31.826 A:middle
When you add custom
interactivity to your project,

00:05:32.116 --> 00:05:34.716 A:middle
the Action List is where
you can find all the actions

00:05:34.716 --> 00:05:36.646 A:middle
that are applicable to the
currently selected object.

00:05:37.096 --> 00:05:41.256 A:middle
And then to customize the
objects you already have

00:05:41.256 --> 00:05:44.276 A:middle
on your page, the Inspectors are
where you can adjust all kinds

00:05:44.276 --> 00:05:46.176 A:middle
of things like giving
those objects names.

00:05:46.646 --> 00:05:48.536 A:middle
You can fine-tune their
position on the page,

00:05:48.746 --> 00:05:51.276 A:middle
and you could adjust a lot
of their visual properties

00:05:51.276 --> 00:05:52.856 A:middle
as well along with a
lot of other things.

00:05:53.276 --> 00:06:00.096 A:middle
And finally, we have a powerful
but easy to use animation system

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:53.276 --> 00:06:00.096 A:middle
And finally, we have a powerful
but easy to use animation system

00:06:00.536 --> 00:06:02.316 A:middle
and this Action List sidebar is

00:06:02.316 --> 00:06:03.886 A:middle
where you can control
all of those.

00:06:04.616 --> 00:06:08.036 A:middle
You can create precisely timed
groups of actions and animations

00:06:08.036 --> 00:06:09.026 A:middle
and organize all of that here.

00:06:09.026 --> 00:06:13.506 A:middle
OK, so that's a pretty
brief tour

00:06:13.736 --> 00:06:15.456 A:middle
of the major features
of iAd Producer.

00:06:15.946 --> 00:06:17.356 A:middle
Let's dive deeper and talk

00:06:17.356 --> 00:06:20.116 A:middle
about how you can actually
create the interactive content

00:06:20.116 --> 00:06:23.076 A:middle
you're looking for without
having to write any custom code.

00:06:23.706 --> 00:06:26.276 A:middle
And it all starts with objects.

00:06:27.436 --> 00:06:28.546 A:middle
So this is the Object Library

00:06:28.546 --> 00:06:29.886 A:middle
that I just showed
you a few minutes ago.

00:06:30.476 --> 00:06:34.216 A:middle
It's full of a lot of
prebuilt views and controls

00:06:34.216 --> 00:06:37.036 A:middle
that you can bring into your
project, and they breakdown

00:06:37.036 --> 00:06:38.116 A:middle
to a couple categories.

00:06:38.586 --> 00:06:40.796 A:middle
There's a general category.

00:06:41.296 --> 00:06:42.236 A:middle
This includes all

00:06:42.236 --> 00:06:43.636 A:middle
of the standard controls
you might expect.

00:06:43.636 --> 00:06:44.576 A:middle
Those things like buttons

00:06:44.576 --> 00:06:46.616 A:middle
and image views,
labels, scroll views.

00:06:47.156 --> 00:06:49.716 A:middle
There's a media category.

00:06:49.846 --> 00:06:52.386 A:middle
This is where you'll find audio
players and video players.

00:06:52.906 --> 00:06:55.936 A:middle
If we scroll down a little bit,
we'll see the other categories

00:06:56.446 --> 00:06:57.876 A:middle
like the multi-cell category.

00:06:58.666 --> 00:07:01.666 A:middle
This category has objects that
are collections of other views.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:58.666 --> 00:07:01.666 A:middle
This category has objects that
are collections of other views.

00:07:02.026 --> 00:07:05.556 A:middle
So we've got things like a cover
flow view, we've got a carousel,

00:07:05.766 --> 00:07:07.516 A:middle
panoramas, image galleries,

00:07:07.516 --> 00:07:08.766 A:middle
a lot of really cool
stuff in here.

00:07:09.276 --> 00:07:14.516 A:middle
And finally, there's a dynamic
category and these are objects

00:07:14.546 --> 00:07:16.986 A:middle
that can be populated
with content at runtime.

00:07:17.336 --> 00:07:20.416 A:middle
So to give you an example,
there's a drawing object in here

00:07:20.636 --> 00:07:22.876 A:middle
where when the user is
actually running your project,

00:07:22.876 --> 00:07:24.906 A:middle
they can use their fingertip to
draw something on the screen.

00:07:25.226 --> 00:07:26.426 A:middle
It's pretty neat.

00:07:29.476 --> 00:07:31.516 A:middle
So now that you got your
objects in your page,

00:07:31.516 --> 00:07:33.876 A:middle
you want to start hooking
some action or some, you know,

00:07:33.876 --> 00:07:35.536 A:middle
interactivity up
to those objects,

00:07:35.866 --> 00:07:37.896 A:middle
and that will start with events.

00:07:38.586 --> 00:07:39.966 A:middle
Events are user interaction.

00:07:40.066 --> 00:07:41.806 A:middle
So an event might
be the user tapping

00:07:41.806 --> 00:07:44.036 A:middle
on a button or dragging
a slider.

00:07:45.326 --> 00:07:49.246 A:middle
And by listening for and
responding to these events,

00:07:49.736 --> 00:07:52.066 A:middle
you can get a lot of the
benefits of custom code

00:07:52.256 --> 00:07:53.916 A:middle
without actually
having to write any.

00:07:54.806 --> 00:07:57.876 A:middle
So let me give you a more
concrete example of that.

00:07:57.876 --> 00:07:59.226 A:middle
You can see in my
screenshot here,

00:07:59.556 --> 00:08:00.646 A:middle
I've a got a button selected.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:59.556 --> 00:08:00.646 A:middle
I've a got a button selected.

00:08:01.796 --> 00:08:04.766 A:middle
And I've got a zoomed in
screenshot of our Inspector.

00:08:05.266 --> 00:08:07.506 A:middle
And specifically, we're
looking at the Events Inspector.

00:08:08.456 --> 00:08:10.506 A:middle
And this part that
says, Activated.

00:08:11.606 --> 00:08:13.326 A:middle
Activated is the
name of the event

00:08:13.326 --> 00:08:14.316 A:middle
that we're interested in here.

00:08:14.556 --> 00:08:16.736 A:middle
Activated is the event that
happens when the user taps on

00:08:16.736 --> 00:08:17.666 A:middle
or clicks on a button.

00:08:18.576 --> 00:08:20.776 A:middle
And in this particular
case, I've set it up so

00:08:20.776 --> 00:08:22.506 A:middle
that when this button
is activated,

00:08:22.506 --> 00:08:25.006 A:middle
we're going to run
the Go to Page action

00:08:25.046 --> 00:08:27.446 A:middle
which will take the user to
another page in the project.

00:08:27.446 --> 00:08:30.616 A:middle
And specifically, we want to go
to a page called Lander Game.

00:08:31.156 --> 00:08:34.346 A:middle
And so that's how easy it is
to configure a custom action

00:08:34.706 --> 00:08:37.916 A:middle
to be associated
with this event.

00:08:37.916 --> 00:08:39.576 A:middle
You're not limited
to just one action.

00:08:39.956 --> 00:08:43.316 A:middle
If you want, you can also
trigger an entire action list

00:08:43.316 --> 00:08:45.796 A:middle
so you have multiple
animations or multiple actions.

00:08:46.296 --> 00:08:50.446 A:middle
And if you wish, you can also
provide some custom JavaScript

00:08:50.446 --> 00:08:52.066 A:middle
code and when the
event is triggered,

00:08:52.066 --> 00:08:55.936 A:middle
we'll run that code for you.

00:08:55.936 --> 00:08:58.156 A:middle
We've got a lot of great actions
that you can choose from.

00:08:58.346 --> 00:09:00.426 A:middle
I want to highlight some of
the interesting ones for you.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:58.346 --> 00:09:00.426 A:middle
I want to highlight some of
the interesting ones for you.

00:09:01.116 --> 00:09:03.046 A:middle
We already talked about
the action that allows you

00:09:03.046 --> 00:09:05.536 A:middle
to navigate between different
pages within your project.

00:09:05.976 --> 00:09:10.436 A:middle
You can also control other
objects that are on the page.

00:09:10.436 --> 00:09:12.396 A:middle
So this is really great if
you have an image gallery

00:09:12.396 --> 00:09:13.536 A:middle
and you want to control

00:09:13.536 --> 00:09:15.446 A:middle
which image is the front
most one in your gallery.

00:09:15.976 --> 00:09:20.116 A:middle
We can play or pause
audio or video.

00:09:20.636 --> 00:09:26.386 A:middle
We can open URLs and
we can prompt the user

00:09:26.386 --> 00:09:29.196 A:middle
to compose content like writing
a tweet or composing an email.

00:09:29.196 --> 00:09:30.686 A:middle
So there are a lot of
things to choose from.

00:09:30.686 --> 00:09:36.306 A:middle
There's a lot more than what
we talked about just now.

00:09:36.546 --> 00:09:39.426 A:middle
We also have a powerful but
easy to use animation system.

00:09:39.746 --> 00:09:42.716 A:middle
So this is how you can create
all those fluid animations

00:09:42.716 --> 00:09:45.316 A:middle
that your users expect
from iOS and there's a lot

00:09:45.316 --> 00:09:47.066 A:middle
of different things that
you can animate about all

00:09:47.066 --> 00:09:48.366 A:middle
of the objects you
have on your page.

00:09:48.806 --> 00:09:55.426 A:middle
So for example, you can animate
its position, the opacity,

00:09:57.496 --> 00:10:01.136 A:middle
the rotation, and the scale.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:09:57.496 --> 00:10:01.136 A:middle
the rotation, and the scale.

00:10:01.666 --> 00:10:04.786 A:middle
And those are just a few of
the things you can animate.

00:10:04.786 --> 00:10:07.996 A:middle
There's a lot more.

00:10:08.396 --> 00:10:11.256 A:middle
So as you create these
animations or you want

00:10:11.256 --> 00:10:14.346 A:middle
to have more than one action
that starts as, you know,

00:10:14.676 --> 00:10:17.086 A:middle
triggered by an event,
you use action lists.

00:10:17.316 --> 00:10:20.936 A:middle
And these are precisely-timed
groups of actions and animations

00:10:21.236 --> 00:10:23.556 A:middle
and you can group them together
so that some happen together

00:10:23.556 --> 00:10:24.666 A:middle
or these happen in sequence.

00:10:25.086 --> 00:10:27.036 A:middle
You can mix actions
and animations.

00:10:27.106 --> 00:10:28.556 A:middle
You've got a lot of
really great options here.

00:10:29.986 --> 00:10:30.766 A:middle
So to give you an example,

00:10:30.766 --> 00:10:33.666 A:middle
you can see the spaceship
has this complex sequence

00:10:33.666 --> 00:10:36.916 A:middle
of animations it does.

00:10:37.096 --> 00:10:39.026 A:middle
One really great use for
these are page builds.

00:10:39.226 --> 00:10:41.306 A:middle
So the same way that in
this Keynote presentation,

00:10:41.306 --> 00:10:42.876 A:middle
all of these objects
are animating

00:10:42.876 --> 00:10:44.436 A:middle
on to the slide as it appears.

00:10:44.706 --> 00:10:46.726 A:middle
You can do basically the
same thing in iAd Producer.

00:10:46.986 --> 00:10:48.986 A:middle
So you can have animations
that happen as soon

00:10:48.986 --> 00:10:50.126 A:middle
as the user visits the page.

00:10:50.636 --> 00:10:54.796 A:middle
And to give you a demo of how
all these objects, actions,

00:10:54.796 --> 00:10:56.096 A:middle
and animations come together,

00:10:56.326 --> 00:10:58.036 A:middle
I'd like to invite Chris
to give you a demo.

00:10:58.226 --> 00:10:58.516 A:middle
Chris?

00:10:59.016 --> 00:11:03.636 A:middle
[ Applause ]

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:59.016 --> 00:11:03.636 A:middle
[ Applause ]

00:11:04.136 --> 00:11:04.796 A:middle
>> Thank you, Justin.

00:11:05.216 --> 00:11:07.316 A:middle
For my first demo today,

00:11:07.456 --> 00:11:09.466 A:middle
I want to show you how you
can build some really great,

00:11:09.706 --> 00:11:12.066 A:middle
rich interactive content
with iAd Producer.

00:11:13.426 --> 00:11:16.416 A:middle
Let's say that you're
writing a book about animals

00:11:16.766 --> 00:11:20.066 A:middle
and in your book, you want
to have an interactive widget

00:11:20.296 --> 00:11:22.746 A:middle
that has a cover flow
of those animals.

00:11:24.006 --> 00:11:27.266 A:middle
Well, I have built just
such a widget for today.

00:11:27.266 --> 00:11:29.646 A:middle
And let's take a
quick look at it

00:11:29.706 --> 00:11:31.096 A:middle
and then together we're
going to build it.

00:11:31.776 --> 00:11:35.246 A:middle
I'll use iAd Producer's built-in
previewing functionality.

00:11:36.616 --> 00:11:39.766 A:middle
And the first thing that you're
going to see is animating

00:11:40.236 --> 00:11:43.886 A:middle
in that big cover flow filling
up almost the entire widget

00:11:44.736 --> 00:11:48.426 A:middle
and it has the interaction that
you would expect from a widget.

00:11:48.426 --> 00:11:54.226 A:middle
The ability to swipe it, tap it
to jump to a particular image.

00:11:54.726 --> 00:11:57.946 A:middle
And there's also these two
buttons in the bottom left

00:11:57.946 --> 00:12:01.006 A:middle
and right hand corners
to let me simply cycle

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:11:57.946 --> 00:12:01.006 A:middle
and right hand corners
to let me simply cycle

00:12:01.006 --> 00:12:05.036 A:middle
through which image is
focused in this cover flow one

00:12:05.036 --> 00:12:07.446 A:middle
at a time, forward
and backwards.

00:12:07.976 --> 00:12:10.286 A:middle
So this is where we're heading.

00:12:10.826 --> 00:12:12.296 A:middle
I'm going to close this
now and we're going

00:12:12.296 --> 00:12:13.166 A:middle
to build it from scratch.

00:12:18.036 --> 00:12:20.946 A:middle
I'm going to build this
widget in four stages.

00:12:21.886 --> 00:12:25.536 A:middle
In the first stage, I'm going to
add that cover flow to my widget

00:12:26.026 --> 00:12:27.666 A:middle
and I'm going to
populate it with images.

00:12:28.196 --> 00:12:31.016 A:middle
In the second stage, I'm going

00:12:31.016 --> 00:12:33.036 A:middle
to provide some styling
to my page.

00:12:33.506 --> 00:12:36.156 A:middle
I'm also going to add some
buttons and style them as well.

00:12:37.536 --> 00:12:40.536 A:middle
In the third stage, I'm
going to connect some actions

00:12:40.536 --> 00:12:44.526 A:middle
to those buttons to make it so
that the cover flow will cycle

00:12:44.526 --> 00:12:45.896 A:middle
through like we just saw.

00:12:46.366 --> 00:12:49.456 A:middle
And in the fourth stage, I'm
going to add a little bit

00:12:49.456 --> 00:12:50.656 A:middle
of animation to my project.

00:12:53.436 --> 00:12:54.536 A:middle
So let's get started.

00:12:56.366 --> 00:12:58.546 A:middle
This is what you see when you
first launch iAd Producer.

00:12:58.796 --> 00:13:01.166 A:middle
We have those four
categories up at the top,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:58.796 --> 00:13:01.166 A:middle
We have those four
categories up at the top,

00:13:01.786 --> 00:13:03.326 A:middle
which project type
we're going to choose.

00:13:04.146 --> 00:13:06.946 A:middle
And today, we're going to
choose iBooks Author Widget.

00:13:08.176 --> 00:13:10.526 A:middle
Everything I'm about
to show applies to all

00:13:10.526 --> 00:13:12.356 A:middle
of these different
kinds of projects

00:13:12.856 --> 00:13:15.936 A:middle
but because we're writing a
book today, I'm going to go

00:13:15.936 --> 00:13:17.076 A:middle
with a widget project.

00:13:17.716 --> 00:13:20.246 A:middle
We also have all these
templates to choose from.

00:13:20.856 --> 00:13:24.246 A:middle
But I want to show just how
easy it is to use iAd Producer

00:13:24.246 --> 00:13:25.886 A:middle
to build content from scratch.

00:13:25.886 --> 00:13:27.896 A:middle
So I'm going to choose
a blank template.

00:13:29.206 --> 00:13:31.586 A:middle
It's already selected so
I'm just going to down

00:13:31.586 --> 00:13:33.136 A:middle
to the bottom right
and choose Select.

00:13:35.336 --> 00:13:37.996 A:middle
This loads in a new
iAd Producer project,

00:13:38.216 --> 00:13:40.386 A:middle
completely blank,
save for one page.

00:13:40.386 --> 00:13:43.896 A:middle
So I'm going to open up that
page to start editing it just

00:13:43.896 --> 00:13:45.386 A:middle
by double-clicking on it.

00:13:47.416 --> 00:13:50.556 A:middle
I want to get that cover flow
onto my page and to do that,

00:13:50.556 --> 00:13:52.376 A:middle
I'm going to open up
my Object Library.

00:13:53.236 --> 00:13:56.226 A:middle
There's a toolbar button for
that on the left-hand side

00:13:56.596 --> 00:13:57.636 A:middle
of the toolbar in the bottom.

00:13:58.226 --> 00:14:01.046 A:middle
Here, we see all those objects

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:58.226 --> 00:14:01.046 A:middle
Here, we see all those objects

00:14:01.146 --> 00:14:02.816 A:middle
that Justin was talking
about earlier.

00:14:03.216 --> 00:14:06.976 A:middle
We have our general
objects, our media objects,

00:14:07.066 --> 00:14:13.626 A:middle
our multi-cell objects, and
our dynamic content objects.

00:14:14.646 --> 00:14:19.066 A:middle
Today, because my cover-- my
widget features a cover flow,

00:14:19.296 --> 00:14:23.296 A:middle
I'm going to add a cover flow
to my page simply by dragging

00:14:23.296 --> 00:14:25.366 A:middle
and dropping it where I want it.

00:14:26.616 --> 00:14:29.226 A:middle
This isn't quite the size
I want so what I'm going

00:14:29.226 --> 00:14:31.596 A:middle
to do is I'm going resize
it by dragging on one

00:14:31.596 --> 00:14:33.546 A:middle
of the blue resizing handles.

00:14:33.956 --> 00:14:36.936 A:middle
You might be familiar with if
you've used Keynote before,

00:14:37.706 --> 00:14:38.846 A:middle
many other Mac apps.

00:14:39.406 --> 00:14:42.046 A:middle
Now, pay close attention here

00:14:42.046 --> 00:14:45.546 A:middle
because we also have these
great snapping guides.

00:14:46.556 --> 00:14:48.646 A:middle
Yellow one you see there in
the center of the screen,

00:14:48.826 --> 00:14:51.966 A:middle
it's helping me make sure I
get my content just the way I

00:14:51.966 --> 00:14:52.346 A:middle
want it.

00:14:52.866 --> 00:14:53.716 A:middle
Extremely useful.

00:14:54.266 --> 00:14:57.626 A:middle
So now, I have it
the size I want.

00:14:58.306 --> 00:15:01.016 A:middle
It's time to get images
into this cover flow.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:58.306 --> 00:15:01.016 A:middle
It's time to get images
into this cover flow.

00:15:01.696 --> 00:15:03.046 A:middle
Before I can do that though,

00:15:03.046 --> 00:15:04.946 A:middle
I need to get the
images into my project.

00:15:05.436 --> 00:15:09.656 A:middle
I'm going to open up our Asset
Library panel by clicking

00:15:09.656 --> 00:15:13.426 A:middle
on the Assets button on the
toolbar and I'm then going

00:15:13.426 --> 00:15:15.286 A:middle
to click Import in that panel.

00:15:15.856 --> 00:15:18.606 A:middle
I'm going to navigate
to my photos.

00:15:19.526 --> 00:15:21.756 A:middle
And before I bring
these photos in,

00:15:22.126 --> 00:15:24.986 A:middle
I want to point out something.

00:15:24.986 --> 00:15:28.546 A:middle
For every image I have, for
example, this butterfly image,

00:15:28.666 --> 00:15:30.236 A:middle
I have a pair of assets.

00:15:30.686 --> 00:15:32.516 A:middle
I have my standard
resolution JPEG

00:15:32.886 --> 00:15:36.746 A:middle
and I have my retina
resolution @2x JPEG.

00:15:37.346 --> 00:15:39.716 A:middle
It's very important to have
a naming scheme like this.

00:15:39.716 --> 00:15:41.246 A:middle
This is what iAd
Producer is expecting.

00:15:41.706 --> 00:15:43.976 A:middle
And if you've done
Cocoa development before

00:15:44.116 --> 00:15:46.466 A:middle
for retina displays, this
should be familiar to you.

00:15:46.466 --> 00:15:51.606 A:middle
So I'm going to select all these
images that I've pre-created

00:15:52.516 --> 00:15:53.906 A:middle
and choose to import them.

00:15:54.446 --> 00:15:58.086 A:middle
And at this point, you'll
notice that that pair

00:15:58.086 --> 00:16:02.536 A:middle
of images is now a single
listing in our Asset Library.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:15:58.086 --> 00:16:02.536 A:middle
of images is now a single
listing in our Asset Library.

00:16:03.376 --> 00:16:06.056 A:middle
This is because from here on
out, iAd Producer is going

00:16:06.056 --> 00:16:08.116 A:middle
to take care of the retina

00:16:08.186 --> 00:16:10.766 A:middle
versus standard resolution
displays and images for you.

00:16:10.856 --> 00:16:13.176 A:middle
It's going to make sure
the right image ends

00:16:13.176 --> 00:16:14.136 A:middle
up on the right display.

00:16:14.646 --> 00:16:16.686 A:middle
If you've done traditional
web development before

00:16:16.686 --> 00:16:18.526 A:middle
where you've had to deal with
this yourself, this is going

00:16:18.526 --> 00:16:19.846 A:middle
to be a huge time saver.

00:16:20.636 --> 00:16:24.236 A:middle
If you really want to make sure
you have both resolution images,

00:16:24.776 --> 00:16:27.146 A:middle
you can look up at the
top of that Asset Library

00:16:27.356 --> 00:16:31.356 A:middle
and you can see I have both my
1x and 2x versions of my image.

00:16:31.776 --> 00:16:35.806 A:middle
OK, enough about retina
versus standard resolution.

00:16:36.316 --> 00:16:39.146 A:middle
Let's get these images
in my cover flow.

00:16:39.146 --> 00:16:42.786 A:middle
So I'm going to select
all my images and drag

00:16:42.786 --> 00:16:46.046 A:middle
and drop onto my cover flow.

00:16:46.246 --> 00:16:49.986 A:middle
Just like that, populated
cover flow with all my images.

00:16:50.516 --> 00:16:56.026 A:middle
At this point, let's
take a second and see

00:16:56.026 --> 00:16:57.066 A:middle
where we are in our project.

00:16:57.066 --> 00:17:00.226 A:middle
I'm going to use iAd Producer's
built-in Quick Preview

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:57.066 --> 00:17:00.226 A:middle
I'm going to use iAd Producer's
built-in Quick Preview

00:17:00.226 --> 00:17:02.746 A:middle
functionality to get
an interactive preview

00:17:02.746 --> 00:17:03.566 A:middle
of my widget.

00:17:03.996 --> 00:17:06.386 A:middle
We do this with the
Preview button

00:17:06.566 --> 00:17:10.925 A:middle
in the center of the toolbar.

00:17:10.925 --> 00:17:13.626 A:middle
Here, I can interact with
my widget and you'll notice

00:17:13.626 --> 00:17:17.656 A:middle
that that cover flow has not
only the images we added to it

00:17:18.156 --> 00:17:21.316 A:middle
but has all the interactivity
that we would expect

00:17:21.465 --> 00:17:25.736 A:middle
from a cover flow, the
ability to swipe and tap.

00:17:25.876 --> 00:17:28.306 A:middle
Comes for free with the
cover flow, you don't have

00:17:28.306 --> 00:17:30.166 A:middle
to do anything extra
to get that.

00:17:31.456 --> 00:17:34.356 A:middle
All right, so I've added
my cover flow to my page,

00:17:35.286 --> 00:17:36.206 A:middle
that's the first stage.

00:17:36.706 --> 00:17:39.276 A:middle
Let's go on to the second
stage and style my page,

00:17:39.796 --> 00:17:41.476 A:middle
add some buttons, and
style them as well.

00:17:42.086 --> 00:17:43.876 A:middle
I'm going to close Quick Preview

00:17:43.876 --> 00:17:46.186 A:middle
by hitting the Close
button in the top left.

00:17:46.716 --> 00:17:49.576 A:middle
And I'm going to
deselect my cover flow

00:17:50.036 --> 00:17:53.066 A:middle
so that I can style my
page itself because I want

00:17:53.066 --> 00:17:54.156 A:middle
to change its background
to black.

00:17:54.156 --> 00:17:58.156 A:middle
So I'm just going to click away
from my cover flow by clicking

00:17:58.156 --> 00:18:03.486 A:middle
on the background of my page and
open up the Inspector in the--

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:58.156 --> 00:18:03.486 A:middle
on the background of my page and
open up the Inspector in the--

00:18:03.706 --> 00:18:05.976 A:middle
by using the toolbar
button in the bottom right.

00:18:07.376 --> 00:18:09.906 A:middle
Here is where we can
set all the settings

00:18:09.956 --> 00:18:13.686 A:middle
about a particular object
or because right now,

00:18:13.686 --> 00:18:15.736 A:middle
we have nothing selected,
the page itself.

00:18:16.196 --> 00:18:19.016 A:middle
So what I'm going do is I'm
going to change the background

00:18:19.016 --> 00:18:19.956 A:middle
of this page to black.

00:18:19.956 --> 00:18:22.366 A:middle
I'm going to open up the
Background Inspector,

00:18:23.156 --> 00:18:24.436 A:middle
switch from None to Color.

00:18:24.906 --> 00:18:30.236 A:middle
I'm just going to click on this
color well and choose black.

00:18:30.926 --> 00:18:32.386 A:middle
There we go.

00:18:32.866 --> 00:18:34.086 A:middle
I think this is looking
a lot better.

00:18:35.426 --> 00:18:37.146 A:middle
Let's get those buttons
on the page.

00:18:38.416 --> 00:18:41.336 A:middle
Just like I did before with my
cover flow, I'm going to open

00:18:41.336 --> 00:18:44.726 A:middle
up my Objects Library,
scroll up to the top

00:18:44.956 --> 00:18:50.206 A:middle
and drag a button onto the page.

00:18:50.416 --> 00:18:53.676 A:middle
This one is going to
be my next button.

00:18:53.836 --> 00:18:56.736 A:middle
This button doesn't quite fit in
with the color scheme I'm going

00:18:56.776 --> 00:19:00.156 A:middle
for with this page, so let's
change some of its styles.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:18:56.776 --> 00:19:00.156 A:middle
for with this page, so let's
change some of its styles.

00:19:00.706 --> 00:19:02.556 A:middle
You notice now that I
have the button selected,

00:19:02.816 --> 00:19:04.936 A:middle
the Inspector is the
Buttons Inspector

00:19:05.396 --> 00:19:08.666 A:middle
and I have all the options that
I can change about that button.

00:19:08.776 --> 00:19:12.286 A:middle
So just going to go through
and the first thing I'm going

00:19:12.286 --> 00:19:20.096 A:middle
to do is I'm going to change the
text to white and I'm also going

00:19:20.096 --> 00:19:26.246 A:middle
to change the background,
again to a color, and black.

00:19:26.306 --> 00:19:29.596 A:middle
I'm also going to tweak
the border of this button.

00:19:30.056 --> 00:19:32.026 A:middle
I'm going to make the width

00:19:32.026 --> 00:19:34.286 A:middle
of the border a little
bit stronger.

00:19:34.286 --> 00:19:38.166 A:middle
I'm going to get rid of the
radius and I'm also going

00:19:38.966 --> 00:19:40.336 A:middle
to make its border
white as well.

00:19:41.046 --> 00:19:44.506 A:middle
So here is how our
button is going to look

00:19:44.506 --> 00:19:48.466 A:middle
like when the user is just
looking at this page normally,

00:19:49.336 --> 00:19:50.396 A:middle
but as some of you may know,

00:19:50.906 --> 00:19:52.666 A:middle
buttons have more
than just one state.

00:19:52.746 --> 00:19:54.326 A:middle
They have multiple states.

00:19:54.896 --> 00:19:58.836 A:middle
So for example, when a user is
actively tapping on a button

00:19:58.836 --> 00:20:02.156 A:middle
and pressing down on it, we
often see a visual feedback

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:19:58.836 --> 00:20:02.156 A:middle
and pressing down on it, we
often see a visual feedback

00:20:03.126 --> 00:20:05.446 A:middle
for that button so
that user knows

00:20:05.446 --> 00:20:07.366 A:middle
that they are correctly
tapping on that button.

00:20:08.046 --> 00:20:09.706 A:middle
We call this the
highlighted state.

00:20:09.706 --> 00:20:11.796 A:middle
So what I'm going to do
now is I'm also going

00:20:11.796 --> 00:20:12.956 A:middle
to change my highlighted state.

00:20:13.496 --> 00:20:16.436 A:middle
To do that, I'm going
to switch from Normal

00:20:16.546 --> 00:20:18.046 A:middle
to Highlighted in the Inspector.

00:20:18.876 --> 00:20:20.936 A:middle
We can see what that
button is going to look

00:20:20.936 --> 00:20:23.796 A:middle
like in the highlighted state.

00:20:24.276 --> 00:20:28.836 A:middle
And so I'm just going to quickly
change the styles for that state

00:20:29.186 --> 00:20:30.576 A:middle
to be something that's going

00:20:30.576 --> 00:20:32.726 A:middle
to give good visual
feedback to my user.

00:20:34.096 --> 00:20:36.946 A:middle
So I'm going to switch to this
from Gradient to Color again.

00:20:37.776 --> 00:20:40.566 A:middle
This time, I'm just going to
make it blue instead of black.

00:20:41.776 --> 00:20:46.156 A:middle
And I'm also going to make sure
that in the highlighted state,

00:20:46.486 --> 00:20:48.876 A:middle
the border of my
button is still white.

00:20:49.596 --> 00:20:53.476 A:middle
OK, now my button is
still labeled Button

00:20:54.236 --> 00:20:55.546 A:middle
and so the last thing
I'm going to do

00:20:55.546 --> 00:20:59.106 A:middle
to give this button the
correct visual appearance is

00:20:59.106 --> 00:20:59.736 A:middle
to relabel it.

00:20:59.736 --> 00:21:04.016 A:middle
I'm just going to double-click
on the text and now that I'm

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:59.736 --> 00:21:04.016 A:middle
I'm just going to double-click
on the text and now that I'm

00:21:04.016 --> 00:21:05.206 A:middle
in text editing mode,

00:21:05.466 --> 00:21:11.966 A:middle
I can simply type
Next, just like that.

00:21:12.166 --> 00:21:15.476 A:middle
So my button happens to
be-- this next button,

00:21:15.476 --> 00:21:18.146 A:middle
happens to be nearly identical
to my previous button.

00:21:18.406 --> 00:21:19.536 A:middle
It just has a different label.

00:21:20.086 --> 00:21:22.136 A:middle
So I'm going to actually
duplicate this button

00:21:22.356 --> 00:21:23.906 A:middle
so that I don't have
to do all that work all

00:21:23.906 --> 00:21:25.696 A:middle
over again to get those styles.

00:21:26.336 --> 00:21:28.486 A:middle
With the button selected, I'm
just going to go up to Edit,

00:21:29.366 --> 00:21:32.786 A:middle
duplicate, and there I
have my duplicated button.

00:21:34.036 --> 00:21:37.706 A:middle
Move it over to where I want my
previous button to be and just

00:21:37.706 --> 00:21:41.236 A:middle
like I did before, to
label my other button next,

00:21:41.286 --> 00:21:45.106 A:middle
I'm going to double-click on the
text and change it to Previous.

00:21:49.236 --> 00:21:51.596 A:middle
So this is at my
second my stage.

00:21:52.236 --> 00:21:53.936 A:middle
I've gotten these buttons
down and I've styled them.

00:21:54.216 --> 00:21:57.276 A:middle
We'll take another moment and
check in with Quick Preview

00:21:57.276 --> 00:22:02.406 A:middle
to make sure everything is just
working the way I want it to.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:57.276 --> 00:22:02.406 A:middle
to make sure everything is just
working the way I want it to.

00:22:02.656 --> 00:22:06.456 A:middle
You can see my cover flow is
now in that black background.

00:22:07.316 --> 00:22:10.556 A:middle
And while the buttons aren't
doing anything yet, they do have

00:22:10.556 --> 00:22:13.166 A:middle
that visual feedback
when I'm tapping on them.

00:22:13.786 --> 00:22:17.206 A:middle
So the user knows that they are
actually tapping on the button.

00:22:17.876 --> 00:22:22.916 A:middle
OK, so at this point,
I'm halfway through.

00:22:23.256 --> 00:22:24.616 A:middle
I've added my cover flow.

00:22:24.776 --> 00:22:25.936 A:middle
I've added my styles.

00:22:26.326 --> 00:22:30.136 A:middle
It's time to actually have some
custom interaction inside this

00:22:30.136 --> 00:22:32.566 A:middle
widget so I'm going to add
some actions to these buttons.

00:22:34.596 --> 00:22:35.716 A:middle
Close Quick Preview.

00:22:36.436 --> 00:22:40.526 A:middle
I'm going to select my previous
button and now what I'm going

00:22:40.526 --> 00:22:43.136 A:middle
to do is I'm going to open
up the Actions Library

00:22:43.176 --> 00:22:46.536 A:middle
in iAd Producer by
using the button

00:22:46.756 --> 00:22:48.946 A:middle
in the toolbar on the left.

00:22:49.656 --> 00:22:53.806 A:middle
Here, I see all of the actions
that this button can trigger

00:22:54.056 --> 00:22:56.936 A:middle
when someone taps on
it or clicks on it.

00:22:57.136 --> 00:23:00.286 A:middle
What I'm going to use today
is the Focus Cell action

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:22:57.136 --> 00:23:00.286 A:middle
What I'm going to use today
is the Focus Cell action

00:23:00.426 --> 00:23:02.236 A:middle
because this is the action
that's going to let me,

00:23:02.726 --> 00:23:04.146 A:middle
when someone taps
on this button,

00:23:04.466 --> 00:23:07.206 A:middle
cycle through the cells
of that cover flow.

00:23:07.666 --> 00:23:11.486 A:middle
With this selected, I have this
plus button and I'm just going

00:23:11.486 --> 00:23:15.296 A:middle
to click this and before I click
it, I want you to be looking

00:23:15.296 --> 00:23:18.686 A:middle
at the Inspector for the
button because at the bottom

00:23:18.686 --> 00:23:22.136 A:middle
of that Inspector when I
click it, iAd Producer adds

00:23:22.636 --> 00:23:26.896 A:middle
in that Events Inspector
that Focus Cell action.

00:23:27.086 --> 00:23:30.056 A:middle
It's automatically connected
to my flow view and it's,

00:23:30.306 --> 00:23:32.546 A:middle
by default, set up to
go on to the next cell.

00:23:32.846 --> 00:23:34.956 A:middle
I'm actually going
to change this

00:23:35.176 --> 00:23:37.136 A:middle
because this is my
previous button.

00:23:37.796 --> 00:23:40.236 A:middle
So instead of going
to the next cell,

00:23:40.326 --> 00:23:41.386 A:middle
I'm going to the previous cell.

00:23:41.876 --> 00:23:46.556 A:middle
I'm just going to repeat that
process with my next button

00:23:46.706 --> 00:23:49.576 A:middle
so it also has that
action associated with it.

00:23:50.266 --> 00:23:52.386 A:middle
So I'm going to select it.

00:23:52.386 --> 00:23:53.236 A:middle
Once again, I'm going to click

00:23:53.236 --> 00:23:55.626 A:middle
on the plus button
under focus cell.

00:23:56.286 --> 00:24:00.146 A:middle
iAd Producer adds that
to Events and this time,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:56.286 --> 00:24:00.146 A:middle
iAd Producer adds that
to Events and this time,

00:24:01.426 --> 00:24:02.866 A:middle
I do have my next button here.

00:24:02.866 --> 00:24:04.626 A:middle
I do want it to go
on to the next cell

00:24:05.006 --> 00:24:07.936 A:middle
so there's nothing else to do.

00:24:08.166 --> 00:24:10.836 A:middle
Let's check in with Quick
Preview again and make sure

00:24:11.026 --> 00:24:12.846 A:middle
that I've correctly
rigged those buttons

00:24:13.256 --> 00:24:14.936 A:middle
to be just the way I want them.

00:24:17.356 --> 00:24:20.846 A:middle
Here, we have it and
not only are we getting

00:24:20.846 --> 00:24:25.166 A:middle
that visual feedback when I'm
tapping on the buttons but just

00:24:25.166 --> 00:24:28.716 A:middle
as we wanted, that cover flow is
cycling through those cells one

00:24:28.716 --> 00:24:30.356 A:middle
by one, forwards and backwards.

00:24:30.356 --> 00:24:34.796 A:middle
So that was the third stage.

00:24:34.796 --> 00:24:37.866 A:middle
For the fourth and final
stage of building this widget,

00:24:38.406 --> 00:24:42.766 A:middle
I'm going to add a
little bit of animation.

00:24:42.766 --> 00:24:46.886 A:middle
Closing Quick Preview and what
I want to do if you recall back

00:24:47.086 --> 00:24:50.746 A:middle
to that widget I showed you
earlier, I want that cover flow

00:24:50.846 --> 00:24:53.656 A:middle
to animate in from
the top into place.

00:24:54.006 --> 00:24:56.836 A:middle
So I'm going to select
this cover flow.

00:24:57.396 --> 00:25:00.306 A:middle
I'm going to open up
my Action Lists panel.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:24:57.396 --> 00:25:00.306 A:middle
I'm going to open up
my Action Lists panel.

00:25:00.716 --> 00:25:03.556 A:middle
It's done by clicking on
the Action Lists button

00:25:03.976 --> 00:25:07.186 A:middle
in the right-hand
side of the toolbar.

00:25:07.186 --> 00:25:08.166 A:middle
You'll notice two things here.

00:25:08.756 --> 00:25:12.116 A:middle
In the Actions Library,

00:25:12.416 --> 00:25:14.906 A:middle
we now have a lot more
options to choose from.

00:25:14.906 --> 00:25:19.076 A:middle
We have a bunch of animations
and other actions that are,

00:25:19.446 --> 00:25:21.666 A:middle
will change the visual
appearance

00:25:21.956 --> 00:25:23.256 A:middle
of things on the page.

00:25:23.666 --> 00:25:27.776 A:middle
Now on the other side, we
have our blank page Appear

00:25:27.776 --> 00:25:28.526 A:middle
Action List.

00:25:28.996 --> 00:25:31.866 A:middle
And when we populate this,
this is going to be the series

00:25:31.866 --> 00:25:35.006 A:middle
of animations and actions
that get played back

00:25:35.596 --> 00:25:38.566 A:middle
when the user first opens
this page in their widget.

00:25:39.076 --> 00:25:42.766 A:middle
So in this case, because I want
to have a slide in animation,

00:25:43.046 --> 00:25:45.236 A:middle
I'm going to choose
the slide animation.

00:25:45.236 --> 00:25:49.206 A:middle
I'm going to click that plus
sign and that's going to add it

00:25:49.206 --> 00:25:50.716 A:middle
to my Page Appear Actions List.

00:25:50.786 --> 00:25:52.946 A:middle
You're also going to see
that iAd Producer is going

00:25:52.946 --> 00:25:55.976 A:middle
to give you a little
on-canvas preview of what

00:25:55.976 --> 00:25:57.146 A:middle
that animation looks like.

00:25:57.586 --> 00:26:02.246 A:middle
I want this to be animating in
from the top instead of the left

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:57.586 --> 00:26:02.246 A:middle
I want this to be animating in
from the top instead of the left

00:26:02.246 --> 00:26:03.616 A:middle
as we just saw it have.

00:26:04.216 --> 00:26:07.036 A:middle
So I'm going to choose
instead of in from the left

00:26:07.956 --> 00:26:10.406 A:middle
in that slide Inspector,
I'm going to switch it

00:26:10.406 --> 00:26:14.906 A:middle
over to in from the top.

00:26:15.106 --> 00:26:17.176 A:middle
And even though we can
see that on the canvas,

00:26:17.406 --> 00:26:19.836 A:middle
I'm going to go one last
time into Quick Preview just

00:26:20.066 --> 00:26:21.946 A:middle
so that we can be dead certain

00:26:22.116 --> 00:26:24.506 A:middle
that this is exactly the
way we want our widget.

00:26:26.276 --> 00:26:27.166 A:middle
There we have it.

00:26:27.366 --> 00:26:29.776 A:middle
It's sliding in from
the top just like we saw

00:26:29.776 --> 00:26:30.736 A:middle
in that original widget.

00:26:31.136 --> 00:26:35.406 A:middle
And to recap, I have all that
great interaction that came

00:26:35.406 --> 00:26:39.706 A:middle
for free with that cover flow,
the swiping and the tapping.

00:26:40.906 --> 00:26:45.216 A:middle
And we also have those actions
hooked up to those buttons

00:26:46.416 --> 00:26:49.166 A:middle
to make it so that we can
cycle through which image

00:26:49.376 --> 00:26:55.936 A:middle
of the cover flow is focused one
by one, forward and backwards.

00:26:56.026 --> 00:26:58.626 A:middle
Now, everything I've shown you

00:26:58.716 --> 00:27:01.646 A:middle
up to this point
has been applicable

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:58.716 --> 00:27:01.646 A:middle
up to this point
has been applicable

00:27:01.646 --> 00:27:05.916 A:middle
to all four project types
we support, iAd projects,

00:27:06.066 --> 00:27:09.406 A:middle
iTunes LPs, iTunes
Extras, and of course,

00:27:09.406 --> 00:27:10.526 A:middle
iBooks Author Widgets.

00:27:11.536 --> 00:27:14.896 A:middle
But because today, I am working
on an iBooks Author Widget,

00:27:15.806 --> 00:27:18.216 A:middle
I'd like to take just another
moment and show you how

00:27:18.216 --> 00:27:20.646 A:middle
to actually get this
widget into your book.

00:27:21.376 --> 00:27:24.076 A:middle
So to do that, it's very easy.

00:27:24.246 --> 00:27:26.066 A:middle
I'm just going to
close Quick Preview.

00:27:26.066 --> 00:27:29.846 A:middle
I'm going to choose
File, Export to Disk.

00:27:30.426 --> 00:27:32.576 A:middle
You can also choose
Export to Disk Optimized

00:27:32.906 --> 00:27:35.016 A:middle
when you're doing your
final production export,

00:27:35.146 --> 00:27:37.236 A:middle
it gives you a slightly
more compressed version

00:27:37.556 --> 00:27:38.346 A:middle
of your widget.

00:27:38.876 --> 00:27:41.246 A:middle
But today, I'm just going
to choose Export to Disk.

00:27:41.746 --> 00:27:48.396 A:middle
I'm going to call it
Animals.wdgt, and I'm going

00:27:49.256 --> 00:27:53.746 A:middle
to save it to my
desktop and export it.

00:27:57.496 --> 00:28:04.076 A:middle
At this point, I can hide iAd
Producer and I'm going to open

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:57.496 --> 00:28:04.076 A:middle
At this point, I can hide iAd
Producer and I'm going to open

00:28:04.076 --> 00:28:07.736 A:middle
up my book in iBooks Author.

00:28:08.236 --> 00:28:14.296 A:middle
[ Pause ]

00:28:14.796 --> 00:28:16.796 A:middle
I already have a place
set out where I want

00:28:16.796 --> 00:28:18.536 A:middle
to have this widget right here

00:28:18.536 --> 00:28:20.576 A:middle
in the beginning
of this section.

00:28:21.016 --> 00:28:23.386 A:middle
So all I'm going to do is
with my exported widget

00:28:23.386 --> 00:28:25.836 A:middle
on my desktop, simply
going to drag and drop it

00:28:26.846 --> 00:28:30.006 A:middle
into iBooks Author
and just like that,

00:28:31.316 --> 00:28:35.376 A:middle
I have added a custom
interactive widget

00:28:36.546 --> 00:28:37.876 A:middle
to my iBooks Author book.

00:28:38.296 --> 00:28:42.586 A:middle
Under the hood, it's using
HTML and JavaScript and CSS

00:28:43.136 --> 00:28:44.846 A:middle
but you didn't have
to do anything

00:28:44.846 --> 00:28:46.876 A:middle
to get these great features.

00:28:46.876 --> 00:28:48.186 A:middle
You don't have to do any coding.

00:28:48.696 --> 00:28:51.636 A:middle
All you have to do is use
the great objects, actions

00:28:51.636 --> 00:28:53.346 A:middle
and animations in iAd Producer.

00:28:53.846 --> 00:28:59.316 A:middle
[ Applause ]

00:28:59.816 --> 00:29:02.116 A:middle
Thank you and with that, I'm
going to hand it back to Justin.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:28:59.816 --> 00:29:02.116 A:middle
Thank you and with that, I'm
going to hand it back to Justin.

00:29:02.706 --> 00:29:03.836 A:middle
>> Thanks, Chris, that
was an awesome demo.

00:29:04.856 --> 00:29:07.516 A:middle
So there's two things that
Chris mentioned about that demo

00:29:07.776 --> 00:29:10.716 A:middle
that I want to repeat because
I think they are so cool.

00:29:11.076 --> 00:29:14.956 A:middle
The first thing is, is that all
the functionality you just saw

00:29:15.196 --> 00:29:18.136 A:middle
is all in HTML, JavaScript,
and CSS.

00:29:19.106 --> 00:29:21.436 A:middle
That flow view that
you saw is all HTML

00:29:21.566 --> 00:29:23.046 A:middle
and CSS and 3D transforms.

00:29:23.356 --> 00:29:24.006 A:middle
It's pretty cool.

00:29:24.006 --> 00:29:26.506 A:middle
I get to work on those stuff all
day and I still get blown away

00:29:26.506 --> 00:29:27.786 A:middle
by the stuff WebKit can do.

00:29:27.786 --> 00:29:29.366 A:middle
I think this is really neat.

00:29:29.936 --> 00:29:32.076 A:middle
The other thing that
he pointed out is

00:29:32.076 --> 00:29:34.986 A:middle
that all the things you
just saw, all those objects,

00:29:35.086 --> 00:29:38.616 A:middle
those events, our animation
system, you can use all of that

00:29:38.616 --> 00:29:40.316 A:middle
in all four of our
project types.

00:29:40.786 --> 00:29:42.956 A:middle
So you can use that when
you're creating rich media ads,

00:29:43.386 --> 00:29:46.636 A:middle
when you're creating you're
iTunes LPs, your iTunes Extras,

00:29:46.936 --> 00:29:48.246 A:middle
or your iBooks Author Widgets.

00:29:48.856 --> 00:29:52.276 A:middle
So it's some really great stuff.

00:29:52.476 --> 00:29:54.336 A:middle
So, now let's talk specifically

00:29:54.336 --> 00:29:56.406 A:middle
about some things
just for iBooks.

00:29:57.576 --> 00:29:59.876 A:middle
While you're creating your
widget, you're going to want

00:29:59.876 --> 00:30:02.286 A:middle
to preview it not only in the
Quick Preview that we have

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:59.876 --> 00:30:02.286 A:middle
to preview it not only in the
Quick Preview that we have

00:30:02.286 --> 00:30:05.366 A:middle
in iAd Producer, but you'll want
to try it out on an actual iPad.

00:30:05.926 --> 00:30:09.466 A:middle
And to make that really easy for
you, we've created an iPad app

00:30:09.466 --> 00:30:10.206 A:middle
to help you with that.

00:30:11.246 --> 00:30:15.146 A:middle
It's called iBooks Author Widget
Tester and with just one click,

00:30:15.146 --> 00:30:17.826 A:middle
it will install right on
your iPad from iAd Producer

00:30:17.826 --> 00:30:19.436 A:middle
and will upload your
widget into the app

00:30:19.436 --> 00:30:20.696 A:middle
and you can start playing

00:30:20.696 --> 00:30:22.736 A:middle
around with your widget
right on your iOS device.

00:30:23.256 --> 00:30:26.686 A:middle
So you can run on your
actual iOS device.

00:30:26.686 --> 00:30:29.366 A:middle
But we also support
the iOS Simulator.

00:30:29.666 --> 00:30:32.776 A:middle
So if you don't have an iPad
handy or you want to try it

00:30:32.776 --> 00:30:34.746 A:middle
out on a version of iOS
that's not installed

00:30:34.746 --> 00:30:38.266 A:middle
on your iPad, you
can do that too.

00:30:38.426 --> 00:30:40.956 A:middle
And for those of you who are
writing custom JavaScript

00:30:40.956 --> 00:30:42.786 A:middle
or custom CSS in your projects,

00:30:43.396 --> 00:30:45.056 A:middle
we also support the
Web Inspector.

00:30:45.486 --> 00:30:48.536 A:middle
And this works both on your
device and in a simulator

00:30:48.786 --> 00:30:50.546 A:middle
so that you can debug your code

00:30:50.546 --> 00:30:52.096 A:middle
and measure the performance
of your project.

00:30:52.586 --> 00:30:54.406 A:middle
If this is something that
you're interested in,

00:30:54.536 --> 00:30:55.866 A:middle
we actually have
an advanced session

00:30:55.866 --> 00:30:57.956 A:middle
about iAd Producer
later today and we'll go

00:30:57.956 --> 00:30:59.086 A:middle
into this a lot more depth,

00:30:59.576 --> 00:31:03.256 A:middle
and we'll mention
that at the end too.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:59.576 --> 00:31:03.256 A:middle
and we'll mention
that at the end too.

00:31:03.486 --> 00:31:06.196 A:middle
So it's a really great new iBook
specific feature that we've got.

00:31:06.696 --> 00:31:09.536 A:middle
So now, I want to change
gears again and tell you

00:31:09.536 --> 00:31:11.956 A:middle
about some iAd specific
features that we have.

00:31:12.486 --> 00:31:15.976 A:middle
We've got some objects
that are just for iAds.

00:31:16.316 --> 00:31:17.926 A:middle
One of them is this
WebGL object.

00:31:17.926 --> 00:31:20.806 A:middle
So you can actually
take a real 3D model

00:31:21.126 --> 00:31:23.656 A:middle
and you can embed it right in
your ad and we've got a lot

00:31:23.656 --> 00:31:25.046 A:middle
of interactivity
built-in for you.

00:31:25.386 --> 00:31:26.576 A:middle
So you can swipe through it.

00:31:26.576 --> 00:31:28.356 A:middle
You can pinch and spread
to zoom in and out.

00:31:29.646 --> 00:31:31.806 A:middle
This is really great especially
if you've tried to do WebGL

00:31:31.806 --> 00:31:34.646 A:middle
by scratch yourself, you
know that you kind of need

00:31:34.646 --> 00:31:35.546 A:middle
to be an OpenGL expert.

00:31:35.596 --> 00:31:40.706 A:middle
You don't have to be with this.

00:31:40.916 --> 00:31:42.276 A:middle
We also support embedded maps.

00:31:42.356 --> 00:31:44.086 A:middle
And these are the same
maps that you'll find

00:31:44.086 --> 00:31:45.516 A:middle
in the Maps app on iOS.

00:31:45.806 --> 00:31:47.756 A:middle
This is really great in
your ad when you want

00:31:47.756 --> 00:31:49.636 A:middle
to show the locations of
a business for example.

00:31:50.196 --> 00:31:54.816 A:middle
We also have a lot of actions
that are just for iAds.

00:31:55.206 --> 00:31:57.686 A:middle
So these are the things
like you can prompt the user

00:31:57.686 --> 00:32:01.646 A:middle
to compose a tweet using the
standard Twitter compose view.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:57.686 --> 00:32:01.646 A:middle
to compose a tweet using the
standard Twitter compose view.

00:32:01.966 --> 00:32:04.196 A:middle
You can change the
wallpaper on the device.

00:32:04.196 --> 00:32:05.906 A:middle
You can save a ring
tone to their phone.

00:32:06.096 --> 00:32:07.956 A:middle
There's a lot of really great
things you can do in here.

00:32:07.956 --> 00:32:10.026 A:middle
There's a lot and I don't
have time to mention them all.

00:32:10.646 --> 00:32:15.276 A:middle
But one of the really big
features that we have just

00:32:15.276 --> 00:32:18.006 A:middle
for iAd is this feature
called iAd Blueprints.

00:32:18.826 --> 00:32:22.496 A:middle
iAd Blueprints are a new
kind of iAd Producer project.

00:32:22.836 --> 00:32:26.886 A:middle
We've seen a lot of ads and,
you know, there are some

00:32:26.886 --> 00:32:29.386 A:middle
that are more successful than
others and we've tried to learn

00:32:29.386 --> 00:32:32.336 A:middle
about what kind of layouts
and what kind of events

00:32:32.336 --> 00:32:34.646 A:middle
and actions make for
a really successful ad

00:32:35.126 --> 00:32:36.556 A:middle
and apply those principles

00:32:36.766 --> 00:32:38.346 A:middle
to these starter
projects we have for you.

00:32:39.206 --> 00:32:40.856 A:middle
There's hundreds of
project to choose from.

00:32:41.446 --> 00:32:43.036 A:middle
We've got a picker here
where you can narrow it

00:32:43.036 --> 00:32:44.326 A:middle
down by just what
you're looking for.

00:32:44.886 --> 00:32:48.126 A:middle
When we open it up,
it's already prebuilt.

00:32:48.446 --> 00:32:49.766 A:middle
So we already have
a lot of pages.

00:32:49.956 --> 00:32:52.706 A:middle
We've got objects on those
pages with events and actions.

00:32:53.246 --> 00:32:57.436 A:middle
And when you're ready to upload
your ad to the iAd network,

00:32:57.896 --> 00:32:59.806 A:middle
we can put you on a fast
track to certification

00:32:59.876 --> 00:33:00.706 A:middle
because we already know

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:32:59.876 --> 00:33:00.706 A:middle
because we already know

00:33:00.706 --> 00:33:03.486 A:middle
that these blueprints
work really great.

00:33:04.576 --> 00:33:07.486 A:middle
All you have to do is fill
out a streamlined version

00:33:07.486 --> 00:33:10.266 A:middle
of our Inspector interface and
bring in all of your own assets.

00:33:11.346 --> 00:33:12.856 A:middle
Every blueprint comes
with a spec sheet

00:33:13.056 --> 00:33:15.166 A:middle
that describes what kind
of assets you'll need,

00:33:15.446 --> 00:33:18.616 A:middle
what file names they need to
have, what sizes they need

00:33:18.616 --> 00:33:20.686 A:middle
to be, what formats they
need to be, and all of that.

00:33:21.136 --> 00:33:24.506 A:middle
And to show you just how
easy blueprints are to use,

00:33:24.716 --> 00:33:28.016 A:middle
I'd like to have
Chris give you a demo.

00:33:28.336 --> 00:33:28.556 A:middle
Chris?

00:33:28.556 --> 00:33:30.486 A:middle
>> Thanks again, Justin.

00:33:31.436 --> 00:33:33.126 A:middle
So for my last demo today,

00:33:33.396 --> 00:33:35.796 A:middle
I'm going to show you how
you can accelerate your ad

00:33:35.906 --> 00:33:38.516 A:middle
development process
with iAd Blueprints.

00:33:40.986 --> 00:33:44.206 A:middle
So again, when you
launch iAd Producer,

00:33:44.896 --> 00:33:46.416 A:middle
you get our Project Picker.

00:33:46.986 --> 00:33:49.776 A:middle
And if you choose
iAd, that first option

00:33:50.306 --> 00:33:52.396 A:middle
for the project type
you're going to choose,

00:33:53.576 --> 00:33:56.126 A:middle
you have those four
templates to choose

00:33:56.126 --> 00:33:59.116 A:middle
from that are great jumping off
points if you're creating a--

00:33:59.116 --> 00:34:00.806 A:middle
an ad more from scratch.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:59.116 --> 00:34:00.806 A:middle
an ad more from scratch.

00:34:01.696 --> 00:34:03.856 A:middle
But if you want to
use an iAd Blueprint,

00:34:04.646 --> 00:34:07.256 A:middle
you can open iAd Blueprints
with this toolbar button

00:34:07.546 --> 00:34:08.626 A:middle
down on the bottom left.

00:34:09.016 --> 00:34:09.956 A:middle
I'm going to click that now.

00:34:10.496 --> 00:34:16.216 A:middle
And this is going to show you
the hundreds of iAd Blueprints

00:34:16.516 --> 00:34:18.966 A:middle
that we have precreated
for you to use.

00:34:19.056 --> 00:34:23.786 A:middle
Now today, I'm going
to be making an ad

00:34:23.936 --> 00:34:26.156 A:middle
for a fictional car
company and I happen

00:34:26.156 --> 00:34:29.255 A:middle
to already know what features
I want to have in that ad.

00:34:30.065 --> 00:34:33.966 A:middle
So I'm going to filter this list
of blueprints down to just those

00:34:34.196 --> 00:34:35.536 A:middle
with the features
I'm looking for.

00:34:36.136 --> 00:34:40.275 A:middle
I can do that simply by going
through this filter section

00:34:40.496 --> 00:34:42.505 A:middle
and ticking off the
things I want.

00:34:43.545 --> 00:34:47.136 A:middle
So in my ad, I know I
want to have some maps.

00:34:47.136 --> 00:34:49.166 A:middle
I also want to have
a product page.

00:34:49.856 --> 00:34:53.545 A:middle
I know I'm going to have
multiple videos in my ad.

00:34:54.065 --> 00:34:56.315 A:middle
So I'm going to tick
that checkbox as well.

00:34:57.466 --> 00:34:59.886 A:middle
And I'm also going to have
a calendar and a form.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:00.526 --> 00:35:03.706 A:middle
This leaves me with two
options to choose from

00:35:04.176 --> 00:35:06.626 A:middle
and I know I'm going to have
three videos so I'm going

00:35:06.626 --> 00:35:07.856 A:middle
to choose that second option.

00:35:08.486 --> 00:35:12.016 A:middle
Just going to click on the image
for that one, and this is going

00:35:12.016 --> 00:35:14.326 A:middle
to let me see a little
bit more information

00:35:14.326 --> 00:35:15.526 A:middle
about this blueprint.

00:35:15.776 --> 00:35:21.716 A:middle
I can also see screenshots,
sample pages filled

00:35:21.716 --> 00:35:24.756 A:middle
with placeholder content
so I can get a better feel

00:35:24.756 --> 00:35:27.206 A:middle
for what this blueprint
is going to be like.

00:35:27.826 --> 00:35:31.476 A:middle
It does seem to have all
the things I'm looking for.

00:35:32.746 --> 00:35:35.556 A:middle
So at this point, I'm going
to click on this blue button

00:35:36.346 --> 00:35:39.516 A:middle
up in the top right, to let
me use this iAd Blueprint.

00:35:40.016 --> 00:35:45.236 A:middle
[ Pause ]

00:35:45.736 --> 00:35:50.836 A:middle
When this loads in, you're going
to see the streamlined view

00:35:50.956 --> 00:35:52.996 A:middle
of iAd Producer for blueprints.

00:35:53.516 --> 00:35:58.266 A:middle
You're going to see that
familiar on the left-hand side,

00:35:58.646 --> 00:36:02.016 A:middle
Assets Library, and this is
where we have those spec sheets

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:58.646 --> 00:36:02.016 A:middle
Assets Library, and this is
where we have those spec sheets

00:36:02.016 --> 00:36:03.536 A:middle
that Justin was talking
about earlier.

00:36:04.216 --> 00:36:09.266 A:middle
I can look at these spec
sheets by selecting one

00:36:09.266 --> 00:36:12.096 A:middle
and pressing the space
bar to Quick Look it.

00:36:12.476 --> 00:36:17.116 A:middle
And I can also share it or
save it to the desktop just

00:36:17.116 --> 00:36:21.226 A:middle
by selecting them and
dragging them out.

00:36:21.496 --> 00:36:24.486 A:middle
You also see underneath those
spec sheets all the placeholder

00:36:24.486 --> 00:36:26.686 A:middle
assets that I'm going
to need to replace

00:36:26.926 --> 00:36:28.806 A:middle
with my own for my car company.

00:36:29.356 --> 00:36:35.566 A:middle
In the middle, you see with
all that placeholder content,

00:36:35.906 --> 00:36:40.046 A:middle
all those pages already
built up, already connected

00:36:40.046 --> 00:36:42.986 A:middle
with actions and events under
the hood and animations.

00:36:43.206 --> 00:36:44.916 A:middle
They're going to make
your ad look great

00:36:45.766 --> 00:36:47.646 A:middle
but we still are going to have

00:36:47.646 --> 00:36:48.796 A:middle
to get that-- the
assets in there.

00:36:49.166 --> 00:36:51.996 A:middle
We're going to get back to that.

00:36:51.996 --> 00:36:53.966 A:middle
And on the right-hand side,

00:36:54.426 --> 00:36:57.416 A:middle
our streamlined Inspector
for iAd Blueprints.

00:36:58.576 --> 00:37:01.056 A:middle
Here, I can put in the
specific settings for my ad,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:58.576 --> 00:37:01.056 A:middle
Here, I can put in the
specific settings for my ad,

00:37:01.386 --> 00:37:04.126 A:middle
project title, banner
transition color,

00:37:05.026 --> 00:37:08.376 A:middle
and I also see the
setting for those features

00:37:08.436 --> 00:37:10.336 A:middle
that I chose earlier
when I was picking

00:37:10.336 --> 00:37:12.016 A:middle
out the blueprint
that I wanted to use.

00:37:12.326 --> 00:37:16.296 A:middle
I have my map settings, my
form submission settings,

00:37:16.936 --> 00:37:19.636 A:middle
and I also have my
calendar event settings.

00:37:20.006 --> 00:37:21.826 A:middle
I'm going to fill this
one out real quick with--

00:37:22.416 --> 00:37:25.556 A:middle
because I'm doing a car
company, a test drive event

00:37:26.216 --> 00:37:31.976 A:middle
and it's going to be
at 1 Infinite Loop.

00:37:33.056 --> 00:37:37.186 A:middle
And, of course, I'd fill out
the Start Date and End Date

00:37:37.186 --> 00:37:40.326 A:middle
with the correct dates
for my test drive event.

00:37:41.276 --> 00:37:46.956 A:middle
But like I said, the key to
an iAd Blueprint is creating

00:37:47.036 --> 00:37:49.506 A:middle
that custom look and feel
with your own assets.

00:37:50.056 --> 00:37:52.916 A:middle
So at this point, I'm going
to use the Import button

00:37:53.156 --> 00:37:56.176 A:middle
in the toolbar to
bring in my own assets

00:37:56.416 --> 00:37:58.686 A:middle
that I've already built
per the spec sheet

00:37:58.686 --> 00:37:59.666 A:middle
that I showed you earlier.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:38:00.166 --> 00:38:03.306 A:middle
Just going to navigate
to my assets.

00:38:03.906 --> 00:38:07.866 A:middle
I'm going to select them all
and choose to import them.

00:38:08.386 --> 00:38:11.766 A:middle
And at this point,
iAd Producer is going

00:38:11.766 --> 00:38:16.976 A:middle
to re-render all those snapshots
so you can see your pages

00:38:17.176 --> 00:38:18.496 A:middle
with your new look and feel.

00:38:19.026 --> 00:38:24.626 A:middle
Let's take a moment now that
I have all those custom look

00:38:24.626 --> 00:38:27.766 A:middle
and feel snapshots in my
project to use Quick Preview.

00:38:30.066 --> 00:38:32.466 A:middle
Just like in my iBooks
Author Widget from before,

00:38:32.466 --> 00:38:36.106 A:middle
I can have a Quick Preview
interactive of my ad.

00:38:36.726 --> 00:38:38.466 A:middle
And there I have, we have
the option to choose--

00:38:38.576 --> 00:38:41.136 A:middle
play those three
videos and I can also go

00:38:41.136 --> 00:38:42.616 A:middle
to the other pages in my ad.

00:38:43.416 --> 00:38:45.686 A:middle
Here I can see information
about my car.

00:38:47.096 --> 00:38:48.416 A:middle
It's looking pretty good.

00:38:48.506 --> 00:38:50.836 A:middle
So I'm going to close
Quick Preview.

00:38:52.006 --> 00:38:56.196 A:middle
But before I upload this
to the iAd Test Server

00:38:56.336 --> 00:38:59.776 A:middle
for certification, there's
one more step I need to take.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:00.886 --> 00:39:04.426 A:middle
If you look in our Inspector,
after I added those assets,

00:39:04.846 --> 00:39:06.956 A:middle
I got this validation warning.

00:39:07.506 --> 00:39:08.996 A:middle
I'm getting one warning
right now

00:39:09.236 --> 00:39:11.816 A:middle
and to learn a little bit
more about it, I'm just going

00:39:12.186 --> 00:39:15.056 A:middle
to click on the error--
the warning badge there.

00:39:15.546 --> 00:39:18.416 A:middle
And if I take a look
at these warnings,

00:39:19.326 --> 00:39:23.206 A:middle
it looks like my product.png
doesn't have quite the

00:39:23.446 --> 00:39:24.776 A:middle
right dimensions.

00:39:25.196 --> 00:39:28.906 A:middle
I'm going to have to recreate
this in the correct dimensions.

00:39:29.456 --> 00:39:34.336 A:middle
It just so happens I've already
done this so I'm going to import

00:39:34.466 --> 00:39:37.376 A:middle
that corrected asset just
by going back to Import.

00:39:37.376 --> 00:39:40.736 A:middle
I have my corrected product.png.

00:39:41.336 --> 00:39:46.706 A:middle
I'm going to import it and
at this point, you're going

00:39:46.706 --> 00:39:51.266 A:middle
to notice that under Validation,
I have no issues found.

00:39:52.716 --> 00:39:54.076 A:middle
So, we're looking good.

00:39:54.956 --> 00:39:57.876 A:middle
The ad has that custom look and
feel that we were going for.

00:39:57.876 --> 00:39:59.986 A:middle
We have no validation issues.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:40:00.866 --> 00:40:03.236 A:middle
Let's upload it to
the iAd Test Server.

00:40:03.766 --> 00:40:06.896 A:middle
To do that, I'm just going
to use that third button

00:40:06.926 --> 00:40:09.186 A:middle
in the toolbar, the
Upload button.

00:40:09.736 --> 00:40:14.036 A:middle
And at this point, you'd
fill in the credentials

00:40:14.036 --> 00:40:15.706 A:middle
that your account
manager gave you.

00:40:17.176 --> 00:40:20.666 A:middle
Your ad would be uploaded
to the iAd Test Server

00:40:20.666 --> 00:40:22.226 A:middle
where it could be certified

00:40:22.226 --> 00:40:24.546 A:middle
and then eventually
reach the network.

00:40:25.746 --> 00:40:28.476 A:middle
And just like that, in
only a couple of steps,

00:40:28.946 --> 00:40:32.476 A:middle
I've created a rich, interactive
ad that's really going

00:40:32.476 --> 00:40:34.906 A:middle
to get my brand across and
get people to my test event.

00:40:35.216 --> 00:40:37.476 A:middle
And all I had to
really do was plop

00:40:37.476 --> 00:40:39.746 A:middle
in a couple of custom assets.

00:40:40.556 --> 00:40:46.916 A:middle
Thank you and I'm going
to hand it back to Justin.

00:40:46.916 --> 00:40:47.476 A:middle
[ Applause ]

00:40:47.476 --> 00:40:48.076 A:middle
>> Thanks again, Chris.

00:40:49.116 --> 00:40:52.736 A:middle
All right, so you can see how
streamlined the process is

00:40:52.786 --> 00:40:55.216 A:middle
for using blueprints to
create a really great ad.

00:40:55.846 --> 00:40:57.036 A:middle
We've done most of
the work for you.

00:40:57.936 --> 00:40:59.946 A:middle
We've got these great
prebuilt layouts

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:00.886 --> 00:41:03.236 A:middle
but while you're developing
your blueprint, you might find

00:41:03.236 --> 00:41:06.956 A:middle
that the blueprint is 99 percent
of what you want but to get

00:41:06.956 --> 00:41:09.726 A:middle
that last 1 percent, you really
need to reorder those buttons

00:41:09.726 --> 00:41:12.756 A:middle
or you need to move that label
to different spot on the page.

00:41:13.536 --> 00:41:16.356 A:middle
Well to do that, you can
do something called Enable

00:41:16.356 --> 00:41:17.326 A:middle
Unrestricted Editing.

00:41:17.776 --> 00:41:20.126 A:middle
This is an option that you can
choose up from the Menu Bar.

00:41:20.126 --> 00:41:22.486 A:middle
You just go to File,
Enable Unrestricted Editing,

00:41:23.146 --> 00:41:25.336 A:middle
and this will convert
your blueprint project

00:41:25.626 --> 00:41:27.366 A:middle
into a normal iAd
Producer project

00:41:27.576 --> 00:41:29.556 A:middle
where you can edit all the
objects to your heart's content

00:41:29.556 --> 00:41:30.816 A:middle
and get exactly the
layout you want.

00:41:31.346 --> 00:41:33.586 A:middle
So these are really great.

00:41:35.456 --> 00:41:37.586 A:middle
Another feature we have for
those of you who were working

00:41:37.586 --> 00:41:39.856 A:middle
on ads is an app
called iAd Tester.

00:41:40.366 --> 00:41:43.336 A:middle
This is an iOS app that
runs in your iPhone or iPad

00:41:43.446 --> 00:41:46.326 A:middle
and allows you to test out
ads right on your device.

00:41:46.536 --> 00:41:48.806 A:middle
So with one click, you can
upload your ad to your device

00:41:49.116 --> 00:41:51.156 A:middle
and you can try it out
right inside of iOS.

00:41:52.036 --> 00:41:54.616 A:middle
This is also really great
for testing the performance

00:41:54.616 --> 00:41:56.786 A:middle
of your ad as it downloads
over the cellular network

00:41:56.786 --> 00:41:57.986 A:middle
which is an important
consideration.

00:41:58.536 --> 00:42:02.126 A:middle
It also runs in the
iOS Simulator so that

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:58.536 --> 00:42:02.126 A:middle
It also runs in the
iOS Simulator so that

00:42:02.126 --> 00:42:04.066 A:middle
if you don't have a
device handy or if you want

00:42:04.066 --> 00:42:07.176 A:middle
to try some other versions of
iOS, that's really easy to do.

00:42:08.016 --> 00:42:10.196 A:middle
And it also supports
the Web Inspector.

00:42:10.196 --> 00:42:12.956 A:middle
So that as you are measuring the
performance of your ad or trying

00:42:12.956 --> 00:42:14.926 A:middle
to debug issues with
any of your custom code,

00:42:15.426 --> 00:42:16.916 A:middle
you can do that easily
with the Web Inspector.

00:42:17.076 --> 00:42:19.986 A:middle
And that works both on your iOS
device and in the simulator.

00:42:20.566 --> 00:42:25.026 A:middle
So to recap the things
we talked about today,

00:42:25.666 --> 00:42:29.316 A:middle
iAd Producer isn't just
for creating ads anymore.

00:42:30.776 --> 00:42:33.216 A:middle
We've got one app that
can produce great content

00:42:33.256 --> 00:42:38.826 A:middle
for three platforms, rich media
ads for iAd, interactive widgets

00:42:38.956 --> 00:42:42.916 A:middle
for iBooks Author, and
great interactive iTunes LPs

00:42:42.916 --> 00:42:43.456 A:middle
and Extras.

00:42:44.036 --> 00:42:49.076 A:middle
Our events, actions, and
animations make it really easy

00:42:49.076 --> 00:42:51.216 A:middle
to do custom interactivity
without needing

00:42:51.216 --> 00:42:53.386 A:middle
to write a single
line of custom code.

00:42:54.976 --> 00:42:58.196 A:middle
And our iAd Blueprints feature
makes it even easier than before

00:42:58.196 --> 00:42:59.406 A:middle
to create a really great ad.

00:42:59.966 --> 00:43:03.356 A:middle
So for more information
about iAd Producer,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:59.966 --> 00:43:03.356 A:middle
So for more information
about iAd Producer,

00:43:03.766 --> 00:43:04.946 A:middle
you can email Mark Malone

00:43:05.526 --> 00:43:08.156 A:middle
and his job title says iAd
Technologies Evangelist,

00:43:08.266 --> 00:43:10.676 A:middle
but he'd be happy to take your
questions about iAd Producer

00:43:10.676 --> 00:43:12.136 A:middle
and any of our project types.

00:43:13.506 --> 00:43:15.776 A:middle
If you have not already, you
should download iAd Producer.

00:43:16.136 --> 00:43:18.456 A:middle
It's a free download for
any registered developer

00:43:18.546 --> 00:43:21.246 A:middle
and the URL is here on screen
from developer.apple.com

00:43:21.966 --> 00:43:24.446 A:middle
and I encourage you to
download it, create a project,

00:43:24.736 --> 00:43:27.236 A:middle
put a button on a page, and
then preview it on a device.

00:43:27.616 --> 00:43:28.986 A:middle
And as you go through
that work flow,

00:43:28.986 --> 00:43:31.006 A:middle
I think that you'll see
just how easy it is to use

00:43:31.006 --> 00:43:32.516 A:middle
and how many cool things
you can do with it.

00:43:33.036 --> 00:43:35.786 A:middle
If you have any questions,
we have a section

00:43:35.786 --> 00:43:36.966 A:middle
on the Apple Developer Forums.

00:43:37.016 --> 00:43:40.176 A:middle
There's an iAd Producer
specific section

00:43:40.176 --> 00:43:42.266 A:middle
where you can ask questions
about all of our project types

00:43:42.606 --> 00:43:44.076 A:middle
and that URL is on
the slide here.

00:43:44.536 --> 00:43:48.756 A:middle
There's some other really
great sessions at WWDC

00:43:48.756 --> 00:43:50.136 A:middle
that you might be interested in.

00:43:50.286 --> 00:43:52.476 A:middle
If you want to learn more
about writing custom code

00:43:52.476 --> 00:43:55.216 A:middle
in your projects or to get some
really great tips and tricks

00:43:55.216 --> 00:43:58.506 A:middle
on debugging and optimization,
later this afternoon

00:43:58.506 --> 00:43:59.646 A:middle
in this room, there's going

00:43:59.646 --> 00:44:02.026 A:middle
to be an advanced session
about iAd Producer.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:59.646 --> 00:44:02.026 A:middle
to be an advanced session
about iAd Producer.

00:44:02.026 --> 00:44:03.726 A:middle
We will show you all of that.

00:44:04.496 --> 00:44:07.266 A:middle
And then on the other side
of the process for iAd,

00:44:07.266 --> 00:44:10.346 A:middle
if you're an iOS developer and
you'd like to put iAd banners

00:44:10.346 --> 00:44:13.326 A:middle
into your app, there's an iAd
integration session that's going

00:44:13.326 --> 00:44:14.076 A:middle
to be tomorrow.

00:44:14.546 --> 00:44:15.656 A:middle
Thank you.

00:44:16.156 --> 00:44:19.793 A:middle
[Applause]

00:44:20.293 --> 00:44:23.930 A:middle
[ Silence ]