WWDC2013 Session 609

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[ 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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
Chris?
[ Applause ]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> 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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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--
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> 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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
Chris?
>> 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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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 developer.apple.com
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
[Applause]
[ Silence ]